/* Vitrin görsel dili — AÇIK tema (değiştirilemez karar #9).

   ⛔ RENKLER YALNIZ BELİRTEÇTEN gelir; palet belirteçleri mağazanın
   ayarından türetilir ve `<style>:root{…}</style>` ile sayfaya gömülür
   (temel.html). Buraya çıplak renk yazmak, mağaza sahibi paleti
   değiştirdiğinde o noktanın eski renkte kalması demektir
   (test_gorsel_kirmizi_cizgiler.py).

   TASARIM SİSTEMİ (demo cilası, 29 Ağu 2026): bu dosya üç katmandır —
   1. `:root` ölçü/gölge/z/geçiş/durum belirteçleri (renk paleti DEĞİL;
      palet Python'dan gelir ve burada ASLA yeniden tanımlanmaz),
   2. ORTAK BİLEŞENLER bloğu — panel.css ile BAYT-AYNI
      (testler/test_tasarim_sistemi.py kilitler),
   3. vitrine özgü kabuk ve sayfa kuralları. */

:root{
  /* boşluk ölçeği */
  --b-1:.25rem;--b-2:.5rem;--b-3:.75rem;--b-4:1rem;--b-5:1.5rem;
  --b-6:2rem;--b-7:3rem;--b-8:4rem;
  /* köşe */
  --yaricap-buyuk:16px;--yaricap-tam:999px;
  /* gölge (yalnız saf siyah + saydamlık; bekçi gölgede izin verir) */
  --golge-1:0 1px 2px rgb(0 0 0 / .05);
  --golge-2:0 1px 2px rgb(0 0 0 / .04), 0 6px 18px rgb(0 0 0 / .07);
  --golge-3:0 2px 6px rgb(0 0 0 / .06), 0 16px 40px rgb(0 0 0 / .12);
  /* katmanlar */
  --z-yapiskan:10;--z-acilir:20;--z-cekmece:40;--z-modal:50;--z-toast:60;
  /* geçişler */
  --gecis-hizli:120ms;--gecis:200ms;
  /* tipografi */
  --yazi-xs:.75rem;--yazi-sm:.875rem;--yazi-md:1rem;--yazi-lg:1.125rem;
  --yazi-xl:1.375rem;--yazi-2xl:1.75rem;--yazi-3xl:2.25rem;
  --satir-sik:1.25;--satir:1.55;
  --icerik-genislik:76rem;
  /* kontrol sınırı: WCAG 1.4.11 için 3:1 nötr gri (girdi zemini beyaz) */
  --kontrol-kenar:#7c8694;
  --girdi-zemin:#ffffff;
  /* durum renkleri — paletten bağımsız, açık yüzeylerde AA
     (test_tasarim_sistemi 5 hazır palete karşı kilitler) */
  --basari:#146c2e;--basari-zemin:#e9f6ec;
  --hata:#b3261e;--hata-zemin:#fdecea;
  --uyari-renk:#8a5a00;--uyari-zemin:#fff5e0;
  --bilgi:#1c58d9;--bilgi-zemin:#eaf0fe;
}
/* Kırılımlar (yorum olarak; CSS medya sorguları değişken alamaz):
   30rem mobil · 44rem tablet · 56rem küçük masaüstü · 64rem masaüstü ·
   80rem geniş. */

/* === ORTAK BİLEŞENLER (başlangıç) === */
*{box-sizing:border-box}
/* ⛔ `[hidden]` HER ZAMAN KAZANIR: düğmenin `display:inline-flex` gibi öğe
   kuralları tarayıcının `[hidden]{display:none}`unu EZİYORDU — gizli
   perde düğmesi paneli kaplayan mavi bir blok olarak çizildi (Playwright
   ölçümü, 29 Ağu). 360 kare dersinin (display:block hidden'ı ezdi) genel
   hâli. */
[hidden]{display:none !important}
body{margin:0;background:var(--zemin);color:var(--metin);
     font:16px/var(--satir) system-ui,-apple-system,"Segoe UI",Roboto,
     "Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
a{color:var(--birincil);text-underline-offset:.15em}
img,svg{max-width:100%;height:auto;vertical-align:middle}
.ikon{flex:none;display:inline-block}
:focus-visible{outline:2px solid var(--birincil);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
.gizli-etiket{position:absolute;width:1px;height:1px;overflow:hidden;
              clip-path:inset(50%);white-space:nowrap}
.atla{position:absolute;left:-9999px;top:0}
.atla:focus{left:8px;top:8px;background:var(--birincil);
            color:var(--birincil-metin);padding:.6rem 1rem;
            z-index:var(--z-toast);border-radius:var(--yaricap-kucuk);
            min-height:44px;display:inline-flex;align-items:center;
            box-shadow:var(--golge-2)}

/* düğme */
button,.dugme{background:var(--birincil);color:var(--birincil-metin);
              border:1px solid var(--birincil);border-radius:var(--yaricap-kucuk);
              padding:.6rem 1.1rem;cursor:pointer;font:inherit;
              font-weight:600;min-height:44px;text-decoration:none;
              display:inline-flex;align-items:center;justify-content:center;
              gap:.45rem;line-height:1.2;white-space:nowrap;
              transition:background var(--gecis-hizli),box-shadow var(--gecis-hizli),
                         transform var(--gecis-hizli),border-color var(--gecis-hizli)}
button:hover,.dugme:hover{box-shadow:var(--golge-2);
  background:color-mix(in srgb, var(--birincil) 88%, var(--metin))}
button:active,.dugme:active{transform:translateY(1px);box-shadow:none}
button.ikincil,.dugme.ikincil{background:var(--yuzey);
  color:var(--metin);border:1px solid var(--kontrol-kenar)}
button.ikincil:hover,.dugme.ikincil:hover{
  background:var(--yuzey-2);border-color:var(--metin)}
button.tehlikeli,.dugme.tehlikeli{background:var(--yuzey);
  color:var(--hata);border:1px solid var(--hata)}
button.tehlikeli:hover,.dugme.tehlikeli:hover{
  background:var(--hata-zemin)}
button.sessiz,.dugme.sessiz{background:transparent;
  color:var(--metin);border-color:transparent;box-shadow:none}
button.sessiz:hover,.dugme.sessiz:hover{
  background:var(--yuzey-2);box-shadow:none}
.dugme-kucuk{min-height:36px;padding:.35rem .8rem;
  font-size:var(--yazi-sm)}
.dugme-ikon{padding:0;min-width:44px;aspect-ratio:1}
button[disabled],.dugme[aria-disabled="true"]{opacity:.5;cursor:not-allowed;
  box-shadow:none;transform:none}
button[aria-busy="true"],.dugme[aria-busy="true"]{position:relative;
  color:transparent;pointer-events:none}
button[aria-busy="true"]::after,.dugme[aria-busy="true"]::after{content:"";
  position:absolute;width:1.1em;height:1.1em;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--birincil-metin);animation:ep-donus .8s linear infinite}
.ikincil[aria-busy="true"]::after{
  color:var(--metin)}
@keyframes ep-donus{to{transform:rotate(360deg)}}

/* form alanları */
/* :where() → özgüllük 0: bileşen kuralları (.ara input, .filtre-alanlar input)
   bunu ezebilsin. 29 Ağu: :not zinciri (0,5,1) `.ara input{padding-left}`i
   yeniyor, arama ikonu yer tutucunun üstüne biniyordu. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color])),
select,textarea{background:var(--girdi-zemin);color:var(--metin);
  border:1px solid var(--kontrol-kenar);border-radius:var(--yaricap-kucuk);
  padding:.6rem .8rem;font:inherit;min-height:44px;width:100%;
  transition:border-color var(--gecis-hizli),box-shadow var(--gecis-hizli)}
textarea{min-height:6rem;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--soluk) 50%),
                   linear-gradient(135deg,var(--soluk) 50%,transparent 50%);
  background-position:calc(100% - 1.05rem) 50%,calc(100% - .7rem) 50%;
  background-size:.35rem .35rem;background-repeat:no-repeat}
select[multiple]{background-image:none;padding-right:.8rem}
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,
textarea:focus-visible{outline:none;border-color:var(--birincil);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--birincil) 22%, transparent)}
input[aria-invalid="true"],select[aria-invalid="true"],
textarea[aria-invalid="true"]{border-color:var(--hata)}
input[type=file]{font:inherit;min-height:44px;padding:.5rem 0;width:100%}
input[type=color]{min-height:44px;min-width:3rem;padding:.15rem;
  border:1px solid var(--kontrol-kenar);border-radius:var(--yaricap-kucuk);
  background:var(--girdi-zemin)}
/* Ultra cila 2: 1.25rem (20 px) → 1.5rem (24 px), WCAG 2.5.8 en küçük hedef */
input[type=checkbox],input[type=radio]{width:1.5rem;height:1.5rem;
  accent-color:var(--birincil);margin:0;flex:none;cursor:pointer}
input[disabled],select[disabled],textarea[disabled]{opacity:.55;
  cursor:not-allowed;background:var(--yuzey-2)}
label{font-size:var(--yazi-sm);font-weight:600;color:var(--metin)}
.alan{display:grid;gap:.35rem;min-width:0}
.alan-yardim{font-size:var(--yazi-sm);color:var(--soluk);font-weight:400;
  margin:0}
.onay-satiri{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;
  min-height:44px;padding:.5rem 0;cursor:pointer;font-size:var(--yazi-md)}
.onay-satiri input{margin-top:.2rem}
.anahtar{position:relative;display:inline-flex;align-items:center;gap:.6rem;
  min-height:44px;cursor:pointer;font-weight:400}
.anahtar input{position:absolute;opacity:0;width:1px;height:1px}
.anahtar-yuzey{width:2.6rem;height:1.5rem;border-radius:var(--yaricap-tam);
  background:var(--kontrol-kenar);position:relative;flex:none;
  transition:background var(--gecis)}
.anahtar-yuzey::after{content:"";position:absolute;top:.15rem;left:.15rem;
  width:1.2rem;height:1.2rem;border-radius:50%;background:var(--yuzey);
  transition:transform var(--gecis);box-shadow:var(--golge-1)}
.anahtar input:checked+.anahtar-yuzey{background:var(--birincil)}
.anahtar input:checked+.anahtar-yuzey::after{transform:translateX(1.1rem)}
.anahtar input:focus-visible+.anahtar-yuzey{outline:2px solid var(--birincil);
  outline-offset:2px}
.form-satir{display:grid;gap:var(--b-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.form-eylem{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  margin-top:var(--b-4)}

/* kart */
.kart{background:var(--yuzey);border:1px solid var(--kenar);
      border-radius:var(--yaricap);padding:var(--b-5);display:grid;gap:.75rem;
      align-content:start;box-shadow:var(--golge-1)}
.kart>h2:first-child,.kart>h3:first-child{margin-top:0}
.kart-baslik{display:flex;align-items:center;justify-content:space-between;
  gap:var(--b-3);flex-wrap:wrap}
.kart-baslik h2{margin:0}
.kart-eylem{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.kart-satiri{display:flex;align-items:center;justify-content:space-between;
  gap:var(--b-3);flex-wrap:wrap;margin:0;padding:.35rem 0;
  border-bottom:1px solid var(--ayrac)}
.kart-satiri:last-child{border-bottom:0}

/* rozet */
.rozet{display:inline-flex;align-items:center;gap:.35rem;
       padding:.2rem .6rem;border-radius:var(--yaricap-tam);
       font-size:var(--yazi-xs);font-weight:600;line-height:1.4;
       border:1px solid var(--kenar);background:var(--yuzey-2);
       color:var(--soluk);white-space:nowrap}
.rozet--olumlu{color:var(--basari);background:var(--basari-zemin);
  border-color:color-mix(in srgb, var(--basari) 35%, transparent)}
.rozet--bekleyen{color:var(--bilgi);background:var(--bilgi-zemin);
  border-color:color-mix(in srgb, var(--bilgi) 35%, transparent)}
.rozet--olumsuz{color:var(--hata);background:var(--hata-zemin);
  border-color:color-mix(in srgb, var(--hata) 35%, transparent)}
.rozet-dikkat{color:var(--uyari-renk);background:var(--uyari-zemin);
  border-color:color-mix(in srgb, var(--uyari-renk) 35%, transparent)}
.rozet-birincil{color:var(--birincil);background:var(--vurgu-zemin);
  border-color:color-mix(in srgb, var(--birincil) 35%, transparent)}

/* ipucu (tooltip) — dokunmatikte odakla açılır, metin DOM'da */
[data-ipucu]{position:relative}
[data-ipucu]::after{content:attr(data-ipucu);position:absolute;left:50%;
  bottom:calc(100% + .4rem);transform:translateX(-50%) translateY(4px);
  background:var(--metin);color:var(--zemin);font-size:var(--yazi-xs);
  padding:.35rem .6rem;border-radius:var(--yaricap-kucuk);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--gecis-hizli),
  transform var(--gecis-hizli);z-index:var(--z-acilir)}
[data-ipucu]:hover::after,[data-ipucu]:focus-visible::after{opacity:1;
  transform:translateX(-50%) translateY(0)}

/* uyarı şeritleri (durum + metin; renk tek başına anlam taşımaz) */
.uyari,.bilgi,.dikkat,.not{display:flex;gap:.6rem;align-items:flex-start;
  padding:.75rem 1rem;border-radius:var(--yaricap-kucuk);border:1px solid;
  margin:0 0 var(--b-4);font-size:var(--yazi-sm);line-height:var(--satir)}
.uyari{color:var(--hata);background:var(--hata-zemin);
  border-color:color-mix(in srgb, var(--hata) 35%, transparent)}
.bilgi{color:var(--basari);background:var(--basari-zemin);
  border-color:color-mix(in srgb, var(--basari) 35%, transparent)}
.dikkat{color:var(--uyari-renk);background:var(--uyari-zemin);
  border-color:color-mix(in srgb, var(--uyari-renk) 35%, transparent)}
.not{color:var(--bilgi);background:var(--bilgi-zemin);
  border-color:color-mix(in srgb, var(--bilgi) 35%, transparent)}
.uyari a,.bilgi a,.dikkat a,.not a{color:inherit;font-weight:600}
.uyari-etiket{display:inline-flex;align-items:center;gap:.25rem;
  color:var(--hata);font-size:var(--yazi-xs);font-weight:600}

/* toast (JS `role=status/alert` iletilerini köşeye taşır; metin DOM'da) */
.toast-kap{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;
  z-index:var(--z-toast);max-width:min(24rem,calc(100vw - 2rem))}
.toast{background:var(--metin);color:var(--zemin);padding:.8rem 1rem;
  border-radius:var(--yaricap);box-shadow:var(--golge-3);display:flex;
  gap:.6rem;align-items:flex-start;font-size:var(--yazi-sm);
  animation:ep-toast var(--gecis) ease-out}
.toast-basari{background:var(--basari)}
.toast-hata{background:var(--hata)}
.toast button{background:transparent;border:0;color:inherit;min-height:44px;
  min-width:44px;padding:0;margin:-.5rem -.5rem -.5rem auto;box-shadow:none;
  font-size:var(--yazi-lg)}
@keyframes ep-toast{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}}

/* modal ve çekmece */
dialog.modal{border:0;padding:0;background:var(--yuzey);color:var(--metin);
  border-radius:var(--yaricap);box-shadow:var(--golge-3);
  width:min(30rem,calc(100vw - 2rem));max-height:90vh}
dialog.modal::backdrop{background:var(--metin);opacity:.55}
.modal-govde{padding:var(--b-5);display:grid;gap:var(--b-3)}
.modal-govde h2{margin:0;font-size:var(--yazi-lg)}
.modal-eylem{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.cekmece{position:fixed;inset:0;z-index:var(--z-cekmece);display:flex}
.cekmece[hidden]{display:none}
.cekmece-perde{flex:1;background:var(--metin);opacity:.5;border:0;
  padding:0;min-height:0;border-radius:0;cursor:pointer}
.cekmece-panel{width:min(20rem,85vw);background:var(--yuzey);
  box-shadow:var(--golge-3);overflow-y:auto;display:flex;
  flex-direction:column;animation:ep-cekmece var(--gecis) ease-out}
@keyframes ep-cekmece{from{transform:translateX(-12px);opacity:0}
  to{transform:none;opacity:1}}
.cekmece-baslik{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-bottom:1px solid var(--kenar);
  font-weight:700}
.cekmece-govde{padding:.5rem}
.cekmece-govde a,.cekmece-govde button.sessiz{display:flex;
  align-items:center;gap:.6rem;min-height:44px;padding:0 .75rem;
  border-radius:var(--yaricap-kucuk);color:var(--metin);text-decoration:none;
  width:100%;justify-content:flex-start;font-weight:500}
.cekmece-govde a:hover{background:var(--yuzey-2)}
.cekmece-govde a[aria-current="page"]{color:var(--birincil);
  background:var(--vurgu-zemin);font-weight:600}
.cekmece-bolum{padding:.75rem .75rem .25rem;font-size:var(--yazi-xs);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--soluk)}
body.cekmece-acik{overflow:hidden}

/* açılır (dropdown) */
.acilir-kap{position:relative}
.acilir{display:none;position:absolute;right:0;top:calc(100% + .35rem);
  z-index:var(--z-acilir);background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);box-shadow:var(--golge-3);min-width:14rem;
  padding:.35rem;max-width:calc(100vw - 2rem)}
.acilir-kap:focus-within .acilir,.acilir-kap[data-acik] .acilir{display:block}
.acilir a,.acilir button.sessiz{display:flex;justify-content:space-between;
  gap:1rem;align-items:center;min-height:44px;padding:0 .75rem;
  text-decoration:none;color:var(--metin);border-radius:var(--yaricap-kucuk);
  width:100%;font-weight:500}
.acilir a:hover,.acilir button.sessiz:hover{background:var(--yuzey-2)}
.acilir p{margin:.5rem .75rem;font-size:var(--yazi-sm);color:var(--soluk)}
.acilir form{margin:0}
.acilir form button{width:100%;justify-content:flex-start}

/* sekmeler */
.sekmeler{display:flex;flex-wrap:wrap;gap:.25rem;margin:0 0 var(--b-4);
  border-bottom:1px solid var(--ayrac);overflow-x:auto}
.sekmeler a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.35rem .9rem;color:var(--soluk);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500;
  white-space:nowrap}
.sekmeler a:hover{color:var(--metin);background:var(--yuzey-2);
  border-radius:var(--yaricap-kucuk) var(--yaricap-kucuk) 0 0}
.sekmeler a.aktif,.sekmeler a[aria-current="page"]{color:var(--birincil);
  border-bottom-color:var(--birincil);font-weight:600}

/* kırılım */
.kirilim{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  color:var(--soluk);font-size:var(--yazi-sm);margin:0 0 var(--b-4);
  padding:0;list-style:none}
.kirilim a{color:var(--soluk);text-decoration:none;padding:.35rem 0;
  display:inline-block}
.kirilim a:hover{color:var(--birincil);text-decoration:underline}
.kirilim [aria-current="page"]{color:var(--metin);font-weight:600}
.kirilim .ikon{color:var(--kenar)}

/* sayfalama */
.sayfalama{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  margin-top:var(--b-6)}
.sayfalama a,.sayfalama span{min-height:44px;min-width:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 .8rem;border:1px solid var(--kenar);background:var(--yuzey);
  border-radius:var(--yaricap-kucuk);text-decoration:none;color:var(--metin);
  font-weight:500}
.sayfalama span{border-color:transparent;background:transparent;
  color:var(--soluk)}
.sayfalama a:hover{border-color:var(--birincil);color:var(--birincil)}
.sayfalama a[aria-current="page"]{background:var(--birincil);
  color:var(--birincil-metin);border-color:var(--birincil)}

/* iskelet (yükleniyor) */
.iskelet{background:var(--yuzey-2);border-radius:var(--yaricap-kucuk);
  min-height:1em;animation:ep-iskelet 1.4s ease-in-out infinite;
  color:transparent}
@keyframes ep-iskelet{0%,100%{opacity:1}50%{opacity:.5}}

/* boş / hata durumu */
.bos-durum,.hata-durum{display:grid;gap:.5rem;justify-items:center;
  text-align:center;padding:var(--b-7) var(--b-5);
  border:1px dashed var(--kenar);border-radius:var(--yaricap);
  background:var(--yuzey)}
.hata-durum{border-style:solid;border-color:color-mix(in srgb, var(--hata) 35%, transparent)}
.bos-durum .ikon,.hata-durum .ikon{width:2.5rem;height:2.5rem;
  color:var(--soluk);margin-bottom:.25rem}
.hata-durum .ikon{color:var(--hata)}
.bos-baslik{font-weight:700;font-size:var(--yazi-lg);margin:0}
.bos-aciklama{color:var(--soluk);margin:0;max-width:34rem}
.bos{color:var(--soluk);font-size:var(--yazi-sm);margin:.25rem 0}

/* veri tablosu */
.tablo-kap{overflow-x:auto;border:1px solid var(--kenar);
  border-radius:var(--yaricap);background:var(--yuzey);
  -webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--yazi-sm)}
th,td{text-align:left;padding:.75rem .8rem;border-bottom:1px solid var(--ayrac);
  vertical-align:middle}
thead th{background:var(--yuzey-2);color:var(--soluk);font-weight:600;
  font-size:var(--yazi-xs);letter-spacing:.04em;text-transform:uppercase;
  position:sticky;top:0;z-index:1;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb, var(--yuzey-2) 55%, transparent)}
td a{color:var(--metin);font-weight:600;text-decoration:none}
td a:hover{color:var(--birincil);text-decoration:underline}
.sayi{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hucre-eylem{white-space:nowrap;text-align:right}
.hucre-eylem form{display:inline-block;margin:0}
/* mobil kart modu: `data-etiket` taşıyan hücreler etiketiyle alt alta */
@media (max-width:44rem){
  .tablo-kart thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%)}
  .tablo-kart tr{display:block;padding:.5rem .25rem;
    border-bottom:1px solid var(--ayrac)}
  .tablo-kart tr:last-child{border-bottom:0}
  .tablo-kart td{display:flex;justify-content:space-between;gap:1rem;
    border:0;padding:.35rem .5rem;text-align:left}
  .tablo-kart td[data-etiket]::before{content:attr(data-etiket);
    color:var(--soluk);font-weight:600;font-size:var(--yazi-xs);
    text-transform:uppercase;letter-spacing:.04em;flex:none}
  .tablo-kart td.sayi{text-align:right}
  .tablo-kart td.hucre-eylem{justify-content:flex-end}
}

/* süzgeç ve arama alanları */
.filtre-formu{margin-bottom:var(--b-4)}
.filtre-alanlar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.filtre-alanlar label,.filtre-alanlar .alan{display:flex;flex-direction:column;
  gap:.3rem;flex:1 1 11rem;min-width:0}
.filtre-alanlar input,.filtre-alanlar select{min-height:44px;width:100%}
.filtre-alanlar label:has(input[type=checkbox]){flex-direction:row;
  align-items:center;gap:.5rem;min-height:44px;font-weight:400}
.aktif-filtreler{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  margin:.5rem 0 0}
.arama-alani{position:relative;display:flex;align-items:center}
.arama-alani .ikon{position:absolute;left:.8rem;color:var(--soluk);
  pointer-events:none}
.arama-alani input{padding-left:2.5rem}

/* sayfa başlığı şeridi */
.sayfa-basligi{display:flex;align-items:center;justify-content:space-between;
  gap:var(--b-4);flex-wrap:wrap;margin-bottom:var(--b-4)}
.sayfa-basligi h1{margin:0;font-size:var(--yazi-2xl);line-height:var(--satir-sik);
  letter-spacing:-.01em}
.sayfa-basligi .alt-baslik{margin:.2rem 0 0;color:var(--soluk);
  font-size:var(--yazi-sm)}
.sayfa-eylemler{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.sonuc-sayisi{color:var(--soluk);margin:0;font-size:var(--yazi-sm)}

/* sayı kutuları (KPI) */
.sayi-izgara{display:grid;gap:var(--b-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.sayi-kutu{display:grid;gap:.25rem;padding:1rem 1.1rem;
  background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);box-shadow:var(--golge-1);align-content:start}
.sayi-etiket{color:var(--soluk);font-size:var(--yazi-xs);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.sayi-deger{font-size:var(--yazi-xl);font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.01em}
.degisim{font-size:var(--yazi-xs);color:var(--soluk);font-weight:600}
.degisim.artis{color:var(--basari)}
.degisim.dusus{color:var(--hata)}

/* yardımcılar */
.izgara{display:grid;gap:var(--b-4);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.yigin{display:grid;gap:var(--b-4)}
.kucuk-metin{font-size:var(--yazi-sm);color:var(--soluk)}
.teknik{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;
  font-size:var(--yazi-sm)}
code{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;
  font-size:.9em;background:var(--yuzey-2);padding:.1rem .35rem;
  border-radius:4px}
hr{border:0;border-top:1px solid var(--ayrac);margin:var(--b-5) 0}
/* Ultra cila 2: tablo hücresindeki metin bağlantısı 24 px dokunma alanı (yerleşim değişmez) */
td a{display:inline-block;padding:.2rem 0;margin:-.2rem 0}
/* === ORTAK BİLEŞENLER (bitiş) === */

/* ── vitrin kabuğu ──────────────────────────────────────────────────── */
main{max-width:var(--icerik-genislik);margin:0 auto;
     padding:var(--b-5) var(--b-4) var(--b-7);min-height:50vh}
h1{font-size:var(--yazi-2xl);line-height:var(--satir-sik);margin:0 0 .6rem;
   letter-spacing:-.01em}
h2{font-size:var(--yazi-xl);line-height:var(--satir-sik);margin:2rem 0 .75rem;
   letter-spacing:-.01em}
h3{font-size:var(--yazi-md);margin:1rem 0 .5rem}

.duyuru{background:var(--metin);color:var(--zemin);font-size:var(--yazi-sm);
        padding:.4rem var(--b-4);display:flex;gap:1.5rem;
        justify-content:center;align-items:center;flex-wrap:wrap;
        text-align:center}

.ust{position:sticky;top:0;z-index:var(--z-yapiskan);background:var(--yuzey);
     border-bottom:1px solid var(--kenar)}
.ust-ic{max-width:var(--icerik-genislik);margin:0 auto;
  padding:.6rem var(--b-4);display:grid;align-items:center;gap:.75rem;
  grid-template-columns:auto 1fr auto}
.menu-dugme{display:none}
.marka{font-weight:800;font-size:var(--yazi-lg);text-decoration:none;
       color:var(--metin);white-space:nowrap;min-height:44px;
       display:inline-flex;align-items:center;gap:.5rem;
       letter-spacing:-.01em;min-width:0;max-width:100%}
.marka-metin{overflow:hidden;text-overflow:ellipsis}
.marka-isareti{width:2rem;height:2rem;border-radius:var(--yaricap-kucuk);
  background:var(--birincil);color:var(--birincil-metin);display:inline-flex;
  align-items:center;justify-content:center;font-size:var(--yazi-md);
  font-weight:800;flex:none}
.ara{display:flex;gap:.5rem;justify-self:center;width:100%;max-width:36rem;
     margin:0}
.ara .arama-alani{flex:1}
.ara input{border-radius:var(--yaricap-tam);padding-left:2.6rem;
  background:var(--zemin)}
.ara button{border-radius:var(--yaricap-tam);padding:.6rem 1.2rem}
.ust-eylemler{display:flex;gap:.15rem;align-items:center;
  justify-content:flex-end}
.ust-eylem{display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.1rem;min-height:44px;min-width:44px;
  padding:.3rem .55rem;border-radius:var(--yaricap-kucuk);
  color:var(--metin);text-decoration:none;font-size:var(--yazi-xs);
  font-weight:600;position:relative;line-height:1.2;
  transition:background var(--gecis-hizli),color var(--gecis-hizli)}
.ust-eylem:hover{background:var(--yuzey-2);color:var(--birincil)}
.ust-eylem .ikon{width:22px;height:22px}
.sepet-rozet{position:absolute;top:.15rem;right:.25rem;min-width:1.15rem;
  height:1.15rem;padding:0 .3rem;border-radius:var(--yaricap-tam);
  background:var(--birincil);color:var(--birincil-metin);
  font-size:.68rem;font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;line-height:1}
.sepet-rozet:empty{display:none}
/* Eski sınıf adları (JS/test kancaları) korunur. */
.sepet-baglantisi,.hesap-baglantisi{color:var(--metin)}

.gezinme{background:var(--yuzey);border-bottom:1px solid var(--kenar)}
.gezinme-ic{max-width:var(--icerik-genislik);margin:0 auto;
  padding:.1rem var(--b-4);display:flex;gap:.25rem;align-items:center;
  overflow-x:auto;scrollbar-width:none}
.gezinme-ic::-webkit-scrollbar{display:none}
.gezinme-ic>a{color:var(--metin);text-decoration:none;padding:.5rem .8rem;
  min-height:44px;display:inline-flex;align-items:center;gap:.4rem;
  border-radius:var(--yaricap-kucuk);white-space:nowrap;font-weight:500;
  font-size:var(--yazi-sm)}
.gezinme-ic>a:hover{background:var(--yuzey-2);color:var(--birincil)}
.tum-kategoriler{position:relative;flex:none}
.tum-kategoriler summary{cursor:pointer;font-weight:700;list-style:none;
  padding:.5rem .9rem;min-height:44px;display:inline-flex;align-items:center;
  gap:.5rem;border-radius:var(--yaricap-kucuk);white-space:nowrap;
  font-size:var(--yazi-sm);background:var(--vurgu-zemin);color:var(--birincil)}
.tum-kategoriler summary::-webkit-details-marker{display:none}
.tum-kategoriler summary:hover{background:color-mix(in srgb, var(--vurgu-zemin) 70%, var(--birincil))}
.tum-kategoriler[open] summary{border-radius:var(--yaricap-kucuk) var(--yaricap-kucuk) 0 0}
.tum-kategoriler ul{position:absolute;left:0;top:100%;z-index:var(--z-acilir);
  margin:0;padding:.4rem;list-style:none;min-width:16rem;
  background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:0 var(--yaricap) var(--yaricap) var(--yaricap);
  box-shadow:var(--golge-3)}
.tum-kategoriler li a{display:flex;align-items:center;gap:.5rem;min-height:44px;
  padding:0 .8rem;color:var(--metin);text-decoration:none;
  border-radius:var(--yaricap-kucuk);font-size:var(--yazi-sm)}
.tum-kategoriler li a:hover{background:var(--yuzey-2);color:var(--birincil)}

@media (max-width:56rem){
  /* [menü][marka: kalan alan, taşmaz][eylemler]; arama ikinci satırda. */
  .ust-ic{grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem;
    padding:.5rem var(--b-3)}
  .menu-dugme{display:inline-flex}
  .ara{grid-column:1 / -1;max-width:none;order:4}
  .ust-eylem span:not(.sepet-rozet){font-size:.66rem}
  .ust-eylem{padding:.3rem .25rem;min-width:40px}
  .marka{font-size:var(--yazi-md)}
}

/* ── alt bilgi ──────────────────────────────────────────────────────── */
.alt{border-top:1px solid var(--kenar);margin-top:var(--b-8);
     background:var(--yuzey);color:var(--soluk)}
.alt-ic{max-width:var(--icerik-genislik);margin:0 auto;
  padding:var(--b-6) var(--b-4) var(--b-4)}
.alt-sutunlar{display:grid;gap:var(--b-5);
              grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.alt-marka{margin:0 0 .5rem;font-weight:800;font-size:var(--yazi-lg);
           color:var(--metin)}
.alt-baslik{margin:0 0 .6rem;font-size:var(--yazi-xs);color:var(--metin);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.alt-satir{margin:.2rem 0;font-size:var(--yazi-sm)}
.alt-satir a{min-height:44px;display:inline-flex;align-items:center;
  color:var(--metin);text-decoration:none;gap:.4rem}
.alt-satir a:hover{color:var(--birincil)}
.alt-baglantilar{list-style:none;margin:0;padding:0;display:grid}
.alt-baglantilar a{color:var(--soluk);text-decoration:none;
  min-height:40px;display:inline-flex;align-items:center;
  font-size:var(--yazi-sm)}
.alt-baglantilar a:hover{color:var(--birincil)}
.alt-sosyal{margin-top:var(--b-5)}
.alt-sosyal-liste{display:flex;gap:1rem;flex-wrap:wrap}
.alt-guven{display:flex;flex-wrap:wrap;gap:1.25rem;margin:var(--b-5) 0 0;
  padding-top:var(--b-4);border-top:1px solid var(--ayrac);
  font-size:var(--yazi-sm)}
.alt-guven span{display:inline-flex;align-items:center;gap:.4rem}
.alt-telif{margin:var(--b-4) 0 0;font-size:var(--yazi-xs);
  padding-top:var(--b-4);border-top:1px solid var(--ayrac);display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* ── ana sayfa ──────────────────────────────────────────────────────── */
/* ⛔ HERO METNİ GÖRSELİN ÜSTÜNE BİNMEZ (faz denetimi bulgusu): metin kendi
   sütununda, `--zemin` üstünde; kontrast tam olarak doğrulanmış
   metin/zemin çiftidir (test_gorsel_kirmizi_cizgiler). */
.hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
      overflow:hidden;border-radius:var(--yaricap-buyuk);
      border:1px solid var(--kenar);background:var(--yuzey);
      margin-bottom:var(--b-6);box-shadow:var(--golge-1)}
/* Yükseklik görsel YÜKLENMEDEN bellidir (dış inceleme 5: CLS): oran
   bilinmeyen bir yüklemede min 12rem → intrinsik 22rem'e büyüyüp sayfayı
   kaydırıyordu. Sabit yükseklik + object-fit:cover her oranı kabul eder. */
.hero-gorsel{width:100%;height:clamp(14rem,40vw,22rem);object-fit:cover;
             display:block}
.hero-metin{padding:clamp(1.5rem,4vw,3rem);display:grid;gap:.9rem;
            justify-items:start;align-content:center;min-height:16rem;
            background:var(--zemin)}
.hero-metin h1{margin:0;font-size:clamp(1.6rem,3.2vw,2.4rem);
  line-height:1.15;letter-spacing:-.02em;max-width:22ch}
.hero-alt{margin:0;color:var(--soluk);font-size:var(--yazi-lg);max-width:44ch}
.hero-ustbaslik{font-size:var(--yazi-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--birincil)}
.hero-eylemler{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.25rem}
.hero-desen{position:relative;min-height:14rem;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--birincil) 14%, var(--yuzey)),
    color-mix(in srgb, var(--birincil) 4%, var(--yuzey)) 60%,
    var(--yuzey))}
.hero-desen::after{content:"";position:absolute;inset:auto -3rem -3rem auto;
  width:16rem;height:16rem;border-radius:50%;
  background:color-mix(in srgb, var(--birincil) 12%, transparent)}
.hero-desen::before{content:"";position:absolute;inset:2rem auto auto 2rem;
  width:6rem;height:6rem;border-radius:50%;border:1px solid
  color-mix(in srgb, var(--birincil) 30%, transparent)}

.bolum{margin:var(--b-7) 0}
.bolum h2{margin:0 0 var(--b-4)}
.bolum-basligi{display:flex;align-items:baseline;gap:1rem;
               justify-content:space-between;flex-wrap:wrap;
               margin-bottom:var(--b-4)}
.bolum-basligi h2{margin:0}
.bolum-baglanti{font-size:var(--yazi-sm);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:.25rem;min-height:44px}
.bolum-baglanti:hover{text-decoration:underline}

.guven{display:grid;gap:var(--b-3);margin:var(--b-5) 0;
       grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.guven-madde{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;
  align-items:center;padding:.9rem 1rem;border:1px solid var(--kenar);
  border-radius:var(--yaricap);background:var(--yuzey)}
.guven-madde .ikon{grid-row:1 / 3;width:2.2rem;height:2.2rem;padding:.45rem;
  border-radius:var(--yaricap-kucuk);background:var(--vurgu-zemin);
  color:var(--birincil)}
.guven-madde strong{font-size:var(--yazi-sm)}
.guven-madde span{color:var(--soluk);font-size:var(--yazi-xs)}

.kategori-halkalari{display:flex;gap:.75rem;overflow-x:auto;
  padding:.25rem .25rem .75rem;scroll-snap-type:x proximity;
  scrollbar-width:thin}
/* Masaüstünde kaydırma DEĞİL, iki satırlı ızgara (Reis 30 Ağu: son
   kategori kesiliyordu). 5 sütun = ürün ızgarasıyla aynı ritim. */
@media (min-width:60rem){
  .kategori-halkalari{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    overflow:visible;scroll-snap-type:none;padding-bottom:.25rem}
  .kategori-halka{flex:initial}
}
.kategori-halka{display:grid;justify-items:center;gap:.5rem;flex:0 0 7rem;
  scroll-snap-align:start;text-decoration:none;color:var(--metin);
  padding:.5rem .25rem;border-radius:var(--yaricap)}
.kategori-halka img,.kategori-harf{width:5.4rem;height:5.4rem;
  border-radius:50%;object-fit:cover;background:var(--yuzey-2);
  border:1px solid var(--kenar);transition:transform var(--gecis),
  box-shadow var(--gecis)}
.kategori-harf{display:inline-flex;align-items:center;
  justify-content:center;font-size:1.6rem;font-weight:800;
  color:var(--birincil);background:var(--vurgu-zemin)}
.kategori-ad{font-size:var(--yazi-sm);text-align:center;line-height:1.25;
  font-weight:500}
.kategori-halka:hover img,.kategori-halka:hover .kategori-harf{
  transform:translateY(-2px);box-shadow:var(--golge-2)}
.kategori-halka:hover .kategori-ad{color:var(--birincil)}

/* kategori çipleri (kategori/arama sayfaları) */
.cipler{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 var(--b-4);
  padding:0;list-style:none}
.cip{display:inline-flex;align-items:center;gap:.35rem;min-height:40px;
  padding:0 .9rem;border-radius:var(--yaricap-tam);border:1px solid var(--kenar);
  background:var(--yuzey);color:var(--metin);text-decoration:none;
  font-size:var(--yazi-sm);font-weight:500}
.cip:hover{border-color:var(--birincil);color:var(--birincil)}
.cip[aria-current="page"]{background:var(--birincil);
  color:var(--birincil-metin);border-color:var(--birincil)}

/* ── ürün kartı ─────────────────────────────────────────────────────── */
.kart{position:relative}
article.kart{padding:0;gap:0;display:flex;flex-direction:column;
  overflow:hidden;transition:transform var(--gecis),box-shadow var(--gecis),
  border-color var(--gecis)}
article.kart:hover{transform:translateY(-2px);box-shadow:var(--golge-2);
  border-color:color-mix(in srgb, var(--birincil) 30%, var(--kenar))}
.kart a{text-decoration:none;color:inherit}
.kart-kapak{display:block;aspect-ratio:1;background:var(--yuzey-2);
  overflow:hidden}
.kart-kapak img,.kapak-yok{width:100%;height:100%;aspect-ratio:1;
  object-fit:cover;display:block;background:var(--yuzey-2);
  transition:transform var(--gecis)}
article.kart:hover .kart-kapak img{transform:scale(1.03)}
.kart-rozetler{position:absolute;top:.6rem;left:.6rem;z-index:2;
               display:flex;gap:.35rem;flex-wrap:wrap}
.rozet-indirim,.rozet-yeni{font-size:var(--yazi-xs);font-weight:700;
  padding:.2rem .55rem;border-radius:var(--yaricap-tam);
  border:1px solid var(--kenar);background:var(--yuzey);line-height:1.4}
.rozet-indirim{color:var(--birincil-metin);background:var(--birincil);
  border-color:var(--birincil)}
.rozet-yeni{color:var(--metin)}
.kart-govde{padding:.85rem .9rem 1rem;display:flex;flex-direction:column;
  gap:.45rem;flex:1}
.kart h3{margin:0;font-size:var(--yazi-sm);line-height:1.35;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em}
.kart h3 a:hover{color:var(--birincil)}
.kart .fiyat{margin:0;font-weight:700;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;
  font-size:var(--yazi-lg)}
.kart .fiyat .eski-fiyat{font-weight:400;font-size:var(--yazi-sm);
  color:var(--soluk)}
.kart-stok{margin:0;font-size:var(--yazi-xs);color:var(--basari);
  font-weight:600;display:inline-flex;align-items:center;gap:.3rem}
.stok-yok{margin:0;color:var(--soluk);font-size:var(--yazi-xs);
  font-weight:600}
.kart-sepet{margin:auto 0 0}
.kart-sepet button,.kart-sec{width:100%;min-height:44px;
  font-size:var(--yazi-sm)}
.kart-sec{margin:auto 0 0}
.kart--tukendi .kart-kapak img{opacity:.6;filter:grayscale(.4)}
/* Tükenen ürün: kapak üstünde saydam çapraz filigran (29 Ağu, Reis isteği).
   Metin CSS'te: ekran okuyucu zaten "Stokta yok" satırını okur. */
.kart--tukendi .kart-kapak,.sahne--tukendi{position:relative;overflow:hidden}
/* Ultra cila 1: döndürülmüş şerit sahne dışına taşıp sayfayı 37 px genişletiyordu (360 px). */
.kart--tukendi .kart-kapak::after,.sahne--tukendi::after{content:"TÜKENDİ";
  position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  transform:rotate(-24deg);font-weight:900;letter-spacing:.18em;
  font-size:clamp(1.3rem,9cqw,2.6rem);
  /* ⛔ Çıplak renkti (rgba(190,24,24,.42) + beyaz gölge): mağaza paleti
     değişince filigran eski renkte kalırdı. Saydamlık artık belirteç
     karışımıyla, gölge de yüzey belirteciyle. */
  color:color-mix(in srgb, var(--hata) 42%, transparent);
  text-shadow:0 0 2px var(--yuzey);pointer-events:none;
  container-type:normal}
.kart--tukendi .kart-kapak{container-type:inline-size}
.sahne--tukendi::after{font-size:clamp(2rem,10cqw,4.5rem)}
.sahne--tukendi{container-type:inline-size}
.favori-dugme{position:absolute;top:.6rem;right:.6rem;z-index:2;
              width:44px;height:44px;min-height:44px;border-radius:50%;
              border:1px solid var(--kenar);background:var(--yuzey);
              color:var(--metin);cursor:pointer;padding:0;
              display:inline-flex;align-items:center;justify-content:center;
              box-shadow:var(--golge-1)}
.favori-dugme:hover{color:var(--hata);border-color:var(--hata);
  background:var(--yuzey);box-shadow:var(--golge-2)}
.favori-dugme[aria-pressed="true"]{color:var(--hata);
  border-color:var(--hata);background:var(--hata-zemin)}
.favori-dugme[aria-pressed="true"] .ikon{fill:currentColor}
/* Sütun sayısı ŞERİT boyunun (6) böleni olsun: auto-fill 1440px'te 5 sütun
   veriyordu → 6'lı şerit 5+1 kırılıyordu (dış inceleme P2 "eksik sıra";
   Reis 29 Ağu: vitrin 5 SÜTUN; şerit 5 ürün = tam satır; sayfa boyu 30 =
   5·3·2 ortak katı). <44rem: 2 · ≥44rem: 3 · ≥60rem: 5.
   Şeritler (.izgara--serit) 5 sütun altında YATAY KAYDIRMALI tek satır: 5,
   3'e ve 2'ye bölünmez; kırık satır yerine kaydırma (dış inceleme "carousel"). */
.izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:44rem){.izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:60rem){.izgara{grid-template-columns:repeat(5,minmax(0,1fr));gap:.85rem}}
@media (max-width:59.99rem){
  .izgara--serit{display:flex;overflow-x:auto;gap:.75rem;padding-bottom:.5rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin}
  .izgara--serit>article.kart{flex:0 0 clamp(11rem,42vw,15rem);
    scroll-snap-align:start}
}
@media (max-width:30rem){
  .izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .kart-govde{padding:.65rem .65rem .8rem}
  .kart .fiyat{font-size:var(--yazi-md)}
}

/* ── ürün sayfası ───────────────────────────────────────────────────── */
.urun-sayfa{display:grid;grid-template-columns:14rem minmax(0,1fr) 22rem;
  gap:var(--b-5);align-items:start}
@media (max-width:64rem){
  .urun-sayfa{grid-template-columns:minmax(0,1fr) 20rem}
  .urun-sayfa>.kesif{display:none}
}
@media (max-width:52rem){
  .urun-sayfa{grid-template-columns:1fr}
}
.kesif{position:sticky;top:5.5rem;display:grid;gap:var(--b-4)}
.kesif h2{font-size:var(--yazi-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soluk);margin:0 0 .5rem}
.kesif-kategoriler ul,.kesif-mini ul{list-style:none;margin:0;padding:0}
.kesif-kategoriler li a{display:block;padding:.45rem .5rem;
  border-radius:var(--yaricap-kucuk);color:var(--metin);text-decoration:none;
  font-size:var(--yazi-sm)}
.kesif-kategoriler li a:hover,.kesif-kategoriler li a[aria-current="page"]{
  background:var(--vurgu-zemin);color:var(--birincil)}
.kesif-tumu{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;
  color:var(--birincil);font-size:var(--yazi-sm);font-weight:600;
  text-decoration:none;min-height:40px}
.kesif-mini li a{display:grid;grid-template-columns:3rem 1fr;
  grid-template-rows:auto auto;gap:.1rem .6rem;align-items:center;
  padding:.45rem .25rem;border-bottom:1px solid var(--ayrac);
  text-decoration:none;color:var(--metin)}
.kesif-mini li:last-child a{border-bottom:0}
.kesif-mini img{grid-row:1/3;width:3rem;height:3rem;object-fit:cover;
  border-radius:var(--yaricap-kucuk);border:1px solid var(--kenar)}
.kesif-mini-ad{font-size:var(--yazi-xs);line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kesif-mini-fiyat{font-weight:700;font-size:var(--yazi-sm)}

.urun-gorsel{min-width:0}
.urun-gorsel img{border-radius:var(--yaricap);border:1px solid var(--kenar);
  background:var(--yuzey)}
.sahne-ana{position:relative}
.ana-gorsel{width:100%;aspect-ratio:1;object-fit:contain;display:block;
  background:var(--yuzey)}
.galeri{display:grid;gap:.5rem;margin-top:.5rem;
        grid-template-columns:repeat(auto-fill,minmax(5rem,1fr))}
.galeri[hidden]{display:none}
[data-sahne]{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
[data-sahne]:not([data-sahne-acik]) .serit{display:none}
[data-sahne][data-sahne-acik]{grid-template-columns:4.5rem minmax(0,1fr)}
@media (max-width:52rem){
  [data-sahne][data-sahne-acik]{grid-template-columns:minmax(0,1fr)}
  [data-sahne][data-sahne-acik] .serit{order:2;flex-direction:row;
    max-height:none;overflow-x:auto}
}
.serit{display:flex;flex-direction:column;gap:.5rem;max-height:34rem;
  overflow-y:auto}
.serit-oge{width:4.5rem;min-height:44px;padding:0;border-radius:var(--yaricap-kucuk);
  border:1px solid var(--kenar);background:var(--yuzey);cursor:pointer;
  overflow:hidden;flex:none;box-shadow:none}
.serit-oge:hover{border-color:var(--birincil);box-shadow:none;
  background:var(--yuzey)}
.serit-oge[aria-pressed="true"]{border:2px solid var(--birincil)}
.serit-oge img{width:100%;height:4.5rem;object-fit:cover;display:block;
  border:0;border-radius:0}
.serit-rozetli{font-size:var(--yazi-xs);color:var(--metin);min-height:44px;
  padding:.35rem .25rem;font-weight:600}
[data-buyutec]{cursor:zoom-in}
.donus-ipucu{color:var(--soluk);font-size:var(--yazi-sm);text-align:center;
  margin:.35rem 0 0}
.sahne-ok{position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;min-width:44px;min-height:44px;border-radius:50%;
  border:1px solid var(--kenar);background:var(--yuzey);color:var(--metin);
  padding:0;box-shadow:var(--golge-2)}
.sahne-ok:hover{background:var(--yuzey);color:var(--birincil);
  border-color:var(--birincil)}
.sahne-ok--geri{left:.6rem}
.sahne-ok--ileri{right:.6rem}
.buyutec-kutu{border:0;padding:0;background:transparent;max-width:92vw;
  max-height:92vh}
.buyutec-kutu::backdrop{background:var(--metin);opacity:.82}
.buyutec-kutu img{max-width:92vw;max-height:88vh;display:block;
  border-radius:var(--yaricap)}
.buyutec-kapat{position:fixed;top:.75rem;right:.75rem;min-width:44px;
  min-height:44px;border-radius:50%;border:0;background:var(--yuzey);
  color:var(--metin);padding:0}
.donus-kutu{touch-action:pan-y;cursor:grab;user-select:none;
  -webkit-user-select:none;position:relative}
.donus-kutu:active{cursor:grabbing}
.donus-kutu img{max-width:100%;display:block;margin:0 auto}
.donus-kutu img[hidden]{display:none}
.donus-kutu:focus-visible{outline:2px solid var(--birincil);outline-offset:2px}
.donus-rozet{position:absolute;right:.75rem;bottom:.75rem;
  background:var(--yuzey);color:var(--metin);border:1px solid var(--kenar);
  border-radius:var(--yaricap-tam);padding:.25rem .6rem;
  font-size:var(--yazi-xs);font-weight:600;pointer-events:none}
.teknik-bolum{display:grid;gap:.5rem}
.teknik-bolum>button{justify-self:start}
.teknik{position:relative;display:inline-block;font-family:inherit;
  font-size:inherit}
.nokta{position:absolute;transform:translate(-50%,-50%);
       width:44px;height:44px;min-height:44px;padding:0;border:0;
       background:transparent;cursor:pointer;font-size:var(--yazi-xs);
       display:inline-flex;align-items:center;justify-content:center;
       color:var(--birincil-metin);box-shadow:none}
.nokta::before{content:"";position:absolute;width:1.75rem;height:1.75rem;
  border-radius:50%;background:var(--birincil);z-index:-1;
  box-shadow:var(--golge-2)}
.teknik[data-isaretler="kapali"] .nokta{display:none}
.nokta-listesi{margin:.5rem 0 0;padding-left:1.25rem;
  font-size:var(--yazi-sm)}

.urun-bilgi{display:grid;gap:.75rem;align-content:start;min-width:0}
.urun-baslik-satiri{display:flex;align-items:flex-start;gap:.75rem;
                    justify-content:space-between}
.urun-baslik-satiri .favori-dugme{position:static;flex:none}
.urun-bilgi h1{font-size:var(--yazi-xl);line-height:1.3;margin:0}
.urun-bilgi h2{font-size:var(--yazi-md);margin:.5rem 0 .5rem}
.urun-kategori-etiketi{margin:0;font-size:var(--yazi-xs);color:var(--soluk);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.fiyat-satiri{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0}
.fiyat-satiri .fiyat{font-size:var(--yazi-2xl);font-weight:800;margin:0;
  color:var(--metin);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.eski-fiyat{color:var(--soluk);font-size:var(--yazi-md)}
.kdv-notu{color:var(--soluk);font-size:var(--yazi-xs)}
.varyantlar{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.varyantlar legend{font-weight:600;margin-bottom:.4rem;
  font-size:var(--yazi-sm);color:var(--soluk)}
.varyant-dugme{display:inline-flex;align-items:center;min-height:44px;
  border:1px solid var(--kontrol-kenar);border-radius:var(--yaricap-kucuk);
  padding:.35rem .9rem;cursor:pointer;background:var(--yuzey);
  font-size:var(--yazi-sm);position:relative;font-weight:500}
.varyant-dugme:hover{border-color:var(--birincil)}
.varyant-dugme:has(input:checked){border:2px solid var(--birincil);
  background:var(--vurgu-zemin);font-weight:600}
.varyant-dugme:has(input:disabled){opacity:.5;cursor:not-allowed;
  text-decoration:line-through}
.varyant-dugme input{position:absolute;opacity:0;pointer-events:none}
.varyant-dugme small{margin-left:.35rem;color:var(--soluk)}
.varyant-dugme:has(input:focus-visible){outline:2px solid var(--birincil);
  outline-offset:2px}
.kisa-aciklama{margin:0;color:var(--metin);font-size:var(--yazi-sm);
  line-height:var(--satir)}
.kisa-aciklama a{white-space:nowrap;font-weight:600}
/* ⛔ CTA YAPIŞKAN yalnız geniş ekranda; dar ekranda alt çubuk. */
.sepete-ekle{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:1rem;border-radius:var(--yaricap);border:1px solid var(--kenar);
  background:var(--yuzey);box-shadow:var(--golge-1)}
.sepete-ekle label{font-weight:600;font-size:var(--yazi-sm)}
.adet-kutusu{display:inline-flex;align-items:stretch;border:1px solid
  var(--kontrol-kenar);border-radius:var(--yaricap-kucuk);overflow:hidden;
  background:var(--girdi-zemin)}
.adet-kutusu input{width:3.6rem;min-height:44px;border:0;border-radius:0;
  text-align:center;padding:.4rem .2rem;font-weight:600}
.adet-kutusu input:focus-visible{box-shadow:none;outline:2px solid
  var(--birincil);outline-offset:-2px}
.adet-kutusu button{min-width:44px;min-height:44px;border:0;border-radius:0;
  background:var(--yuzey-2);color:var(--metin);padding:0;box-shadow:none}
.adet-kutusu button:hover{background:var(--kenar);box-shadow:none}
.adet-kutusu button[hidden]{display:none}
.sepete-ekle>button{flex:1;min-width:11rem}
@media (min-width:52rem){
  .sepete-ekle{position:sticky;top:5.75rem;z-index:2}
}
.vurgu-karti{margin:0;padding:1rem 1.1rem;border:1px solid var(--kenar);
  border-radius:var(--yaricap);background:var(--vurgu-zemin);
  font-size:var(--yazi-sm)}
.vurgu-karti h2{margin:0 0 .5rem;font-size:var(--yazi-sm);
  text-transform:uppercase;letter-spacing:.06em;color:var(--soluk)}
.vurgu-karti ul{margin:0;padding-left:1.1rem}
.vurgu-karti li{margin:.2rem 0}
.ozellikler{width:100%;border-collapse:collapse;margin-top:.5rem;
  font-size:var(--yazi-sm)}
.ozellikler th,.ozellikler td{text-align:left;padding:.5rem .6rem;
  border-bottom:1px solid var(--ayrac)}
.ozellikler th{color:var(--soluk);font-weight:600}
.ozellikler thead th{font-size:var(--yazi-xs);letter-spacing:.05em;
  text-align:left;border-bottom:2px solid var(--ayrac);background:transparent;
  position:static;text-transform:uppercase}
.temel-bilgiler .ozellikler tbody tr:nth-child(even){background:var(--yuzey)}
.temel-bilgiler .ozellikler th[scope=row]{font-weight:600;color:var(--metin)}
.temel-devami summary{cursor:pointer;color:var(--birincil);font-weight:600;
  padding:.5rem .25rem;min-height:44px;display:flex;align-items:center;
  font-size:var(--yazi-sm)}
.stok-kargo{border:1px solid var(--kenar);border-radius:var(--yaricap);
  padding:.85rem 1rem;background:var(--yuzey);font-size:var(--yazi-sm);
  display:grid;gap:.35rem}
.stok-kargo p{margin:0;display:flex;gap:.5rem;align-items:center}
.stok-rozeti{color:var(--basari);font-weight:700}
.stok-rozeti--yok{color:var(--soluk)}
.kargo-kalan{display:block;font-size:var(--yazi-xs);color:var(--soluk);
  margin:.35rem 0 .25rem}
.kargo-cubuk{display:block;height:.5rem;border-radius:.25rem;
  background:var(--ayrac);overflow:hidden}
.kargo-cubuk-dolu{display:block;height:100%;width:0;
  background:var(--birincil);border-radius:inherit;
  transition:width var(--gecis)}
.tam-aciklama{max-width:76ch}
.aciklama-tam{line-height:var(--satir)}
.aciklama-tam h2{font-size:var(--yazi-lg);margin:1rem 0 .4rem}
.aciklama-tam h3{font-size:var(--yazi-md);margin:.8rem 0 .3rem}
.aciklama-tam p{margin:.5rem 0}
.aciklama-tam ul,.aciklama-tam ol{margin:.5rem 0;padding-left:1.4rem}
.aciklama-tam blockquote{margin:.6rem 0;padding:.4rem .8rem;
  border-left:3px solid var(--birincil);color:var(--soluk)}
.aciklama-tam img{max-width:100%;height:auto;border-radius:var(--yaricap-kucuk)}
.metin-orta{text-align:center}
.metin-sag{text-align:right}
.ilgili-yazilar ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ilgili-yazilar li{padding:.75rem 1rem;border:1px solid var(--kenar);
  border-radius:var(--yaricap);background:var(--yuzey)}
.ilgili-yazilar .ozet{display:block;color:var(--soluk);
  font-size:var(--yazi-sm)}
/* mobil alt satın alma çubuğu (JS ile gösterilir; JS'siz yapışkan kutu yok) */
.mobil-cta{display:none}
@media (max-width:52rem){
  .mobil-cta{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-yapiskan);
    background:var(--yuzey);border-top:1px solid var(--kenar);
    padding:.6rem var(--b-4);display:flex;align-items:center;gap:.75rem;
    box-shadow:var(--golge-3)}
  .mobil-cta[hidden]{display:none}
  .mobil-cta .fiyat{margin:0;font-weight:800;font-size:var(--yazi-lg)}
  .mobil-cta button{flex:1}
  body.mobil-cta-var main{padding-bottom:5.5rem}
}

/* ── hukuk / yasal / iletişim ───────────────────────────────────────── */
.hukuk-metni{max-width:72ch;background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);padding:var(--b-5)}
.hukuk-metni p{line-height:1.7;margin:.6rem 0}
.hukuk-metni a{display:inline-flex;align-items:center;gap:.4rem;
  min-height:44px}
.hukuk-dipnot{color:var(--soluk);font-size:var(--yazi-xs);margin-top:1rem}
.iletisim-duzen{display:grid;gap:var(--b-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  align-items:start}
.iletisim-form{margin:0}
.iletisim-kunye{display:grid;gap:.6rem}
.iletisim-kunye p{margin:0;display:flex;gap:.6rem;align-items:center}
.iletisim-kunye .ikon{color:var(--birincil);flex:none}

/* ── tek kutu (hata · sipariş sonucu · hesap formları) ──────────────── */
.tek-kutu{max-width:38rem;margin:var(--b-6) auto;padding:var(--b-6);
          border:1px solid var(--kenar);border-radius:var(--yaricap-buyuk);
          background:var(--yuzey);box-shadow:var(--golge-2);text-align:center;
          display:grid;gap:.75rem;justify-items:center}
.tek-kutu h1{margin:0}
.tek-kutu p{margin:0;color:var(--soluk)}
.tek-kutu .ikon-kap{width:4rem;height:4rem;border-radius:50%;
  background:var(--vurgu-zemin);color:var(--birincil);display:inline-flex;
  align-items:center;justify-content:center}
.tek-kutu .ikon-kap .ikon{width:2rem;height:2rem}
.tek-kutu-basari .ikon-kap{background:var(--basari-zemin);color:var(--basari)}
.tek-kutu-hata .ikon-kap{background:var(--hata-zemin);color:var(--hata)}
.kutu-eylem{margin-top:.5rem;display:flex;gap:.6rem;flex-wrap:wrap;
  justify-content:center}
.siparis-no{font-size:var(--yazi-lg);user-select:all;color:var(--metin)}
.siparis-no strong{display:inline-block;padding:.25rem .75rem;
  background:var(--yuzey-2);border-radius:var(--yaricap-kucuk);
  font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.hesap-form-kap{max-width:28rem;margin:var(--b-5) auto;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:var(--yaricap-buyuk);
  padding:var(--b-6);box-shadow:var(--golge-2)}
.hesap-form-kap h1{margin:0 0 .35rem;font-size:var(--yazi-xl)}
.hesap-form-kap .kucuk-metin{margin:0 0 var(--b-4)}
.hesap-form{display:grid;gap:.85rem}
.hesap-form label{margin-top:0}
.hesap-form button{margin-top:.5rem;width:100%}
.hesap-alt{margin:.75rem 0 0;color:var(--soluk);font-size:var(--yazi-sm);
  text-align:center}
.hesap-alt a{display:inline-block;padding:.5rem 0;font-weight:600}
.fatura-alanlari{display:grid;gap:.6rem;border:1px solid var(--kenar);
  border-radius:var(--yaricap);padding:1rem;margin:0;
  background:var(--zemin)}
.fatura-alanlari legend{font-weight:700;padding:0 .35rem;
  font-size:var(--yazi-sm)}
.gizli-alan{display:none}

/* ── hesabım ────────────────────────────────────────────────────────── */
.hesap-duzen{display:grid;gap:var(--b-5);
  grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:start}
@media (max-width:52rem){.hesap-duzen{grid-template-columns:1fr}}
.hesap-kimlik{display:flex;gap:.9rem;align-items:center;padding:1rem;
  border:1px solid var(--kenar);border-radius:var(--yaricap);
  background:var(--yuzey)}
.hesap-kimlik p{margin:0}
.hesap-avatar{width:3rem;height:3rem;border-radius:50%;
  background:var(--vurgu-zemin);color:var(--birincil);display:inline-flex;
  align-items:center;justify-content:center;font-weight:800;flex:none;
  font-size:var(--yazi-lg)}
.hesap-menu{display:grid;gap:.25rem;margin:0;padding:.35rem;
  border:1px solid var(--kenar);border-radius:var(--yaricap);
  background:var(--yuzey)}
.hesap-karti{display:flex;align-items:center;gap:.6rem;min-height:44px;
  padding:0 .9rem;text-decoration:none;color:var(--metin);
  border-radius:var(--yaricap-kucuk);font-weight:500;font-size:var(--yazi-sm)}
.hesap-karti:hover,.hesap-karti[aria-current="page"]{
  background:var(--vurgu-zemin);color:var(--birincil);font-weight:600}
.hesap-toplam{margin-top:1rem;font-size:var(--yazi-lg);text-align:right}
.favori-kart{display:grid;gap:.5rem}
.favori-cikar{margin:0}
.favori-cikar button{width:100%}
.dogrulama-uyarisi{display:grid;gap:.5rem}

/* ── sepet ve kasa ──────────────────────────────────────────────────── */
.sepet-duzen,.kasa{display:grid;gap:var(--b-5);
                   grid-template-columns:minmax(0,1fr) minmax(0,22rem);
                   align-items:start}
@media (max-width:56rem){
  .sepet-duzen,.kasa{grid-template-columns:1fr}
}
.sepet-ozet,.kasa-ozet{padding:1.25rem;border:1px solid var(--kenar);
                       border-radius:var(--yaricap);background:var(--yuzey);
                       box-shadow:var(--golge-1);display:grid;gap:.6rem}
@media (min-width:56rem){
  .sepet-ozet{position:sticky;top:5.75rem}
}
.sepet-ozet h2,.kasa-ozet h2{margin:0 0 .25rem;font-size:var(--yazi-lg)}
.kutu-satiri{display:flex;justify-content:space-between;gap:1rem;margin:0;
  font-size:var(--yazi-sm)}
.kutu-satiri.toplam{font-size:var(--yazi-lg);padding-top:.6rem;
  border-top:1px solid var(--ayrac);font-weight:700}
.sepet-ozet .dugme,.sepet-ozet button{width:100%;margin-top:.35rem}
.sepet-tablo{width:100%;border-collapse:collapse}
.sepet-tablo th,.sepet-tablo td{text-align:left;padding:.75rem .5rem;
  border-bottom:1px solid var(--ayrac);vertical-align:middle}
.sepet-tablo thead th{background:transparent;position:static}
.sepet-tablo td.sayi,.sepet-tablo th.sayi{text-align:right}
.sepet-tablo form{margin:0}
.sepet-urun{display:flex;gap:.8rem;align-items:center}
.sepet-urun img{width:4rem;height:4rem;object-fit:cover;flex:none;
  border-radius:var(--yaricap-kucuk);border:1px solid var(--kenar);
  background:var(--yuzey-2)}
.sepet-urun a{font-weight:600;text-decoration:none;color:var(--metin)}
.sepet-urun a:hover{color:var(--birincil)}
.adet-form{display:flex;gap:.35rem;align-items:center}
.adet-form .adet-kutusu input{width:3.2rem}
.adet-form button.ikincil{min-height:44px}
.varyant{color:var(--soluk);font-size:var(--yazi-xs);display:block}
.cikar-dugme{color:var(--soluk);border-color:transparent;background:transparent;
  padding:0 .5rem;box-shadow:none}
.cikar-dugme:hover{color:var(--hata);background:var(--hata-zemin);box-shadow:none}
@media (max-width:44rem){
  .sepet-tablo thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%)}
  .sepet-tablo tr{display:grid;grid-template-columns:1fr auto;gap:.35rem .75rem;
    padding:.75rem 0;border-bottom:1px solid var(--ayrac)}
  .sepet-tablo td{display:block;border:0;padding:0}
  .sepet-tablo td:first-child{grid-column:1 / -1}
  .sepet-tablo td.sayi{text-align:right;font-weight:700}
  .sepet-tablo td[data-etiket]::before{content:attr(data-etiket) " ";
    color:var(--soluk);font-size:var(--yazi-xs)}
  .kasa-ozet .sepet-tablo tr{grid-template-columns:1fr auto}
}
.kasa-adimlar{display:flex;gap:0;margin:0 0 var(--b-5);padding:0;
  list-style:none;counter-reset:adim}
.kasa-adimlar li{flex:1;display:flex;align-items:center;gap:.5rem;
  font-size:var(--yazi-sm);color:var(--soluk);position:relative;
  padding:.5rem .25rem;min-width:0}
.kasa-adimlar li::before{counter-increment:adim;content:counter(adim);
  width:1.8rem;height:1.8rem;border-radius:50%;border:2px solid var(--kenar);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;flex:none;background:var(--yuzey);font-size:var(--yazi-xs)}
.kasa-adimlar li::after{content:"";flex:1;height:2px;background:var(--ayrac);
  margin-left:.5rem}
.kasa-adimlar li:last-child::after{display:none}
.kasa-adimlar li[aria-current="step"]{color:var(--metin);font-weight:700}
.kasa-adimlar li[aria-current="step"]::before{border-color:var(--birincil);
  background:var(--birincil);color:var(--birincil-metin)}
.kasa-adimlar li.tamam{color:var(--basari)}
.kasa-adimlar li.tamam::before{border-color:var(--basari);
  background:var(--basari);color:var(--birincil-metin);content:"✓"}
.kasa-adimlar li.tamam::after{background:var(--basari)}
@media (max-width:30rem){
  .kasa-adimlar li span{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%)}
  .kasa-adimlar li[aria-current="step"] span{position:static;width:auto;
    height:auto;clip-path:none}
}
.kasa-form{display:grid;gap:var(--b-4)}
.kasa-bolum{background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);padding:var(--b-5);display:grid;gap:.85rem}
.kasa-bolum h2{margin:0;font-size:var(--yazi-lg);display:flex;
  align-items:center;gap:.5rem}
.kasa-bolum h2 .ikon{color:var(--birincil)}
.kasa-ozet-mobil{display:none}
@media (max-width:56rem){
  .kasa-ozet-mobil{display:block;margin-bottom:var(--b-4)}
  .kasa-ozet-mobil summary{cursor:pointer;min-height:44px;display:flex;
    align-items:center;justify-content:space-between;padding:.6rem 1rem;
    background:var(--yuzey);border:1px solid var(--kenar);
    border-radius:var(--yaricap);font-weight:600}
  .kasa-ozet-mobil[open] summary{border-radius:var(--yaricap) var(--yaricap) 0 0}
  .kasa-ozet-mobil .kasa-ozet{border-radius:0 0 var(--yaricap) var(--yaricap);
    border-top:0}
  .kasa>.kasa-ozet{display:none}
}
.kasa-guven{display:flex;gap:.5rem;align-items:center;color:var(--soluk);
  font-size:var(--yazi-xs);margin:0}

/* ── blog ───────────────────────────────────────────────────────────── */
.blog-kategoriler ul{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;
  margin:0 0 var(--b-4);padding:0}
.blog-kategoriler a{display:inline-flex;align-items:center;min-height:40px;
  padding:0 .9rem;border-radius:var(--yaricap-tam);
  border:1px solid var(--kenar);background:var(--yuzey);color:var(--metin);
  text-decoration:none;font-size:var(--yazi-sm);font-weight:500}
.blog-kategoriler a:hover,.blog-kategoriler a[aria-current="page"]{
  border-color:var(--birincil);color:var(--birincil)}
.blog-listesi{grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.blog-kart{background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);overflow:hidden;display:flex;
  flex-direction:column;transition:transform var(--gecis),box-shadow var(--gecis)}
.blog-kart:hover{transform:translateY(-2px);box-shadow:var(--golge-2)}
.blog-kart>a img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:var(--yuzey-2)}
.blog-kart h2,.blog-kart h3{margin:0;font-size:var(--yazi-md);line-height:1.35;
  padding:.9rem .9rem 0}
.blog-kart h2 a,.blog-kart h3 a{color:var(--metin);text-decoration:none}
.blog-kart h2 a:hover,.blog-kart h3 a:hover{color:var(--birincil)}
.blog-kategori{margin:.35rem .9rem 0;font-size:var(--yazi-xs)}
.blog-kategori a{text-decoration:none;font-weight:600}
.blog-ozet,.blog-kart .ozet{margin:.5rem .9rem 1rem;color:var(--soluk);
  font-size:var(--yazi-sm);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.blog-yazi{max-width:72ch;margin:0 auto}
.blog-yazi header h1{font-size:var(--yazi-3xl);line-height:1.15}
.blog-ustveri{color:var(--soluk);font-size:var(--yazi-sm);display:flex;
  gap:.5rem;flex-wrap:wrap;align-items:center}
.blog-kapak{margin:var(--b-4) 0}
.blog-kapak img{width:100%;border-radius:var(--yaricap);border:1px solid
  var(--kenar)}
.blog-govde{line-height:1.7;font-size:var(--yazi-lg)}
.blog-govde h2{font-size:var(--yazi-xl);margin:1.5rem 0 .5rem}
.blog-govde h3{font-size:var(--yazi-lg)}
.blog-govde blockquote{margin:1rem 0;padding:.5rem 1rem;
  border-left:3px solid var(--birincil);color:var(--soluk)}
.blog-govde figure{margin:1rem 0}
.blog-govde img{border-radius:var(--yaricap)}
.blog-etiketler ul{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;
  padding:0;margin:var(--b-5) 0 0}
.blog-etiketler a{display:inline-flex;align-items:center;min-height:40px;
  padding:0 .8rem;border-radius:var(--yaricap-tam);
  background:var(--yuzey-2);color:var(--metin);text-decoration:none;
  font-size:var(--yazi-sm)}
.blog-urunler{margin-top:var(--b-7)}
.blog-liste-aciklama{color:var(--soluk);margin:-.5rem 0 var(--b-4)}

/* ── banner şeridi ──────────────────────────────────────────────────── */
.banner-serit{display:flex;gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:.25rem 0 .75rem;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.banner-kart{flex:0 0 min(80%,26rem);scroll-snap-align:start;
  position:relative;display:block;border-radius:var(--yaricap);
  overflow:hidden;border:1px solid var(--kenar);
  background:var(--yuzey);text-decoration:none;min-height:44px}
.banner-kart img{display:block;width:100%;height:auto;max-height:16rem;
  object-fit:cover}
.banner-baslik{position:absolute;left:0;right:0;bottom:0;
  padding:.6rem .9rem;background:var(--zemin);color:var(--metin);
  font-weight:600;font-size:var(--yazi-sm)}

/* ── izin bandı ─────────────────────────────────────────────────────── */
.izin-bandi{position:fixed;left:1rem;right:1rem;bottom:1rem;
  z-index:var(--z-toast);background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);box-shadow:var(--golge-3);
  padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;
  align-items:center;justify-content:space-between;max-width:64rem;
  margin:0 auto}
.izin-verildi .izin-bandi{display:none}
.izin-bandi p{margin:0;max-width:36rem;font-size:var(--yazi-sm)}
.izin-form{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.izin-eylemler{display:flex;gap:.5rem;flex-wrap:wrap}
.izin-secim summary{cursor:pointer;min-height:44px;display:flex;
  align-items:center;color:var(--birincil);font-weight:600;
  font-size:var(--yazi-sm);padding:0 .5rem}
.izin-secim[open]{background:var(--yuzey-2);padding:.5rem;
  border-radius:var(--yaricap-kucuk);flex-basis:100%}
.izin-secim label{display:flex;align-items:center;gap:.5rem;min-height:44px;
  font-weight:400}
@media (max-width:44rem){
  .izin-bandi{left:.5rem;right:.5rem;bottom:.5rem;padding:.85rem 1rem}
  .izin-eylemler{width:100%}
  .izin-eylemler button{flex:1}
}

/* ── mobil menü çekmecesi (JS; vitrin.js) ──────────────────────────── */
.cekmece-kategoriler{margin:0;padding:0;list-style:none}
/* A1: sepette ürün görseli */
.sepet-urun{display:flex;gap:.7rem;align-items:center}
.sepet-gorsel{flex:0 0 64px;width:64px;height:64px;border:1px solid var(--kenar);border-radius:.5rem;overflow:hidden;display:grid;place-items:center;background:var(--yuzey)}
.sepet-gorsel img{width:100%;height:100%;object-fit:cover;display:block}
.sepet-gorsel-bos{color:var(--soluk)}
/* A3: kategori sıralama/süzgeç */
.suzgec{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:end;margin:.5rem 0 1rem;padding:.75rem 1rem;border:1px solid var(--kenar);border-radius:.6rem;background:var(--yuzey)}
.suzgec label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
.suzgec label.onay-satiri{flex-direction:row;align-items:center;gap:.4rem}
.suzgec select,.suzgec input[type=text]{padding:.4rem .5rem;border:1px solid var(--kenar);border-radius:.4rem;background:var(--zemin)}
/* A7: kategori açıklaması + SSS */
.kategori-aciklama{max-width:70ch;margin:0 0 1rem;color:var(--soluk)}
.kategori-aciklama p{margin:0 0 .6rem}
.sss{margin:2rem 0 1rem;max-width:80ch}
.sss details{border:1px solid var(--kenar);border-radius:.5rem;padding:.6rem .9rem;margin:.5rem 0;background:var(--yuzey)}
.sss summary{cursor:pointer;font-weight:600}
.sss details p{margin:.6rem 0 0}
/* g0037: beden tablosu */
.beden-tablosu{margin:1.5rem 0}
.beden-tablosu table{border-collapse:collapse;width:100%;font-size:var(--yazi-sm)}
.beden-tablosu th,.beden-tablosu td{border:1px solid var(--kenar);padding:.45rem .6rem;text-align:center}
.beden-tablosu th{background:var(--yuzey-2)}
/* Dilim C: menüde alt kategoriler (tek seviye, girintili) */
.tum-kategoriler ul.alt-kategoriler{position:static;display:block;box-shadow:none;border:0;
  padding:0 0 .25rem 1.6rem;margin:0;min-width:0;background:transparent}
.tum-kategoriler ul.alt-kategoriler li a{min-height:36px;font-size:var(--yazi-sm);color:var(--soluk)}
.tum-kategoriler ul.alt-kategoriler li a:hover{color:var(--birincil)}

/* ── ürün videosu (tıkla-yükle) + avantajlar + kazanç ───────────────── */
/* ⛔ Uzak kapak görseli YOK: `i.ytimg.com` çekmek, ziyaretçi videoyu
   oynatmadan üçüncü tarafa istek göndermek olurdu — tıkla-yükle deseninin
   varlık sebebini yok ederdi. Kare yerel bir yüzey + oynat işaretidir. */
.galeri-video{position:relative;display:flex;align-items:center;
  justify-content:center;aspect-ratio:1;border-radius:var(--yaricap);
  background:var(--yuzey-2);border:1px solid var(--kenar);
  text-decoration:none;color:var(--metin)}
.galeri-video:hover{border-color:var(--birincil)}
.galeri-video-oynat{display:grid;place-items:center;width:3rem;height:3rem;
  border-radius:var(--yaricap-tam);background:var(--birincil);
  color:var(--birincil-metin);font-size:1.1rem;line-height:1}
/* Sağlayıcı adı METİNLE yazılır: nereye gidileceği tıklamadan ÖNCE
   bilinmeli (WCAG bağlam kuralı + gizlilik beyanı). */
.galeri-video-not{position:absolute;bottom:.4rem;
  font-size:var(--yazi-xs);color:var(--soluk)}
.galeri-video-cerceve{width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--yaricap);background:var(--yuzey-2)}

.avantajlar{list-style:none;margin:var(--b-4) 0;padding:0;display:grid;
  gap:.35rem}
.avantajlar li{display:flex;align-items:flex-start;gap:.5rem;
  font-size:var(--yazi-sm)}
.avantajlar .ikon{color:var(--basari);flex:none;margin-top:.15rem}

.kazanc-satiri{display:flex;align-items:center;gap:.4rem;margin:.2rem 0 0;
  font-size:var(--yazi-sm);color:var(--basari)}

/* ── yıldız · değerlendirme ─────────────────────────────────────────── */
/* ⛔ ANLAM RENGE İNDİRGENMEZ (WCAG 1.4.1): yıldızların yanında sayısal
   puan ve adet HER ZAMAN metinle yazılır; `aria-label` da tam cümledir. */
.yildizlar{display:inline-flex;align-items:center;gap:.3rem;
  font-size:var(--yazi-sm)}
.yildiz-sira{display:inline-flex}
.yildiz-dolu{color:var(--uyari-renk)}
.yildiz-bos{color:var(--kenar)}
.yildiz-sayi{font-weight:700}
.yildiz-adet{color:var(--soluk)}

.puan-satiri{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:.2rem 0 .6rem;font-size:var(--yazi-sm)}
.tavsiye-orani{color:var(--basari);font-weight:600}

.yorum-ozet{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:0;color:var(--soluk);font-size:var(--yazi-sm)}
.yorum-kapi{margin:var(--b-4) 0;padding:var(--b-4);
  border:1px dashed var(--kenar);border-radius:var(--yaricap);
  color:var(--soluk);font-size:var(--yazi-sm)}
.yorum-formu{display:grid;gap:var(--b-3);margin:var(--b-4) 0}
.puan-secim,.tavsiye-secim{border:1px solid var(--kenar);
  border-radius:var(--yaricap-kucuk);padding:var(--b-3);margin:0}
.puan-secim legend,.tavsiye-secim legend{padding:0 .4rem;font-weight:600}
.puan-secenek{display:inline-flex;align-items:center;gap:.35rem;
  margin-right:.8rem;min-height:44px}

.yorum-listesi{list-style:none;margin:var(--b-4) 0 0;padding:0;
  display:grid;gap:var(--b-4)}
.yorum{border-top:1px solid var(--ayrac);padding-top:var(--b-4)}
.yorum-ust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.yorum-tarih{color:var(--soluk);font-size:var(--yazi-sm)}
/* "Doğrulanmış alıcı" rozeti GERÇEK bir veriden gelir: yorum yazabilmek
   için o ürünün kargolanmış bir siparişi şarttır. */
.rozet-dogrulanmis{display:inline-flex;align-items:center;gap:.25rem;
  font-size:var(--yazi-xs);font-weight:600;color:var(--basari)}
.yorum-baslik{font-weight:700;margin:.3rem 0 .2rem}
.yorum-metin{margin:.2rem 0;white-space:pre-line}
.yorum-tavsiye{display:flex;align-items:center;gap:.3rem;margin:.3rem 0 0;
  font-size:var(--yazi-sm);color:var(--basari)}

/* Paylaş: düğmeler ve düz bağlantılar AYNI görünür (ikisi de tek tıkla
   bir iş yapar); dokunma hedefi 44px (WCAG 2.5.8). */
.paylas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin:var(--b-3) 0}
.paylas-etiket{display:inline-flex;align-items:center;gap:.3rem;
  color:var(--soluk);font-size:var(--yazi-sm);font-weight:600}
.paylas-dugme{display:inline-flex;align-items:center;gap:.3rem;
  min-height:44px;padding:0 .7rem;border:1px solid var(--kenar);
  border-radius:var(--yaricap-kucuk);background:var(--yuzey);
  color:var(--metin);font-size:var(--yazi-sm);text-decoration:none;
  cursor:pointer}
.paylas-dugme:hover{border-color:var(--vurgu)}
.paylas-bilgi{flex-basis:100%;color:var(--basari);font-size:var(--yazi-sm)}

/* Soru-cevap: listede YALNIZ cevaplanmış sorular vardır, o yüzden cevap
   satırı her zaman çizilir (koşullu bir boşluk bırakmaz). */
.soru-kapi{margin:var(--b-4) 0;padding:var(--b-4);
  border:1px dashed var(--kenar);border-radius:var(--yaricap);
  color:var(--soluk);font-size:var(--yazi-sm)}
.soru-formu{display:grid;gap:var(--b-3);margin:var(--b-4) 0}
.soru-listesi{list-style:none;margin:var(--b-4) 0 0;padding:0;
  display:grid;gap:var(--b-4)}
.soru{border-top:1px solid var(--ayrac);padding-top:var(--b-4)}
.soru-ust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.soru-tarih{color:var(--soluk);font-size:var(--yazi-sm)}
.soru-metin{margin:.3rem 0;font-weight:600;white-space:pre-line}
.soru-cevap{display:flex;align-items:flex-start;gap:.4rem;
  margin:.2rem 0 0;padding-left:var(--b-3);
  border-left:2px solid var(--basari);white-space:pre-line}
/* Ultra cila 2: satır içi metin bağlantıları (kart başlığı, blog kategorisi, kısa açıklama) 24 px dokunma alanı */
.kart-govde h3 a,.blog-kategori a,.kisa-aciklama a{display:inline-block;padding:.2rem 0;margin:-.2rem 0}
.blog-kart h2 a{display:inline-block;padding:.2rem 0;margin:-.2rem 0}
.cip{min-width:44px;justify-content:center}

/* ── duyuru bandı (5 Eyl 2026): dönen satırlar ────────────────────────── */
.duyuru--donen{position:relative;min-height:2rem}
.duyuru-oge{color:inherit;text-decoration:none;display:inline-block;padding:.15rem 0;
  transition:opacity var(--gecis-hizli),transform var(--gecis-hizli)}
a.duyuru-oge{text-decoration:underline;text-underline-offset:.2em}
.duyuru-oge.duyuru-oge--cikiyor{opacity:0;transform:translateY(-.5rem)}
.duyuru-oge.duyuru-oge--giriyor{opacity:0;transform:translateY(.5rem)}

/* ── destek başlatıcı + sohbet paneli (5 Eyl 2026) ────────────────────── */
.destek{position:fixed;right:1rem;bottom:1rem;z-index:var(--z-acilir);display:grid;
  justify-items:end;gap:.5rem;--destek-alt:0px;transform:translateY(calc(-1 * var(--destek-alt)))}
.destek-dugme{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.1rem;
  border-radius:999px;background:var(--birincil);color:var(--birincil-metin);border:0;
  box-shadow:var(--golge);font-weight:700;cursor:pointer;
  text-decoration:none;position:relative}
.destek-dugme:hover,.destek-dugme:focus-visible{filter:brightness(1.08)}
.destek-rozet{position:absolute;top:-.35rem;right:-.35rem;min-width:1.35rem;height:1.35rem;
  border-radius:999px;background:var(--hata);color:var(--girdi-zemin);font-size:var(--yazi-xs);
  display:grid;place-items:center;padding:0 .3rem}
.destek-menu{display:grid;gap:.25rem;background:var(--yuzey);border:1px solid var(--kenar);
  border-radius:var(--yaricap);padding:.5rem;box-shadow:var(--golge);
  min-width:14rem}
.destek-secenek{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:.4rem .7rem;
  border-radius:var(--yaricap-kucuk);color:var(--metin);text-decoration:none;background:none;
  border:0;font:inherit;cursor:pointer;text-align:left;width:100%}
.destek-secenek:hover,.destek-secenek:focus-visible{background:var(--vurgu-zemin)}
.destek-saat{margin:.25rem .7rem 0;font-size:var(--yazi-xs);color:var(--soluk)}
.destek-panel{width:min(22rem,calc(100vw - 2rem));height:min(30rem,calc(100vh - 6rem));
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;background:var(--yuzey);
  border:1px solid var(--kenar);border-radius:var(--yaricap);
  box-shadow:var(--golge);overflow:hidden}
.destek-baslik{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;
  border-bottom:1px solid var(--kenar);background:var(--zemin)}
.destek-baslik strong{flex:1}
.destek-durum{width:.6rem;height:.6rem;border-radius:999px;background:var(--soluk)}
.destek-durum.cevrimici{background:var(--basari)}
.destek-karsilama{margin:0;padding:.5rem .75rem;font-size:var(--yazi-sm);color:var(--soluk)}
.destek-karsilama:empty{display:none}
.destek-mesajlar{overflow-y:auto;padding:.5rem .75rem;display:grid;gap:.4rem;align-content:start}
.destek-balon{max-width:85%;padding:.5rem .7rem;border-radius:var(--yaricap);
  font-size:var(--yazi-sm);white-space:pre-wrap;overflow-wrap:anywhere}
.destek-balon--musteri{justify-self:end;background:var(--birincil);color:var(--birincil-metin)}
.destek-balon--operator,.destek-balon--yapay_zeka{justify-self:start;background:var(--vurgu-zemin)}
.destek-balon small{display:block;margin-top:.2rem;font-size:var(--yazi-xs);opacity:.75}
.destek-form{display:grid;gap:.4rem;padding:.5rem .75rem;border-top:1px solid var(--kenar)}
.destek-form textarea{resize:none;min-height:2.6rem}
.destek-form button[type="submit"]{justify-self:end;min-height:40px}
.destek-kimlik{display:grid;gap:.4rem}
.destek-kimlik label{display:grid;gap:.15rem;font-size:var(--yazi-xs)}
.destek-hata{margin:0;padding:.4rem .75rem;font-size:var(--yazi-sm);color:var(--hata)}
@media (max-width:48rem){
  .destek{right:.75rem;bottom:.75rem}
  .destek-dugme span:not(.destek-rozet){display:none}
  .destek-dugme{width:52px;height:52px;padding:0;justify-content:center}
  .destek-panel{width:calc(100vw - 1.5rem);height:min(28rem,calc(100vh - 5rem))}
  body.mobil-cta-var .destek{--destek-alt:5rem}
}
@media (prefers-reduced-motion:reduce){.duyuru-oge{transition:none}}

/* ── ürün etiketleri (5 Eyl 2026): kart görseli üstü rozetler ─────────── */
.kart-rozetler{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;max-width:calc(100% - 3.5rem)}
.rozet-etiket{font-size:var(--yazi-xs);font-weight:700;line-height:1;padding:.3rem .5rem;
  border-radius:var(--yaricap-kucuk);background:var(--yuzey);color:var(--metin);
  border:1px solid var(--kenar);white-space:nowrap}
.rozet--avantajli{background:var(--birincil);color:var(--birincil-metin);border-color:var(--birincil)}
.rozet--kampanya,.rozet--kupon{border-color:var(--birincil);color:var(--birincil)}
.rozet--cok_satan,.rozet--cok_sevilen{background:var(--metin);color:var(--zemin);border-color:var(--metin)}
.rozet-video{position:absolute;right:.6rem;bottom:.6rem;z-index:2;width:28px;height:28px;
  border-radius:999px;background:var(--metin);color:var(--zemin);display:grid;place-items:center;
  opacity:.9;pointer-events:none}
.kart{position:relative}

/* ürün sayfası: görsel üstü etiketler (kartla aynı parça; 5 Eyl 2026) */
.sahne-ana [data-mod="gorsel"]{position:relative}
.sahne-ana .kart-rozetler{top:.9rem;left:.9rem;z-index:3}
.sahne-ana .rozet-video{right:.9rem;bottom:.9rem;z-index:3;width:34px;height:34px}
.destek-etiket{display:block;font-size:var(--yazi-xs);font-weight:400;color:var(--soluk)}