/* Varol Asistani — site geneli yuzen buton (FAB) + popup sohbet modali */ .vc-account-assistant { display: block; } /* ===== Yuzen launcher (sol alt; WhatsApp sag altta, cakismaz) ===== */ .vc-assistant-fab { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 99998; display: inline-flex; align-items: center; height: 58px; padding: 0; border: 0; border-radius: 999px; background: #16181d; color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(20, 24, 33, .28); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; } .vc-assistant-fab__icon { flex: 0 0 auto; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; } .vc-assistant-fab__icon img { height: 46px; width: auto; max-width: 48px; object-fit: contain; display: block; } .vc-assistant-fab__label { display: none; } /* ikon-only (sag tarafta etiket tasmasin) */ .vc-assistant-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(20, 24, 33, .34); } .vc-assistant-fab::after { content: ''; position: absolute; left: 0; top: 0; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22, 24, 29, .30); animation: vcFabPulse 2.6s ease-out infinite; pointer-events: none; } @keyframes vcFabPulse { 0% { box-shadow: 0 0 0 0 rgba(22, 24, 29, .30); } 70% { box-shadow: 0 0 0 14px rgba(22, 24, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 24, 29, 0); } } body.vc-assistant-open .vc-assistant-fab { opacity: 0; pointer-events: none; } @media (max-width: 575px) { .vc-assistant-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 54px; } .vc-assistant-fab__icon { width: 54px; height: 54px; } } /* Eski hesap-sidebar karti (artik kullanilmiyor ama stil dursun) */ .vc-account-assistant .vc-account-assistant-card { width: 100%; font: inherit; cursor: pointer; } /* ===== Popup modal ===== NOT: degiskenler modalin uzerinde tanimli olmali — modal JS ile 'ye tasiniyor, sidebar parent'inin degiskenlerine erisemez. */ .vc-assistant-modal { --va-ink: #16181d; --va-ink-2: #22262d; --va-line: #ece7df; --va-soft: #f7f6f4; --va-muted: #6f7785; position: fixed; inset: 0; z-index: 2147483646; /* WhatsApp/scroll-top butonlarinin uzerinde kalsin */ display: flex; align-items: center; justify-content: center; padding: 20px; } .vc-assistant-modal[hidden] { display: none; } .vc-assistant-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, .55); backdrop-filter: blur(2px); animation: vaFade .18s ease; } .vc-assistant-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; height: min(78vh, 680px); background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(10, 12, 16, .35); animation: vaPop .2s ease; } @keyframes vaFade { from { opacity: 0; } to { opacity: 1; } } @keyframes vaPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .vc-assistant-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 14px 16px; background: var(--va-ink); color: #fff; } .vc-assistant-title { font-size: 15px; font-weight: 800; } .vc-assistant-title i { margin-right: 7px; } .vc-assistant-close { border: 0; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; } .vc-assistant-close:hover { color: #fff; } /* Mesajlar — buyuk alan */ .vc-assistant-msgs { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; background: var(--va-soft); } .vc-assistant-msg { max-width: 82%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; } .vc-assistant-msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--va-line); color: var(--va-ink-2); border-bottom-left-radius: 4px; } .vc-assistant-msg--bot a { color: var(--va-ink); font-weight: 700; text-decoration: underline; word-break: break-word; } .vc-assistant-msg--user { align-self: flex-end; background: var(--va-ink); color: #fff; border-bottom-right-radius: 4px; } .vc-assistant-msg--error { align-self: flex-start; background: #fdecec; border: 1px solid #f5c2c2; color: #a12626; } .vc-assistant-typing { display: inline-flex; gap: 4px; } .vc-assistant-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--va-muted); animation: vaBlink 1s infinite both; } .vc-assistant-typing i:nth-child(2) { animation-delay: .2s; } .vc-assistant-typing i:nth-child(3) { animation-delay: .4s; } @keyframes vaBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } /* Urun kartlari (asistanin urun onerileri) */ .vc-assistant-products { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .vc-assistant-product { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 8px; background: #fff; border: 1px solid var(--va-line); border-radius: 12px; text-decoration: none !important; color: var(--va-ink-2) !important; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; } .vc-assistant-product:hover { border-color: var(--va-ink); box-shadow: 0 6px 16px rgba(10, 12, 16, .08); transform: translateY(-1px); } .vc-assistant-product__img { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; background: var(--va-soft); display: flex; align-items: center; justify-content: center; color: var(--va-muted); font-size: 18px; } .vc-assistant-product__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vc-assistant-product__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vc-assistant-product__body strong { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--va-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vc-assistant-product__price { font-size: 13px; font-weight: 800; color: var(--va-ink); } .vc-assistant-product__cta { flex: 0 0 auto; align-self: center; padding: 7px 13px; border-radius: 999px; background: var(--va-ink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; } /* Musteri temsilcisi (canli destek) karti */ .vc-assistant-support { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--va-line); border-radius: 12px; background: #fff; } .vc-assistant-support__title { font-size: 13px; font-weight: 800; color: var(--va-ink); } .vc-assistant-support__title i { margin-right: 6px; } .vc-assistant-support__wa, .vc-assistant-support__tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 10px; font-weight: 800; font-size: 14px; text-decoration: none !important; } .vc-assistant-support__wa { background: #25d366; color: #fff !important; } .vc-assistant-support__wa:hover { filter: brightness(1.05); } .vc-assistant-support__tel { background: var(--va-soft); color: var(--va-ink) !important; border: 1px solid var(--va-line); } .vc-assistant-support__tel:hover { border-color: var(--va-ink); } /* Hizli oneri cipleri */ .vc-assistant-suggest { display: flex; flex-wrap: wrap; gap: 7px; flex: 0 0 auto; padding: 12px 16px 0; } .vc-assistant-suggest button { border: 1px solid var(--va-line); background: #fff; color: var(--va-ink-2); border-radius: 999px; padding: 6px 13px; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease; } .vc-assistant-suggest button:hover { background: var(--va-ink); color: #fff; border-color: var(--va-ink); } /* Form */ .vc-assistant-form { display: flex; gap: 9px; align-items: center; flex: 0 0 auto; padding: 14px 16px; } .vc-assistant-form input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--va-line); border-radius: 999px; padding: 11px 16px; font-size: 14px; outline: none; } .vc-assistant-form input:focus { border-color: var(--va-ink); } .vc-assistant-form button { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--va-ink); color: #fff; cursor: pointer; font-size: 15px; } .vc-assistant-form button:disabled { opacity: .5; cursor: default; } .vc-assistant-note { display: block; flex: 0 0 auto; padding: 0 16px 14px; color: var(--va-muted); font-size: 11px; line-height: 1.4; } .vc-assistant-note a { color: var(--va-ink-2); text-decoration: underline; } /* Govde kaydirma kilidi (modal acikken) */ body.vc-assistant-open { overflow: hidden; } @media (max-width: 575px) { .vc-assistant-modal { padding: 0; } .vc-assistant-dialog { max-width: none; height: 100%; border-radius: 0; } }