/* =========================================================================
   EMR OPTİK — Mağaza teması
   Kimlik logodan alınmıştır: antrasit zemin (#1c1a17) + fırçalanmış altın.
   Gövde beyazdır (ürün fotoğrafları için); marka rengi şerit, header,
   butonlar ve footer'da yaşar.
   Yazı tipleri: Jost (logonun geometrik harflerine yakın) + Archivo (metin).
   ========================================================================= */

:root{
  /* markanın sabitleri — temaya göre değişmez */
  --ink:        #1c1a17;   /* logo zemini */
  --ink-2:      #26231f;
  --gold:       #c49a5c;   /* logo altını */
  --gold-lt:    #e2c489;
  --gold-dk:    #8d6c33;   /* beyaz üzerinde okunur altın */

  /* açık tema */
  --paper:      #ffffff;
  --wash:       #f7f5f1;
  --surface:    #ffffff;
  --text:       #1c1a17;
  --text-soft:  #6d6659;
  --line:       #e7e3da;
  --accent:     var(--gold-dk);
  --sale:       #b03a41;
  --ok:         #2f7d54;

  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(28,26,23,.05), 0 18px 40px -22px rgba(28,26,23,.25);
  --maxw:       1280px;

  --font:     "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display:  "Jost", "Archivo", system-ui, "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:     #16150f;
    --wash:      #1f1d18;
    --surface:   #232019;
    --text:      #f2eee3;
    --text-soft: #a89e8a;
    --line:      #34302a;
    --accent:    var(--gold-lt);
    --sale:      #e08a90;
    --ok:        #74c197;
    --shadow:    0 1px 2px rgba(0,0,0,.5), 0 22px 48px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:     #16150f;
  --wash:      #1f1d18;
  --surface:   #232019;
  --text:      #f2eee3;
  --text-soft: #a89e8a;
  --line:      #34302a;
  --accent:    var(--gold-lt);
  --sale:      #e08a90;
  --ok:        #74c197;
  --shadow:    0 1px 2px rgba(0,0,0,.5), 0 22px 48px -24px rgba(0,0,0,.8);
}

/* ---- Temel ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--gold); color:var(--ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

h1,h2,h3{
  font-family:var(--display); font-weight:500;
  line-height:1.1; letter-spacing:.01em; text-wrap:balance; margin:0 0 .4em;
}
h1{ font-size:clamp(1.9rem, 4vw, 2.9rem); }
h2{ font-size:clamp(1.45rem, 2.8vw, 2rem); }
h3{ font-size:1.1rem; font-weight:600; }
p{ margin:0 0 1em; max-width:66ch; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.section{ padding:60px 0; }
.section--tight{ padding:30px 0; }
.section--wash{ background:var(--wash); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.muted{ color:var(--text-soft); }
.eyebrow{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:600; }

/* ---- Butonlar --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:6px; border:1px solid var(--ink);
  background:var(--ink); color:var(--gold-lt);
  font-family:var(--display); font-weight:500; font-size:.9rem;
  letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.btn:hover{ background:var(--gold-dk); border-color:var(--gold-dk); color:#fff; }
.btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--gold-lt); border-color:var(--gold-lt); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--gold-lt); border-color:var(--ink); }
.btn--light{ background:transparent; color:var(--gold-lt); border-color:var(--gold); }
.btn--light:hover{ background:var(--gold); color:var(--ink); }
.btn--block{ width:100%; }
.btn--sm{ padding:9px 16px; font-size:.76rem; }
.btn[disabled]{ opacity:.4; cursor:not-allowed; }

/* ---- Duyuru şeridi ---------------------------------------------------- */
.ribbon{
  background:var(--ink); color:var(--gold-lt);
  font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  font-family:var(--display); font-weight:400;
}
.ribbon .container{ display:flex; justify-content:center; gap:34px; padding-block:9px; flex-wrap:wrap; }
.ribbon span{ display:inline-flex; align-items:center; gap:7px; }
.ribbon b{ color:#fff; font-weight:600; }
@media (max-width:760px){ .ribbon span:nth-child(n+2){ display:none; } }
/* Sayfanın içinde, bölümlerin arasında duran şerit */
.ribbon--ic{ margin-block:0; }
.ribbon--ic .container{ padding-block:14px; }
@media (max-width:760px){ .ribbon--ic span:nth-child(n+2){ display:inline-flex; } }

/* ---- Header ----------------------------------------------------------- */
/* Açık zeminli başlık — atasunoptik düzeni: logo, koyu menü, hap arama,
   sağda hesap/favori/sepet simgeleri. Renkler temadan gelir ki koyu mod
   da doğru çalışsın. */
.header{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; gap:20px; height:78px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ width:52px; height:52px; border-radius:8px; object-fit:cover; }
.brand__txt{ font-family:var(--display); font-size:1.15rem; font-weight:600; letter-spacing:.16em; color:var(--text); line-height:1.05; }
.brand__txt small{ display:block; font-size:.58rem; letter-spacing:.28em; color:var(--gold-dk); font-weight:400; margin-top:3px; }
@media (max-width:520px){ .brand__txt{ display:none; } }

.nav__links{ display:flex; gap:26px; margin-left:18px; }
.nav__links a{
  font-family:var(--display); font-size:.84rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--text);
  white-space:nowrap;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav__links a:hover, .nav__links a.is-active{ color:var(--gold-dk); border-bottom-color:var(--gold-dk); }
/* Outlet dikkat çeksin diye indirim renginde. */
.nav__links a.nav__outlet{ color:var(--sale); }
.nav__links a.nav__outlet:hover, .nav__links a.nav__outlet.is-active{ color:var(--sale); border-bottom-color:var(--sale); }
.nav__spacer{ flex:1; }

/* ---- Header araması --------------------------------------------- */
.nav__search{ position:relative; flex:0 1 300px; min-width:150px; }
.nav__search form{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:0 10px; height:40px; transition:border-color .16s, background .16s;
}
.nav__search form:focus-within{ border-color:var(--gold-dk); }
.nav__search svg{ width:17px; height:17px; flex-shrink:0; fill:none; stroke:var(--text-soft); stroke-width:2; stroke-linecap:round; }
.nav__search form:focus-within svg{ stroke:var(--gold-dk); }
.nav__search input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:var(--text);
  font-family:var(--font); font-size:.86rem; padding:0;
}
.nav__search input::placeholder{ color:var(--text-soft); }
.nav__search input::-webkit-search-cancel-button{ display:none; }
.nav__search button[type="button"]{
  background:none; border:0; color:var(--text-soft); font-size:1.2rem; line-height:1;
  cursor:pointer; padding:0 2px;
}
.nav__search button[type="button"]:hover{ color:var(--gold-dk); }

/* canlı öneriler */
.nav__oneri{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:70;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.5); overflow:hidden; max-height:70vh; overflow-y:auto;
}
.nav__satir{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-bottom:1px solid var(--line); transition:background .14s;
}
.nav__satir:last-of-type{ border-bottom:0; }
.nav__satir:hover{ background:var(--wash); }
.nav__satir img{ width:52px; height:39px; object-fit:cover; border-radius:5px; flex-shrink:0; background:var(--wash); }
.nav__satir span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.nav__satir b{ font-size:.86rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav__satir small{ font-size:.72rem; color:var(--text-soft); letter-spacing:.06em; text-transform:uppercase; }
.nav__satir em{ font-style:normal; font-size:.84rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.nav__tumu{
  display:block; width:100%; padding:11px; border:0; border-top:1px solid var(--line);
  background:var(--wash); color:var(--accent); cursor:pointer;
  font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.nav__tumu:hover{ background:var(--ink); color:var(--gold-lt); }
.nav__bos{ margin:0; padding:16px; text-align:center; font-size:.86rem; color:var(--text-soft); }

/* Geniş ekranda arama sağda satır içi; öneri listesi sağa yaslı ve geniş. */
@media (min-width:1401px){
  .nav__oneri{ left:auto; right:0; width:400px; }
}
/* 1400px altında arama kendi satırında, tam genişlik — nav çok kalabalık. */
@media (max-width:1400px){
  .nav{ flex-wrap:wrap; height:auto; padding-top:14px; }
  .nav__search{ order:10; flex:1 0 100%; margin:2px 0 14px; }
  .nav__links{ top:auto; }
}
/* Sepet, favori simgesiyle aynı boyda yuvarlak bir simge. */
.nav__cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--text); transition:color .15s;
}
.nav__cart:hover{ color:var(--gold-dk); }
.nav__cart svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nav__cart .count{
  position:absolute; top:-2px; right:-4px;
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background:var(--gold-dk); color:#fff; font-family:var(--font);
  font-size:.68rem; font-weight:700;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; justify-content:center;
}
.nav__toggle{ display:none; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--text); line-height:1; }

@media (max-width:960px){
  .nav__links{
    /* header yüksekliği arama satırıyla değişebilir; sabit px yerine '100%' */
    position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line); margin:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav__links.open{ max-height:420px; }
  .nav__links a{ padding:15px 22px; border-top:1px solid var(--line); border-bottom:0; }
  .nav__toggle{ display:block; }
}

/* ---- Hero: 16:9 kampanya banner'ı ------------------------------------
   Yazılar genelde görselin içinde hazır gelir. İstenirse HTML üzerinden
   de başlık yazdırılabilir (slide__over).                                */
/* Tam genişlik — kenardan kenara, köşe yuvarlaması yok, header'ın hemen altında. */
.hero__box{ position:relative; overflow:hidden; background:var(--ink); }

/* Banner oranı: geniş ekranda 1900x600 (19:6) — atasunoptik ile aynı.
   Ekran daraldıkça biraz yükselir ki içerik okunur kalsın. */
.hero__track{ position:relative; aspect-ratio:19/6; }
@media (max-width:1000px){ .hero__track{ aspect-ratio:5/2; } }

/* Telefon: 19:6'lık geniş banner dar ekranda kırpılmak zorunda. 3/2 fazla
   kırpıyordu (görselin yarısı gidiyordu); 16/9 daha azını kesiyor. */
@media (max-width:700px){  .hero__track{ aspect-ratio:16/9; } }

/* Slayta ayrı bir "mobil görsel" yüklendiyse kırpmaya hiç gerek yok:
   kutu dikey orana geçer, görsel olduğu gibi görünür. */
@media (max-width:700px){
  .hero__box--mobil .hero__track{ aspect-ratio:4/5; }
}
.slide__media picture{ display:block; width:100%; height:100%; }

.slide{
  position:absolute; inset:0; display:block;
  opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s;
}
.slide.is-on{ opacity:1; visibility:visible; }

.slide__media{ position:absolute; inset:0; display:block; }
.slide__media img{ width:100%; height:100%; object-fit:cover; }

/* görsel yoksa: altın degrade zemin, ortada logo */
.slide__media--bos{
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(70% 90% at 74% 40%, rgba(196,154,92,.26) 0%, rgba(196,154,92,0) 62%),
    linear-gradient(150deg, #2b2721 0%, #16140f 82%);
}
/* Logo sağ tarafta durur; yazılar sol altta olduğu için çakışmaz. */
.slide__media--bos{ justify-content:flex-end; padding-right:9%; }
.slide__media--bos img{ width:auto; height:66%; max-width:26%; object-fit:contain; border-radius:12px; }
@media (max-width:700px){
  .slide__media--bos{ justify-content:center; padding-right:0; align-items:flex-start; padding-top:6%; }
  .slide__media--bos img{ height:38%; max-width:42%; }
  /* dar ekranda yazı bannerın tamamını kaplıyor; logo arkada kalmasın */
  .slide:has(.slide__over) .slide__media--bos img{ display:none; }
}

/* isteğe bağlı yazı katmanı — sol alt, koyu perde üzerine */
.slide__over{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  /* banner alçaldığı için üst boşluk yüzde yerine sabit — taşmasın */
  padding:clamp(50px,9%,120px) clamp(28px,6vw,90px) clamp(30px,5%,64px);
  background:linear-gradient(180deg, rgba(18,16,12,0) 0%, rgba(18,16,12,.55) 45%, rgba(18,16,12,.86) 100%);
}
.slide__eyebrow{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-lt); font-weight:600; }
.slide__title{
  font-family:var(--display); font-weight:300; color:#fff;
  font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.08; letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.slide__sub{ color:#d8d0c2; font-size:clamp(.88rem,1.3vw,1.02rem); max-width:46ch; }
.slide__btn{
  margin-top:8px; display:inline-flex; align-items:center;
  padding:11px 22px; border-radius:6px; background:var(--gold); color:var(--ink);
  font-family:var(--display); font-weight:500; font-size:.86rem;
  letter-spacing:.09em; text-transform:uppercase; transition:background .18s;
}
.slide:hover .slide__btn{ background:var(--gold-lt); }
@media (max-width:700px){ .slide__sub{ display:none; } }

/* oklar — alt sağda, görselin üzerinde */
.hero__nav{
  position:absolute; bottom:16px; z-index:3;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(18,16,12,.5); border:1px solid rgba(226,196,137,.45);
  color:var(--gold-lt); font-size:1.25rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.18s;
  backdrop-filter:blur(4px);
}
.hero__nav:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.hero__nav--prev{ right:70px; }
.hero__nav--next{ right:20px; }
@media (max-width:700px){ .hero__nav{ display:none; } }

/* noktalar — altta ortada */
.hero__dots{
  position:absolute; left:0; right:0; bottom:22px; z-index:3;
  display:flex; justify-content:center; gap:9px;
}
.hero__dots button{
  width:30px; height:3px; border-radius:99px; border:0; cursor:pointer; padding:0;
  background:rgba(255,255,255,.42); transition:background .2s, width .2s;
}
.hero__dots button:hover{ background:rgba(255,255,255,.7); }
.hero__dots button.is-on{ background:var(--gold); width:50px; }

/* ---- Güven şeridi ------------------------------------------------- */
.badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.badges div{ padding:22px 18px; background:var(--paper); text-align:center; }
.badges strong{ display:block; font-family:var(--display); font-size:.92rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.badges span{ font-size:.79rem; color:var(--text-soft); }
@media (max-width:760px){ .badges{ grid-template-columns:repeat(2,1fr); } }

/* ---- Bölüm başlığı --------------------------------------------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.sec-head h2{ margin:0; }
.sec-head a{ font-family:var(--display); font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); border-bottom:1px solid currentColor; padding-bottom:2px; }
.sec-head .shop__count{ margin-right:auto; }

/* Değiştiriciler — temel .sec-head kuralından SONRA gelmeli ki geçerli olsun. */
.sec-head--end{ justify-content:flex-end; }

/* Başlığı ortala. 3 sütun:  sol (sayaç) | ortada başlık | sağ (bağlantı / oklar)
   Her öğe açıkça yerleştirilir; yoksa ızgara onları yanlış sütuna atar. */
.sec-head--center{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.sec-head--center > h1,
.sec-head--center > h2            { grid-column:2; text-align:center; }
.sec-head--center > a,
.sec-head--center > .carousel__nav{ grid-column:3; justify-self:end; }
.sec-head--center > .shop__count  { grid-column:1; justify-self:start; margin-right:0; }

/* Dar ekranda tek sütun, alt alta ve ortalı.
   Seçiciler yukarıdakilerle AYNI özgüllükte olmalı; "> *" kullanılırsa
   "> h2" ondan güçlü çıkar ve başlık 2. sütunda kalır. */
@media (max-width:720px){
  .sec-head--center{ grid-template-columns:1fr; justify-items:center; gap:10px; }
  .sec-head--center > h1,
  .sec-head--center > h2,
  .sec-head--center > a,
  .sec-head--center > .carousel__nav,
  .sec-head--center > .shop__count{ grid-column:1; justify-self:center; }
  .sec-head--center > h1,
  .sec-head--center > h2{ order:-1; }          /* başlık her zaman en üstte */
}

/* ---- Ürün ızgarası ------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px 22px; }
@media (max-width:1080px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){ .grid{ grid-template-columns:repeat(2,1fr); gap:26px 14px; } }
.kesfet-devam{ margin:34px 0 0; text-align:center; }

/* ---- Ana sayfa banner bloğu --------------------------------- */
.hbanner{ position:relative; display:block; overflow:hidden; border-radius:var(--radius); background:var(--ink); min-height:220px; }
.hbanner img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.hbanner__ic{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:220px; padding:44px 24px; text-align:center; }
.hbanner__ust{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-lt); }
.hbanner__baslik{ font-family:var(--font-head,inherit); font-size:clamp(1.4rem,3vw,2.1rem); color:#fff; max-width:640px; }
.hbanner .btn{ pointer-events:none; }
.hbanner__grup{ display:grid; gap:22px; }
.hbanner__grup--2{ grid-template-columns:repeat(2,1fr); }
.hbanner__grup--3{ grid-template-columns:repeat(3,1fr); }
.hbanner__grup--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .hbanner__grup--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){  .hbanner__grup--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .hbanner__grup{ grid-template-columns:1fr !important; } }
.hbanner--yari{ min-height:260px; }
.hbanner--yari .hbanner__ic{ min-height:260px; }
.hbanner--yari .hbanner__baslik{ font-size:clamp(1.1rem,2vw,1.5rem); }
.carousel--banner{ grid-auto-columns:calc((100% - 2.3 * 22px) / 3.3); gap:22px; }
@media (max-width:1000px){ .carousel--banner{ grid-auto-columns:calc((100% - 1.3 * 18px) / 2.3); gap:18px; } }
@media (max-width:640px){  .carousel--banner{ grid-auto-columns:82%; gap:14px; } }
.carousel--banner .hbanner{ scroll-snap-align:start; }

/* ---- Video bloğu -------------------------------------------- */
.hvideo{ position:relative; padding-top:56.25%; border-radius:var(--radius); overflow:hidden; background:var(--ink); }
.hvideo iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- Sık sorulan sorular ------------------------------------ */
.sss{ border-bottom:1px solid var(--line); }
.sss summary{ padding:16px 30px 16px 0; position:relative; cursor:pointer; font-weight:600; font-size:.98rem; list-style:none; }
.sss summary::-webkit-details-marker{ display:none; }
.sss summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:1.3rem; color:var(--gold-dk); }
.sss[open] summary::after{ content:"–"; }
.sss p{ margin:0 0 18px; color:var(--text-soft); font-size:.92rem; line-height:1.65; }

.card{ display:flex; flex-direction:column; }
.card__media{
  /* Bağlantı etiketi satır içi gelir; blok yapılmazsa aspect-ratio ve
     overflow işlemez, fotoğraf altındaki marka yazısının üstüne taşar. */
  display:block;
  position:relative; aspect-ratio:4/3; border-radius:var(--radius);
  background:var(--wash); overflow:hidden; border:1px solid var(--line);
}
.card__media img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.card:hover .card__media img{ transform:scale(1.05); }
/* Rozetler fotoğrafın üstünde kalmalı: büyüyen fotoğraf ve ikinci fotoğraf
   kendi katmanlarını açtığı için burada z-index şart. */
.card__tags{ position:absolute; top:10px; left:10px; z-index:4; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.card__tag{
  font-family:var(--display); font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 9px; border-radius:4px; background:var(--ink); color:var(--gold-lt);
}
.card__tag--new{ background:var(--gold); color:var(--ink); }
.card__body{ padding:14px 2px 0; display:flex; flex-direction:column; flex:1; }
.card__brand{ font-family:var(--display); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-soft); }
.card__name{ font-family:var(--display); font-size:1.02rem; font-weight:500; margin:4px 0 3px; }
.card__meta{ font-size:.78rem; color:var(--text-soft); margin-bottom:9px; }
.card__price{ margin-top:auto; display:flex; align-items:center; gap:10px; font-variant-numeric:tabular-nums; }
.card__tutar{ display:flex; flex-direction:column; line-height:1.25; }
.card__price b{ font-size:1.05rem; font-weight:700; }
.card__price s{ color:var(--text-soft); font-size:.85rem; }
/* İndirim oranı — fiyatın sağında kırmızı kutu */
.card__indirim{
  margin-left:auto; flex:0 0 auto;
  padding:4px 10px; border-radius:4px;
  background:var(--sale); color:#fff;
  font-size:.82rem; font-weight:700; letter-spacing:.02em;
}
.card__body .btn{ margin-top:12px; }

/* ---- Marka karuseli ------------------------------------------ */
.carousel__nav{ display:flex; gap:8px; }
.carousel__btn{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font-size:1.2rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:.16s;
}
.carousel__btn:hover:not(:disabled){ background:var(--ink); color:var(--gold-lt); border-color:var(--ink); }
.carousel__btn:disabled{ opacity:.3; cursor:default; }
.carousel__btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.carousel{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3 * 18px) / 4);
  gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px;
}
.carousel::-webkit-scrollbar{ display:none; }
@media (max-width:900px){ .carousel{ grid-auto-columns:calc((100% - 2 * 18px) / 3); } }
@media (max-width:640px){ .carousel{ grid-auto-columns:calc((100% - 18px) / 2); } }

/* 3'lü görselli vitrin karuseli */
.carousel--3{ grid-auto-columns:calc((100% - 2 * 18px) / 3); }
@media (max-width:900px){ .carousel--3{ grid-auto-columns:calc((100% - 18px) / 2); } }
@media (max-width:600px){ .carousel--3{ grid-auto-columns:86%; } }

.showcase{
  scroll-snap-align:start; position:relative; display:block;
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:var(--ink); border:1px solid var(--line);
  transition:transform .16s, box-shadow .22s;
}
.showcase:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.showcase__media{ position:absolute; inset:0; }
.showcase__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.showcase:hover .showcase__media img{ transform:scale(1.05); }
.showcase__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,26,23,.05) 0%, rgba(28,26,23,.35) 48%, rgba(28,26,23,.9) 100%);
}
/* görsel yoksa altın degrade zemin */
.showcase--plain .showcase__media{
  background:
    radial-gradient(90% 80% at 30% 22%, rgba(226,196,137,.34) 0%, rgba(226,196,137,0) 62%),
    linear-gradient(150deg, #2b2721 0%, #1c1a17 78%);
}
.showcase--plain .showcase__media::after{
  background:linear-gradient(180deg, rgba(28,26,23,0) 40%, rgba(28,26,23,.75) 100%);
}
.showcase__body{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:5px; padding:22px 22px 20px;
}
.showcase__sub{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt); font-weight:600;
}
.showcase__title{
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; line-height:1.15;
}
.showcase__go{
  font-family:var(--display); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:#cfc6b4; margin-top:4px; display:inline-flex; align-items:center; gap:7px;
}
.showcase__go::after{ content:"→"; transition:transform .18s; }
.showcase:hover .showcase__go{ color:var(--gold-lt); }
.showcase:hover .showcase__go::after{ transform:translateX(4px); }

/* Ana sayfa marka şeridi — yalnızca kampanya görseli (ad yazılmaz) */
.brandad{
  scroll-snap-align:start; display:block; position:relative;
  border-radius:var(--radius); overflow:hidden;
  transition:transform .18s ease, box-shadow .22s ease;
}
.brandad:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.brandad__media{
  display:block; position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--ink);
}
.brandad__media img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
.brandad:hover .brandad__media img{ transform:scale(1.05); }
/* Marka adı artık görselin üzerine yazılmıyor; koyu degrade de gereksiz. */
/* Baş harf, fotoğrafın altında bekler; fotoğraf yüklenemezse ortaya çıkar. */
.brandad__media{
  background:
    radial-gradient(90% 80% at 32% 24%, rgba(226,196,137,.3) 0%, rgba(226,196,137,0) 62%),
    linear-gradient(150deg, #2b2721 0%, #16140f 80%);
  display:flex; align-items:center; justify-content:center;
}
.brandad__media img{ position:absolute; inset:0; z-index:1; }
.brandad__initial{
  font-family:var(--display); font-size:3.4rem; font-weight:300;
  color:var(--gold-lt); letter-spacing:.06em;
}

/* Marka kartı — hem karuselde hem markalar sayfasında */
.brandtile{
  scroll-snap-align:start;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:24px 16px; text-align:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .16s, transform .14s, box-shadow .2s;
}
.brandtile:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow); }
.brandtile__logo{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:72px; margin-bottom:6px;
}
.brandtile__logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.brandtile__initial{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--gold-lt);
  font-family:var(--display); font-size:1.5rem; font-weight:400;
}
.brandtile b{ font-family:var(--display); font-size:.98rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.brandtile__n{ font-size:.79rem; color:var(--text-soft); }
.brandtile--lg{ min-height:190px; }
.brandtile--lg .brandtile__logo{ height:88px; }

.brandgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:1000px){ .brandgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .brandgrid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Favoriler ----------------------------------------------- */
.card__mediawrap{ position:relative; }
.fav{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:50%; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border:1px solid var(--line); backdrop-filter:blur(6px);
  transition:transform .14s, background .16s, border-color .16s;
}
.fav svg{ width:18px; height:18px; fill:none; stroke:var(--text-soft); stroke-width:1.7; transition:.16s; }
.fav:hover{ transform:scale(1.08); border-color:var(--sale); }
.fav:hover svg{ stroke:var(--sale); }
.fav.is-on{ background:var(--sale); border-color:var(--sale); }
.fav.is-on svg{ fill:#fff; stroke:#fff; }
.fav:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@keyframes favPop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.28); } 100%{ transform:scale(1); } }
.fav.is-on svg{ animation:favPop .3s ease; }

/* ürün detayındaki geniş favori butonu */
.fav--lg{
  position:static; width:auto; height:48px; padding:0 20px; gap:9px; border-radius:999px;
  font-family:var(--display); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text); background:transparent; backdrop-filter:none;
}
.fav--lg svg{ width:19px; height:19px; }
.fav--lg.is-on{ background:transparent; border-color:var(--sale); color:var(--sale); }
.fav--lg.is-on svg{ fill:var(--sale); stroke:var(--sale); }
.fav--lg.is-on span::before{ content:"Favorilerde"; }
.fav--lg.is-on span{ font-size:0; }
.fav--lg.is-on span::before{ font-size:.85rem; }

/* header'daki favori simgesi */
.nav__fav{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--text); transition:color .15s;
}
.nav__fav:hover{ color:var(--gold-dk); }
.nav__fav svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.6; }
.nav__fav.has svg{ fill:var(--gold-dk); stroke:var(--gold-dk); }
.nav__fav .count{
  position:absolute; top:-2px; right:-4px; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--gold-dk); color:#fff;
  font-family:var(--font); font-size:.68rem; font-weight:700; font-variant-numeric:tabular-nums;
  display:none; align-items:center; justify-content:center;
}
.nav__fav.has .count{ display:flex; }

.fav__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:32px; }
.empty__icon{
  width:56px; height:56px; margin:0 auto 18px; display:block;
  fill:none; stroke:var(--line); stroke-width:1.3;
}

/* ---- Keşfet: yatay kaydırmalı ürün şeridi --------------------- */
/* Son kart yarım görünür — kaydırılabildiği belli olsun diye. */
.carousel--urun{ grid-auto-columns:calc((100% - 3.3 * 24px) / 4.3); gap:24px; }
@media (max-width:1000px){ .carousel--urun{ grid-auto-columns:calc((100% - 2.3 * 20px) / 3.3); gap:20px; } }
@media (max-width:760px){  .carousel--urun{ grid-auto-columns:calc((100% - 1.35 * 16px) / 2.35); gap:16px; } }
@media (max-width:460px){  .carousel--urun{ grid-auto-columns:72%; } }
.carousel--urun .card{ scroll-snap-align:start; }

/* kategori ızgarasındaki "Tüm Markalar" kartı */
.card--all .card__media{
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border-color:var(--ink);
}
.card--all .card__media span{
  font-family:var(--display); font-size:.86rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-lt); text-align:center; padding:0 14px; line-height:1.7;
}
.card--all .card__media b{ display:block; font-size:1.7rem; font-weight:300; color:#fff; letter-spacing:.06em; }

/* ---- Mağaza: kenar filtreleri -------------------------------- */
.shop{ display:grid; grid-template-columns:250px 1fr; gap:40px; align-items:start; }
@media (max-width:960px){ .shop{ grid-template-columns:1fr; gap:20px; } }

.facets{ position:sticky; top:100px; }
@media (max-width:960px){
  .facets{ position:static; border:1px solid var(--line); border-radius:var(--radius); padding:0 16px; }
  .facets__toggle{ display:flex !important; }
  .facets__body{ display:none; padding-bottom:16px; }
  .facets__body.open{ display:block; }
}
.facets__toggle{
  display:none; width:100%; align-items:center; justify-content:space-between;
  background:none; border:0; padding:15px 0; font-family:var(--display); font-size:.86rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text); cursor:pointer;
}
.facet{ border-bottom:1px solid var(--line); padding:16px 0; }
.facet:first-child{ padding-top:0; }
.facet h4{
  margin:0 0 11px; font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.facet label{ display:flex; align-items:center; gap:9px; font-size:.88rem; padding:4px 0; cursor:pointer; color:var(--text-soft); }
.facet label:hover{ color:var(--text); }
.facet input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--gold-dk); cursor:pointer; flex-shrink:0; }
.facet .cnt{ margin-left:auto; font-size:.75rem; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.facet .swatch{ width:15px; height:15px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.facet__price{ display:flex; gap:8px; align-items:center; }
.facet__price input{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--text); font-family:inherit; font-size:.85rem; }

.shop__bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.shop__count{ font-size:.86rem; color:var(--text-soft); }
.shop__bar select{
  margin-left:auto; padding:10px 15px; border-radius:6px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font-size:.85rem; font-family:inherit; cursor:pointer;
}
.pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.pill{
  display:inline-flex; align-items:center; gap:7px; font-size:.78rem;
  padding:5px 12px; border-radius:999px; background:var(--wash); border:1px solid var(--line); color:var(--text);
}
.pill button{ background:none; border:0; cursor:pointer; color:var(--text-soft); font-size:1rem; line-height:1; padding:0; }
.pill button:hover{ color:var(--sale); }

/* ---- Ürün detay --------------------------------------------- */
.pdp{ display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:start; }
.pdp__media{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; background:var(--wash); border:1px solid var(--line); }

/* ---- Ürün galerisi (birden fazla fotoğraf) --------------------- */
.pdp__galeri{ display:flex; flex-direction:column; gap:12px; }
.pdp__kucukler{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
@media (max-width:520px){ .pdp__kucukler{ grid-template-columns:repeat(4,1fr); gap:8px; } }
.pdp__kucuk{
  padding:0; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--wash); overflow:hidden; cursor:pointer; aspect-ratio:4/3;
  transition:border-color .16s, transform .14s;
}
.pdp__kucuk img{ width:100%; height:100%; object-fit:cover; }
.pdp__kucuk:hover{ border-color:var(--gold); transform:translateY(-2px); }
.pdp__kucuk.is-on{ border-color:var(--ink); border-width:2px; }
:root[data-theme="dark"] .pdp__kucuk.is-on{ border-color:var(--gold); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pdp__kucuk.is-on{ border-color:var(--gold); }
}

/* kartta ikinci fotoğraf: üzerine gelince yumuşak geçiş */
.card__hover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .35s ease;
}
.card:hover .card__hover{ opacity:1; }
.pdp__media img{ width:100%; height:100%; object-fit:cover; }

/* ---- Fotoğraf büyütme ------------------------------------------------
   Büyük fotoğrafa tıklanınca tam ekran açılır. */
/* ---- Stoğa gelince haber ver ---------------------------------------- */
.haber{
  margin-top:16px; padding:15px 16px;
  background:var(--wash); border:1px solid var(--line); border-radius:var(--radius);
}
.haber label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:9px; }
.haber__satir{ display:flex; gap:9px; flex-wrap:wrap; }
.haber__satir input{
  flex:1 1 210px; min-width:0; padding:11px 13px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--paper); color:var(--text); font-family:inherit; font-size:.95rem;
}
.haber__satir .btn{ flex:none; }
.haber__not{ margin:10px 0 0; font-size:.79rem; color:var(--text-soft); line-height:1.5; }
.haber__hata{ margin:9px 0 0; font-size:.85rem; color:var(--sale, #a8323b); font-weight:600; }
.haber--ok{ border-left:3px solid var(--ok, #2f7d54); }
.haber--ok strong{ display:block; margin-bottom:3px; }

.pdp__buyutulur{ cursor:zoom-in; }

/* Sayfa arkada kaymasın; kapanınca eski yerine döner (bkz. store.js). */
body.isik-acik{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* display:flex tarayıcının hidden davranışını ezdiği için pencere
   kapanmıyordu — bu satır olmadan ekranda takılı kalır. */
.isik[hidden]{ display:none !important; }

.isik{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:20px;
  background:rgba(18,16,14,.93);
  animation:isikGir .16s ease-out;
}
@keyframes isikGir{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .isik{ animation:none } }

.isik__img{
  max-width:min(1100px, 92vw); max-height:88vh;
  width:auto; height:auto; object-fit:contain;
  border-radius:6px; background:#fff;
}

.isik__kapat{
  position:absolute; top:14px; right:16px; z-index:2;
  width:42px; height:42px; padding:0; line-height:1;
  font:400 30px/1 var(--display, system-ui); color:#f4f0e8;
  background:rgba(255,255,255,.1); border:0; border-radius:50%; cursor:pointer;
}
.isik__kapat:hover{ background:rgba(255,255,255,.22); }

.isik__ok{
  flex:none; width:46px; height:46px; padding:0; line-height:1;
  font:400 30px/1 var(--display, system-ui); color:#f4f0e8;
  background:rgba(255,255,255,.1); border:0; border-radius:50%; cursor:pointer;
}
.isik__ok:hover{ background:rgba(255,255,255,.22); }

.isik__sayac{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  font-size:.82rem; letter-spacing:.08em; color:#cfc7b8;
  background:rgba(0,0,0,.35); padding:5px 12px; border-radius:99px;
}

/* Telefonda oklar fotoğrafı ezmesin: alta, sayaçla aynı hizaya iner. */
@media (max-width:640px){
  .isik{ padding:10px; }
  .isik__img{ max-width:96vw; max-height:76vh; }
  .isik__ok{
    position:absolute; bottom:14px; width:44px; height:44px;
  }
  .isik__ok--sol{ left:calc(50% - 88px); }
  .isik__ok--sag{ left:calc(50% + 44px); }
  .isik__sayac{ bottom:24px; }
}
.pdp__brand{ font-family:var(--display); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:600; }
/* Ürün adı sayfayı ezmesin: fiyat ve satın alma öne çıksın. */
.pdp h1{
  font-size:clamp(1.25rem,1.9vw,1.6rem); font-weight:500;
  line-height:1.32; letter-spacing:.005em;
  margin:.35em 0 .5em; text-wrap:balance;
}
/* Sağ sütundaki her blok aynı iki kenarda başlayıp bitsin. */
.pdp > div:last-child > *{ max-width:none; }
.pdp__price{ display:flex; align-items:baseline; gap:12px; margin:10px 0 20px; font-variant-numeric:tabular-nums; }
.pdp__price b{ font-size:1.6rem; font-weight:700; }
.pdp__price s{ color:var(--text-soft); font-size:1.02rem; }
.pdp__price .save{ font-size:.82rem; color:#fff; font-weight:700; background:var(--sale); padding:4px 11px; border-radius:4px; }
/* İndirimli fiyat dikkat çeksin */
.pdp__price b.indirimli, .card__price b.indirimli{ color:var(--sale); }
/* ---- Sipariş takibi ------------------------------------------ */
.takip-kod{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:22px auto; padding:16px 20px; max-width:480px;
  border:1px dashed var(--gold-dk); border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 9%, var(--surface));
}
.takip-kod > span{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-soft); }
.takip-kod b{ font-size:1.15rem; letter-spacing:.09em; font-variant-numeric:tabular-nums; }
.takip-kod small{ flex:1 0 100%; font-size:.83rem; color:var(--text-soft); line-height:1.55; }
.takip-kod small a{ color:var(--accent); font-weight:600; }
.takip-form{ display:grid; gap:14px; padding:26px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--surface); }
.takip-form #tkKod{ letter-spacing:.1em; text-transform:uppercase; }
.takip-yardim{ margin-top:16px; text-align:center; font-size:.86rem; }
.takip-yardim a{ color:var(--accent); font-weight:600; }
.takip-sonuc{ padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.takip-bas{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.takip-bas h2{ margin:0 0 4px; font-size:1.2rem; }
.takip-bas .durum{ margin-left:auto; }
.takip-adimlar{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.takip-adim{ flex:1; min-width:110px; padding:9px 10px; text-align:center; border-radius:var(--radius-sm);
  background:var(--wash); color:var(--text-soft); font-size:.8rem; border:1px solid var(--line); }
.takip-adim.is-tamam{ background:color-mix(in srgb, var(--ok) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); color:var(--ok); font-weight:600; }
.takip-adim--iptal{ flex:1; background:color-mix(in srgb, var(--sale) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--sale) 40%, var(--line)); color:var(--sale); font-weight:600; }
.takip-urunler{ margin-top:18px; border-top:1px solid var(--line); }
.takip-urun{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.takip-urun span:first-child{ flex:1; }
.takip-urun small{ color:var(--text-soft); }
.takip-tutar{ margin-top:16px; }
.takip-alt{ margin:20px 0 0; text-align:center; }

/* ---- İade ---------------------------------------------------- */
.iade-kutu{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-top:12px;
  padding:12px 16px; border-radius:var(--radius-sm); font-size:.88rem;
  background:var(--wash); border:1px solid var(--line); }
.iade-kutu__baslik{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-soft); font-weight:700; }
.iade-kutu__sebep, .iade-kutu__not{ flex:1 0 100%; color:var(--text-soft); font-size:.85rem; }
.iade-kutu__kod{ padding:3px 10px; border-radius:99px; border:1px dashed currentColor;
  font-weight:700; letter-spacing:.08em; font-size:.82rem; font-variant-numeric:tabular-nums; }
.iade-kutu--onay{ background:color-mix(in srgb, var(--ok) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 32%, var(--line)); }
.iade-kutu--onay b, .iade-kutu--tamam b{ color:var(--ok); }
.iade-kutu--tamam{ background:color-mix(in srgb, var(--ok) 14%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 40%, var(--line)); }
.iade-kutu--red{ background:color-mix(in srgb, var(--sale) 9%, var(--surface));
  border-color:color-mix(in srgb, var(--sale) 32%, var(--line)); }
.iade-kutu--red b{ color:var(--sale); }
.iade-ac{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.iade-ac .hint{ display:block; margin-top:8px; font-size:.83rem; color:var(--text-soft); }
.iade-form{ margin-top:16px; display:grid; gap:11px; }
.iade-form label{ font-size:.85rem; font-weight:600; }
.iade-form select, .iade-form textarea{ padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--text);
  font-family:inherit; font-size:.92rem; width:100%; }
.iade-form select:focus, .iade-form textarea:focus{ outline:none; border-color:var(--gold); }
.iade-form__alt{ display:flex; gap:10px; flex-wrap:wrap; }
.iade-form__durum{ margin:0; font-size:.87rem; min-height:1em; color:var(--text-soft); }
.iade-form__durum--ok{ color:var(--ok); }
.iade-form__durum--hata{ color:var(--sale); }
.iade-link{ margin:10px 0 0; font-size:.86rem; }
.iade-link a{ color:var(--accent); font-weight:600; }

/* ---- Siparişe dahil ücretsiz ürünler ------------------------- */
.hediye{ margin-top:22px; }
.hediye h3{ margin:0 0 10px; font-size:.92rem; font-weight:600; }
.hediye__liste{
  display:flex; gap:8px 22px; flex-wrap:wrap; align-items:center;
  padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface);
}
.hediye__oge{ display:inline-flex; align-items:center; gap:9px; font-size:.88rem; }
.hediye__oge svg{
  width:26px; height:26px; flex:0 0 auto;
  fill:none; stroke:var(--text-soft); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Fiyatın hemen altındaki bilgi kutusu — metni panelden yazılır */
.pdp__uyari{
  margin:0 0 18px; padding:14px 18px; border-radius:var(--radius-sm);
  background:#3c4a55; color:#eef2f5;
  font-size:.87rem; line-height:1.6; max-width:52ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .pdp__uyari{ background:#2b353d; color:#dfe6ea; }
}
:root[data-theme="dark"] .pdp__uyari{ background:#2b353d; color:#dfe6ea; }
/* ---- Ürün sayfası: alttaki sekmeli bilgi bölümü -------------- */
.ptabs{ display:flex; gap:26px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:26px; }
.ptab{
  padding:0 0 13px; border:0; background:none; cursor:pointer;
  font-family:var(--display); font-size:.86rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s;
}
.ptab:hover{ color:var(--text); }
.ptab.is-active{ color:var(--text); border-bottom-color:var(--gold-dk); }
.ppane{ font-size:.93rem; line-height:1.65; }
.ozet-tablo{ width:100%; border-collapse:collapse; font-size:.92rem; }
.ozet-tablo th, .ozet-tablo td{ padding:13px 18px; text-align:left; vertical-align:top; }
.ozet-tablo th{ width:32%; font-weight:600; color:var(--text); }
.ozet-tablo td{ color:var(--text-soft); }
.ozet-tablo tr:nth-child(odd){ background:var(--wash); }
@media (max-width:560px){ .ozet-tablo th{ width:45%; } .ozet-tablo th, .ozet-tablo td{ padding:11px 12px; } }
.ozet-liste{ margin:18px 0 0; padding-left:20px; }
.ozet-liste li{ margin-bottom:8px; }
.ppane .muted{ margin-top:16px; font-size:.87rem; }

/* ---- Ürün yorumları ------------------------------------------ */
.yildiz{ color:var(--gold-dk); letter-spacing:.12em; font-size:.95rem; }
.yorum-ozet{ display:flex; align-items:center; gap:12px; padding-bottom:18px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.yorum-ozet b{ font-size:1.25rem; }
.yorum-ozet span{ color:var(--text-soft); font-size:.88rem; }
.yorumlar{ list-style:none; margin:0; padding:0; }
.yorum{ padding:18px 0; border-bottom:1px solid var(--line); }
.yorum__bas{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-bottom:7px; }
.yorum__bas b{ font-size:.95rem; }
.yorum__tarih{ margin-left:auto; color:var(--text-soft); font-size:.82rem; }
.yorum p{ margin:0; color:var(--text-soft); }
.yorum-form{ margin-top:28px; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--wash); }
.yorum-form h3{ margin:0 0 16px; font-size:1rem; }
.yorum-form__satir{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.yorum-form input, .yorum-form select, .yorum-form textarea{
  padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-family:inherit; font-size:.92rem;
}
.yorum-form input{ flex:1; min-width:180px; }
.yorum-form select{ flex:0 0 auto; }
.yorum-form textarea{ width:100%; resize:vertical; }
.yorum-form input:focus, .yorum-form select:focus, .yorum-form textarea:focus{ outline:none; border-color:var(--gold); }
.yorum-form__alt{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }
.yorum-form__durum{ margin:12px 0 0; font-size:.87rem; min-height:1em; color:var(--text-soft); }
.yorum-form__durum--ok{ color:var(--ok); }
.yorum-form__durum--hata{ color:var(--sale); }
/* Yorumdaki fotoğraflar */
.yorum__fotolar{ display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }
.yorum__fotolar img{ width:88px; height:88px; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--line); cursor:zoom-in; transition:transform .15s; }
.yorum__fotolar img:hover{ transform:scale(1.04); }
.yorum-foto{ display:flex; gap:9px; flex-wrap:wrap; margin-top:12px; }
.yorum-foto__oge{ position:relative; display:inline-block; }
.yorum-foto__oge img{ width:74px; height:74px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); display:block; }
.yorum-foto__oge button{ position:absolute; top:-7px; right:-7px; width:22px; height:22px; padding:0;
  border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:.95rem; line-height:1; cursor:pointer; }
.yorum-foto__ekle{ display:inline-block; margin-top:12px; padding:9px 15px; border:1px dashed var(--line);
  border-radius:var(--radius-sm); background:var(--surface); font-size:.86rem; cursor:pointer; }
.yorum-foto__ekle:hover{ border-color:var(--gold); }
.yorum-foto__ekle span{ color:var(--text-soft); font-size:.8rem; }
/* Fotoğrafı büyütme katmanı */
.foto-buyut{ position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,.8); cursor:zoom-out; }
.foto-buyut img{ max-width:100%; max-height:100%; border-radius:var(--radius); }
.pdp ul{ padding-left:18px; margin:0 0 24px; }
.pdp li{ margin-bottom:6px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.qty button{ width:42px; height:46px; background:var(--wash); border:0; font-size:1.1rem; cursor:pointer; color:var(--text); }
.qty button:hover{ background:var(--line); }
.qty input{ width:48px; height:46px; text-align:center; border:0; font-size:1rem; background:var(--surface); color:var(--text); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }
/* Satın alma satırı: adet kutusu sabit, iki düğme kalan yeri paylaşır;
   favori düğmesi alt satırda tam genişlik — böylece bütün bloklar aynı
   iki kenarda başlayıp biter. */
.pdp__buy{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.pdp__buy .qty{ flex:0 0 auto; }
.pdp__buy > .btn{ flex:1 1 150px; }
.pdp__buy .fav--lg{ flex:1 0 100%; justify-content:center; }
@media (max-width:860px){ .pdp{ grid-template-columns:1fr; gap:26px; } }

/* ---- Sepet -------------------------------------------------- */
.cart-layout{ display:grid; grid-template-columns:1.6fr 1fr; gap:40px; align-items:start; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }
.line{ display:grid; grid-template-columns:104px 1fr auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.line__media{ width:104px; height:78px; border-radius:var(--radius-sm); overflow:hidden; background:var(--wash); border:1px solid var(--line); }
.line__media img{ width:100%; height:100%; object-fit:cover; }
.line__name{ font-family:var(--display); font-size:1.02rem; font-weight:500; }
.line__meta{ font-size:.81rem; color:var(--text-soft); }
.line__remove{ background:none; border:0; color:var(--sale); font-size:.81rem; cursor:pointer; padding:4px 0; }
.line__right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .line{ grid-template-columns:76px 1fr; } .line__media{ width:76px; height:60px; } .line__right{ grid-column:1/-1; flex-direction:row; justify-content:flex-end; align-items:baseline; gap:10px; width:100%; } }

.summary{ background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); padding:24px; position:sticky; top:100px; }
.summary h3{ margin-bottom:16px; }
.summary__row{ display:flex; justify-content:space-between; padding:8px 0; font-size:.92rem; font-variant-numeric:tabular-nums; }
.summary__row--total{ border-top:1px solid var(--line); margin-top:8px; padding-top:14px; font-size:1.1rem; font-weight:700; }

/* ---- Sipariş formu: seçenekler ve hata durumu ------------------ */
.secenek{
  display:flex; align-items:flex-start; gap:9px;
  font-weight:400; font-size:.87rem; line-height:1.45;
  margin:6px 0; cursor:pointer; color:var(--text);
}
.secenek input{ width:auto; flex-shrink:0; margin-top:3px; accent-color:var(--gold-dk); }
.secenek a{ color:var(--accent); text-decoration:underline; }
.secenek em{ color:var(--text-soft); font-style:normal; }

.onaylar{
  margin:18px 0 14px; padding:14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--wash);
}
.onaylar .secenek:first-child{ margin-top:0; }
.onaylar .secenek:last-child{ margin-bottom:0; }

/* Üyelik formundaki izin kanalları */
.izinler{ margin:16px 0 4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--wash); }
.izinler legend{ padding:0 6px; font-size:.78rem; font-weight:600; color:var(--text-soft); }
.izinler .secenek{ display:inline-flex; margin:0 16px 0 0; align-items:center; }

/* doğrulamadan geçemeyen alan */
.summary input.hatali,
.summary textarea.hatali{ border-color:var(--sale); background:color-mix(in srgb, var(--sale) 7%, var(--surface)); }
.summary .msg{ margin:0 0 12px; }

.summary h3{ padding-top:4px; border-top:1px solid var(--line); }
.summary h3:first-of-type{ border-top:0; padding-top:0; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.79rem; font-weight:600; margin-bottom:5px; letter-spacing:.03em; }
.field input, .field textarea, .field select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:6px;
  font-family:inherit; font-size:.94rem; background:var(--surface); color:var(--text);
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.notice{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--radius-sm); padding:14px 16px; font-size:.89rem; }
.iban-box{ font-family:ui-monospace,"Cascadia Code","Consolas",monospace; background:var(--wash); border:1px dashed var(--line); border-radius:6px; padding:12px 14px; margin:10px 0; font-size:.86rem; }
.empty{ text-align:center; padding:64px 20px; }
.empty p{ margin-left:auto; margin-right:auto; }

/* ---- Sepet başlığı + ücretsiz kargo çubuğu ------------------ */
.cart-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.cart-head h1{ margin:0; font-size:1.3rem; }
.cart-head__sil{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 0; cursor:pointer; color:var(--sale); font-size:.83rem; font-family:inherit; }
.cart-head__sil svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cart-head__sil:hover{ text-decoration:underline; }

.kargobar{ display:flex; align-items:center; gap:12px; margin:18px 0 4px; padding:13px 16px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--gold) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--gold) 34%, var(--line)); }
.kargobar svg{ width:26px; height:26px; flex-shrink:0; fill:none; stroke:var(--gold-dk); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.kargobar div{ flex:1; min-width:0; }
.kargobar p{ margin:0 0 7px; font-size:.86rem; }
.kargobar__yol{ display:block; height:5px; border-radius:99px; background:color-mix(in srgb, var(--gold-dk) 22%, transparent); overflow:hidden; }
.kargobar__yol i{ display:block; height:100%; border-radius:99px; background:var(--gold-dk); transition:width .35s ease; }
.kargobar--tamam{ background:color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color:color-mix(in srgb, var(--ok) 36%, var(--line)); }
.kargobar--tamam svg{ stroke:var(--ok); }
.kargobar--tamam .kargobar__yol i{ background:var(--ok); }

/* ---- Sepet satırı ------------------------------------------- */
a.line__name{ display:block; color:inherit; }
a.line__name:hover{ color:var(--accent); }
.line__variant{ display:inline-block; margin:6px 6px 10px 0; padding:2px 9px; border:1px solid var(--line); border-radius:99px; background:var(--wash); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); }
.line__stok{ display:inline-block; margin:6px 0 10px; padding:2px 9px; border-radius:99px; font-size:.72rem; color:var(--sale); background:color-mix(in srgb, var(--sale) 10%, transparent); }

/* ---- Renk / beden seçenekleri ------------------------------- */
.varyant{ margin:0 0 18px; }
.varyant__baslik{
  display:block; margin-bottom:9px;
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-soft);
}
.varyant__renkler, .varyant__bedenler{ display:flex; flex-wrap:wrap; gap:9px; }

.varyant__renk{
  display:flex; flex-direction:column; gap:5px; width:88px; padding:4px;
  border:2px solid var(--line); border-radius:9px; background:var(--surface);
  transition:border-color .15s ease;
}
.varyant__foto{
  display:block; aspect-ratio:4/3; border-radius:6px; overflow:hidden;
  background:var(--wash);
}
.varyant__renk img{ width:100%; height:100%; object-fit:contain; }
/* Renk adı iki satırı geçmez; uzun adlar kırpılır. */
.varyant__ad{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-align:center; font-size:.68rem; line-height:1.3;
  color:var(--text-soft);
}
.varyant__renk:hover{ border-color:var(--text-soft); }
.varyant__renk.is-secili{ border-color:var(--gold-dk); }
.varyant__renk.is-secili .varyant__ad{ color:var(--text); font-weight:600; }

.varyant__beden{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; padding:9px 14px;
  border:2px solid var(--line); border-radius:7px; background:var(--surface);
  font-size:.88rem; font-weight:600; font-variant-numeric:tabular-nums;
  transition:border-color .15s ease;
}
.varyant__beden:hover{ border-color:var(--text-soft); }
.varyant__beden.is-secili{ border-color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 12%, var(--surface)); }
/* Tükenen varyant seçilebilir kalır (müşteri görsün) ama soluk görünür. */
.varyant__renk.is-tukendi, .varyant__beden.is-tukendi{ opacity:.42; }
.varyant__beden.is-tukendi{ text-decoration:line-through; }

/* ---- Tükendi ------------------------------------------------ */
/* Fotoğrafın altına oturan şerit: ürün kendi renginde kalır,
   tükendiği aşağıdaki yazıdan anlaşılır. */
.card__tukendi{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:10px 0; text-align:center;
  background:color-mix(in srgb, var(--line) 62%, var(--surface));
  color:var(--sale);
  font-family:var(--display); font-size:.84rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
}
.card--tukendi .card__name{ color:var(--text-soft); }

/* ---- Kampanyalar -------------------------------------------- */
.summary__row--ind{ color:var(--ok); }
.summary__row--ind span:first-child{ font-size:.85rem; }
.kampanyalar{ margin-top:24px; padding:16px 18px; border:1px dashed var(--line); border-radius:var(--radius-sm); background:var(--wash); }
.kampanyalar h3{ margin:0 0 10px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); }
.kampanyalar__satir{ display:flex; justify-content:space-between; gap:14px; padding:5px 0; font-size:.88rem; }
.kampanyalar__satir b{ color:var(--ok); white-space:nowrap; }
.card__tag--kampanya{ background:var(--ok); color:#fff; }

/* ---- İndirim kodu kutusu ------------------------------------ */
.kupon{ margin:0 0 18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.kupon label{ display:block; margin-bottom:7px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
.kupon__satir{ display:flex; gap:8px; }
.kupon__satir input{ flex:1; min-width:0; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font-size:.9rem; letter-spacing:.06em; text-transform:uppercase; }
.kupon__satir input:focus{ outline:none; border-color:var(--gold); }
.kupon__satir .btn{ flex:0 0 auto; }
.kupon__durum{ margin:8px 0 0; font-size:.82rem; min-height:1em; color:var(--text-soft); }
.kupon__durum--hata{ color:var(--danger, #b03a41); }
.kupon__durum a{ color:var(--accent); font-weight:600; }
.kupon__uygulandi{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.86rem; color:var(--ok); }
.kupon__kod{ padding:5px 12px; border-radius:99px; border:1px dashed var(--ok); font-weight:700; letter-spacing:.1em; }
.kupon__sil{ margin-left:auto; background:none; border:0; padding:0; color:var(--text-soft); font-size:.82rem; text-decoration:underline; cursor:pointer; }
.kupon__sil:hover{ color:var(--text); }

/* ---- Yeni üye penceresi -------------------------------------- */
.btn--dark{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn--dark:hover{ background:var(--text); border-color:var(--text); color:#fff; }
.uyepop{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.55); animation:uyepopGir .18s ease-out; }
.uyepop__kutu{ position:relative; width:100%; max-width:420px; padding:34px 30px 26px; border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); text-align:center; }
.uyepop__kapat{ position:absolute; top:12px; right:14px; width:32px; height:32px; border:0; background:none; color:var(--text-soft); font-size:1.5rem; line-height:1; cursor:pointer; }
.uyepop__kapat:hover{ color:var(--text); }
.uyepop__ikon{ margin:0 auto 14px; width:58px; height:58px; color:var(--text); }
.uyepop__ikon svg{ width:100%; height:100%; }
.uyepop h2{ margin:0 0 10px; font-size:1.6rem; }
.uyepop p{ margin:0 0 18px; font-size:.92rem; color:var(--text-soft); line-height:1.55; }
.uyepop__kod{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:10px 10px 10px 18px; border-radius:var(--radius-sm); background:var(--wash); border:1px solid var(--line); }
.uyepop__kod span{ font-size:1.25rem; font-weight:800; letter-spacing:.08em; }
.uyepop__hayir{ display:block; width:100%; margin-top:14px; background:none; border:0; padding:0; color:var(--text-soft); font-size:.86rem; cursor:pointer; }
.uyepop__hayir:hover{ color:var(--text); text-decoration:underline; }
@keyframes uyepopGir{ from{ opacity:0 } to{ opacity:1 } }
@media (max-width:420px){ .uyepop__kutu{ padding:30px 20px 22px; } .uyepop h2{ font-size:1.35rem; } }
.pdp__kampanya{ display:inline-block; margin:-4px 0 14px; padding:6px 12px; border-radius:99px; background:color-mix(in srgb, var(--ok) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); color:var(--ok); font-size:.85rem; font-weight:600; }

/* ---- Stok durumu -------------------------------------------- */
.stok{ margin:-6px 0 14px; font-size:.86rem; font-weight:600; }
.stok--var{ color:var(--ok); }
.stok--az{ color:var(--sale); }
.stok--yok{ color:var(--text-soft); }
.stok::before{ content:"● "; font-size:.7em; vertical-align:middle; }
.line__right s{ color:var(--text-soft); font-size:.84rem; }
.qty__sil{ display:inline-flex !important; align-items:center; justify-content:center; color:var(--sale) !important; }
.qty__sil svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cart-devam{ margin-top:20px; text-align:right; }
.cart-devam a{ font-size:.88rem; color:var(--accent); text-decoration:underline; }

.bedava{ color:var(--ok); font-weight:600; }
.guven{ list-style:none; padding:0; margin:18px 0 0; }
.guven li{ position:relative; padding-left:20px; margin-bottom:8px; font-size:.81rem; color:var(--text-soft); }
.guven li::before{ content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700; }

/* ---- Ödeme sayfası ------------------------------------------ */
.header--sade{ border-bottom:1px solid var(--line); }
.nav--sade{ min-height:74px; }
.nav__guven{ display:inline-flex; align-items:center; gap:7px; font-size:.83rem; color:var(--text-soft); white-space:nowrap; }
.nav__guven svg{ width:19px; height:19px; fill:none; stroke:var(--ok); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.footer--sade .footer__bottom{ border-top:0; }

.section--co{ padding-top:26px; }
.co-adimlar{ display:flex; align-items:center; gap:12px; margin-bottom:24px; font-size:.87rem; }
.co-adimlar a, .co-adimlar b{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--text-soft); }
.co-adimlar b{ color:var(--text); font-weight:600; }
.co-adimlar i{ display:grid; place-items:center; width:23px; height:23px; border-radius:50%; border:1px solid var(--line); background:var(--wash); font-style:normal; font-size:.76rem; }
.co-adimlar b i{ background:var(--gold-dk); border-color:var(--gold-dk); color:#fff; }
.co-adimlar__ok{ color:var(--text-soft); }

.co-layout{ display:grid; grid-template-columns:1.55fr 1fr; gap:40px; align-items:start; }
.co-main{ display:grid; gap:18px; }
.co-side .summary{ padding:20px; }

.co-step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.co-step > h2{ display:flex; align-items:center; gap:11px; margin:0; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--wash); font-size:1rem; }
.co-step > h2 i{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--gold-dk); color:#fff; font-style:normal; font-size:.82rem; font-weight:700; font-family:var(--display); }
.co-step__ic{ padding:20px 22px 6px; }
.co-step--hata{ border-color:var(--sale); }
.co-step--hata > h2{ background:color-mix(in srgb, var(--sale) 8%, var(--wash)); }
.co-ipucu{ margin:0 0 14px; font-size:.8rem; color:var(--text-soft); }
.field--dar{ max-width:220px; }

.co-tip{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.co-tip .secenek{ flex:1 1 150px; margin:0; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--wash); align-items:center; cursor:pointer; }
.co-tip .secenek:has(input:checked){ border-color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.co-ayni{ margin:4px 0 14px; }

.co-odeme{ display:flex; gap:11px; align-items:flex-start; margin-bottom:10px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--wash); cursor:pointer; }
.co-odeme:has(input:checked){ border-color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.co-odeme input{ width:auto; flex-shrink:0; margin-top:3px; accent-color:var(--gold-dk); }
.co-odeme b{ display:block; font-size:.94rem; }
.co-odeme small{ display:block; margin-top:3px; font-size:.79rem; color:var(--text-soft); }

/* ---- Ödeme yöntemi sekmeleri --------------------------------- */
.pay-tabs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px; }
.pay-tab{ padding:13px 15px; text-align:left; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--wash); color:var(--text); cursor:pointer; transition:border-color .15s, background .15s; }
.pay-tab:hover{ border-color:var(--gold); }
.pay-tab b{ display:block; font-size:.9rem; }
.pay-tab small{ display:block; margin-top:3px; font-size:.76rem; color:var(--text-soft); }
.pay-tab.is-active{ border-color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.pay-tab.is-active b{ color:var(--gold-dk); }
.pay-pane{ font-size:.88rem; line-height:1.6; color:var(--text-soft); }
.pay-pane p{ margin:0 0 10px; }
.pay-pane strong{ color:var(--text); }
.kart-logolar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.kart-logolar span{ padding:5px 11px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--text); }
.kart-3d{ padding:10px 13px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--ok) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--ok) 35%, var(--line)); color:var(--ok); font-weight:600; }

.co-ozet__bas{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.co-ozet__bas h3{ margin:0; border:0; padding:0; }
.co-ozet__bas a{ font-size:.8rem; color:var(--accent); text-decoration:underline; }
.co-urunler{ display:grid; gap:12px; max-height:290px; overflow-y:auto; padding-bottom:14px; border-bottom:1px solid var(--line); }
.co-urun{ display:grid; grid-template-columns:50px 1fr auto; gap:11px; align-items:center; font-size:.83rem; }
/* Adet rozeti köşeden taştığı için kırpma görsele verilir, kutuya değil. */
.co-urun__gorsel{ position:relative; display:block; width:50px; height:50px; }
.co-urun__gorsel img{ width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.co-urun__adet{ position:absolute; top:-7px; right:-7px; display:grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:var(--ink); color:#fff; font-size:.68rem; font-weight:700; }
.co-urun__ad{ line-height:1.35; }
.co-urun__ad small{ display:block; color:var(--text-soft); font-size:.75rem; }
.co-urun__fiyat{ font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.co-ozet__tutar{ padding-top:8px; }
.co-not{ margin-top:10px; font-size:.78rem; color:var(--text-soft); }

.field input.hatali,
.field select.hatali,
.field textarea.hatali{ border-color:var(--sale); background:color-mix(in srgb, var(--sale) 7%, var(--surface)); }
.field--orta{ max-width:340px; }
/* Açılır listeler kendi okunu çizsin; yükseklik metin kutularıyla aynı kalsın. */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8578' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
.field select:disabled{ opacity:.55; cursor:not-allowed; }

@media (max-width:980px){
  .co-layout{ grid-template-columns:1fr; gap:24px; }
  .co-side .summary{ position:static; }
  .co-urunler{ max-height:none; }
}
@media (max-width:560px){
  .co-step > h2{ padding:14px 16px; }
  .co-step__ic{ padding:16px 16px 4px; }
  .field--dar{ max-width:none; }
  .nav__guven{ display:none; }
}

/* ---- İçerik sayfaları ------------------------------------- */
.prose{ max-width:72ch; }
.prose h2{ margin-top:1.7em; }
.prose h3{ margin-top:1.4em; }
.prose ul{ padding-left:20px; }
.prose li{ margin-bottom:6px; }
.prose .placeholder{ background:color-mix(in srgb, var(--gold) 30%, var(--surface)); padding:0 4px; border-radius:3px; }

/* Yasal sayfalardaki tablolar — dar ekranda kendi içinde yana kayar. */
.prose .tablo{ overflow-x:auto; margin:18px 0 22px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); }
.prose .tablo table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.87rem; }
.prose .tablo th,
.prose .tablo td{ padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.prose .tablo th{ background:color-mix(in srgb, var(--gold) 14%, var(--surface));
  font-weight:600; font-size:.79rem; letter-spacing:.02em; }
.prose .tablo td{ color:var(--text-soft); }
.prose .tablo tr:last-child td{ border-bottom:none; }

/* Açık rıza kutuları — sitede işaretlenmez, metnin ne olduğunu gösterir. */
.prose .riza{ background:var(--wash); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; margin:20px 0; }
.prose .riza__tag{ display:inline-block; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; color:var(--accent); margin-bottom:10px; }
.prose .riza p{ margin:0 0 10px; }
.prose .riza p:last-child{ margin-bottom:0; }
.prose .riza__kutu{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem;
  color:var(--text); margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.prose .riza__kutu span:first-child{ flex:none; width:15px; height:15px;
  border:1.5px solid var(--text-soft); border-radius:3px; margin-top:4px; }

/* Uzun yasal sayfaların başındaki içindekiler listesi. */
.prose .icindekiler{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 24px; margin-bottom:8px; }
.prose .icindekiler p{ font-weight:600; margin:0 0 10px; font-size:.9rem; }
.prose .icindekiler ol{ margin:0; padding-left:20px; font-size:.9rem;
  columns:2; column-gap:32px; }
.prose .icindekiler li{ margin-bottom:5px; break-inside:avoid; }
@media (max-width:560px){ .prose .icindekiler ol{ columns:1; } }

/* ---- Footer ---------------------------------------------- */
.footer{ background:var(--ink); color:#b3a992; margin-top:0; }
.footer a{ color:inherit; }
.footer a:hover{ color:var(--gold-lt); }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding:56px 0 34px; }
.footer h4{ color:#fff; font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 15px; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:9px; font-size:.87rem; }
.footer__brand{ display:flex; align-items:center; gap:12px; }
.footer__brand img{ width:52px; height:52px; border-radius:8px; }
.footer__brand span{ font-family:var(--display); font-size:1.1rem; font-weight:600; letter-spacing:.16em; color:#fff; }
.footer__bottom{ border-top:1px solid #34302a; padding:18px 0; font-size:.79rem; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media (max-width:860px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }

/* ---- Üyelik: giriş / kayıt ---------------------------------- */
.auth{ max-width:440px; margin:0 auto; }
.auth__box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.auth__logo{ width:64px; height:64px; border-radius:11px; margin:0 auto 16px; }
.auth h1{ text-align:center; font-size:1.4rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.auth__sub{ text-align:center; color:var(--text-soft); font-size:.88rem; margin-bottom:22px; }
.auth__switch{ display:flex; gap:4px; background:var(--wash); border:1px solid var(--line); border-radius:8px; padding:4px; margin-bottom:24px; }
.auth__switch button{
  flex:1; padding:10px; border:0; border-radius:6px; background:none; cursor:pointer;
  font-family:var(--display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); transition:.16s;
}
.auth__switch button.is-on{ background:var(--ink); color:var(--gold-lt); }
.auth__alt{ text-align:center; font-size:.85rem; margin-top:18px; }
/* ---- Sipariş alındı ekranı ---------------------------------- */
.tamam{ max-width:560px; margin:0 auto; text-align:center; padding:20px 0 40px; }
.tamam__ikon{ width:74px; height:74px; margin:0 auto 18px; }
.tamam__ikon svg{ width:100%; height:100%; fill:none; stroke:var(--ok); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tamam h1{ font-size:1.7rem; margin-bottom:8px; }
.tamam__no{ font-size:1.05rem; margin-bottom:6px; }
.tamam__no strong{ color:var(--accent); font-variant-numeric:tabular-nums; }
.tamam__ozet{
  margin:26px 0; padding:18px 20px; text-align:left;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--wash);
}
.tamam__iban{ text-align:left; margin-bottom:26px; }
.tamam__butonlar{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---- Hesabım: kargo bilgisi --------------------------------- */
.kargobilgi{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding:10px 14px; border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--ok) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--ok) 32%, var(--line));
  font-size:.85rem;
}
.kargobilgi__baslik{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ok); font-weight:700;
}
.kargobilgi__no b{ font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.kargobilgi__tarih{ color:var(--text-soft); font-size:.8rem; }
.kargobilgi__git{ margin-left:auto; padding:7px 15px; border-radius:99px; background:var(--ink); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.kargobilgi__git:hover{ background:var(--gold-dk); color:var(--ink); }

.faturabilgi{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:8px; padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--wash); border:1px solid var(--line); font-size:.85rem;
}
.faturabilgi__baslik{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-soft); font-weight:700;
}
.faturabilgi b{ font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.faturabilgi__tarih{ color:var(--text-soft); font-size:.8rem; }
.faturabilgi__not{ margin-left:auto; color:var(--text-soft); font-size:.8rem; }
.faturabilgi__git{ margin-left:auto; padding:7px 15px; border-radius:99px; border:1px solid var(--ink); color:var(--text); font-size:.78rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; }
.faturabilgi__git:hover{ background:var(--ink); color:#fff; }

/* ---- Hesabım: üyelik bilgileri ------------------------------ */
.uyelik{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:820px){ .uyelik{ grid-template-columns:1fr; } }
.uyelik__kutu{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; background:var(--surface);
}
.uyelik__kutu h2{ margin:0 0 16px; font-size:1rem; letter-spacing:.04em; }
.hint-alt{ display:block; margin-top:5px; font-size:.76rem; color:var(--text-soft); }
.dogum{ display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:9px; }
.field input:disabled, .field select:disabled{ background:var(--wash); color:var(--text-soft); cursor:not-allowed; }

/* ---- Hesabım: adres defteri --------------------------------- */
.adres-kart{
  border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; margin-bottom:12px; background:var(--surface);
}
.adres-kart.is-varsayilan{ border-color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.adres-kart__bas{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.adres-kart__bas .sp{ flex:1; }
.adres-kart__ic{ font-size:.87rem; line-height:1.6; color:var(--text-soft); }
.badge-varsayilan{
  padding:2px 9px; border-radius:99px; background:var(--gold-dk); color:#fff;
  font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}

/* "Üye Olmadan Devam Et" ayracı — başlık, çizginin üstünde durur. */
.auth__ayrac{ position:relative; text-align:center; margin:28px 0 20px; }
.auth__ayrac::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
.auth__ayrac span{
  position:relative; padding:0 14px; background:var(--surface);
  font-family:var(--display); font-size:.86rem; font-weight:500;
  letter-spacing:.06em; color:var(--text);
}
.auth__alt a{ color:var(--accent); font-weight:600; cursor:pointer; }
.msg{ border-radius:8px; padding:12px 14px; font-size:.87rem; margin-bottom:16px; }
.msg--err{ background:color-mix(in srgb, var(--sale) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--sale) 40%, transparent); color:var(--sale); }
.msg--ok{ background:color-mix(in srgb, var(--ok) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); color:var(--ok); }
.msg--info{ background:var(--wash); border:1px solid var(--line); border-left:3px solid var(--gold); }

/* header'daki hesap simgesi — favori/sepet ile aynı boy, altında ipucu */
.nav__user{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--text); transition:color .15s;
}
.nav__user:hover{ color:var(--gold-dk); }
.nav__user svg{
  width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
/* Giriş yapılmışsa simge altın renginde durur. */
.nav__user.is-uye{ color:var(--gold-dk); }

.nav__ipucu{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  padding:7px 12px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  font-family:var(--font); font-size:.78rem; font-weight:400;
  letter-spacing:0; text-transform:none; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s; z-index:70;
}
.nav__user:hover .nav__ipucu,
.nav__user:focus-visible .nav__ipucu{ opacity:1; visibility:visible; }
/* Dokunmatikte ipucu balonu anlamsız; simge zaten sayfaya gidiyor. */
@media (hover:none){ .nav__ipucu{ display:none; } }

/* ---- Hesabım ------------------------------------------------- */
.account{ display:grid; grid-template-columns:230px 1fr; gap:38px; align-items:start; }
@media (max-width:820px){ .account{ grid-template-columns:1fr; gap:20px; } }
.account__side{ position:sticky; top:100px; }
@media (max-width:820px){ .account__side{ position:static; } }
.account__who{ background:var(--wash); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
.account__who b{ display:block; font-family:var(--display); font-size:1rem; }
.account__who span{ font-size:.82rem; color:var(--text-soft); word-break:break-all; }
.account__menu{ display:flex; flex-direction:column; gap:2px; }
.account__menu button{
  text-align:left; background:none; border:0; border-radius:7px; cursor:pointer;
  padding:11px 14px; font-family:var(--display); font-size:.85rem; letter-spacing:.06em;
  color:var(--text-soft); transition:.15s;
}
.account__menu button:hover{ background:var(--wash); color:var(--text); }
.account__menu button.is-on{ background:var(--ink); color:var(--gold-lt); }
@media (max-width:820px){ .account__menu{ flex-direction:row; overflow-x:auto; } }

.order{ border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:14px; background:var(--surface); }
.order__top{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.order__no{ font-family:var(--display); font-weight:600; letter-spacing:.06em; }
.order__date{ font-size:.82rem; color:var(--text-soft); }
.order__sum{ margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; }
.order__items{ font-size:.87rem; color:var(--text-soft); }
.order__items div{ padding:3px 0; }
.durum{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:4px; }
.durum--yeni{ background:color-mix(in srgb, var(--gold) 26%, transparent); color:var(--gold-dk); }
.durum--hazirlaniyor{ background:color-mix(in srgb, #2f6fbd 18%, transparent); color:#2f6fbd; }
.durum--kargoda{ background:color-mix(in srgb, #6b46c1 18%, transparent); color:#6b46c1; }
.durum--teslim{ background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.durum--iptal{ background:color-mix(in srgb, var(--sale) 15%, transparent); color:var(--sale); }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .durum--yeni{ color:var(--gold-lt); }
  :root:not([data-theme="light"]) .durum--hazirlaniyor{ color:#8ab4f0; }
  :root:not([data-theme="light"]) .durum--kargoda{ color:#b9a2f0; }
}

/* ---- Toast ----------------------------------------------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--gold-lt); padding:13px 24px; border-radius:8px;
  font-size:.87rem; font-weight:500; opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; z-index:100; box-shadow:var(--shadow);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Yardımcılar ------------------------------------- */
.skip{ position:absolute; left:-999px; }
/* Ekranda görünmez ama arama motoru ve ekran okuyucu tarafından okunur. */
.gizli-baslik{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip:focus{ left:12px; top:12px; background:var(--surface); color:var(--text); padding:8px 14px; border-radius:8px; z-index:200; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================================
   TELEFONDA DOKUNMA ALANLARI
   ----------------------------------------------------------------------------
   Ölçtüğümüzde menü düğmesi 34×26, slider noktaları 3 piksel yüksekliğinde,
   kalp ve ok düğmeleri 36–38 pikseldi. Parmakla güvenli basılabilmesi için
   önerilen en küçük ölçü 44×44'tür.

   Görünüm değişmiyor: düğmeler aynı boyutta duruyor, yalnızca çevrelerindeki
   basılabilir alan büyütülüyor (padding + background-clip).
   ========================================================================== */
@media (max-width:900px){

  /* Menü düğmesi — mobildeki en önemli kontrol */
  .nav__toggle{
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
    margin:0 -8px;                 /* büyüyen alan yerleşimi kaydırmasın */
  }

  /* Üst bardaki hesap / favori / sepet simgeleri */
  .nav__user, .nav__fav, .nav__cart{ min-width:44px; min-height:44px; }

  /* Slider noktaları: çizgi ince kalsın, basılan alan yükselsin */
  /* Çizgi 3 piksel kalır; üstüne/altına eklenen boşluk basılabilir alanı
     44 piksele çıkarır ama görünmez (background yalnızca içeriğe boyanır). */
  .hero__dots{ bottom:8px; }
  .hero__dots button,
  .hero__dots button.is-on{      /* .is-on'daki background kısayolu clip'i
                                    sıfırlıyor; burada geri veriliyor */
    box-sizing:content-box;
    height:3px; padding:20px 0;
    background-clip:content-box;
  }

  /* Ürün şeridi okları */
  .carousel__btn{ width:44px; height:44px; }

  /* Ürün kartındaki kalp */
  .fav{ width:44px; height:44px; }

  /* Küçük düğmeler (Sepete Ekle vb.) 38 pikseldi */
  .btn--sm{ min-height:44px; }

  /* Alt menü bağlantıları: satırlar 15 piksel yüksekliğindeydi,
     üst üste binmeden basılabilsin diye aralarına boşluk konur */
  .footer a{ display:inline-block; padding:7px 0; }

  /* Arama kutusu */
  .search input, input[type="search"]{ min-height:44px; }
}