/* =====================================================================
   VİTRİN 2 — Yeni mağaza tasarımı (7 hazır tasarım: Görünüm → Temalar)
   Renkler <head> içinde değişken olarak gelir; panelden (Renk, yazı ve stil) her biri değiştirilebilir:
   --r-yuzey --r-ust-serit --r-ust-zemin --r-menu-zemin --r-menu-yazi --r-alt-zemin --r-alt-yazi --r-fiyat --r-rozet
   Gövde sınıfları: ust-{magaza|ortali|koyu}  kart-{golgeli|cerceveli|duz}  buton-{...}
   ===================================================================== */
:root { --kap: 1320px; --yuzey: var(--r-yuzey, #fff); --vurgu-metin: var(--vurgu); }  /* --vurgu-metin: açık vurgu renklerinde yazılar için koyulaştırılmış hali */
html[data-mode="dark"] { --r-ust-zemin: var(--yuzey); --r-menu-zemin: color-mix(in srgb, var(--yuzey) 85%, #000); --r-menu-yazi: var(--metin); --r-fiyat: var(--metin); --r-ust-yazi: var(--metin); }
body { background: var(--zemin); }
.w-tam { width: 100%; }

/* ---------------- Üst şerit ---------------- */
.ust-serit { background: var(--r-ust-serit, var(--vurgu2)); color: var(--r-ust-serit-yazi, #fff); font-size: 13px; }
.ust-serit-ic { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.ust-serit a { color: inherit; opacity: .92; } .ust-serit a:hover { opacity: 1; text-decoration: underline; }
.us-mesaj { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.us-sag { display: flex; gap: 16px; align-items: center; }
.us-sosyal { font-size: 14px; }
@media (max-width: 768px) { .ust-serit-ic { justify-content: center; text-align: center; } .us-sag { display: none; } }

/* ---------------- Üst alan ---------------- */
.ust2 { background: var(--r-ust-zemin, #fff); color: var(--r-ust-yazi, var(--metin)); position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--cizgi); }
.ust2-ic { display: flex; align-items: center; gap: 24px; min-height: 84px; }
.ust2 .logo img { max-height: 52px; width: auto; }
.ust2 .logo-yazi { font-family: var(--font-baslik); font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.ust2 .logo-yazi b { color: var(--vurgu-metin, var(--vurgu)); }
.arama { flex: 1; display: flex; max-width: 640px; margin: 0 auto; background: color-mix(in srgb, var(--metin) 5%, var(--yuzey)); border: 1.5px solid var(--cizgi); border-radius: var(--btn-radius); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.ust-koyu .arama { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.arama:focus-within { border-color: var(--vurgu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 16%, transparent); }
.arama input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 18px; font: inherit; font-size: 15px; color: inherit; outline: none; }
.arama input::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.arama button { border: 0; background: var(--vurgu); color: var(--vurgu-yazi); padding: 0 22px; font-size: 18px; cursor: pointer; }
.ust2-araclar { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ust2-ikon { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; height: 44px; justify-content: center; border: 0; background: transparent; color: inherit; border-radius: var(--radius); font: inherit; cursor: pointer; position: relative; padding: 0 6px; }
.ust2-ikon > i { font-size: 23px; }
.ust2-ikon:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.ust2-ikon span { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.ust2-ikon small { font-size: 11.5px; opacity: .7; } .ust2-ikon b { font-size: 14px; }
.sepet-ikon { position: relative; display: inline-flex; } .sepet-ikon > i { font-size: 23px; }
.sepet-dugmesi .sepet-sayi { position: absolute; top: -7px; right: -9px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.mobil-menu-ac { display: none; }
.ust-ortali .ust2-ic { flex-wrap: wrap; justify-content: center; padding: 14px 20px 0; }
.ust-ortali .ust2 .logo { order: 1; flex: 1 1 100%; display: flex; justify-content: center; }
.ust-ortali .ust2-araclar { position: absolute; right: 20px; top: 14px; }
.ust-ortali .arama { order: 2; flex: 1 1 100%; max-width: 560px; margin: 4px auto 14px; }
.ust-ortali .ust2-ic { position: relative; }
@media (max-width: 991px) {
  .ust2-ic { gap: 10px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .mobil-menu-ac { display: inline-flex; order: 0; }
  .ust2 .logo { order: 1; flex: 1; } .ust2 .logo img { max-height: 38px; }
  .ust2-araclar { order: 2; } .ust2-tel span, .sepet-yazi { display: none !important; }
  .arama { order: 3; flex: 1 1 100%; margin: 0; }
  .ust-ortali .ust2-araclar { position: static; } .ust-ortali .ust2 .logo { flex: 1; justify-content: flex-start; order: 1; }
}

/* ---------------- Menü çubuğu ve mega menü ---------------- */
.menu-cubugu { background: var(--r-menu-zemin, var(--yuzey)); color: var(--r-menu-yazi, var(--metin)); border-bottom: 1px solid var(--cizgi); position: relative; z-index: 55; }
.menu-cubugu-ic { display: flex; align-items: stretch; gap: 6px; min-height: 52px; }
.mega { display: flex; }
.mega-dugme { display: flex; align-items: center; gap: 10px; border: 0; background: var(--vurgu); color: var(--vurgu-yazi); font: inherit; font-weight: 700; padding: 0 20px; cursor: pointer; border-radius: 0; }
.ust-ortali .mega-dugme, .kart-duz .mega-dugme { background: transparent; color: inherit; }
.mega-dugme .bi-chevron-down { font-size: 12px; transition: transform .2s; } .mega-dugme[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--yuzey); color: var(--metin); box-shadow: 0 24px 50px rgba(15,23,42,.18); border-top: 3px solid var(--vurgu); }
.mega-izgara { max-width: var(--kap); margin: 0 auto; padding: 26px 20px 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 22px 28px; max-height: 70vh; overflow: auto; }
.mega-baslik { display: flex; align-items: center; gap: 10px; font-weight: 800; font-family: var(--font-baslik); margin-bottom: 8px; }
.mega-baslik img { width: 40px; height: 40px; object-fit: cover; border-radius: calc(var(--radius) * .6); }
.mega-baslik:hover { color: var(--vurgu-metin, var(--vurgu)); }
.mega-kolon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mega-kolon li a { color: var(--soluk); font-size: 14.5px; } .mega-kolon li a:hover { color: var(--vurgu-metin, var(--vurgu)); }
.menu-ogeler { list-style: none; display: flex; margin: 0; padding: 0; gap: 2px; flex-wrap: wrap; }
.menu-oge { position: relative; display: flex; }
.menu-oge > a { display: flex; align-items: center; gap: 6px; padding: 0 14px; font-weight: 600; font-size: 15px; border-bottom: 3px solid transparent; }
.menu-oge > a:hover, .menu-oge:focus-within > a { border-bottom-color: var(--vurgu); }
.menu-oge > a .bi-chevron-down { font-size: 11px; }
.menu-alt { position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--yuzey); color: var(--metin); list-style: none; margin: 0; padding: 8px; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(15,23,42,.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; }
.menu-oge:hover .menu-alt, .menu-oge:focus-within .menu-alt { opacity: 1; visibility: visible; transform: none; }
.menu-alt a { display: block; padding: 9px 12px; border-radius: calc(var(--radius) * .6); } .menu-alt a:hover { background: var(--vurgu-ince); color: var(--vurgu-metin, var(--vurgu)); }
@media (max-width: 991px) { .menu-cubugu { display: none; } }

/* ---------------- Çekmeceler (mobil menü, mini sepet) ---------------- */
.cekmece-arka { position: fixed; inset: 0; background: rgba(2,6,23,.5); z-index: 90; animation: belir .2s; }
.mobil-cekmece, .mini-sepet { position: fixed; top: 0; bottom: 0; width: min(380px, 92vw); background: var(--yuzey); color: var(--metin); z-index: 95; display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(0,0,0,.25); }
.mobil-cekmece { left: 0; animation: soldan .25s ease; padding-bottom: 16px; } .mini-sepet { right: 0; animation: sagdan .25s ease; }
@keyframes soldan { from { transform: translateX(-100%); } } @keyframes sagdan { from { transform: translateX(100%); } } @keyframes belir { from { opacity: 0; } }
.cekmece-bas { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); font-size: 17px; }
.mobil-cekmece .arama { margin: 14px 16px; flex: 0 0 auto; }
.cekmece-liste { overflow: auto; flex: 1; padding: 0 16px; display: flex; flex-direction: column; }
.cekmece-liste > a, .cekmece-liste summary { padding: 13px 4px; border-bottom: 1px solid var(--cizgi); font-weight: 600; cursor: pointer; }
.cekmece-liste a.alt { padding-left: 20px; font-weight: 400; color: var(--soluk); }
.cekmece-liste details a { display: block; padding: 10px 16px; color: var(--soluk); }
.cekmece-ara-baslik { padding: 18px 4px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--soluk); }
.mobil-cekmece > .dugme { margin: 12px 16px 0; width: auto; }
.kargo-cubugu { padding: 14px 16px; background: var(--vurgu-ince); font-size: 14px; font-weight: 600; }
.kc-iz { height: 7px; background: color-mix(in srgb, var(--metin) 10%, transparent); border-radius: 9px; margin-top: 8px; overflow: hidden; } .kc-iz div { height: 100%; background: var(--vurgu); border-radius: 9px; }
.ms-liste { flex: 1; overflow: auto; padding: 8px 16px; }
.ms-satir { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.ms-gorsel { width: 64px; height: 64px; flex: 0 0 64px; border-radius: calc(var(--radius) * .7); overflow: hidden; background: color-mix(in srgb, var(--metin) 5%, var(--yuzey)); }
.ms-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.ms-bilgi { display: flex; flex-direction: column; gap: 4px; font-size: 14px; } .ms-bilgi small { color: var(--soluk); }
.ms-bos { text-align: center; color: var(--soluk); padding: 40px 0; display: grid; gap: 10px; } .ms-bos i { font-size: 40px; }
.ms-alt { border-top: 1px solid var(--cizgi); padding: 14px 16px 18px; display: grid; gap: 10px; }

/* ---------------- Bölüm başlıkları ---------------- */
.bolum { padding: 44px 20px 4px; }
.bolum-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.bolum-ust-baslik { display: block; color: var(--vurgu-metin, var(--vurgu)); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.bolum-baslik { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.bolum-arac { display: flex; align-items: center; gap: 8px; } .bolum-arac > a { color: var(--vurgu-metin, var(--vurgu)); font-weight: 700; margin-right: 6px; white-space: nowrap; }
.kaydir-ok { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin); cursor: pointer; display: grid; place-items: center; }
.kaydir-ok:hover { border-color: var(--vurgu-metin, var(--vurgu)); color: var(--vurgu-metin, var(--vurgu)); }

/* ---------------- Ürün kartı ---------------- */
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.urun-kaydirma { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; }
.urun-kaydirma::-webkit-scrollbar { display: none; } .urun-kaydirma > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .urun-kaydirma { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (max-width: 760px) { .urun-kaydirma { grid-auto-columns: 46%; gap: 12px; } .urun-izgara { grid-template-columns: repeat(2, 1fr); gap: 12px; } .kaydir-ok { display: none; } }
.urun-kart { background: var(--yuzey); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; position: relative; transition: transform .2s, box-shadow .2s; }
.kart-golgeli .urun-kart { box-shadow: var(--golge); } .kart-golgeli .urun-kart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.12); }
.kart-cerceveli .urun-kart { border: 1.5px solid var(--cizgi); } .kart-cerceveli .urun-kart:hover { border-color: var(--vurgu); }
.kart-duz .urun-kart { background: transparent; border-radius: 0; } .kart-duz .uk-gorsel { border-radius: var(--radius); }
.uk-gorsel { position: relative; aspect-ratio: 1; background: color-mix(in srgb, var(--metin) 4%, var(--yuzey)); display: grid; place-items: center; overflow: hidden; }
.uk-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.urun-kart:hover .uk-gorsel img { transform: scale(1.05); }
.uk-gorsel > i { font-size: 42px; color: var(--soluk); }
.uk-rozet { position: absolute; top: 12px; left: 12px; background: var(--r-rozet, #e11d48); color: var(--r-rozet-yazi, #fff); font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: calc(var(--radius) * .6); }
.uk-etiket { position: absolute; top: 12px; right: 12px; background: var(--yuzey); color: var(--metin); font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.uk-govde { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kart-duz .uk-govde { padding: 12px 2px 6px; }
.uk-kategori { font-size: 12.5px; color: var(--soluk); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.uk-ad { font-size: 15.5px; font-weight: 700; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.uk-ad a:hover { color: var(--vurgu-metin, var(--vurgu)); }
.uk-fiyat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.uk-fiyat strong { font-size: 19px; color: var(--r-fiyat, var(--metin)); font-weight: 800; }
.uk-fiyat del { color: var(--soluk); font-size: 14px; }
.uk-dugme { margin-top: 8px; padding: 10px 14px; font-size: 14px; width: 100%; }
.urun-kart.kapali { opacity: .65; }
@media (max-width: 760px) { .uk-govde { padding: 10px 10px 12px; } .uk-ad { font-size: 14px; } .uk-fiyat strong { font-size: 16px; } .uk-dugme { padding: 8px 10px; font-size: 13px; } }

/* ---------------- Slider, kategori kartları, tanıtım, kayan yazı ---------------- */
.slider { border-radius: var(--radius); overflow: hidden; }
.slider .slide img { width: 100%; aspect-ratio: 1320 / 480; object-fit: cover; }
@media (max-width: 640px) { .slider .slide img { aspect-ratio: 4 / 3; } }
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.kategori-kart { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--yuzey); display: block; }
.kart-cerceveli .kategori-kart { border: 1.5px solid var(--cizgi); } .kart-golgeli .kategori-kart { box-shadow: var(--golge); }
.kategori-gorsel { display: grid; place-items: center; aspect-ratio: 1; background: var(--vurgu-ince); overflow: hidden; }
.kategori-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; } .kategori-kart:hover .kategori-gorsel img { transform: scale(1.06); }
.kategori-gorsel span { font-size: 42px; font-weight: 800; color: var(--vurgu-metin, var(--vurgu)); font-family: var(--font-baslik); }
.kategori-ad { display: block; padding: 12px; text-align: center; font-weight: 700; }
.kategori-kart:hover .kategori-ad { color: var(--vurgu-metin, var(--vurgu)); }
.tanitim { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 320px; display: flex; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--vurgu2) 70%, #0b1020), color-mix(in srgb, var(--vurgu) 45%, #0b1020)); color: #fff; }
.tanitim > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tanitim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 70%); }
.tanitim-sag::after { background: linear-gradient(270deg, rgba(0,0,0,.62), rgba(0,0,0,.08) 70%); }
.tanitim.gorselsiz::after { display: none; }
.tanitim-yazi { position: relative; z-index: 1; max-width: 540px; padding: 40px clamp(24px, 5vw, 64px); display: grid; gap: 12px; justify-items: start; }
.tanitim-sag .tanitim-yazi { margin-left: auto; }
.tanitim-yazi h2, .tanitim-yazi h1 { font-size: clamp(26px, 3.6vw, 42px); margin: 0; color: #fff; }
.tanitim-yazi p { margin: 0; opacity: .92; font-size: 17px; }
.tanitim-etiket { background: var(--vurgu); color: var(--vurgu-yazi); font-weight: 800; font-size: 13px; padding: 5px 12px; border-radius: 99px; letter-spacing: .06em; }
.kayan-yazi { background: var(--vurgu); color: var(--vurgu-yazi); overflow: hidden; margin-top: 44px; padding: 14px 0; font-family: var(--font-baslik); font-weight: 800; font-size: clamp(16px, 2vw, 22px); text-transform: uppercase; letter-spacing: .02em; }
.ky-serit { display: flex; width: max-content; animation: kay 28s linear infinite; }
.hiz-yavas .ky-serit { animation-duration: 45s; } .hiz-hizli .ky-serit { animation-duration: 16s; }
.ky-grup { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; } .ky-grup i { font-size: .7em; opacity: .7; }
@keyframes kay { to { transform: translateX(-50%); } }
.kayan-yazi:hover .ky-serit { animation-play-state: paused; }
/* Bilgisayarında "animasyonları kapat" seçili ziyaretçide (Windows'ta sık açıktır) kayan yazı durmasın: yavaş akar, üstüne gelince durur */
@media (prefers-reduced-motion: reduce) { .kayan-yazi .ky-serit { animation-name: kay !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-duration: 45s !important; animation-play-state: running; } .kayan-yazi:hover .ky-serit { animation-play-state: paused !important; } }
.metin-govde.katlanir { max-height: 190px; overflow: hidden; position: relative; }
.metin-govde.katlanir::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--zemin)); }
.metin-govde.katlanir.acik { max-height: none; } .metin-govde.katlanir.acik::after { display: none; }
.devami { margin-top: 10px; }

/* ---------------- Güven şeridi ve alt alan ---------------- */
.guven-serit { background: var(--yuzey); border-top: 1px solid var(--cizgi); margin-top: 56px; }
.guven-serit-ic { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 28px 20px; }
.gs-oge { display: flex; gap: 14px; align-items: center; } .gs-oge > i { font-size: 30px; color: var(--vurgu-metin, var(--vurgu)); width: 54px; height: 54px; border-radius: 50%; background: var(--vurgu-ince); display: grid; place-items: center; flex: 0 0 54px; }
.gs-oge b { display: block; font-size: 15.5px; } .gs-oge span { color: var(--soluk); font-size: 13.5px; }
.alt2 { background: var(--r-alt-zemin, #111827); color: var(--r-alt-yazi, #cbd5e1); }
.alt2-ust { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; padding-top: 52px; padding-bottom: 40px; }
@media (max-width: 900px) { .alt2-ust { grid-template-columns: 1fr 1fr; } .alt2-marka { grid-column: 1 / -1; } }
@media (max-width: 520px) { .alt2-ust { grid-template-columns: 1fr; } }
.alt2 .logo img { max-height: 48px; width: auto; } .alt2 .logo-yazi { font-family: var(--font-baslik); font-size: 24px; font-weight: 800; color: inherit; }
.alt2-marka p { opacity: .85; font-size: 14.5px; line-height: 1.7; margin: 14px 0; }
.alt2-iletisim { display: flex; align-items: center; gap: 10px; margin: 6px 0; } .alt2-iletisim i { color: var(--vurgu); font-size: 18px; } .alt2-iletisim b { font-size: 16px; }
.alt2-adres { display: flex; gap: 8px; font-size: 14px; }
.alt2 .sosyal { display: flex; gap: 8px; margin-top: 14px; } .alt2 .sosyal a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 12%, transparent); }
.alt2 .sosyal a:hover { background: var(--vurgu); color: var(--vurgu-yazi); }
.alt2-kolon h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 16px; color: inherit; opacity: .7; }
.alt2-kolon ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .alt2-kolon a:hover { color: var(--vurgu); }
.alt2-alt { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.alt2-alt-ic { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; font-size: 13.5px; }
.gelistirici { opacity: .8; } .gelistirici a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 1px dotted currentColor; } .gelistirici a:hover { opacity: 1; border-bottom-style: solid; }
.odeme-rozetleri { display: flex; gap: 6px; flex-wrap: wrap; } .odeme-rozetleri span { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 700; }
.wa-sabit { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: #1faa59; color: #fff; display: grid; place-items: center; font-size: 28px; box-shadow: 0 10px 26px rgba(31,170,89,.45); z-index: 80; transition: transform .2s; }
.wa-sabit:hover { transform: scale(1.08); }
body.mobil-cubuklu .wa-sabit { bottom: 84px; }

/* Tasarıma özel küçük dokunuşlar */
.tema-bayi_spor h1, .tema-bayi_spor h2, .tema-bayi_spor h3, .tema-merkez_endustri h1, .tema-merkez_endustri h2, .tema-merkez_endustri .bolum-baslik { text-transform: uppercase; letter-spacing: .01em; }
.tema-bayi_spor .uk-rozet { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); padding-right: 14px; }
.tema-bayi_garaj .urun-kart { border: 1px solid rgba(56,189,248,.18); } .tema-bayi_garaj .urun-kart:hover { box-shadow: 0 0 0 1px var(--vurgu), 0 18px 40px rgba(56,189,248,.18); }
.tema-bayi_sade .uk-dugme { background: transparent; color: var(--metin); border-color: var(--metin); }
.tema-bayi_sade .uk-dugme:hover { background: var(--metin); color: var(--zemin); }
/* Koyu yüzeylerde (koyu üst alan, alt alan) vurgu yazıları parlak kalsın */
.ust-koyu .ust2 { --vurgu-metin: var(--vurgu); } .alt2 { --vurgu-metin: var(--vurgu); }
.ust-koyu .ust2 .logo-yazi b { color: var(--vurgu); }
/* Koyu zeminli banner: ana renk çok koyuysa (siyah, lacivert) buton ve etiket beyaz olur */
.tanitim .dugme, .tanitim-etiket { background: var(--koyu-zemin-dugme, var(--vurgu)); color: var(--koyu-zemin-dugme-yazi, var(--vurgu-yazi)); border-color: var(--koyu-zemin-dugme, var(--vurgu)); }
@media (max-width: 991px) { .ust-ortali .arama { order: 3; } }

/* Sepet / sipariş özeti: içerik kart genişliğini aşmasın (kupon kutusu sütunu genişletiyordu) */
.sepet-ozet { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.sepet-duzen > * { min-width: 0; }
.ozet-satir, .ozet-urun { align-items: baseline; } .ozet-satir > span, .ozet-urun > span { min-width: 0; overflow-wrap: anywhere; }
.ozet-satir > b, .ozet-urun > b { white-space: nowrap; text-align: right; flex-shrink: 0; }
.kupon-satir input { width: 100%; } .kupon-satir .dugme { flex-shrink: 0; padding-left: 16px; padding-right: 16px; }
/* Sepet kapalıyken seçenek adları: tıklanınca o seçeneğin görseli galeride görünür */
button.varyant { font: inherit; font-size: 14.5px; font-weight: 600; color: var(--metin); cursor: pointer; }
button.varyant:hover { border-color: var(--vurgu); }
button.varyant[aria-pressed="true"] { border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vurgu) 20%, transparent); }

/* Mobil alt çubuk: bağlantı ve butonlar AYNI yapı (.mc-oge > .mc-ikon + .mc-yazi); tarayıcının buton görünümü sıfırlanır (iPhone Safari dahil) */
.mobil-cubuk .mc-oge { -webkit-appearance: none; appearance: none; background: transparent; border: 0; margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; padding: 5px 2px 3px; font-family: var(--font-metin); font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--soluk); text-decoration: none; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobil-cubuk .mc-oge:active { background: var(--vurgu-ince); }
.mobil-cubuk .mc-oge[aria-current] { color: var(--vurgu-metin, var(--vurgu)); }
.mobil-cubuk .mc-ikon { position: relative; height: 24px; width: 28px; display: grid; place-items: center; }
.mobil-cubuk .mc-ikon i { font-size: 21px; line-height: 1; }
.mobil-cubuk .mc-ikon em { position: absolute; top: -4px; left: 17px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--vurgu); color: var(--vurgu-yazi); border: 2px solid var(--yuzey);
  font-size: 10px; font-style: normal; font-weight: 800; line-height: 14px; text-align: center; box-sizing: border-box; }
.mobil-cubuk .mc-yazi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobil-cubuk .mobil-menu-ac { display: flex; order: 0; }
/* Sipariş takip */
.takip-kutu { max-width: 480px; margin: 40px auto 20px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: clamp(22px, 5vw, 38px); text-align: center; box-shadow: var(--golge); }
.takip-ikon { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--vurgu-ince); color: var(--vurgu-metin, var(--vurgu)); font-size: 30px; }
.takip-kutu h1 { font-size: 26px; margin: 0 0 6px; } .takip-form { display: grid; gap: 6px; text-align: left; margin: 18px 0 10px; }
.takip-form label { font-weight: 600; font-size: 14px; margin-top: 8px; }
.takip-form input { padding: 12px 14px; border: 1.5px solid var(--cizgi); border-radius: var(--radius); background: var(--yuzey); color: var(--metin); font: inherit; }
.takip-form input:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vurgu) 15%, transparent); }
.takip-form .dugme { margin-top: 14px; }

/* =====================================================================
   MOBİL ALT ÇUBUK — uygulama görünümü: yüzen, buzlu cam, kayan gösterge, dokunma tepkisi,
   aşağı kaydırınca gizlenir / yukarı kaydırınca gelir. "Hareketi azalt" açıksa animasyon yok.
   ===================================================================== */
@media (max-width: 991px) {
  .mobil-cubuk { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
    background: color-mix(in srgb, var(--yuzey) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06); transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .3s; will-change: transform; }
  .mobil-cubuk.gizli { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  body.mobil-cubuklu { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.mobil-cubuklu .wa-sabit { bottom: calc(96px + env(safe-area-inset-bottom)); transition: bottom .38s cubic-bezier(.22, 1, .36, 1); }
  body.mobil-cubuk-gizli .wa-sabit { bottom: calc(18px + env(safe-area-inset-bottom)); }
  /* Kayan gösterge (aktif öğenin arkasındaki hap) */
  .mc-gosterge { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 16px; background: var(--vurgu-ince); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vurgu) 18%, transparent);
    opacity: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), width .45s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; pointer-events: none; z-index: 0; }
  .mc-gosterge.gorunur { opacity: 1; }
  .mobil-cubuk .mc-oge { position: relative; z-index: 1; padding: 7px 2px 6px; border-radius: 16px; transition: color .25s; }
  .mobil-cubuk .mc-oge:active { background: transparent; }
  .mobil-cubuk .mc-ikon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  .mobil-cubuk .mc-yazi { transition: font-weight .2s, letter-spacing .2s; }
  .mobil-cubuk .mc-oge.etkin { color: var(--vurgu-metin, var(--vurgu)); }
  .mobil-cubuk .mc-oge.etkin .mc-ikon { transform: translateY(-1px) scale(1.12); }
  .mobil-cubuk .mc-oge.etkin .mc-yazi { font-weight: 800; }
  /* Dokununca simge zıplar */
  .mobil-cubuk .mc-oge.dokundu .mc-ikon { animation: mcZipla .45s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes mcZipla { 0% { transform: scale(1); } 35% { transform: scale(.82); } 70% { transform: scale(1.18) translateY(-2px); } 100% { transform: scale(1.12) translateY(-1px); } }
  /* Sepete ürün eklendi: rozet büyüyüp küçülür, çanta sallanır */
  .mobil-cubuk .mc-oge.yeni-urun .mc-ikon em { animation: mcRozet .7s cubic-bezier(.34, 1.56, .64, 1); }
  .mobil-cubuk .mc-oge.yeni-urun .mc-ikon i { animation: mcSalla .6s ease; display: inline-block; }
  @keyframes mcRozet { 0% { transform: scale(0); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }
  @keyframes mcSalla { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); } }
  html[data-mode="dark"] .mobil-cubuk { background: color-mix(in srgb, var(--yuzey) 78%, transparent); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .mobil-cubuk, .mc-gosterge, .mobil-cubuk .mc-ikon, body.mobil-cubuklu .wa-sabit { transition: none !important; }
  .mobil-cubuk .mc-oge .mc-ikon, .mobil-cubuk .mc-oge .mc-ikon i, .mobil-cubuk .mc-oge .mc-ikon em { animation: none !important; }
}

/* ---------- Ürün videoları: galeri ---------- */
.galeri-ana { position: relative; }
.galeri-ana .ana-video { position: absolute; inset: 0; background: #000; display: grid; place-items: center; z-index: 2; }
.galeri-ana .ana-video video, .galeri-ana .ana-video iframe { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.galeri-ana.video-oynuyor.dikey .ana-video iframe { width: auto; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; }
.galeri-video { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.galeri-video::-webkit-scrollbar { display: none; }
.video-kucuk { position: relative; flex: 0 0 auto; height: 76px; padding: 0; border: 2px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000; }
.video-kucuk.dikey { width: 48px; } .video-kucuk.yatay { width: 120px; }
.video-kucuk img, .video-kucuk video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.video-kucuk i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 24px; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.video-kucuk[aria-current] { border-color: var(--vurgu); }

/* ---------- Ana sayfa: video vitrini (dikey kartlar yan yana) ---------- */
.video-serit.dikey { grid-auto-columns: calc((100% - 80px) / 5); }
.video-serit.yatay { grid-auto-columns: calc((100% - 40px) / 3); }
@media (max-width: 1100px) { .video-serit.dikey { grid-auto-columns: calc((100% - 60px) / 4); } .video-serit.yatay { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 760px) { .video-serit.dikey { grid-auto-columns: 44%; } .video-serit.yatay { grid-auto-columns: 86%; } }
.video-kart { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.video-kart > .video-oynat, .video-kart > video, .video-kart > iframe { position: relative; width: 100%; border: 0; padding: 0; border-radius: calc(var(--radius) * 1.3); overflow: hidden; background: #000; display: block; }
.video-kart.dikey > .video-oynat, .video-kart.dikey > video, .video-kart.dikey > iframe { aspect-ratio: 9 / 16; }
.video-kart.yatay > .video-oynat, .video-kart.yatay > video, .video-kart.yatay > iframe { aspect-ratio: 16 / 9; }
.video-kart > video { object-fit: cover; }
.video-oynat { cursor: pointer; }
.video-oynat img, .video-oynat video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.video-oynat:hover img, .video-oynat:hover video { transform: scale(1.04); }
.video-oynat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.6)); pointer-events: none; }
.video-oynat-ikon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: #111; font-size: 28px; box-shadow: 0 6px 20px rgba(0,0,0,.3); z-index: 1; transition: transform .2s ease; }
.video-oynat:hover .video-oynat-ikon { transform: translate(-50%, -50%) scale(1.08); }
.video-baslik { position: absolute; left: 12px; right: 12px; bottom: 10px; color: #fff; font-weight: 600; font-size: 14px; text-align: left; z-index: 1; line-height: 1.3; }
.video-urun { display: flex; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; font-size: 14px; }
.video-urun span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-urun b { color: var(--vurgu-metin, var(--vurgu)); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .video-oynat img, .video-oynat video, .video-oynat-ikon { transition: none; } }

/* =====================================================================
   MODERN MAĞAZA — kart-modern: çerçeveli kart, köşe indirim etiketi, kategori etiketi, "Sepete ekle"
   ===================================================================== */
.kart-modern .urun-kart { border: 1px solid #e3e6eb; border-radius: 12px; box-shadow: 0 4px 14px rgba(24,32,56,.035); }
html[data-mode="dark"] .kart-modern .urun-kart { border-color: var(--cizgi); }
.kart-modern .urun-kart:hover { box-shadow: 0 14px 34px rgba(24,32,56,.10); border-color: color-mix(in srgb, var(--vurgu) 35%, #e3e6eb); }
.kart-modern .uk-gorsel { background: #f6f7f9; margin: 0; }
.kart-modern .uk-gorsel img { object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
html[data-mode="dark"] .kart-modern .uk-gorsel img { mix-blend-mode: normal; }
/* Köşe indirim etiketi (sağ üst üçgen) */
.kart-modern .uk-rozet { top: 0; right: 0; left: auto; width: 62px; height: 62px; padding: 0; border-radius: 0 12px 0 0; background: var(--r-rozet, #ef233c); clip-path: polygon(0 0, 100% 0, 100% 100%); font-size: 12.5px; }
.kart-modern .uk-rozet span { position: absolute; top: 14px; right: 3px; transform: rotate(45deg); display: block; }
.kart-modern .uk-etiket { left: 10px; right: auto; top: 10px; background: #ff7a00; color: #fff; border-radius: 99px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 4px 10px rgba(255,122,0,.3); }
.kart-modern .kart-stok { bottom: 10px; left: 10px; }
.kart-modern .uk-govde { padding: 14px 16px 16px; gap: 5px; }
.kart-modern .uk-kategori { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--vurgu-metin, var(--vurgu)); font-weight: 600; }
.kart-modern .uk-ad { font-weight: 600; font-size: 15px; color: var(--metin); }
.kart-modern .uk-fiyat strong { font-size: 18px; }
.uk-sepet-form { margin: 8px 0 0; }
.kart-modern .uk-dugme { border-radius: 8px; font-weight: 700; }
/* Bölüm başlığı (modern): küçük gri üst başlık + kalın başlık */
.kart-modern .bolum-ust-baslik { color: var(--soluk); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; }
.kart-modern .bolum-baslik { font-weight: 700; }
.kart-modern .kaydir-ok { background: #f1f3f6; border-color: transparent; } .kart-modern .kaydir-ok:hover { background: var(--vurgu); color: var(--vurgu-yazi); }
.ust-magaza.kart-modern .menu-oge > a { font-weight: 500; }
.ust-magaza.kart-modern .mega-dugme { background: color-mix(in srgb, #000 18%, var(--r-menu-zemin, var(--vurgu))); }
.kart-modern .ust-serit { border-bottom: 1px solid #e8ecf3; }

/* =====================================================================
   KATEGORİLER — Hikâye görünümü (Instagram gibi yuvarlak, renkli halka, yatay kaydırma)
   ===================================================================== */
.hikaye-serit { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.hikaye-serit::-webkit-scrollbar { display: none; }
.hikaye { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; scroll-snap-align: start; color: var(--metin); }
.hikaye-halka { width: 84px; height: 84px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #ef0195 0%, #ff7a00 48%, #225cff 100%); display: block; transition: transform .2s; }
.hikaye-ic { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--yuzey); background: #f3f4f6; overflow: hidden; display: grid; place-items: center; }
.hikaye-ic img { width: 100%; height: 100%; object-fit: cover; }
.hikaye-ic b { font-size: 28px; font-weight: 800; color: var(--vurgu-metin, var(--vurgu)); font-family: var(--font-baslik); }
.hikaye-ad { font-size: 13px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hikaye:hover .hikaye-halka { transform: scale(1.06); } .hikaye:hover .hikaye-ad { color: var(--vurgu-metin, var(--vurgu)); }
.bolum.hikaye-bolum { padding-top: 22px; }
@media (min-width: 1100px) { .hikaye-serit.az { justify-content: center; } }
@media (max-width: 640px) { .hikaye { width: 74px; } .hikaye-halka { width: 68px; height: 68px; } .hikaye-serit { gap: 12px; } .hikaye-ad { font-size: 12px; } }

/* =====================================================================
   ARAÇ SEÇİCİ — Marka → Model → Yıl / Nesil → Kasa tipi → Motor / donanım
   ===================================================================== */
.arac-secici { background: linear-gradient(120deg, var(--vurgu2), color-mix(in srgb, var(--vurgu) 75%, var(--vurgu2))); color: #fff; border-radius: 14px; padding: 18px 20px; display: grid; gap: 12px; box-shadow: 0 14px 34px color-mix(in srgb, var(--vurgu2) 25%, transparent); }
.as-baslik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.as-baslik i { font-size: 26px; } .as-baslik b { font-size: 18px; font-family: var(--font-baslik); } .as-baslik span { opacity: .85; font-size: 14px; }
.as-baslik .as-temizle { margin-left: auto; color: #fff; opacity: .85; font-size: 13px; background: none; border: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.as-satir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; }
/* Araç tipi: Otomobil, Arazi SUV & Pickup, Elektrikli, Minivan, Ticari, Motosiklet */
.arac-secici { grid-template-columns: minmax(0, 1fr); }
.as-tipler { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.as-tipler::-webkit-scrollbar { display: none; }
.as-tip { flex: 0 0 auto; cursor: pointer; position: relative; }
.as-tip input { position: absolute; opacity: 0; pointer-events: none; }
.as-tip span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .15s; }
.as-tip span i { font-size: 17px; }
.as-tip:hover span { background: rgba(255,255,255,.24); }
.as-tip input:checked + span { background: #fff; color: var(--vurgu2); border-color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.as-tip input:focus-visible + span { outline: 3px solid #ff7a00; outline-offset: 2px; }
@media (max-width: 480px) { .as-tip span { padding: 7px 11px; font-size: 13px; } }
.as-satir select { width: 100%; height: 48px; border-radius: 10px; border: 0; padding: 0 34px 0 14px; font: inherit; font-size: 14.5px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M8 11 3 6h10z'/%3E%3C/svg%3E") no-repeat right 12px center; color: #111827; -webkit-appearance: none; appearance: none; cursor: pointer; }
.as-satir select:disabled { opacity: .55; cursor: not-allowed; }
.as-satir select:focus { outline: 3px solid color-mix(in srgb, #fff 60%, transparent); outline-offset: 1px; }
.as-satir .as-dugme { height: 48px; padding: 0 22px; border-radius: 10px; border: 0; background: #ff7a00; color: #fff; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.as-satir .as-dugme:disabled { opacity: .6; cursor: not-allowed; }
.as-satir .as-dugme:not(:disabled):hover { filter: brightness(1.06); }
.as-adim { position: relative; } .as-adim small { position: absolute; top: -8px; left: 10px; background: #ff7a00; color: #fff; font-size: 10px; font-weight: 800; border-radius: 99px; padding: 1px 6px; }
.as-aracim { display: flex; align-items: center; gap: 8px; font-size: 13.5px; opacity: .95; } .as-aracim a { color: #fff; text-decoration: underline; font-weight: 700; }
@media (max-width: 991px) { .as-satir { grid-template-columns: 1fr 1fr; } .as-satir select[data-adim="motor"], .as-satir .as-dugme { grid-column: 1 / -1; } .as-satir .as-dugme { justify-content: center; } }
@media (max-width: 480px) { .arac-secici { padding: 14px 12px; gap: 10px; } .as-satir { gap: 8px; } .as-satir select { height: 44px; font-size: 14px; padding-left: 11px; } .as-baslik span { display: none; } .as-satir .as-dugme { height: 46px; } }
.bolum.arac-bolum { padding-top: 18px; }
.arac-secici.kompakt { padding: 14px 16px; border-radius: 12px; } .arac-secici.kompakt .as-baslik b { font-size: 16px; }
/* Sonuç sayfası */
.arac-sonuc-ust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 14px; }
.arac-sonuc-ust h1 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.arac-etiketi { display: inline-flex; align-items: center; gap: 8px; background: var(--vurgu-ince); color: var(--vurgu-metin, var(--vurgu)); padding: 7px 14px; border-radius: 99px; font-weight: 700; }
.kat-cipleri { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.kat-cipleri a { padding: 7px 14px; border-radius: 99px; border: 1px solid var(--cizgi); background: var(--yuzey); font-size: 14px; font-weight: 600; }
.kat-cipleri a[aria-current] { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.kat-cipleri a small { opacity: .7; margin-left: 4px; }

/* =====================================================================
   IŞIK KUTUSU — ürün görselleri ve videolar tam ekran (dikey video boyu ekrana sığar)
   ===================================================================== */
.galeri-ana img#anaGorsel { cursor: zoom-in; }
.galeri-buyut { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; box-shadow: 0 4px 14px rgba(0,0,0,.15); cursor: pointer; display: grid; place-items: center; font-size: 18px; }
.isik-kutusu { position: fixed; inset: 0; z-index: 200; background: rgba(8,10,16,.94); display: grid; grid-template-rows: auto 1fr auto; color: #fff; animation: belir .2s; }
.isik-kutusu[hidden] { display: none; }
.ik-ust { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; }
.ik-ust .ik-baslik { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.ik-ust a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.ik-kapat, .ik-ok { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; cursor: pointer; }
.ik-kapat:hover, .ik-ok:hover { background: rgba(255,255,255,.24); }
.ik-sahne { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 64px; touch-action: pan-y; }
.ik-sahne img { max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 6px; user-select: none; }
.ik-sahne video, .ik-sahne iframe { border: 0; background: #000; border-radius: 10px; }
.ik-sahne .dikey { height: calc(100vh - 170px); width: auto; aspect-ratio: 9 / 16; max-width: 100%; }
.ik-sahne .yatay { width: min(100%, calc((100vh - 170px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto; }
.ik-ok { position: absolute; top: 50%; transform: translateY(-50%); } .ik-ok.onceki { left: 10px; } .ik-ok.sonraki { right: 10px; }
.ik-kucukler { display: flex; gap: 8px; justify-content: center; padding: 12px; overflow-x: auto; }
.ik-kucukler button { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: #222; cursor: pointer; position: relative; opacity: .6; }
.ik-kucukler button[aria-current] { border-color: #fff; opacity: 1; }
.ik-kucukler img { width: 100%; height: 100%; object-fit: cover; }
.ik-kucukler i { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
@media (max-width: 640px) { .ik-sahne { padding: 0 8px; } .ik-ok { width: 40px; height: 40px; background: rgba(0,0,0,.35); } .ik-sahne img { max-height: calc(100vh - 150px); } .ik-sahne .dikey { height: calc(100vh - 150px); } }
body.isik-acik { overflow: hidden; }

/* ---------------- Kategori sayfası: solda sabit filtre, sağda kaydırdıkça yüklenen ürünler ---------------- */
.kat-duzen { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 40px; }
.kat-icerik { min-width: 0; }
.kat-icerik .urun-izgara { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.kat-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.kat-sirala { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--soluk); margin-left: auto; }
.kat-sirala select { padding: 8px 32px 8px 12px; border: 1px solid var(--cizgi); border-radius: var(--radius); background: var(--yuzey); color: var(--metin); font: inherit; font-size: 14px; }
.filtre-adet { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 99px; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 12px; font-weight: 800; margin-left: 4px; }
.filtre-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtre-cipler a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)); color: var(--metin); font-size: 13.5px; font-weight: 600; text-decoration: none; border: 1px solid color-mix(in srgb, var(--vurgu) 30%, transparent); }
.filtre-cipler a:hover { border-color: var(--vurgu); }
.filtre-cipler .filtre-cipler-temizle { background: none; border-color: transparent; text-decoration: underline; color: var(--soluk); }
.aracim-oneri { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--vurgu) 8%, var(--yuzey)); border: 1px dashed color-mix(in srgb, var(--vurgu) 45%, transparent); color: var(--metin); font-weight: 600; font-size: 14.5px; text-decoration: none; }

.kat-filtre { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--radius); }
.filtre-form { padding: 14px 16px 18px; }
.filtre-ust { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--cizgi); font-size: 16px; }
.filtre-temizle { margin-left: auto; font-size: 13.5px; color: var(--vurgu-metin, var(--vurgu)); }
.filtre-kapat { display: none; margin-left: 8px; background: none; border: 0; font-size: 20px; color: var(--metin); cursor: pointer; }
.filtre-grup { padding: 14px 0; border-bottom: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 8px; }
.filtre-grup:last-of-type { border-bottom: 0; }
.filtre-baslik { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.filtre-form select, .filtre-form input[type=search], .filtre-form input[type=text] { width: 100%; padding: 9px 11px; border: 1px solid var(--cizgi); border-radius: calc(var(--radius) * .7); background: var(--zemin); color: var(--metin); font: inherit; font-size: 14px; min-width: 0; }
.filtre-form select:disabled { opacity: .55; }
.filtre-ara { display: flex; } .filtre-ara input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.filtre-ara button { border: 1px solid var(--cizgi); border-left: 0; background: var(--vurgu); color: var(--vurgu-yazi); padding: 0 12px; border-radius: 0 calc(var(--radius) * .7) calc(var(--radius) * .7) 0; cursor: pointer; }
.filtre-secim { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; line-height: 1.3; padding: 2px 0; }
.filtre-secim input { width: 17px; height: 17px; accent-color: var(--vurgu); flex: none; margin: 0; }
.filtre-secim span { flex: 1; }
.filtre-secim small { color: var(--soluk); font-size: 12px; }
.filtre-liste { display: flex; flex-direction: column; gap: 4px; }
.filtre-liste.uzun { max-height: 232px; overflow: auto; padding-right: 4px; overscroll-behavior: contain; }
.filtre-not { margin: 0; font-size: 12.5px; color: var(--soluk); }
.filtre-fiyat { display: flex; align-items: center; gap: 6px; } .filtre-fiyat input { text-align: center; } .filtre-fiyat .dugme { padding: 8px 10px; flex: none; }
.filtre-uygula-mobil { display: none; }

.sonsuz-yukle { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px 0 10px; min-height: 48px; }
.sonsuz-durum { display: inline-flex; align-items: center; gap: 10px; color: var(--soluk); font-weight: 600; }
.donen { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--cizgi); border-top-color: var(--vurgu); animation: donus .8s linear infinite; }
@keyframes donus { to { transform: rotate(360deg); } }
.sonsuz-bitti { text-align: center; color: var(--soluk); font-size: 14px; margin: 26px 0 0; }
.js-sonsuz [data-sayfalama] { display: none; }   /* JavaScript açıkken sayfa numaraları gizlenir (kaydırdıkça yüklenir) */
.sayfalama-bosluk { align-self: center; color: var(--soluk); padding: 0 4px; }

@media (min-width: 992px) {
  .kat-duzen { grid-template-columns: 272px minmax(0, 1fr); gap: 28px; }
  .kat-filtre { position: sticky; top: calc(var(--ust-yukseklik, 84px) + 14px); max-height: calc(100vh - var(--ust-yukseklik, 84px) - 28px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .kat-filtre-ac, .kat-filtre-perde { display: none !important; }
}
@media (max-width: 991px) {
  .kat-filtre { position: fixed; top: 0; bottom: 0; left: 0; width: min(90vw, 380px); z-index: 1100; border-radius: 0 var(--radius) var(--radius) 0; overflow: auto; transform: translateX(-105%); transition: transform .25s ease; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
  .kat-filtre.acik { transform: none; }
  .kat-filtre-perde { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1090; }
  .filtre-form { padding-bottom: 90px; }
  .filtre-ust { position: sticky; top: -14px; background: var(--yuzey); z-index: 2; padding-top: 14px; margin-top: -14px; }
  .filtre-kapat { display: block; }
  .filtre-uygula-mobil { display: block; position: sticky; bottom: 12px; width: 100%; margin-top: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
  .kat-icerik .urun-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kat-cubuk { position: sticky; top: var(--ust-yukseklik, 64px); z-index: 20; background: var(--zemin); padding: 8px 0; margin-top: -8px; }
  body.filtre-acik { overflow: hidden; }
}
@media (min-width: 600px) and (max-width: 991px) { .kat-icerik .urun-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------- Satış asistanı (sohbet penceresi) ---------------- */
.asistan-ac { position: fixed; right: 18px; bottom: 88px; z-index: 81; display: flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--vurgu); color: var(--vurgu-yazi); border-radius: 99px; padding: 12px 18px 12px 14px; font: inherit; font-weight: 700; font-size: 14.5px; box-shadow: 0 10px 26px color-mix(in srgb, var(--vurgu) 40%, transparent); transition: transform .2s; }
.asistan-ac i { font-size: 22px; line-height: 1; }
.asistan-ac:hover { transform: translateY(-2px); }
body:not(:has(.wa-sabit)) .asistan-ac { bottom: 18px; }
body.mobil-cubuklu .asistan-ac { bottom: 154px; }
body.mobil-cubuklu:not(:has(.wa-sabit)) .asistan-ac { bottom: 84px; }
body.asistan-acik .asistan-ac { display: none; }
.asistan { position: fixed; right: 18px; bottom: 18px; z-index: 1200; width: min(380px, calc(100vw - 24px)); height: min(620px, calc(100vh - 36px)); }
.asistan-pencere { height: 100%; display: flex; flex-direction: column; background: var(--yuzey); color: var(--metin); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; border: 1px solid var(--cizgi); }
.asistan-bas { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--vurgu2, #1e293b); color: var(--vurgu2-yazi, #fff); }
.asistan-bas small { display: block; opacity: .75; font-size: 12px; }
.asistan-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 19px; flex: none; }
.asistan-kapat { margin-left: auto; background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 4px 6px; }
.asistan-giris { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; font-size: 14px; }
.asistan-giris p { margin: 0; }
.asistan-giris label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13.5px; }
.asistan-giris input:not([type=checkbox]), .asistan-yaz input { padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--zemin); color: var(--metin); font: inherit; font-size: 15px; min-width: 0; }
.asistan-giris .asistan-izin { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 12.5px; line-height: 1.4; }
.asistan-izin input { margin-top: 2px; accent-color: var(--vurgu); width: 16px; height: 16px; flex: none; }
.asistan-tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.asistan-hata { color: #dc2626; font-weight: 600; font-size: 13.5px; }
.asistan-akis { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: color-mix(in srgb, var(--metin) 3%, var(--yuzey)); overscroll-behavior: contain; }
.asistan-akis > * { flex-shrink: 0; }
.as-mesaj { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; word-wrap: break-word; }
.as-mesaj.asistan-m { background: var(--yuzey); border: 1px solid var(--cizgi); border-bottom-left-radius: 4px; align-self: flex-start; }
.as-mesaj.musteri-m { background: var(--vurgu); color: var(--vurgu-yazi); border-bottom-right-radius: 4px; align-self: flex-end; }
.as-yaziyor { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 16px; }
.as-yaziyor span { width: 7px; height: 7px; border-radius: 50%; background: var(--soluk); animation: asNokta 1s infinite ease-in-out; } .as-yaziyor span:nth-child(2) { animation-delay: .15s; } .as-yaziyor span:nth-child(3) { animation-delay: .3s; }
@keyframes asNokta { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.as-baslik { font-size: 12px; font-weight: 800; color: var(--soluk); text-transform: uppercase; letter-spacing: .04em; margin: 2px 0 -4px; }
.as-urunler { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; }
.as-urun { flex: 0 0 148px; scroll-snap-align: start; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; color: var(--metin); text-decoration: none; display: flex; flex-direction: column; font-size: 13px; }
.as-urun:hover { border-color: var(--vurgu); }
.as-urun-gorsel { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--metin) 5%, var(--yuzey)); display: grid; place-items: center; color: var(--soluk); font-size: 26px; }
.as-urun-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.as-urun b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; padding: 7px 8px 2px; line-height: 1.3; min-height: 2.6em; }
.as-urun-fiyat { padding: 2px 8px 8px; font-weight: 800; } .as-urun-fiyat del { color: var(--soluk); font-weight: 400; margin-left: 4px; font-size: 12px; }
.as-urun-git { margin-top: auto; padding: 7px 8px; border-top: 1px solid var(--cizgi); color: var(--vurgu-metin, var(--vurgu)); font-weight: 700; font-size: 12.5px; }
.as-tumu { align-self: flex-start; font-weight: 700; font-size: 13.5px; color: var(--vurgu-metin, var(--vurgu)); }
.as-secenekler { display: flex; flex-wrap: wrap; gap: 6px; }
.as-secenekler button { border: 1px solid color-mix(in srgb, var(--vurgu) 45%, transparent); background: var(--yuzey); color: var(--metin); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.as-secenekler button:hover { background: color-mix(in srgb, var(--vurgu) 12%, var(--yuzey)); }
.as-secenekler.kullanildi { display: none; }
.asistan-yaz { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--cizgi); background: var(--yuzey); }
.asistan-yaz input { flex: 1; }
.asistan-yaz button { flex: none; width: 44px; border: 0; border-radius: 10px; background: var(--vurgu); color: var(--vurgu-yazi); font-size: 17px; cursor: pointer; }
.asistan-yaz button:disabled { opacity: .5; }
@media (max-width: 600px) {
  .asistan-ac { padding: 0; width: 56px; height: 56px; justify-content: center; } .asistan-ac span { display: none; } .asistan-ac i { font-size: 25px; }
  .asistan { inset: 0; width: auto; height: auto; height: 100dvh; }
  .asistan-pencere { border-radius: 0; border: 0; }
  body.asistan-acik { overflow: hidden; }
}
@media print { .asistan, .asistan-ac { display: none !important; } }

/* ---------------- Ürün kartında video: kartın kare alanını tamamen doldurur (dikey video ortadan kırpılır) ---------------- */
.uk-gorsel .kart-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: color-mix(in srgb, var(--metin) 8%, var(--yuzey)); }
.kart-modern .uk-gorsel .kart-video { object-fit: cover; padding: 0; }
.kart-video-isaret { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 17px; pointer-events: none; transition: opacity .3s; }
.uk-gorsel.oynuyor .kart-video-isaret { opacity: 0; }