/* Vitrin asistanı (func/musterihizmetleri.php bpCustomerRenderFooterWidget + vitrin/varlik/asistan.js) */
.kva { --kva: #10b981; --kva-yazi: #fff; --kva-murekkep: #0f172a; --kva-soluk: #64748b; --kva-cizgi: #e6e9ef; --kva-zemin: #f6f7f9;
  position: fixed; right: 20px; bottom: 20px; z-index: 9998; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--kva-murekkep); }
.kva.is-sol { right: auto; left: 20px; }
.kva *, .kva *::before, .kva *::after { box-sizing: border-box; }
.kva button, .kva input { font: inherit; }

/* Açma düğmesi */
.kva-ac { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 26px; background: var(--kva); color: var(--kva-yazi);
  font-weight: 650; cursor: pointer; box-shadow: 0 10px 30px -8px rgba(15, 23, 42, .45); transition: transform .15s ease, box-shadow .15s ease; }
.kva-ac:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(15, 23, 42, .5); }
.kva-ac svg { width: 22px; height: 22px; flex: none; }
.kva.is-acik .kva-ac { display: none; }
.kva-balon { position: absolute; bottom: 64px; right: 0; width: max-content; max-width: 260px; padding: 11px 34px 11px 14px; border: 1px solid var(--kva-cizgi); border-radius: 14px 14px 4px 14px;
  background: #fff; box-shadow: 0 12px 30px -10px rgba(15, 23, 42, .3); font-size: 13.5px; cursor: pointer; animation: kvaGir .3s ease; }
.kva.is-sol .kva-balon { right: auto; left: 0; border-radius: 14px 14px 14px 4px; }
.kva-balon button { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; color: var(--kva-soluk); font-size: 17px; line-height: 1; cursor: pointer; }

/* Pencere */
.kva-pencere { display: flex; flex-direction: column; width: 380px; height: min(620px, calc(100vh - 40px)); border: 1px solid var(--kva-cizgi); border-radius: 20px; background: #fff; overflow: hidden;
  box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .4); animation: kvaGir .22s ease; transform-origin: bottom right; }
.kva.is-sol .kva-pencere { transform-origin: bottom left; }
.kva-pencere[hidden] { display: none; }
.kva-bas { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--kva); color: var(--kva-yazi); }
.kva-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); font-weight: 800; font-size: 17px; }
.kva-bas-metin { flex: 1; min-width: 0; }
.kva-bas-metin b { display: block; font-size: 15.5px; line-height: 1.25; }
.kva-bas-metin small { display: block; font-size: 12px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kva-kapat { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: inherit; cursor: pointer; }
.kva-kapat:hover { background: rgba(255, 255, 255, .28); }
.kva-kapat svg { width: 18px; height: 18px; }

.kva-akis { flex: 1; overflow-y: auto; padding: 16px 14px 8px; background: var(--kva-zemin); display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.kva-m { max-width: 86%; padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: #fff; border: 1px solid var(--kva-cizgi); white-space: pre-line; word-wrap: break-word; align-self: flex-start; animation: kvaMesaj .2s ease; }
.kva-m.is-ben { align-self: flex-end; background: var(--kva); border-color: var(--kva); color: var(--kva-yazi); border-radius: 16px 16px 5px 16px; }
.kva-m.is-temsilci { border-color: #f59e0b; }
.kva-m .kva-kim { display: block; font-size: 11px; font-weight: 700; color: #b45309; margin-bottom: 2px; }
.kva-yaziyor { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--kva-cizgi); }
.kva-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: kvaNokta 1s infinite ease-in-out; }
.kva-yaziyor i:nth-child(2) { animation-delay: .15s; } .kva-yaziyor i:nth-child(3) { animation-delay: .3s; }

/* Ürün kartları */
.kva-kartlar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; scroll-snap-type: x mandatory; }
.kva-kart { flex: 0 0 150px; display: flex; flex-direction: column; border: 1px solid var(--kva-cizgi); border-radius: 14px; background: #fff; overflow: hidden; text-decoration: none !important; color: inherit !important; scroll-snap-align: start; transition: border-color .15s; }
.kva-kart:hover { border-color: var(--kva); }
.kva-kart-gorsel { aspect-ratio: 1; background: #f1f5f9; }
.kva-kart-gorsel img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kva-kart-ic { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.kva-kart-ad { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kva-kart-fiyat { margin-top: auto; font-weight: 750; font-size: 14px; }
.kva-kart-fiyat s { font-weight: 500; font-size: 11.5px; color: var(--kva-soluk); margin-left: 4px; }
.kva-kart-stok { font-size: 11px; font-weight: 650; color: #047857; }
.kva-kart-stok.is-yok { color: #b91c1c; }

/* Bağlantılar ve öneriler */
.kva-baglar, .kva-oneriler { display: flex; flex-wrap: wrap; gap: 6px; }
.kva-bag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--kva-cizgi); color: var(--kva-murekkep) !important; font-size: 12.5px; font-weight: 600; text-decoration: none !important; }
.kva-bag::after { content: "→"; color: var(--kva-soluk); }
.kva-bag:hover { border-color: var(--kva); }
.kva-oneriler { padding: 8px 14px 0; background: var(--kva-zemin); }
.kva-oneriler:empty { display: none; }
.kva-oneri { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--kva); background: #fff; color: var(--kva-murekkep); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.kva-oneri:hover { background: var(--kva); color: var(--kva-yazi); }

/* Satır içi formlar (sipariş sorgu, geri arama) */
.kva-mini { align-self: stretch; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--kva-cizgi); border-radius: 14px; background: #fff; }
.kva-mini label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--kva-soluk); }
.kva-mini input { height: 38px; padding: 0 11px; border: 1px solid var(--kva-cizgi); border-radius: 10px; color: var(--kva-murekkep); font-size: 14px; }
.kva-mini input:focus { outline: 2px solid var(--kva); outline-offset: -1px; border-color: transparent; }
.kva-mini button { height: 38px; border: 0; border-radius: 10px; background: var(--kva); color: var(--kva-yazi); font-weight: 650; cursor: pointer; }
.kva-mini button:disabled { opacity: .6; }

.kva-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--kva-zemin); }
.kva-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--kva-cizgi); border-radius: 22px; background: #fff; color: var(--kva-murekkep); font-size: 14.5px; }
.kva-form input:focus { outline: 2px solid var(--kva); outline-offset: -1px; border-color: transparent; }
.kva-form button { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--kva); color: var(--kva-yazi); cursor: pointer; }
.kva-form button:disabled { opacity: .5; cursor: default; }
.kva-form svg { width: 19px; height: 19px; }
.kva-alt { padding: 0 12px 10px; background: var(--kva-zemin); font-size: 11px; color: #94a3b8; text-align: center; }

@keyframes kvaGir { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kvaMesaj { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes kvaNokta { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .kva *, .kva-ac { animation: none !important; transition: none !important; } }

@media (max-width: 560px) {
  .kva { right: 14px; bottom: 14px; }
  .kva.is-sol { left: 14px; }
  .kva-ac { height: 50px; padding: 0 16px 0 14px; }
  .kva.is-acik { inset: 0; }
  .kva-pencere { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .kva-form input { font-size: 16px; } /* iOS yakınlaştırmasın */
}