/* Vitrin modülleri (func/vitrin_moduller.php): hızlı bakış, beden tablosu, sosyal kanıt, ücretsiz kargo çubuğu.
   Renkler etkin temanın değişkenlerinden; tema tanımlamamışsa yedek değerler. */
.kvm-dlg { border: 0; border-radius: var(--kd-kose, 14px); padding: 0; width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 32px); background: var(--kd-surface, #fff); color: var(--kd-text, #111827); box-shadow: 0 24px 60px rgba(10, 14, 25, .28); }
.kvm-dlg::backdrop { background: rgba(10, 14, 25, .55); }
.kvm-dlg-ic { position: relative; padding: 24px; overflow: auto; max-height: calc(100vh - 32px); }
.kvm-kapat { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--kd-zemin-2, #f1f5f9); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
.kvm-kapat:focus-visible, .kvm-hb-btn:focus-visible, .kvm-bt-btn:focus-visible { outline: 2px solid var(--kd-accent, #2563eb); outline-offset: 2px; }

/* Hızlı bakış */
[data-urun].kvm-hb-kart { position: relative; }
.kvm-hb-btn { position: absolute; top: 10px; right: 10px; z-index: 3; border: 1px solid var(--kd-line, #e5e7eb); border-radius: 999px; background: var(--kd-surface, #fff); color: var(--kd-text, #111827); font: 600 12.5px/1 inherit; padding: 8px 12px; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s; }
[data-urun]:hover .kvm-hb-btn, [data-urun]:focus-within .kvm-hb-btn { opacity: 1; transform: none; }
@media (hover: none) { .kvm-hb-btn { opacity: 1; transform: none; padding: 7px 10px; } }
.kvm-hb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.kvm-hb-ana { aspect-ratio: 1 / 1; border-radius: var(--kd-kose-k, 10px); background: var(--kd-zemin-2, #f8fafc); overflow: hidden; }
.kvm-hb-ana img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kvm-hb-kucuk { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kvm-hb-kucuk button { width: 56px; height: 56px; padding: 0; border: 1px solid var(--kd-line, #e5e7eb); border-radius: 8px; background: var(--kd-surface, #fff); overflow: hidden; cursor: pointer; }
.kvm-hb-kucuk button[aria-current="true"] { border-color: var(--kd-accent, #2563eb); box-shadow: 0 0 0 1px var(--kd-accent, #2563eb); }
.kvm-hb-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.kvm-hb-bilgi { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.kvm-hb-marka { font-size: 13px; font-weight: 600; color: var(--kd-muted, #6b7280); letter-spacing: .02em; }
.kvm-hb-ad { font-size: 22px; line-height: 1.25; margin: 0; font-family: var(--kd-font-baslik, inherit); padding-right: 36px; }
.kvm-hb-fiyat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kvm-hb-fiyat b { font-size: 22px; }
.kvm-hb-fiyat s { color: var(--kd-muted, #6b7280); }
.kvm-hb-fiyat em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--kd-hata, #dc2626); }
.kvm-hb-kisa { color: var(--kd-muted, #4b5563); margin: 0; line-height: 1.55; }
.kvm-hb-durum { font-size: 14px; font-weight: 600; color: var(--kd-iyi, #15803d); }
.kvm-hb-durum.yok { color: var(--kd-hata, #dc2626); }
.kvm-hb-eylem { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.kvm-hb-eylem button, .kvm-hb-eylem a { flex: 1 1 160px; min-height: 46px; border-radius: var(--kd-kose-k, 10px); font: 600 15px/1 inherit; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; padding: 0 16px; }
.kvm-hb-eylem button { border: 0; background: var(--kd-accent, #111827); color: var(--kd-on-accent, #fff); }
.kvm-hb-eylem button[disabled] { opacity: .5; cursor: not-allowed; }
.kvm-hb-eylem a { border: 1px solid var(--kd-line, #e5e7eb); color: inherit; background: transparent; }
.kvm-yukleniyor { padding: 60px 0; text-align: center; color: var(--kd-muted, #6b7280); }
@media (max-width: 680px) { .kvm-hb { grid-template-columns: 1fr; gap: 16px; } .kvm-dlg-ic { padding: 18px 16px; } .kvm-hb-ad { font-size: 19px; } }

/* Beden tablosu */
.kvm-bt-btn { border: 0; background: none; padding: 4px 0; color: var(--kd-accent, #2563eb); font: 600 14px/1.3 inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin: 0 0 10px; }
.kvm-bt h2 { font-size: 20px; margin: 0 40px 6px 0; }
.kvm-bt p { margin: 0 0 14px; color: var(--kd-muted, #6b7280); font-size: 14px; }
.kvm-bt-kap { overflow-x: auto; }
.kvm-bt table, .au-beden-tablosu.kvm { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 360px; }
.kvm-bt th, .kvm-bt td { border-bottom: 1px solid var(--kd-line, #e5e7eb); padding: 9px 10px; text-align: left; white-space: nowrap; }
.kvm-bt thead th { background: var(--kd-zemin-2, #f8fafc); font-weight: 700; }
.kvm-bt tbody th { font-weight: 700; }
.kvm-dlg.kvm-dar { width: min(620px, calc(100vw - 24px)); }

/* Sosyal kanıt ve kargo çubuğu */
.kvm-urun-ek { display: grid; gap: 8px; margin: 14px 0 4px; }
.kvm-kanit { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kd-text, #111827); }
.kvm-kanit::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kd-accent, #2563eb); flex: 0 0 8px; }
.kvm-kanit.stok::before { background: var(--kd-hata, #dc2626); }
.kvm-kanit.izleyen::before { background: var(--kd-iyi, #16a34a); }
.kvm-kargo { border: 1px solid var(--kd-line, #e5e7eb); border-radius: var(--kd-kose-k, 10px); padding: 10px 12px; font-size: 14px; }
.kvm-kargo-bar { height: 6px; border-radius: 999px; background: var(--kd-zemin-2, #eef2f7); margin-top: 8px; overflow: hidden; }
.kvm-kargo-bar i { display: block; height: 100%; border-radius: inherit; background: var(--kd-iyi, #16a34a); }

/* Taksit tablosu */
.kvm-taksit { border: 1px solid var(--kd-line, #e5e7eb); border-radius: var(--kd-kose-k, 10px); font-size: 14px; }
.kvm-taksit summary { cursor: pointer; padding: 10px 12px; font-weight: 600; }
.kvm-taksit summary:focus-visible { outline: 2px solid var(--kd-accent, #2563eb); outline-offset: 2px; border-radius: inherit; }
.kvm-taksit table { width: 100%; border-collapse: collapse; }
.kvm-taksit th, .kvm-taksit td { border-top: 1px solid var(--kd-line, #e5e7eb); padding: 8px 12px; text-align: left; white-space: nowrap; }
.kvm-taksit thead th { background: var(--kd-zemin-2, #f8fafc); font-size: 13px; }
.kvm-farksiz { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--kd-iyi, #15803d); }

/* Sabit sepet çubuğu (varsayılan yalnız dar ekranda) */
.kvm-sabit { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--kd-surface, #fff); color: var(--kd-text, #111827); border-top: 1px solid var(--kd-line, #e5e7eb); box-shadow: 0 -8px 24px rgba(10, 14, 25, .10); transform: translateY(100%); transition: transform .2s; }
.kvm-sabit.acik { transform: none; }
.kvm-sabit img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: 0 0 44px; }
.kvm-sabit-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kvm-sabit-bilgi b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvm-sabit-bilgi span { font-size: 14px; color: var(--kd-muted, #4b5563); }
.kvm-sabit button { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--kd-kose-k, 10px); background: var(--kd-accent, #111827); color: var(--kd-on-accent, #fff); font: 600 14px/1 inherit; cursor: pointer; }
.kvm-sabit button[disabled] { opacity: .5; cursor: not-allowed; }
.kvm-sabit button:focus-visible { outline: 2px solid var(--kd-text, #111827); outline-offset: 2px; }
@media (max-width: 900px) { .kvm-sabit { display: flex; } }
.kvm-sabit.her { display: flex; }
.kva, .kd-cerez { transition: transform .2s; }
body.kvm-sabit-acik .kva, body.kvm-sabit-acik .kd-cerez { transform: translateY(calc(-1 * var(--kvm-sabit-h, 72px))); }

/* Sepet önerileri */
.kvm-oneri { margin-top: 20px; }
.kvm-oneri h2 { font-size: 17px; margin: 0 0 12px; }
.kvm-oneri-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.kvm-oneri-kart { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--kd-line, #ece6df); border-radius: 12px; padding: 10px; background: var(--kd-surface, #fff); }
.kvm-oneri-kart a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.kvm-oneri-kart img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--kd-zemin-2, #f8fafc); }
.kvm-oneri-ad { font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kvm-oneri-fiyat { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.kvm-oneri-fiyat s { color: var(--kd-muted, #6b7280); font-size: 12.5px; }
.kvm-oneri-kart button { margin-top: auto; min-height: 38px; border: 1px solid var(--kd-accent, #111827); border-radius: 8px; background: transparent; color: var(--kd-accent, #111827); font: 600 13px/1 inherit; cursor: pointer; }
.kvm-oneri-kart button:focus-visible { outline: 2px solid var(--kd-accent, #2563eb); outline-offset: 2px; }
.kvm-oneri-git { margin-top: auto; min-height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--kd-accent, #111827); border-radius: 8px; color: var(--kd-accent, #111827); font: 600 13px/1 inherit; text-decoration: none; }

/* Ürün kişiselleştirme */
.kvm-kz { border: 1px solid var(--kd-line, #e5e7eb); border-radius: var(--kd-kose-k, 10px); padding: 12px 14px 14px; margin: 0 0 14px; display: grid; gap: 12px; min-width: 0; }
.kvm-kz legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.kvm-kz-alan { display: grid; gap: 6px; }
.kvm-kz-alan label { font-size: 14px; font-weight: 600; }
.kvm-kz-zorunlu { color: var(--kd-hata, #dc2626); }
.kvm-kz-ucret { font-weight: 500; color: var(--kd-muted, #6b7280); font-size: 13px; }
.kvm-kz-girdi { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--kd-line, #d1d5db); border-radius: 8px; background: var(--kd-surface, #fff); color: inherit; font: inherit; font-size: 15px; box-sizing: border-box; }
textarea.kvm-kz-girdi { resize: vertical; min-height: 84px; }
input[type="file"].kvm-kz-girdi { padding: 8px; }
.kvm-kz-girdi:focus-visible { outline: 2px solid var(--kd-accent, #2563eb); outline-offset: 1px; }
.kvm-kz-ipucu { font-size: 12.5px; color: var(--kd-muted, #6b7280); }
@media (prefers-reduced-motion: reduce) { .kvm-hb-btn, .kvm-sabit, .kva, .kd-cerez { transition: none; } }