/* ==========================================================================
   BUTİK MODA — Tuna Creative hazır moda e-ticaret teması
   --------------------------------------------------------------------------
   GÖRSEL DÜNYA: krem tuval, neredeyse siyah metin, başlıklarda ince serif.
   VURGU RENGİ YOKTUR — bu bilinçli bir karardır.

   NEDEN RENK YOK: katalogdaki Mağaza Starter beyaz zemin + kırmızı vurgu
   üzerine kurulu. İkisi de renk vurgusu kullansaydı "aynı temanın rengi
   değişmiş hâli" gibi dururdu. Burada hiyerarşiyi ÖLÇÜ, BOŞLUK ve
   TİPOGRAFİ kuruyor; eylem düğmeleri siyah. Moda perakendesinin kendi dili
   de budur — ürün fotoğrafı zaten en renkli şey, arayüz onunla yarışmaz.

   NEDEN SERİF: ilk üç tema Poppins kullanıyor. Cormorant Garamond kendi
   sunucumuza gömüldü (SIL OFL, harici istek yok). Serif YALNIZ başlıklarda;
   gövde metni ve arayüz Poppins — uzun metinde ince serif okunabilirliği
   düşürür.

   ÖNCEKİ TEMALARDAN TAŞINAN KURALLAR:
     · harici istek yok — CDN, ikon fontu, JS kütüphanesi kullanılmaz
     · degrade metin yok, dekoratif desen zemin yok
     · punto büyüdükçe satır sıkışır ve harfler yaklaşır
     · `ease-in` UI'da kullanılmaz; hareket azaltma sıfır değil, yumuşak
     · telefonda hiçbir metin 11px'in altına inmez
     · renk tek başına bilgi taşımaz (stok, hata, durum)
   ========================================================================== */

:root {
    /* — Renk — krem tuval, vurgu rengi yok */
    --b-paper: #faf7f2;         /* ana zemin */
    --b-paper-2: #f2ede5;       /* bölüm zemini / görsel kutusu */
    --b-paper-3: #e8e1d6;       /* yer tutucu */
    --b-line: #ded6c9;
    --b-line-strong: #c2b8a8;

    --b-ink: #14120f;           /* ana metin — kremde 15.9:1 */
    --b-ink-soft: #57514a;      /* ikincil metin — kremde 7.4:1 */
    --b-ink-dim: #857d73;       /* yalnız 14px+ etiket */

    --b-on-ink: #faf7f2;        /* siyah zemin üstünde metin */

    /* Durum renkleri — vurgu DEĞİL, yalnız bilgi. Metinle birlikte kullanılır. */
    --b-ok: #3f6b4f;
    --b-ok-tint: #e9f0ea;
    --b-warn: #8a6a2f;
    --b-warn-tint: #f6efe1;
    --b-err: #9b3a2e;
    --b-err-tint: #f7e9e6;

    /* — Punto ölçeği —
       Serif başlıklar optik olarak küçük görünür; ölçek Poppins temalarından
       bir kademe yukarı çekildi. */
    --b-text-xs: 0.75rem;
    --b-text-sm: 0.875rem;
    --b-text-base: 1rem;
    --b-text-lg: 1.125rem;
    --b-text-xl: 1.5rem;
    --b-text-2xl: 2rem;
    --b-text-3xl: 2.75rem;
    --b-text-4xl: 4rem;
    --b-text-5xl: 5.5rem;

    --b-lh-none: 1;
    --b-lh-tight: 1.08;
    --b-lh-snug: 1.3;
    --b-lh-normal: 1.65;
    --b-track-tighter: -0.02em;
    --b-track-tight: -0.01em;
    --b-track-normal: 0;
    --b-track-wide: 0.1em;
    --b-track-wider: 0.18em;
    --b-track-widest: 0.28em;

    --b-space-1: 4px;
    --b-space-2: 8px;
    --b-space-3: 12px;
    --b-space-4: 16px;
    --b-space-5: 24px;
    --b-space-6: 32px;
    --b-space-8: 48px;
    --b-space-10: 72px;
    --b-space-12: 104px;

    /* Yuvarlatma neredeyse yok: moda perakendesinde keskin kenar "editoryal",
       yuvarlak kenar "uygulama" hissi verir. */
    --b-radius: 2px;
    --b-radius-pill: 999px;

    --b-container: 1380px;
    --b-measure: 34rem;

    --b-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --b-dur-press: 150ms;
    --b-dur-fast: 220ms;
    --b-dur-slow: 520ms;

    --b-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --b-sans: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .b-reveal { transform: none !important; transition: opacity var(--b-dur-fast) linear !important; }
    .b-btn:active { transform: none; }
    .b-nav, .b-top { transition: opacity var(--b-dur-fast) linear, visibility var(--b-dur-fast) linear; transform: none !important; }
    .b-kart__cerceve img, .b-kart__ikinci { transition: none !important; }
}

body {
    margin: 0;
    font-family: var(--b-sans);
    font-size: var(--b-text-base);
    line-height: var(--b-lh-normal);
    color: var(--b-ink);
    background: var(--b-paper);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--b-ink); text-decoration: none; }
a:hover { color: var(--b-ink-soft); }

:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 3px; }

::selection { background: var(--b-ink); color: var(--b-on-ink); }

/* ===== Tipografi ===== */

h1, h2, h3 {
    margin: 0 0 var(--b-space-4);
    font-family: var(--b-serif);
    font-weight: 400;               /* serif zaten ağır görünür; 600 kaba durur */
    line-height: var(--b-lh-tight);
    letter-spacing: var(--b-track-tighter);
}
h1 { font-size: var(--b-text-4xl); }
h2 { font-size: var(--b-text-3xl); }
h3 { font-size: var(--b-text-xl); line-height: var(--b-lh-snug); letter-spacing: var(--b-track-tight); }

/* Küçük büyük harf etiket — arayüzün "sessiz" sesi. Serif DEĞİL: bu ölçüde
   serif okunmaz, ayrıca etiketler arayüze ait, içeriğe değil. */
h4, .b-etiket {
    margin: 0 0 var(--b-space-3);
    font-family: var(--b-sans);
    font-size: var(--b-text-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--b-track-wider);
    color: var(--b-ink-soft);
}

p { margin: 0 0 var(--b-space-4); }

.b-lead { font-size: var(--b-text-lg); line-height: var(--b-lh-normal); color: var(--b-ink-soft); max-width: var(--b-measure); }
.b-muted { color: var(--b-ink-soft); }
.b-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.b-skip {
    position: absolute; left: var(--b-space-4); top: -100px; z-index: 200;
    padding: var(--b-space-3) var(--b-space-5);
    background: var(--b-ink); color: var(--b-on-ink);
    transition: top var(--b-dur-fast) var(--b-ease-out);
}
.b-skip:focus { top: var(--b-space-4); color: var(--b-on-ink); }

/* ===== Düzen ===== */

.b-container { width: 100%; max-width: var(--b-container); margin-inline: auto; padding-inline: var(--b-space-6); }
.b-container--dar { max-width: 900px; }
.b-tam { width: 100%; }                    /* tam genişlik şerit */
.b-section { padding-block: var(--b-space-10); }
.b-section--tint { background: var(--b-paper-2); }
.b-head { margin-bottom: var(--b-space-8); }
.b-head--orta { text-align: center; max-width: 44rem; margin-inline: auto; }
.b-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--b-space-5); flex-wrap: wrap; }
.b-head p { margin: 0; }

/* ===== Butonlar =====
   Birincil eylem SİYAH. Renk vurgusu olmadığı için hiyerarşiyi dolgu/çizgi
   farkı kuruyor: dolu siyah > çerçeveli > alt çizgili metin. */

.b-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--b-space-2);
    padding: 15px var(--b-space-8);
    border: 1px solid var(--b-ink); border-radius: var(--b-radius);
    background: var(--b-ink); color: var(--b-on-ink);
    font: inherit; font-size: var(--b-text-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--b-track-wide);
    cursor: pointer;
    transition: background var(--b-dur-fast) ease, color var(--b-dur-fast) ease, transform var(--b-dur-press) var(--b-ease-out);
}
.b-btn:hover { background: transparent; color: var(--b-ink); }
.b-btn:active { transform: scale(0.985); }
.b-btn[disabled] { background: var(--b-line-strong); border-color: var(--b-line-strong); color: var(--b-paper); cursor: not-allowed; }

.b-btn--cizgi { background: transparent; color: var(--b-ink); }
.b-btn--cizgi:hover { background: var(--b-ink); color: var(--b-on-ink); }

.b-btn--blok { width: 100%; }

/* Alt çizgili metin bağlantısı — üçüncü kademe */
.b-link {
    font-size: var(--b-text-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--b-track-wide);
    padding-bottom: 3px; border-bottom: 1px solid var(--b-ink);
    transition: opacity var(--b-dur-fast) ease;
}
.b-link:hover { color: var(--b-ink); opacity: .55; }

/* ===== Duyuru şeridi ===== */

.b-strip {
    background: var(--b-ink); color: var(--b-on-ink);
    font-size: var(--b-text-xs); letter-spacing: var(--b-track-wide);
    text-align: center; padding: 10px var(--b-space-4);
    margin: 0;
}

/* ===== Başlık ===== */

.b-header { position: sticky; top: 0; z-index: 60; background: var(--b-paper); border-bottom: 1px solid var(--b-line); }
.b-header__inner { display: flex; align-items: center; gap: var(--b-space-6); min-height: 76px; }

.b-logo {
    font-family: var(--b-serif); font-size: var(--b-text-2xl); font-weight: 400;
    letter-spacing: var(--b-track-tight); color: var(--b-ink); line-height: 1;
}
.b-logo:hover { color: var(--b-ink); }

.b-nav__list { display: flex; gap: var(--b-space-6); list-style: none; margin: 0; padding: 0; }
.b-nav__list a {
    font-size: var(--b-text-xs); font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--b-track-wide);
    color: var(--b-ink-soft); padding-block: var(--b-space-2);
}
.b-nav__list a:hover { color: var(--b-ink); }
.b-nav__list a[aria-current="page"] { color: var(--b-ink); box-shadow: inset 0 -1px 0 var(--b-ink); }

.b-tools { display: flex; align-items: center; gap: var(--b-space-1); margin-left: auto; }
.b-icon-btn {
    position: relative; display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 0; background: none; color: var(--b-ink); cursor: pointer;
    transition: opacity var(--b-dur-fast) ease;
}
.b-icon-btn:hover { opacity: .55; color: var(--b-ink); }
.b-icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* Sepet sayacı — sıfırken basılmaz.
   `display: grid` tarayıcının `[hidden] { display: none }` kuralını ezer;
   ikinci satır olmadan sepet boşken bir "0" balonu asılı kalır. */
.b-badge {
    position: absolute; top: 3px; right: 0;
    min-width: 17px; height: 17px; padding: 0 5px;
    display: grid; place-items: center;
    border-radius: var(--b-radius-pill);
    background: var(--b-ink); color: var(--b-on-ink);
    font-size: 11px; font-weight: 600; line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.b-badge[hidden] { display: none; }

.b-burger { display: none; width: 42px; height: 42px; padding: 11px; background: none; border: 0; cursor: pointer; }
.b-burger span { display: block; height: 1px; margin: 5px 0; background: var(--b-ink); transition: transform var(--b-dur-fast) var(--b-ease-out), opacity var(--b-dur-fast) var(--b-ease-out); }
.b-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.b-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.b-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== Vitrin ===== */

.b-hero { position: relative; }
.b-hero__gorsel { overflow: hidden; background: var(--b-paper-2); aspect-ratio: 3 / 2; }
.b-hero__gorsel img { width: 100%; height: 100%; object-fit: cover; }
/* Metin görselin ÜSTÜNDE değil, solundaki boşlukta duruyor: görsel üstüne
   yazı koymak kontrastı fotoğrafın insafına bırakır. */
.b-hero__kutu {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    padding-inline: var(--b-space-10);
    max-width: 44%;
}
.b-hero__kutu h1 { font-size: var(--b-text-5xl); margin-bottom: var(--b-space-5); }
.b-hero__eylem { margin-top: var(--b-space-6); display: flex; gap: var(--b-space-4); flex-wrap: wrap; }

/* ===== Ürün kartı =====
   Kart bir <a>, "Sepete Ekle" onun KARDEŞİdir — bağlantı içinde düğme
   erişilebilirlik hatasıdır. */

.b-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-space-5) var(--b-space-4); }
.b-izgara--2 { grid-template-columns: repeat(2, 1fr); gap: var(--b-space-5); }
.b-izgara--3 { grid-template-columns: repeat(3, 1fr); }

.b-kart { display: flex; flex-direction: column; }
.b-kart__cerceve {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--b-paper-2);
}
.b-kart__cerceve img { width: 100%; height: 100%; object-fit: cover; }
/* İkinci görsel: üzerine gelince ürünün arka görünümü belirir. Modada
   standart; kartı tıklamadan ikinci açıyı görmek satın alma kararını
   hızlandırıyor. Dokunmatikte hiç çalışmaz (hover gated). */
.b-kart__ikinci { position: absolute; inset: 0; opacity: 0; transition: opacity var(--b-dur-slow) var(--b-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .b-kart__cerceve:hover .b-kart__ikinci { opacity: 1; }
}

.b-kart__govde { display: flex; flex-direction: column; flex: 1; padding-top: var(--b-space-4); }
.b-kart__ad { margin: 0 0 var(--b-space-1); font-family: var(--b-sans); font-size: var(--b-text-sm); font-weight: 500; letter-spacing: var(--b-track-normal); line-height: var(--b-lh-snug); }
.b-kart__alt { margin-top: auto; padding-top: var(--b-space-2); display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-space-3); }

/* Renk noktaları — kartta hangi renklerin olduğunu gösterir */
.b-renkler { display: flex; gap: 5px; margin-top: var(--b-space-2); }
.b-renkler span { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--b-line-strong); }

/* Fiyat: renk vurgusu YOK, ağırlıkla ayrışır */
.b-fiyat { display: flex; align-items: baseline; gap: var(--b-space-2); font-size: var(--b-text-sm); font-variant-numeric: tabular-nums lining-nums; }
.b-fiyat b { font-weight: 600; }
.b-fiyat s { color: var(--b-ink-dim); text-decoration-thickness: 1px; }
.b-fiyat--buyuk { font-size: var(--b-text-xl); font-family: var(--b-serif); }

/* Rozet — dolu siyah değil, ince çerçeve: görselin önünde bağırmasın */
.b-rozet {
    position: absolute; z-index: 2; left: var(--b-space-3); top: var(--b-space-3);
    padding: 5px 10px;
    background: var(--b-paper); color: var(--b-ink);
    /* 11px taban HER ölçüde geçerli, yalnız telefonda değil: 10px etiket
       geniş ekranda da okunmuyor. Mobil bloğuna bırakılırsa masaüstünde
       sessizce 10px kalıyor (Dusk bunu yakaladı). */
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: var(--b-track-wide);
}

/* Stok — renk TEK BAŞINA anlatmaz, metin her zaman yanında */
.b-stok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--b-text-xs); font-weight: 500; }
.b-stok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-stok--var { color: var(--b-ok); }
.b-stok--az { color: var(--b-warn); }
.b-stok--yok { color: var(--b-ink-dim); }

/* ===== Koleksiyon kartı ===== */

.b-koleksiyon { position: relative; display: block; overflow: hidden; background: var(--b-paper-2); aspect-ratio: 4 / 5; }
.b-koleksiyon img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--b-dur-slow) var(--b-ease-out); }
.b-koleksiyon__yazi {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: var(--b-space-8) var(--b-space-6) var(--b-space-6);
    color: var(--b-on-ink);
    /* Degrade SÜS değil okunabilirlik aracı: fotoğrafın altı açık çıkarsa
       beyaz metin kaybolur. Degrade METİNDE değil, zeminde. */
    background: linear-gradient(to top, rgba(20, 18, 15, .62), rgba(20, 18, 15, 0));
}
.b-koleksiyon__yazi h3 { color: var(--b-on-ink); font-size: var(--b-text-2xl); margin-bottom: var(--b-space-2); }
.b-koleksiyon__yazi span { font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); }
@media (hover: hover) and (pointer: fine) {
    .b-koleksiyon:hover img { transform: scale(1.03); }
}

/* ===== Lookbook şeridi ===== */

.b-lookbook { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.b-lookbook a { display: block; overflow: hidden; aspect-ratio: 1; background: var(--b-paper-2); }
.b-lookbook img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--b-dur-slow) var(--b-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .b-lookbook a:hover img { transform: scale(1.04); }
}

/* ===== Kırıntı yolu ===== */

.b-yol { padding-block: var(--b-space-5); font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink-soft); }
.b-yol ol { display: flex; flex-wrap: wrap; gap: var(--b-space-2); list-style: none; margin: 0; padding: 0; }
.b-yol li + li::before { content: "/"; margin-right: var(--b-space-2); color: var(--b-line-strong); }
.b-yol a { color: var(--b-ink-soft); }
.b-yol a:hover { color: var(--b-ink); }
.b-yol [aria-current] { color: var(--b-ink); }

/* ===== İki sütunlu düzenler ===== */

.b-yan { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--b-space-10); align-items: start; }
/* Sepet/ödeme/iletişim: içerik solda, özet sağda. `order` ile çevirmeyin —
   ızgara ilk sütuna order'ı en küçük ögeyi koyar ve özet dar sütuna sıkışır. */
.b-ikili-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--b-space-10); align-items: start; }

/* Süzgeç paneli — masaüstünde açık durur; ikon arkasına gizlemek modada
   dönüşümü düşürüyor, beden ve renk en sık kullanılan iki süzgeç. */
.b-filtre { position: sticky; top: 100px; }
.b-filtre__grup { padding-block: var(--b-space-5); border-bottom: 1px solid var(--b-line); }
.b-filtre__grup:first-child { padding-top: 0; }
.b-filtre label { display: flex; align-items: center; gap: var(--b-space-3); padding-block: 5px; font-size: var(--b-text-sm); cursor: pointer; }
.b-filtre input { width: 15px; height: 15px; accent-color: var(--b-ink); flex: none; }
.b-filtre__sil { margin-top: var(--b-space-5); background: none; border: 0; padding: 0; font: inherit; font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink-soft); cursor: pointer; text-decoration: underline; }
.b-filtre__sil:hover { color: var(--b-ink); }

.b-arac { display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-4); flex-wrap: wrap; margin-bottom: var(--b-space-6); }
.b-arac select {
    padding: 9px var(--b-space-3); font: inherit;
    font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide);
    color: var(--b-ink); background: transparent;
    border: 0; border-bottom: 1px solid var(--b-line-strong); border-radius: 0;
}
.b-arac__sayac { font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink-soft); }

/* ===== Ürün detayı ===== */

.b-urun { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--b-space-10); align-items: start; }

.b-galeri__buyuk { overflow: hidden; aspect-ratio: 3 / 4; background: var(--b-paper-2); }
.b-galeri__buyuk img { width: 100%; height: 100%; object-fit: cover; }
/* Üç sütun: altı kare tam iki satır yapıyor. Dört sütunda son satırda iki
   kare kalıp boşluk açıyordu. */
.b-galeri__seritler { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b-space-2); margin-top: var(--b-space-2); }
.b-galeri__kucuk {
    overflow: hidden; padding: 0; aspect-ratio: 3 / 4;
    border: 1px solid transparent; background: var(--b-paper-2); cursor: pointer;
    transition: border-color var(--b-dur-fast) ease;
}
.b-galeri__kucuk img { width: 100%; height: 100%; object-fit: cover; }
.b-galeri__kucuk[aria-current="true"] { border-color: var(--b-ink); }
.b-galeri__kucuk:hover { border-color: var(--b-line-strong); }

.b-urun__blok { padding-block: var(--b-space-5); border-top: 1px solid var(--b-line); }
.b-urun__blok:first-child { border-top: 0; padding-top: 0; }

/* Beden / renk düğmeleri */
.b-secenek__baslik { display: flex; align-items: baseline; justify-content: space-between; gap: var(--b-space-3); margin-bottom: var(--b-space-3); font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); }
.b-secenek__baslik b { font-weight: 500; }
.b-secenek__liste { display: flex; flex-wrap: wrap; gap: var(--b-space-2); }
.b-secenek__liste button {
    min-width: 52px; padding: 11px var(--b-space-4);
    border: 1px solid var(--b-line-strong); border-radius: 0;
    background: transparent; color: var(--b-ink);
    font: inherit; font-size: var(--b-text-sm); cursor: pointer;
    transition: border-color var(--b-dur-fast) ease, background var(--b-dur-fast) ease, color var(--b-dur-fast) ease;
}
.b-secenek__liste button:hover { border-color: var(--b-ink); }
.b-secenek__liste button[aria-pressed="true"] { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on-ink); }
/* Tükenen beden GİZLENMEZ, üstü çizilir: müşteri o bedenin var olduğunu
   bilsin, sonra "gelince haber ver" diyebilsin. */
.b-secenek__liste button[disabled] { color: var(--b-ink-dim); border-color: var(--b-line); text-decoration: line-through; cursor: not-allowed; }

/* Renk düğmesi: nokta + ad */
.b-secenek__liste .b-renk { display: inline-flex; align-items: center; gap: 8px; }
.b-secenek__liste .b-renk i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--b-line-strong); }

.b-uyari { display: none; margin-top: var(--b-space-3); font-size: var(--b-text-sm); color: var(--b-err); }
.b-uyari[data-shown] { display: block; }

.b-satinal { display: flex; gap: var(--b-space-3); align-items: stretch; margin-top: var(--b-space-5); }
.b-satinal .b-btn { flex: 1; }

/* Ürün bilgi akordeonu */
.b-akordeon { border-top: 1px solid var(--b-line); }
.b-akordeon details { border-bottom: 1px solid var(--b-line); }
.b-akordeon summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--b-space-4);
    padding-block: var(--b-space-4);
    font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide);
    cursor: pointer; list-style: none;
}
.b-akordeon summary::-webkit-details-marker { display: none; }
.b-akordeon summary::after { content: "+"; font-size: var(--b-text-lg); }
.b-akordeon details[open] summary::after { content: "−"; }
.b-akordeon p, .b-akordeon ul { font-size: var(--b-text-sm); color: var(--b-ink-soft); margin-bottom: var(--b-space-4); }
.b-akordeon ul { padding-left: var(--b-space-5); }

/* Beden tablosu */
.b-tablo { width: 100%; border-collapse: collapse; font-size: var(--b-text-sm); }
.b-tablo th, .b-tablo td { padding: var(--b-space-3) var(--b-space-2); text-align: left; border-bottom: 1px solid var(--b-line); }
.b-tablo thead th { font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink-soft); font-weight: 500; }

/* ===== Boş durum ===== */

.b-bos { text-align: center; padding-block: var(--b-space-12); }
.b-bos svg { width: 48px; height: 48px; margin: 0 auto var(--b-space-5); stroke: var(--b-line-strong); fill: none; stroke-width: 1; }
.b-bos .b-hero__eylem { justify-content: center; }

/* ===== Ödeme adımları ===== */

.b-adimlar { display: flex; gap: var(--b-space-6); flex-wrap: wrap; margin-bottom: var(--b-space-8); font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); }
.b-adim { display: flex; align-items: center; gap: var(--b-space-2); color: var(--b-ink-dim); }
.b-adim b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--b-line-strong); font-size: 10px; font-weight: 500; }
.b-adim[data-durum="tamam"] { color: var(--b-ink-soft); }
.b-adim[data-durum="tamam"] b { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-on-ink); }
.b-adim[data-durum="aktif"] { color: var(--b-ink); }
.b-adim[data-durum="aktif"] b { border-color: var(--b-ink); color: var(--b-ink); }

/* ===== Hesap ===== */

.b-hesap__menu { position: sticky; top: 100px; display: grid; gap: 0; }
.b-hesap__menu a {
    padding: var(--b-space-3) 0; border-bottom: 1px solid var(--b-line);
    font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide);
    color: var(--b-ink-soft);
}
.b-hesap__menu a:hover { color: var(--b-ink); }
.b-hesap__menu a[aria-current="page"] { color: var(--b-ink); border-bottom-color: var(--b-ink); }

.b-siparis { padding: var(--b-space-5); border: 1px solid var(--b-line); margin-bottom: var(--b-space-4); }
.b-siparis__ust { display: flex; flex-wrap: wrap; gap: var(--b-space-4); justify-content: space-between; align-items: baseline; margin-bottom: var(--b-space-4); }
.b-siparis__no { font-size: var(--b-text-sm); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.b-siparis__urunler { display: flex; gap: var(--b-space-2); flex-wrap: wrap; }
.b-siparis__kucuk { width: 52px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--b-paper-2); flex: none; }
.b-siparis__kucuk img { width: 100%; height: 100%; object-fit: cover; }
.b-siparis__alt { display: flex; flex-wrap: wrap; gap: var(--b-space-4); justify-content: space-between; align-items: center; margin-top: var(--b-space-4); padding-top: var(--b-space-4); border-top: 1px solid var(--b-line); font-size: var(--b-text-sm); }

/* Durum — renk TEK BAŞINA anlatmaz, metin her zaman yanında */
.b-durum { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: var(--b-track-wide); }
.b-durum::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-durum--teslim { background: var(--b-ok-tint); color: var(--b-ok); }
.b-durum--yolda { background: var(--b-warn-tint); color: var(--b-warn); }

.b-adresler { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--b-space-4); }
.b-adres { padding: var(--b-space-5); border: 1px solid var(--b-line); font-size: var(--b-text-sm); }
.b-adres b { display: block; margin-bottom: var(--b-space-2); }
.b-adres p { color: var(--b-ink-soft); margin-bottom: var(--b-space-4); }
.b-adres__islem { display: flex; gap: var(--b-space-4); }
.b-adres__islem button { background: none; border: 0; padding: 0; font: inherit; font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink); cursor: pointer; text-decoration: underline; }
.b-adres--ekle { display: grid; place-items: center; border-style: dashed; min-height: 140px; }

/* Giriş / kayıt */
.b-giris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-space-10); max-width: 880px; margin-inline: auto; }
.b-giris__kutu { padding: var(--b-space-8); border: 1px solid var(--b-line); }
.b-giris__kutu h2 { font-size: var(--b-text-2xl); }

/* ===== 404 ===== */

.b-404 { text-align: center; padding-block: var(--b-space-12); }
.b-404__no { display: block; margin-bottom: var(--b-space-4); font-family: var(--b-serif); font-size: var(--b-text-4xl); color: var(--b-ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.b-404 .b-hero__eylem { justify-content: center; }

/* ===== Form =====
   Alanlar çerçevesiz, yalnız alt çizgili: krem zeminde kutu kenarlıkları
   sayfayı formlar tablosuna çeviriyordu. Odakta çizgi kalınlaşır. */

.b-field { display: grid; gap: 6px; margin-bottom: var(--b-space-5); text-align: left; }
.b-field label { font-size: var(--b-text-xs); text-transform: uppercase; letter-spacing: var(--b-track-wide); color: var(--b-ink-soft); }
.b-field input, .b-field textarea, .b-field select {
    width: 100%; padding: 12px 2px;
    font: inherit; font-size: var(--b-text-base);
    color: var(--b-ink); background: transparent;
    border: 0; border-bottom: 1px solid var(--b-line-strong); border-radius: 0;
    transition: border-color var(--b-dur-fast) ease, box-shadow var(--b-dur-fast) ease;
}
.b-field input:focus, .b-field textarea:focus, .b-field select:focus {
    border-bottom-color: var(--b-ink); outline: none; box-shadow: 0 1px 0 0 var(--b-ink);
}
.b-field textarea { min-height: 110px; resize: vertical; }
.b-field__ipucu { font-size: var(--b-text-xs); color: var(--b-ink-soft); }
.b-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b-space-5); }

/* Hata YALNIZ renkle anlatılmaz: çizgi + ikon + metin birlikte */
.b-field input[aria-invalid="true"], .b-field textarea[aria-invalid="true"] { border-bottom-color: var(--b-err); }
.b-field__error { display: none; align-items: center; gap: 6px; font-size: var(--b-text-xs); color: var(--b-err); }
.b-field__error::before { content: "!"; display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 50%; background: var(--b-err); color: var(--b-paper); font-size: 10px; }
.b-field__error[data-shown] { display: flex; }

.b-formmsg { display: none; margin-top: var(--b-space-4); padding: var(--b-space-3) var(--b-space-4); font-size: var(--b-text-sm); text-align: left; }
.b-formmsg[data-shown] { display: block; }
.b-formmsg[data-durum="ok"] { background: var(--b-ok-tint); color: var(--b-ok); }
.b-formmsg[data-durum="hata"] { background: var(--b-err-tint); color: var(--b-err); }

/* ===== Sepet satırı (theme.js çiziyor) ===== */

.b-satir {
    display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto 40px;
    gap: var(--b-space-4); align-items: center;
    padding-block: var(--b-space-5); border-bottom: 1px solid var(--b-line);
}
.b-satir__gorsel { overflow: hidden; aspect-ratio: 3 / 4; background: var(--b-paper-2); }
.b-satir__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.b-satir__bilgi { display: grid; gap: 2px; }
.b-satir__bilgi b { font-size: var(--b-text-base); font-weight: 500; }
.b-satir__bilgi span { font-size: var(--b-text-sm); }
.b-satir__fiyat { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.b-satir__sil {
    width: 36px; height: 36px; border: 0; background: none;
    color: var(--b-ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
    transition: color var(--b-dur-fast) ease;
}
.b-satir__sil:hover { color: var(--b-ink); }

.b-adet { display: inline-flex; align-items: center; border: 1px solid var(--b-line-strong); }
.b-adet button {
    width: 38px; height: 42px; border: 0; background: transparent;
    font: inherit; font-size: var(--b-text-lg); color: var(--b-ink); cursor: pointer;
    transition: background var(--b-dur-fast) ease;
}
.b-adet button:hover { background: var(--b-paper-2); }
.b-adet span { min-width: 36px; text-align: center; font-size: var(--b-text-sm); font-variant-numeric: tabular-nums lining-nums; }

/* Sipariş özeti */
.b-ozet { position: sticky; top: 100px; padding: var(--b-space-6); border: 1px solid var(--b-line); background: var(--b-paper-2); }
.b-ozet-satir { display: flex; justify-content: space-between; gap: var(--b-space-4); padding-block: var(--b-space-2); font-size: var(--b-text-sm); }
.b-ozet__toplam { display: flex; justify-content: space-between; gap: var(--b-space-4); align-items: baseline; margin-top: var(--b-space-4); padding-top: var(--b-space-4); border-top: 1px solid var(--b-line-strong); }
.b-ozet__toplam b { font-family: var(--b-serif); font-size: var(--b-text-2xl); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.b-ozet__esik { margin-top: var(--b-space-3); padding: var(--b-space-3); background: var(--b-ok-tint); color: var(--b-ok); font-size: var(--b-text-xs); }

/* ===== Belirme ===== */

.b-reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity var(--b-dur-slow) var(--b-ease-out), transform var(--b-dur-slow) var(--b-ease-out);
    transition-delay: calc(var(--b-i, 0) * 70ms);
}
.b-reveal[data-visible] { opacity: 1; transform: none; }

/* ===== Alt bilgi ===== */

.b-footer { border-top: 1px solid var(--b-line); padding-block: var(--b-space-10) var(--b-space-5); font-size: var(--b-text-sm); }
.b-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--b-space-8); }
.b-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b-space-2); }
.b-footer a { color: var(--b-ink-soft); }
.b-footer a:hover { color: var(--b-ink); }
.b-footer__alt {
    display: flex; flex-wrap: wrap; gap: var(--b-space-4); justify-content: space-between;
    margin-top: var(--b-space-8); padding-top: var(--b-space-5);
    border-top: 1px solid var(--b-line);
    font-size: var(--b-text-xs); color: var(--b-ink-soft);
}

/* ===== Yukarı çık ===== */

.b-top {
    position: fixed; z-index: 70; right: var(--b-space-6); bottom: var(--b-space-6);
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--b-line-strong); border-radius: 50%;
    background: var(--b-paper); color: var(--b-ink); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition:
        opacity var(--b-dur-fast) var(--b-ease-out),
        transform var(--b-dur-fast) var(--b-ease-out),
        visibility var(--b-dur-fast) var(--b-ease-out);
}
.b-top[data-shown] { opacity: 1; visibility: visible; transform: none; }
.b-top:hover { background: var(--b-ink); color: var(--b-on-ink); border-color: var(--b-ink); }
.b-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Duyarlılık
   ========================================================================== */

@media (max-width: 1180px) {
    :root { --b-text-5xl: 4rem; --b-text-4xl: 3rem; --b-text-3xl: 2.25rem; --b-space-12: 72px; --b-space-10: 56px; }
    .b-izgara { grid-template-columns: repeat(3, 1fr); }
    .b-hero__kutu { max-width: 52%; padding-inline: var(--b-space-6); }
    .b-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .b-burger { display: block; }
    .b-nav {
        position: fixed; inset: 76px 0 auto;
        padding: var(--b-space-4) var(--b-space-6);
        background: var(--b-paper); border-bottom: 1px solid var(--b-line);
        transform: translateY(-6px); opacity: 0; visibility: hidden;
        transition:
            opacity var(--b-dur-fast) var(--b-ease-out),
            transform var(--b-dur-fast) var(--b-ease-out),
            visibility var(--b-dur-fast) var(--b-ease-out);
    }
    .b-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
    .b-nav__list { flex-direction: column; gap: 0; }
    .b-nav__list a { display: block; padding: var(--b-space-4) 0; border-bottom: 1px solid var(--b-line); }
    .b-izgara { grid-template-columns: repeat(2, 1fr); }

    /* Hero: metin görselin üstünden ALTINA iner. Dar ekranda %44'lük kutu
       fotoğrafı tamamen örtüyordu. */
    .b-hero__kutu { position: static; transform: none; max-width: none; padding: var(--b-space-6) var(--b-space-6) 0; }
    .b-hero__gorsel { aspect-ratio: 4 / 3; }

    .b-yan, .b-ikili-duzen, .b-urun, .b-giris { grid-template-columns: 1fr; gap: var(--b-space-8); }
    /* Yapışkan panel dar ekranda anlamsız: içerik zaten tek sütun akıyor */
    .b-filtre, .b-ozet, .b-hesap__menu { position: static; }
    .b-hesap__menu { grid-auto-flow: column; overflow-x: auto; }
    .b-hesap__menu a { white-space: nowrap; padding-inline: var(--b-space-4); }
}

@media (max-width: 620px) {
    :root { --b-text-5xl: 2.75rem; --b-text-4xl: 2.25rem; --b-text-3xl: 1.875rem; --b-space-12: 56px; --b-space-10: 44px; }
    .b-izgara--2, .b-footer__grid, .b-ikili, .b-adresler { grid-template-columns: 1fr; }
    .b-lookbook { grid-template-columns: 1fr; }
    /* Sepet satırı: görsel + bilgi üstte, adet/fiyat/sil altta */
    .b-satir { grid-template-columns: 68px minmax(0, 1fr) 36px; row-gap: var(--b-space-3); }
    .b-satir__bilgi { grid-column: 2 / 3; }
    .b-satir .b-adet { grid-column: 1 / 3; }
    .b-satir__fiyat { grid-column: 3 / 4; text-align: right; }
    .b-satinal { flex-wrap: wrap; }
    .b-satinal .b-btn { flex: 1 1 100%; }
    .b-top { right: var(--b-space-4); bottom: var(--b-space-4); }
    /* 11px tabanı */
    .b-etiket, h4, .b-rozet, .b-stok, .b-badge, .b-footer__alt, .b-strip,
    .b-nav__list a, .b-btn, .b-link { font-size: max(11px, var(--b-text-xs)); }
}

@media print {
    .b-header, .b-strip, .b-burger, .b-skip, .b-top { display: none; }
}