/* ============================================================
   MANDALİNA — pazaryeri arayüzü
   Beyaz zemin · defter paleti · kupon dili (DESIGN.md)
   Tek dosya · kütüphane yok · mobil öncelikli
   Tek tema (açık): referans pazaryerlerinin tamamı açık tema.
   ============================================================ */

:root{
  color-scheme: light;

  /* Marka rengi artik burada DEGIL — css/dil.css icindeki
     [data-palet] kapsamindan geliyor. Buraya --mnd yazma:
     stil.css dil.css'ten sonra yuklendigi icin paleti ezer. */

  /* nötr yüzey, renk, yarıçap, gölge, hareket token'ları dil.css'te.
     Burada tekrar etme: stil.css sonra yüklendiği için paleti ezer. */
  --pad: 12px;
  --maks: 1400px;

  --ust-y: 98px;    /* mobil sabit başlık yüksekliği (filtre barı buna yapışır) */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--sayfa);
  color: var(--metin);
  font-family:var(--yazi, system-ui, sans-serif);
  font-size:14px;
  caret-color:var(--mandalina);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input,select{ font:inherit; color:inherit; }
p{ margin:0; }

:focus-visible{ outline:2px solid var(--metin); outline-offset:2px; border-radius:var(--r); }
::selection{ background:var(--metin); color:var(--zemin); }
html{ scrollbar-color:var(--hat2) transparent; }

/* Sayfa ve bölüm başlıkları kuponun sekme sesiyle: dar, büyük harf.
   Ürün adı (PDP h1) cümle düzeninde kalır: ad bir başlık değil, bir bilgi. */
#gorunum h1, #gorunum h2, #gorunum h3, #gorunum h4{
  font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .04em); text-transform:var(--buyuk-harf, uppercase);
}
#gorunum .pd-ad{ font-family:var(--yazi); font-weight:400; letter-spacing:0; text-transform:none; }

/* ikon varsayılan ölçüsü — boyutsuz <svg><use> 300×150 açılır */
.ikn{ width:18px; height:18px; flex-shrink:0; }

.sayi{ font-variant-numeric: tabular-nums; }

/* ---------- düzen ---------- */
.kap{ width:100%; max-width:var(--maks); margin-inline:auto; padding-inline:var(--pad); }

.bolum{ background:var(--zemin); margin-bottom:8px; padding-block:16px; }

/* yatay ray */
.ray{
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:none;
  padding-inline:var(--pad); margin-inline:calc(var(--pad)*-1); padding-bottom:2px;
  /* snap, ilk öğeyi kaydırma kutusunun kenarına hizalıyordu: iç boşluk kadar
     kayık açılıp ilk öğe kesik görünüyordu. Hiza iç boşluktan başlasın.
     padding-inline'ı değiştiren her ray bunu da aynı değerle vermeli. */
  scroll-padding-inline:var(--pad);
}
.ray::-webkit-scrollbar{ display:none; }
.ray > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ============================================================
   ÜST PROMO ŞERİDİ
   ============================================================ */
.promo{
  /* Marka turuncusu beyaz 12px metinle 3.10:1, uc durak 2.35:1 — seridin
     tamami WCAG AA esiginin (4.5) altindaydi. Ucuncu duragi degistirmek
     yetmiyor, rampanin tumu koyulastirildi: 8.25 / 6.57 / 5.18. Marka
     turuncusu (--mnd) fiyat ve CTA'da aynen duruyor. */
  background:linear-gradient(90deg, var(--serit-1), var(--serit-2) 55%, var(--serit-3));
  color:#fff; text-align:center;
}
.promo a{ display:block; padding:7px 12px; font-size:12px; font-weight:600; }
.promo b{ font-weight:700; }
.promo a{ display:flex; align-items:center; justify-content:center; gap:3px; }
.promo .ikn{ width:12px; height:12px; }
.cip > .ikn{ width:13px; height:13px; color:var(--sari); }

/* ============================================================
   BAŞLIK
   ============================================================ */
.ust{ position:sticky; top:0; z-index:60; background:var(--zemin); border-bottom:var(--cizgi, 1px) solid var(--cerceve, var(--metin)); }
.ust-ana{ display:flex; align-items:center; gap:10px; padding-block:10px; }

.logo{
  display:flex; align-items:center; gap:4px; flex-shrink:0;
  font-family:var(--yazi-dar); font-size:25px; font-weight:700; line-height:1;
  letter-spacing:var(--dar-aralik, .04em); text-transform:var(--buyuk-harf, uppercase); color:var(--metin);
}
.logo-nokta{
  width:8px; height:8px; border-radius:50%; background:var(--mandalina, var(--mnd)); flex-shrink:0;
  align-self:flex-end; margin-bottom:3px;
}

.ara{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  background:var(--zemin); border:var(--cizgi, 1.5px) solid var(--cerceve, var(--metin));
  border-radius:var(--r); padding:9px 14px;
  transition:border-color var(--hiz) var(--egri), background var(--hiz);
}
.ara:focus-within{ border-color:var(--mandalina); background:var(--zemin); }
/* yalnız kutunun kendi büyüteci — .ara .ikn turuncu Ara düğmesinin beyaz ikonunu da griye boyuyordu */
.ara > .ikn{ color:var(--metin); }
.ara input{ flex:1; min-width:0; background:none; border:0; outline:none; font-size:14px; }
.ara input::placeholder{ color:var(--metin3); }
.ara input::-webkit-search-cancel-button{ opacity:.4; }

.ust-eyl{ display:flex; align-items:center; gap:1px; flex-shrink:0; }
.eyl{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:40px; padding:4px 5px; border-radius:var(--r);
  font-family:var(--yazi-dar); font-size:12px; font-weight:600; letter-spacing:var(--dar-aralik, .04em); text-transform:var(--buyuk-harf, uppercase);
  color:var(--metin);
  transition:background var(--hiz);
}
.eyl:hover{ background:var(--panel); color:var(--metin); }
.eyl .ikn{ width:20px; height:20px; }
.eyl span{ display:none; }
.eyl .rozet-sayi[hidden]{ display:none; }
.rozet-sayi{
  position:absolute; top:0; right:2px;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--mandalina); color:#fff;
  font-size:10px; font-weight:700; line-height:16px; text-align:center;
  border-radius:var(--r); border:2px solid var(--zemin);
}

/* kategori barı */
.ust-nav{ border-top:1px solid var(--hat); }
.ust-nav .ray{ gap:0; padding-block:0; }
.ust-nav a{
  display:block; padding:10px 11px 9px; white-space:nowrap;
  font-family:var(--yazi-dar); font-size:15px; font-weight:600; line-height:20px;
  letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); color:var(--metin2);
  border-bottom:3px solid transparent;
  transition:color var(--hiz), border-color var(--hiz);
}
.ust-nav a:hover{ color:var(--metin); }
.ust-nav a.aktif{ color:var(--metin); border-bottom-color:var(--mandalina); font-weight:700; }
.ust-nav .yeni{
  display:inline-block; margin-left:5px; padding:1px 5px 0; border-radius:var(--r);
  box-shadow:inset 0 0 0 1.5px var(--mandalina); color:var(--mandalina); font-size:var(--t2); font-weight:700; vertical-align:1px;
}

/* ============================================================
   ÜRÜN GÖRSELİ — 3:4 stüdyo katalog çekimi
   ============================================================ */
.gorsel{
  position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--panel); display:grid; place-items:center;
}
.gorsel img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transition:transform var(--hiz-yavas) var(--egri);
}
/* fotoğrafı olmayan ürün için silüet yedeği */
.gorsel svg{ width:52%; height:52%; color:var(--sl); opacity:.55; }
.gorsel[data-c="teknoloji"]{ --sl:var(--sl-teknoloji); }
.gorsel[data-c="ev"]{        --sl:var(--sl-ev); }
.gorsel[data-c="ayakkabi"]{  --sl:var(--sl-ayakkabi); }
.gorsel[data-c="kadin"]{     --sl:var(--sl-kadin); }
.gorsel[data-c="erkek"]{     --sl:var(--sl-erkek); }
.gorsel[data-c="ahsap"]{     --sl:var(--sl-ahsap); }
.gorsel[data-c="arac"]{      --sl:var(--sl-arac); }

/* ============================================================
   ÜRÜN KARTI
   ============================================================ */
.grid{ display:grid; gap:8px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.onay-ikon{ width:12px; height:12px; display:inline-block; vertical-align:-2px; color:var(--mavi); }
.yildizlar{
  display:inline-flex; color:var(--sari);
  font-size:12px; line-height:1; letter-spacing:-.4px;
}
.yildizlar i{ font-style:normal; }
.yildizlar i.bos{ color:var(--hat2); }
.eski{ font-size:11.5px; color:var(--metin3); text-decoration:line-through; }
.yeni{ font-size:16.5px; font-weight:700; color:var(--fiyat); }

/* rozetler */
.rozet{
  display:inline-block; padding:3px 6px 2px; border-radius:var(--r-tam);
  font-family:var(--yazi-dar); font-size:11px; font-weight:700; line-height:12px;
  letter-spacing:var(--dar-aralik, .06em); text-transform:var(--buyuk-harf, uppercase);
}
/* tek dolu rozet indirim (mandalina); durumlar lacivert çizgili kupon etiketi */
.rz-ind{ background:var(--mandalina); color:var(--uzeri, #fff); }
.rz-son, .rz-kupon, .rz-cok, .rz-yeni, .rz-taksit{
  background:var(--zemin); color:var(--metin); box-shadow:0 0 0 1.5px var(--metin) inset;
}
.rz-son{ color:var(--fiyat-ind); box-shadow:0 0 0 1.5px var(--fiyat-ind) inset; }

/* ============================================================
   GÜVEN ŞERİDİ
   ============================================================ */
.guven{ display:grid; gap:1px; background:var(--hat); grid-template-columns:repeat(2,1fr); }
/* min-width:0 sart: grid ogesinin varsayilan min-width:auto'su 320px'de
   metnin dogal genisligini dayatip sayfayi 38px yatay kaydiriyordu. */
.guven div{ background:var(--zemin); padding:13px 12px; display:flex; align-items:center; gap:9px; min-width:0; }
.guven div > div{ min-width:0; }
.guven b, .guven small{ overflow-wrap:anywhere; }
.guven .ikn{ width:21px; height:21px; color:var(--metin); }
.guven b{ display:block; font-size:12.5px; font-weight:700; }
.guven small{ display:block; font-size:11px; color:var(--metin3); }

/* ============================================================
   BUTON / ÇİP
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:10px 20px 9px; border-radius:var(--r);
  font-family:var(--yazi-dar); font-size:16px; font-weight:700; line-height:1.1;
  letter-spacing:var(--dar-aralik, .07em); text-transform:var(--buyuk-harf, uppercase);
  transition:background var(--hiz), transform var(--hiz) var(--egri), border-color var(--hiz);
}
.btn:active{ transform:translateY(1px); }
.btn-mnd{ background:var(--cta-zemin); color:var(--cta-metin); }
.btn-mnd:hover{ background:var(--cta-hover); }
.btn-cizgi{ border:var(--cizgi, 1.5px) solid var(--cerceve, var(--metin)); color:var(--metin); background:var(--zemin); }
.btn-cizgi:hover{ background:var(--metin); color:var(--zemin); }
.btn:disabled{ background:var(--hat); color:var(--metin3); border-color:var(--hat); cursor:not-allowed; transform:none; }

.cip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:8px 12px; border-radius:var(--r-tam);
  background:var(--zemin); border:var(--cizgi, 1px) solid var(--hat2);
  font-size:13px; font-weight:600; color:var(--metin);
  transition:border-color var(--hiz), color var(--hiz), background var(--hiz);
}
.cip:hover{ border-color:var(--metin); }
.cip[aria-pressed="true"], .cip.aktif{
  background:var(--metin); border-color:var(--metin); color:var(--zemin); font-weight:600;
}

/* ============================================================
   KATEGORİ SAYFASI
   ============================================================ */

.aktif-cipler{ padding-block:8px; }
.aktif-cip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:6px 8px 6px 11px; border-radius:var(--r-tam);
  background:var(--zemin); color:var(--metin);
  border:var(--cizgi, 1px) solid var(--cerceve, var(--metin));
  font-size:12px; font-weight:700;
}
.aktif-cip button{ display:grid; place-items:center; opacity:.65; }
.aktif-cip button:hover{ opacity:1; }
.aktif-cip .ikn{ width:12px; height:12px; }

/* yan filtre (masaüstü) */
.yan-filtre{ display:none; }
.f-grup{ border-bottom:1px solid var(--hat); padding-block:14px; }
.f-grup:last-child{ border-bottom:0; }
.f-grup h4{ margin:0 0 10px; font-family:var(--yazi-dar); font-size:15px; font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); }
.f-cipler{ display:flex; flex-wrap:wrap; gap:6px; }
.f-liste{ display:flex; flex-direction:column; gap:2px; }
.f-sat{
  display:flex; align-items:center; gap:9px; padding:7px 4px;
  font-size:13px; color:var(--metin2); border-radius:var(--r); text-align:left; width:100%;
}
.f-sat:hover{ background:var(--panel); color:var(--metin); }
.f-kutu{
  width:17px; height:17px; border:1.5px solid var(--metin2); border-radius:var(--r);
  flex-shrink:0; display:grid; place-items:center; color:transparent;
  transition:background var(--hiz), border-color var(--hiz);
}
.f-sat[aria-pressed="true"] .f-kutu{ background:var(--metin); border-color:var(--metin); color:var(--zemin); }
.f-kutu .ikn{ width:11px; height:11px; }
.f-sat[aria-pressed="true"]{ color:var(--metin); font-weight:600; }
.f-sat small{ margin-left:auto; color:var(--metin3); font-size:11.5px; }

.fiyat-alan{ display:flex; align-items:center; gap:8px; }
.fiyat-alan input{
  flex:1; min-width:0; padding:9px 10px; font-size:13px;
  background:var(--zemin); border:1px solid var(--hat2); border-radius:var(--r);
  font-variant-numeric:tabular-nums;
}
.fiyat-alan input:focus{ border-color:var(--metin); outline:none; }
.fiyat-uygula{
  flex:0 0 36px; height:36px; display:grid; place-items:center; padding:0;
  border:0; border-radius:var(--r); background:var(--metin); color:var(--zemin); cursor:pointer;
}
.fiyat-uygula .ikn{ width:16px; height:16px; }

.renkler{ display:flex; gap:8px; flex-wrap:wrap; }
.renk{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--hat); padding:2.5px; background:var(--zemin);
  transition:border-color var(--hiz), transform var(--hiz);
}
.renk i{ display:block; width:100%; height:100%; border-radius:50%; border:1px solid var(--hat); }
.renk[aria-pressed="true"]{ border-color:var(--metin); transform:scale(1.06); }

/* ============================================================
   SABİT SATIN ALMA BARI — sepet ekranı
   ============================================================ */

/* ============================================================
   ALT SAYFA (bottom sheet)
   ============================================================ */
.perde{
  position:fixed; inset:0; z-index:90; background:var(--perde);
  overscroll-behavior:contain;
  display:flex; align-items:flex-end; justify-content:center;
  animation:sol var(--hiz) var(--egri);
}
@keyframes sol{ from{ opacity:0; } }
.sheet{
  width:100%; max-width:560px; max-height:86vh;
  display:flex; flex-direction:column; background:var(--zemin);
  border-radius:var(--r3) var(--r3) 0 0; border-top:var(--cizgi, 0) solid var(--metin);
  animation:yuksel 240ms var(--egri);
}
@keyframes yuksel{ from{ transform:translateY(100%); } }
.sheet-bas{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px var(--pad) 11px; border-bottom:1px solid var(--hat);
}
.sheet-bas h3{ margin:0; font-family:var(--yazi-dar); font-size:18px; font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); }
.sheet-kapat{ width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--metin2); }
.sheet-kapat:hover{ background:var(--panel); }
.sheet-govde{
  overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  padding:0 var(--pad) 12px; flex:1;
}
.sheet-govde::-webkit-scrollbar{ display:none; }
.sheet-alt{ display:flex; gap:8px; padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom)); border-top:1px solid var(--hat); }
.sheet-alt .btn{ flex:1; }

.sirala-liste{ display:flex; flex-direction:column; }
.sirala-liste button{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 2px; text-align:left; font-size:14px;
  border-bottom:1px solid var(--hat);
}
.sirala-liste button:last-child{ border-bottom:0; }
.sirala-liste button[aria-checked="true"]{ color:var(--metin); font-weight:700; }
.sirala-liste .ikn{ color:var(--mnd); }

/* ============================================================
   TOAST
   ============================================================ */
/* Bildirim kupon damgası gibi basılır: beyaz, lacivert çift çizgi, hafif eğik */
.toast{
  position:fixed; left:50%; bottom:86px; z-index:120; transform:translateX(-50%) rotate(-2deg); pointer-events:none;
  display:flex; align-items:center; gap:8px; max-width:calc(100vw - 32px);
  background:var(--zemin); color:var(--metin); padding:9px 14px 8px; border-radius:var(--r);
  border:2px solid var(--metin); box-shadow:0 0 0 3px var(--zemin), 0 0 0 4.5px var(--metin);
  font-family:var(--yazi-dar); font-size:15px; font-weight:700; letter-spacing:var(--dar-aralik, .06em); text-transform:var(--buyuk-harf, uppercase);
  animation:toastGir 260ms var(--egri) both;
}
.toast .ikn{ color:var(--onay, var(--yesil)); }
.toast-uyari{ color:var(--fiyat-ind); border-color:var(--mandalina); box-shadow:0 0 0 3px var(--zemin), 0 0 0 4.5px var(--mandalina); }
.toast-uyari .ikn{ color:var(--mandalina); }
@keyframes toastGir{ from{ opacity:0; transform:translateX(-50%) rotate(-2deg) scale(1.35); } }

/* ============================================================
   FOOTER
   ============================================================ */
.altbilgi{ background:var(--zemin); border-top:var(--cizgi, 1px) solid var(--cerceve, var(--metin)); padding-block:24px; }
/* sabit alt bar (satın al / sepeti onayla) alt bilginin son satırını örtmesin */
body[data-bar="var"] .altbilgi{ padding-bottom:100px; }
.altbilgi-grid{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.altbilgi h2{ margin:0 0 9px; font-family:var(--yazi-dar); font-size:15px; font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); }
.altbilgi ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.altbilgi li a{ font-size:13px; color:var(--metin2); }
.altbilgi li a:hover{ color:var(--metin); text-decoration:underline; text-underline-offset:3px; }
.odeme{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.odeme i{
  height:24px; padding:0 8px; border:1px solid var(--hat2); border-radius:var(--r);
  background:var(--panel); font-size:10px; font-weight:700; font-style:normal;
  color:var(--metin2); display:grid; place-items:center; letter-spacing:var(--dar-aralik, .02em);
}
.altbilgi-son{
  margin-top:20px; padding-top:14px; border-top:1px solid var(--hat);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:var(--metin3);
}

/* ============================================================
   AÇILIŞ HAREKETİ
   ============================================================ */
.ac{ opacity:0; transform:translateY(10px); }
.ac.gor{ opacity:1; transform:none; transition:opacity 340ms var(--egri), transform 340ms var(--egri); }

/* ============================================================
   GİRİŞ KUPONU MODALI — yalnız ana sayfa
   ============================================================ */
.kupon-perde{
  position:fixed; inset:0; z-index:100; background:var(--perde-koyu);
  display:flex; align-items:flex-end; justify-content:center;
  animation:kuponPerde 200ms ease-out;
}
@keyframes kuponPerde{ from{ background:transparent; } }
/* mobilde alttan açılan kart (Trendyol mobil web'deki gibi), masaüstünde ortada */
.kupon-kutu{
  position:relative; width:100%; max-width:480px;
  background:var(--zemin); border-radius:var(--r3) var(--r3) 0 0; overflow:hidden; border-top:var(--cizgi, 0) solid var(--metin);
  padding:0 16px calc(16px + env(safe-area-inset-bottom)); text-align:center;
  animation:kuponGir 280ms var(--egri);
  outline:none;
}
@keyframes kuponGir{ from{ transform:translateY(100%); } }
/* üst görsel kenardan kenara, 3:2 */
.kupon-gorsel{ margin:0 -16px 16px; aspect-ratio:3/2; background:var(--panel); }
.kupon-gorsel img{ display:block; width:100%; height:100%; object-fit:cover; }
.kupon-gorsel .yt{ border:0; border-bottom:1px dashed var(--hat2); }
.kupon-kutu h3{ margin:0 0 4px; font-family:var(--yazi-dar); font-size:22px; font-weight:700; letter-spacing:var(--dar-aralik, .04em); text-transform:var(--buyuk-harf, uppercase); color:var(--metin); }
.kupon-alt{ margin:0 0 18px; font-size:13px; color:var(--metin2); }
.kupon-kapat{
  position:absolute; top:12px; right:12px; z-index:1;
  width:32px; height:32px; display:grid; place-items:center; padding:0;
  background:var(--zemin); border:0; border-radius:var(--r); color:var(--metin); cursor:pointer;
  box-shadow:0 0 0 1.5px var(--metin) inset;
}
.kupon-kapat .ikn{ width:16px; height:16px; }
.kupon-sira{ display:flex; gap:10px; }
.kupon-kart{
  position:relative; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 8px 12px; margin-top:8px;
  border:var(--cizgi, 1px) dashed var(--cerceve, var(--metin)); border-radius:var(--r2); background:var(--zemin);
}
.kupon-kart b{ display:block; font-family:var(--yazi-dar); font-size:30px; font-weight:700; color:var(--karbon, var(--mnd)); line-height:1.05; }
.kupon-kart b small{ font-size:13px; font-weight:700; }
.kupon-kart .kupon-sart{ font-size:11px; color:var(--metin2); }
.kupon-etiket{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--mandalina); color:var(--uzeri, #fff); white-space:nowrap;
  font-family:var(--yazi-dar); font-size:12px; font-weight:700; letter-spacing:var(--dar-aralik, .06em); text-transform:var(--buyuk-harf, uppercase);
  line-height:18px; padding:0 8px; border-radius:var(--r);
}
.kupon-kutu .btn{ width:100%; height:44px; margin-top:18px; }
.kupon-not{ margin:10px 0 0; font-size:11px; color:var(--metin3); }
@media (min-width:900px){
  .kupon-perde{ align-items:center; padding:16px; }
  .kupon-kutu{ max-width:380px; border-radius:var(--r3); border:var(--cizgi, 0) solid var(--metin); padding-bottom:20px; animation-name:kuponGirMasa; }
  @keyframes kuponGirMasa{ from{ opacity:0; transform:scale(.95); } }
}
@media (prefers-reduced-motion:reduce){ .kupon-perde, .kupon-kutu{ animation:none; } }

/* ============================================================
   SEPET ve FAVORİLER
   ============================================================ */
.hesap-sayfa{ padding-block:14px 96px; }

.bos-durum{ text-align:center; padding:56px 20px 72px; }
.bos-ikon{
  display:grid; place-items:center; width:76px; height:76px; margin:0 auto 16px;
  border-radius:var(--r3); box-shadow:inset 0 0 0 var(--cizgi, 1.5px) var(--cerceve, var(--metin)); color:var(--metin);
}
.bos-ikon .ikn{ width:34px; height:34px; }
.bos-durum h2{ font-family:var(--yazi-dar); font-size:24px; font-weight:700; letter-spacing:var(--dar-aralik, .04em); text-transform:var(--buyuk-harf, uppercase); margin:0 0 6px; }
.bos-durum p{ margin:0 0 18px; color:var(--metin2); font-size:13.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:560px){
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .guven{ grid-template-columns:repeat(4,1fr); }
  .altbilgi-grid{ grid-template-columns:repeat(4,1fr); }
}

@media (min-width:900px){
  :root{ --pad:20px; --ust-y:106px; }

  .grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
  .altbilgi, body[data-bar="var"] .altbilgi{ padding-bottom:28px; }
  .bolum{ padding-block:20px; border-radius:var(--r2); }

  .eyl span{ display:block; }
  .eyl{ min-width:52px; }
  .ust-ana{ gap:22px; padding-block:13px; }
  .logo{ font-size:23px; }
  .ara{ max-width:none; }

  /* boş durum ve sipariş onayı sayfaları */
  .hesap-sayfa{ padding-block:18px 40px; }

  /* kategori: yan filtre paneli */
  .yan-filtre{
    display:block; position:sticky; top:calc(var(--ust-y) + 12px);
    background:var(--zemin); border:1px solid var(--hat); border-radius:var(--r2);
    padding:4px 14px; max-height:calc(100vh - var(--ust-y) - 32px);
    overflow-y:auto; scrollbar-width:none;
  }
  .yan-filtre::-webkit-scrollbar{ display:none; }
  .ust-nav .ray{ overflow:visible; }
}

@media (min-width:1240px){
  .grid{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .ac{ opacity:1; transform:none; }
}

/* klavye: ilk Tab'da görünen "İçeriğe geç" */
.atla{
  position:fixed; left:12px; top:-60px; z-index:200; padding:10px 16px; border-radius:var(--r);
  background:var(--metin); color:var(--zemin); font-weight:700; text-decoration:none;
  transition:top var(--hiz) var(--egri);
}
.atla:focus{ top:12px; outline:3px solid var(--mandalina); outline-offset:2px; }
#gorunum:focus{ outline:none; }