/* ═══════════════════════════════════════════════════════════════════
   BORZCLO — mağaza tasarım sistemi
   ───────────────────────────────────────────────────────────────────
   Bu dosya sitenin "havasını" tutar. Üç yüzey üzerine kurulu:

     koyu   → kapı ekranı, hero'lar, footer        (siyah zemin)
     acik   → koleksiyon, ürün, sepet, ödeme       (beyaz zemin)
     zemin  → ürün görsellerinin altındaki kırık beyaz

   Renk, ölçü ve geçiş değerleri yalnızca :root içinde tanımlıdır.
   Bileşenler bu değişkenleri kullanır — tek yerden ayar yapılır.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Değişkenler ──────────────────────────────────────────────────── */

:root {
    /* Yüzeyler */
    --siyah:       #0A0A09;
    --siyah-saf:   #000000;
    --beyaz:       #FFFFFF;
    --zemin:       #F4F4F2;    /* ürün görseli arka planı */
    --zemin-2:     #EBEBE8;

    /* Koyu yüzeyde metin */
    --k-metin:     #FFFFFF;
    --k-metin-2:   rgba(255, 255, 255, 0.62);
    --k-metin-3:   rgba(255, 255, 255, 0.40);
    --k-cizgi:     rgba(255, 255, 255, 0.16);
    --k-dolgu:     rgba(255, 255, 255, 0.16);
    --k-dolgu-2:   rgba(255, 255, 255, 0.26);

    /* Açık yüzeyde metin */
    --a-metin:     #0A0A09;
    --a-metin-2:   #6B6B66;
    --a-metin-3:   #9A9A94;
    --a-cizgi:     rgba(10, 10, 9, 0.10);
    --a-cizgi-kuv: rgba(10, 10, 9, 0.24);

    /* Durum */
    --uyari:       #B4362F;
    --olumlu:      #2F6B4F;
    --indirim:     #B4362F;

    /* Ölçü */
    --header-h:    58px;
    --yan:         clamp(1rem, 3.2vw, 2.75rem);
    --bolum:       clamp(3.5rem, 8vw, 7rem);

    /* Geçiş */
    --cik:         cubic-bezier(.22, 1, .36, 1);
    --gir-cik:     cubic-bezier(.76, 0, .24, 1);
    --hizli:       .22s var(--cik);
    --orta:        .45s var(--cik);
    --yavas:       .8s var(--cik);

    /* Yazı tipi */
    --disp:        'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --sans:        'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Katman sırası — tek yerde toplu görünsün */
    --z-serit:     1;
    --z-header:    60;
    --z-mega:      55;
    --z-panel:     80;
    --z-ustluk:    90;
}


/* ── Sıfırlama ────────────────────────────────────────────────────── */

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

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: #2B2B28 var(--siyah);
    scrollbar-width: thin;
}

::-webkit-scrollbar          { width: 8px; height: 8px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(128, 128, 122, .45); }

body {
    background: var(--beyaz);
    color: var(--a-metin);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.6;
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Kapı ve koyu sayfalarda gövde siyah */
body.koyu { background: var(--siyah); color: var(--k-metin); }

img, video, svg { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }
button  { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol  { list-style: none; }

/* hidden özniteliği her zaman kazanmalı. .rozet gibi display tanımlayan
   sınıflar, tarayıcının [hidden] kuralını özgüllükte geçtiği için
   "gizli" eleman görünür kalıyordu. */
[hidden] { display: none !important; }

::selection { background: var(--a-metin); color: var(--beyaz); }
body.koyu ::selection { background: var(--beyaz); color: var(--siyah); }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Ekran okuyucuya açık, göze kapalı */
.gizli-gorsel {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
    position: absolute; top: -100px; left: var(--yan);
    z-index: var(--z-ustluk);
    background: var(--siyah); color: var(--beyaz);
    padding: .8rem 1.2rem; font-size: 12px;
    transition: top var(--hizli);
}
.atla:focus { top: .6rem; }


/* ── Tipografi ────────────────────────────────────────────────────── */

/* Dev display başlık — hero ve kapı için.
   line-height 0.92 ve negatif tracking Represent'in sıkışık hissini verir. */
.disp {
    font-family: var(--disp);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.disp-xxl { font-size: clamp(3.2rem, 9.5vw, 8.5rem); }
.disp-xl  { font-size: clamp(2.6rem, 7vw, 5.5rem); }
.disp-l   { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.disp-m   { font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -.025em; }

/* Mikro etiket — "Ready To Ship", "Introducing", bölüm başlıkları.
   Represent'te bu satır her zaman küçük, dik ve çok aralıklı. */
.etiket {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.4;
}

.etiket-l { font-size: 11px; letter-spacing: .14em; }

/* Hero'daki "Introducing Fall Winter '26" gibi karma satır */
.ust-yazi {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}
.ust-yazi em { font-style: italic; opacity: .9; }

.govde   { font-size: 14px; line-height: 1.7; color: var(--a-metin-2); }
.govde-l { font-size: 15px; line-height: 1.75; }
body.koyu .govde { color: var(--k-metin-2); }


/* ── Düzen yardımcıları ───────────────────────────────────────────── */

.sinir     { padding-inline: var(--yan); }
.sinir-gen { max-width: 1680px; margin-inline: auto; padding-inline: var(--yan); }
.bolum     { padding-block: var(--bolum); }
.cizgi-ust { border-top: 1px solid var(--a-cizgi); }
body.koyu .cizgi-ust { border-top-color: var(--k-cizgi); }


/* ═══════════════════════════════════════════════════════════════════
   BUTONLAR
   Represent'in üç buton tipi: hayalet (hero üzerinde), dolu (aksiyon),
   altı çizili (bölüm sonu CTA).
   ═══════════════════════════════════════════════════════════════════ */

.dg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 44px;
    padding: 0 1.75rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background var(--hizli), color var(--hizli),
                border-color var(--hizli), opacity var(--hizli);
}

/* Hayalet — hero ve kapı üzerinde. Yarı saydam dolgu + blur:
   arkadaki video ne olursa olsun yazı okunur kalır. */
.dg-hayalet {
    background: var(--k-dolgu);
    color: var(--k-metin);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.dg-hayalet:hover { background: var(--k-dolgu-2); }

/* Dolu — sepete ekle, ödemeye geç */
.dg-dolu {
    background: var(--a-metin);
    color: var(--beyaz);
}
.dg-dolu:hover      { background: #24241F; }
.dg-dolu[disabled]  { background: var(--a-metin-3); cursor: not-allowed; }

/* Çerçeveli — ikincil aksiyon */
.dg-cerceve {
    background: transparent;
    color: var(--a-metin);
    border-color: var(--a-cizgi-kuv);
}
.dg-cerceve:hover { border-color: var(--a-metin); }

.dg-tam { width: 100%; }
.dg-kucuk { min-height: 36px; padding: 0 1.1rem; font-size: 10px; }

/* Bölüm sonu CTA — "→ SHOP FALL WINTER '26" */
.cta-cizgi {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .4rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
    transition: gap var(--hizli), opacity var(--hizli);
}
.cta-cizgi:hover { gap: 1rem; }
.cta-cizgi .ok   { transition: transform var(--hizli); }
.cta-cizgi:hover .ok { transform: translateX(3px); }

.cta-orta { display: flex; justify-content: center; padding-block: 2.5rem; }


/* ═══════════════════════════════════════════════════════════════════
   GİRİŞ KAPISI  —  split-screen
   İki yarı yan yana; hover'da o yarı 58/42 açılır, diğeri kararır.
   Mobilde alt alta iki tam ekran.
   ═══════════════════════════════════════════════════════════════════ */

/* Sabit 50/50. Yarılar hover'da genişlemez — bölünme her zaman
   ortadan geçer, sayfa kıpırdamaz. */
.kapi {
    display: flex;
    height: 100svh;
    background: var(--siyah);
}

.kapi-yari {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    /* İçerik dikey ortada dursun */
    display: flex;
    align-items: center;
}

/* Arka plan görseli/videosu */
.kapi-medya {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Görseller kapı oranına (0.889) göre hazırlandığı için kaydırmaya
       gerek yok — kare çerçeveyi olduğu gibi dolduruyor. */
    object-position: center;
    transition: filter var(--orta);
    filter: brightness(.82) contrast(1.04);
}
.kapi-yari:hover .kapi-medya { filter: brightness(.92); }

/* Görsel henüz yokken: sessiz gradyan yer tutucu.
   Böylece iskelet ilk günden doğru görünür. */
.kapi-yedek {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 30% 20%, #2E2E2A 0%, transparent 60%),
        linear-gradient(200deg, #1A1A17 0%, #0A0A09 100%);
}
.kapi-yari:nth-child(2) .kapi-yedek {
    background:
        radial-gradient(120% 90% at 70% 25%, #33322C 0%, transparent 60%),
        linear-gradient(160deg, #15150F 0%, #0A0A09 100%);
}

/* Soldan karartma — metin sola hizalı olduğu için koruma orada gerekli.
   Üstte ayrıca hafif bir karartma var, header yazıları okunsun diye. */
.kapi-yari::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,.34) 0%, transparent 18%),
        linear-gradient(to right,  rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 42%, transparent 72%);
    pointer-events: none;
}

.kapi-icerik {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--yan);
    color: var(--k-metin);
}

.kapi-ust {
    color: var(--k-metin);
    opacity: .85;
    margin-bottom: .9rem;
}

.kapi-ad {
    margin-bottom: 1.6rem;
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
}

.kapi-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 860px) {
    .kapi      { flex-direction: column; height: auto; min-height: 100svh; }
    .kapi-yari { flex: 1 1 50%; min-height: 50svh; }
    .kapi-ad   { font-size: clamp(2rem, 11vw, 3rem); margin-bottom: 1.1rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   HEADER
   Sabit. Sayfanın tepesindeyken şeffaf (hero üstünde yüzer),
   kaydırınca beyaza oturur. Ortada wordmark, solda kapı anahtarı,
   sağda ikon dizisi.
   ═══════════════════════════════════════════════════════════════════ */

.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-inline: var(--yan);
    color: var(--k-metin);
    transition: background var(--orta), color var(--orta),
                border-color var(--orta);
    border-bottom: 1px solid transparent;
}

/* Hero'nun üstünde dururken okunabilirlik için hafif gradyan */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.42), transparent);
    opacity: 1;
    transition: opacity var(--orta);
    pointer-events: none;
}

/* Kaydırıldığında ya da hero'su olmayan sayfada */
.header.oturdu,
.header.duz {
    background: var(--beyaz);
    color: var(--a-metin);
    border-bottom-color: var(--a-cizgi);
}
.header.oturdu::before,
.header.duz::before { opacity: 0; }

.header-sol   { display: flex; align-items: center; gap: 1.4rem; }
.header-orta  { display: flex; justify-content: center; }
.header-sag   { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }

.wordmark {
    font-family: var(--disp);
    font-weight: 800;
    font-size: clamp(14px, 1.5vw, 17px);
    letter-spacing: .14em;
    line-height: 1;
    white-space: nowrap;
}

/* Kapı anahtarı — Represent'teki "Represent | 247 ⚡" */
.anahtar { display: flex; align-items: center; gap: .9rem; }

.anahtar a {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .01em;
    opacity: .52;
    transition: opacity var(--hizli);
}
.anahtar a:hover  { opacity: .82; }
.anahtar a.etkin  { opacity: 1; font-weight: 600; }

/* Etkin kapının altındaki ince çizgi */
.anahtar a.etkin::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -5px;
    height: 1px;
    background: currentColor;
}

.anahtar .simge { margin-left: .2rem; font-size: 10px; opacity: .7; }

/* Kapı ekranı: henüz seçim yapılmadı, iki taraf da eşit görünsün.
   Alt çizgi ve kalınlık yok — biri seçiliymiş gibi durmasın. */
.anahtar.notr a        { opacity: .9; font-weight: 500; }
.anahtar.notr a:hover  { opacity: 1; }

/* Üst menü — Retail, Hikâye, Mağazalar */
.ust-menu { display: flex; align-items: center; gap: 1.5rem; }
.ust-menu a {
    font-size: 12px;
    font-weight: 500;
    opacity: .85;
    transition: opacity var(--hizli);
}
.ust-menu a:hover { opacity: 1; }

/* İkon düğmeleri */
.ikon-dg {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    transition: background var(--hizli);
}
.ikon-dg:hover { background: rgba(255, 255, 255, .14); }
.header.oturdu .ikon-dg:hover,
.header.duz    .ikon-dg:hover { background: rgba(10, 10, 9, .06); }
.ikon-dg svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* Sepet/bildirim rozeti */
.rozet {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 15px; height: 15px;
    padding: 0 3px;
    display: grid; place-items: center;
    background: var(--uyari);
    color: #fff;
    font-size: 9px; font-weight: 600;
    border-radius: 999px;
    line-height: 1;
}

.para-dg {
    padding: 0 .55rem;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* Hamburger — yalnızca dar ekranda */
.menu-dg { display: none; }

@media (max-width: 1080px) {
    .ust-menu { display: none; }
    .menu-dg  { display: grid; }
    .anahtar a { font-size: 11px; }
}
@media (max-width: 600px) {
    .para-dg { display: none; }
    .header-sag .ikon-dg.gizlenebilir { display: none; }
}

/* Header'ın altında kalmaması için içerik itilir.
   Hero'lu sayfalarda bu sınıf kullanılmaz — hero header'ın altına akar. */
.header-bosluk { height: var(--header-h); }


/* ═══════════════════════════════════════════════════════════════════
   SOL MENÜ PANELİ
   Header'daki kapı anahtarının üstüne gelince soldan tam boy panel
   açılır. Bilerek HİÇ geçiş efekti yok — anında belirip anında
   kaybolur. Arkadaki sayfa bulanıklaşır.

   Yapı:  [ ana liste | ikinci sütun ]
   İkinci sütunda normalde önizleme karesi durur; alt başlığı olan bir
   satıra gelindiğinde onun yerini alt liste alır.
   ═══════════════════════════════════════════════════════════════════ */

/* Arkadaki sayfayı bulanıklaştıran örtü */
.panel-ortu {
    position: fixed;
    inset: 0;
    z-index: var(--z-mega);
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(16px) saturate(.9);
    -webkit-backdrop-filter: blur(16px) saturate(.9);
}

.panel {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    z-index: calc(var(--z-mega) + 1);
    display: flex;
    width: min(960px, 100%);
    background: var(--beyaz);
    color: var(--a-metin);
}

/* ── Birinci sütun ── */

.panel-kol {
    flex: none;
    width: 310px;
    padding: 1.6rem 1.5rem 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--a-cizgi);
}

/* En üstteki kalın bağlantılar */
.panel-ust { margin-bottom: 2.2rem; }
.panel-ust li + li { margin-top: .75rem; }
.panel-ust a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.panel-ust a:hover { text-decoration: underline; text-underline-offset: 3px; }

.panel-grup + .panel-grup { margin-top: 2.2rem; }

.panel-grup-baslik {
    margin-bottom: .9rem;
    color: var(--a-metin-3);
}

.panel-grup li + li { margin-top: .1rem; }

/* Hem <a> hem <button> aynı görünsün */
.panel-bag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .38rem 0;
    font-size: 13.5px;
    font-weight: 400;
    text-align: left;
    color: var(--a-metin);
}
.panel-bag:hover,
.panel-bag.etkin {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.panel-bag .ok {
    flex: none;
    font-size: 15px;
    line-height: 1;
    color: var(--a-metin-3);
}

/* ── İkinci sütun ── */

.panel-yan {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.panel-alt {
    position: absolute;
    inset: 0;
    padding: 1.7rem 1.5rem;
    overflow-y: auto;
    background: var(--beyaz);
}
.panel-alt li + li { margin-top: .85rem; }
.panel-alt a {
    font-size: 13.5px;
    color: var(--a-metin);
}
.panel-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Önizleme karesi — alt liste açılınca gizlenir */
.panel-gorsel {
    height: 100%;
    padding: 1.1rem;
}
.panel-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

/* Dar ekranda ikinci sütun ve görsel yok, panel tam genişlik */
@media (max-width: 860px) {
    .panel      { width: 100%; }
    .panel-kol  { width: 100%; border-right: 0; }
    .panel-yan  { display: none; }
}

/* Panel açıkken sayfa kaymasın */
body.panel-acik { overflow: hidden; }


/* ═══════════════════════════════════════════════════════════════════
   HERO  —  full-bleed
   Metin bloğu alt orta üçte birde: etiket → dev başlık → iki buton.
   ═══════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: var(--siyah);
    color: var(--k-metin);
    text-align: center;
}

/* Kısa hero — sayfa ortasındaki kampanya blokları */
.hero-kisa { min-height: clamp(420px, 62vh, 620px); }

.hero-medya {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Çekimlerimiz dikey. Geniş ekranda "cover" tam ortadan kırpınca
       modelin yüzü değil göğsü kalıyor; odağı yukarı alıyoruz. */
    object-position: center 22%;
}

.hero-yedek {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(100% 80% at 50% 10%, #35342E 0%, transparent 62%),
        linear-gradient(180deg, #1C1C18 0%, #0A0A09 100%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.28) 100%);
    pointer-events: none;
}

.hero-icerik {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 780px;
    padding: var(--yan);
    padding-bottom: clamp(3rem, 11vh, 7rem);
}

.hero-ust     { margin-bottom: .85rem; opacity: .92; }
.hero-baslik  { margin-bottom: 1.7rem; }
.hero-dugmeler{ display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Sola hizalı hero çeşitlemesi */
.hero.sola { justify-content: flex-start; text-align: left; }
.hero.sola .hero-dugmeler { justify-content: flex-start; }


/* ═══════════════════════════════════════════════════════════════════
   ÜRÜN ŞERİDİ  —  kenardan kenara yatay kaydırma
   Represent'te kartların çerçevesi yok; yalnızca ince dikey ayraçlar
   ve son kartın sağdan taşması var (devamı olduğunu hissettirir).
   ═══════════════════════════════════════════════════════════════════ */

.serit-sar { position: relative; background: var(--beyaz); }

.serit-tepe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 var(--yan) 1.25rem;
}

.serit {
    display: grid;
    grid-auto-flow: column;
    /* Bir ekranda ayar'daki kadar kart; son kart yarım taşar */
    grid-auto-columns: calc((100% - var(--yan)) / var(--serit-adet, 5));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.serit::-webkit-scrollbar { display: none; }

@media (max-width: 1280px) { .serit { --serit-adet: 4; } }
@media (max-width: 1000px) { .serit { --serit-adet: 3; } }
@media (max-width: 720px)  { .serit { --serit-adet: 2; } }
@media (max-width: 440px)  { .serit { --serit-adet: 1.35; } }

/* Şerit okları — masaüstünde kenarda belirir */
.serit-ok {
    position: absolute;
    top: 38%;
    z-index: 3;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--beyaz);
    border: 1px solid var(--a-cizgi);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--hizli), background var(--hizli);
}
.serit-sar:hover .serit-ok { opacity: 1; }
.serit-ok:hover     { background: var(--zemin); }
.serit-ok[disabled] { opacity: 0 !important; pointer-events: none; }
.serit-ok.sol { left: calc(var(--yan) / 2); }
.serit-ok.sag { right: calc(var(--yan) / 2); }
.serit-ok svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

@media (hover: none) { .serit-ok { display: none; } }


/* ═══════════════════════════════════════════════════════════════════
   ÜRÜN KARTI
   Üstte kırık beyaz zeminde görsel, hover'da beden şeridi ve "+".
   Altta ad / renk / fiyat / renk noktaları.
   ═══════════════════════════════════════════════════════════════════ */

.kart {
    position: relative;
    scroll-snap-align: start;
    border-right: 1px solid var(--a-cizgi);
    background: var(--beyaz);
}

/* Izgara görünümünde (koleksiyon sayfası) alt çizgi de gerekir */
.izgara .kart { border-bottom: 1px solid var(--a-cizgi); }

.kart-gorsel {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--zemin);
    overflow: hidden;
}

.kart-gorsel img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--orta);
}

/* İkinci görsel (arka/detay çekimi) hover'da yumuşak geçer */
.kart-gorsel .ikinci {
    position: absolute;
    inset: 0;
    opacity: 0;
}
.kart:hover .kart-gorsel .ikinci { opacity: 1; }

/* Görsel yokken yer tutucu */
.kart-yedek {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg,
            var(--zemin) 0 12px, var(--zemin-2) 12px 24px);
    color: var(--a-metin-3);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Sol üst rozet — "Yeni", "Son Adetler", "%20" */
.kart-rozet {
    position: absolute;
    top: .75rem; left: .75rem;
    z-index: 2;
    padding: .3rem .55rem;
    background: var(--beyaz);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.kart-rozet.koyu    { background: var(--siyah); color: var(--beyaz); }
.kart-rozet.indirim { background: var(--indirim); color: var(--beyaz); }

/* Hover'da alttan çıkan beden şeridi */
.beden-serit {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    background: var(--beyaz);
    border-top: 1px solid var(--a-cizgi);
    transform: translateY(101%);
    opacity: 0;
    transition: transform var(--orta), opacity var(--orta);
}
.kart:hover .beden-serit,
.kart:focus-within .beden-serit { transform: none; opacity: 1; }

.beden-dg {
    flex: 1;
    min-width: 0;
    height: 40px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    transition: background var(--hizli), color var(--hizli);
}
.beden-dg + .beden-dg { border-left: 1px solid var(--a-cizgi); }
.beden-dg:hover       { background: var(--a-metin); color: var(--beyaz); }

/* Stokta olmayan beden — üstü çizili, tıklanamaz */
.beden-dg.yok {
    color: var(--a-metin-3);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.beden-dg.yok:hover { background: none; color: var(--a-metin-3); }

/* Sağ alttaki "+" hızlı ekleme — beden şeridini açar */
.hizli-dg {
    position: absolute;
    right: .6rem; bottom: .6rem;
    z-index: 3;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    font-size: 17px;
    line-height: 1;
    color: var(--a-metin);
    opacity: 0;
    transition: opacity var(--hizli);
}
.kart:hover .hizli-dg { opacity: 1; }
@media (hover: none) { .hizli-dg { opacity: 1; } }

/* Kart altı bilgi bloğu */
.kart-bilgi { padding: .85rem var(--yan-kart, 1rem) 1.2rem; }

.kart-satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.kart-ad {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.kart-fiyat {
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.kart-fiyat .eski {
    margin-right: .4rem;
    color: var(--a-metin-3);
    text-decoration: line-through;
    font-weight: 400;
}
.kart-fiyat .yeni { color: var(--indirim); }

.kart-renk {
    margin-top: .2rem;
    font-size: 12px;
    color: var(--a-metin-2);
}

/* Renk noktaları + "2 Renk" */
.kart-renkler {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .55rem;
}

.nokta {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid var(--a-cizgi-kuv);
    flex: none;
}
.nokta.etkin { box-shadow: 0 0 0 2px var(--beyaz), 0 0 0 3px var(--a-metin); }

.kart-renk-adet {
    font-size: 11px;
    color: var(--a-metin-2);
    margin-left: .15rem;
}

/* Kartın tamamını tıklanabilir yapan görünmez bağlantı.
   Beden düğmeleri ve "+" bunun üstünde kalır (z-index ile). */
.kart-bag { position: absolute; inset: 0; z-index: 1; }


/* ═══════════════════════════════════════════════════════════════════
   IZGARA  —  koleksiyon sayfası
   ═══════════════════════════════════════════════════════════════════ */

.izgara {
    display: grid;
    grid-template-columns: repeat(var(--sutun, 4), minmax(0, 1fr));
    border-top: 1px solid var(--a-cizgi);
    border-left: 1px solid var(--a-cizgi);
}

@media (max-width: 1280px) { .izgara { --sutun: 3; } }
@media (max-width: 860px)  { .izgara { --sutun: 2; } }
@media (max-width: 480px)  { .izgara { --sutun: 1; } }


/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   Beyaz zemin, solda geniş bülten sütunu + dört dar bağlantı sütunu,
   altta ince yasal şerit ve yapımcı künyesi.
   ═══════════════════════════════════════════════════════════════════ */

.footer {
    background: var(--beyaz);
    color: var(--a-metin);
    border-top: 1px solid var(--a-cizgi);
    padding: clamp(3rem, 6vw, 4.5rem) var(--yan) 0;
}

.footer-ust {
    display: grid;
    /* Bülten sütunu diğerlerinin yaklaşık iki katı */
    grid-template-columns: 1.9fr repeat(4, 1fr);
    gap: 2.75rem clamp(1.25rem, 3vw, 3rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 1180px) {
    .footer-ust { grid-template-columns: 1.4fr repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .footer-ust { grid-template-columns: 1fr 1fr; }
    .footer-bulten { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
    .footer-ust { grid-template-columns: 1fr; }
}

/* ── Bülten sütunu ── */

.footer-bulten { max-width: 420px; }

.footer-baslik-b {
    margin-bottom: .9rem;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.footer-aciklama {
    margin-bottom: 1.4rem;
    font-size: 13px;
    line-height: 1.7;
    color: var(--a-metin-2);
}

.bulten {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--a-cizgi-kuv);
    transition: border-color var(--hizli);
}
.bulten:focus-within { border-bottom-color: var(--a-metin); }

.bulten-girdi {
    flex: 1;
    min-width: 0;
    height: 42px;
    background: none;
    border: 0;
    font-size: 13px;
    color: var(--a-metin);
}
.bulten-girdi::placeholder { color: var(--a-metin-3); }
.bulten-girdi:focus         { outline: none; }

.bulten-dg {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--a-metin-2);
    transition: color var(--hizli), transform var(--hizli);
}
.bulten-dg:hover { color: var(--a-metin); transform: translateX(2px); }

.footer-kvkk {
    margin-top: .8rem;
    font-size: 11px;
    line-height: 1.6;
    color: var(--a-metin-3);
}
.footer-kvkk a {
    color: var(--a-metin-2);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer-kvkk a:hover { color: var(--a-metin); }

/* ── Bağlantı sütunları ── */

.footer-baslik {
    margin-bottom: 1.1rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
}

.footer-liste li + li { margin-top: .6rem; }

.footer-liste a {
    font-size: 13px;
    color: var(--a-metin-2);
    transition: color var(--hizli);
}
.footer-liste a:hover {
    color: var(--a-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bolge {
    font-size: 13px;
    color: var(--a-metin-2);
}

/* Ödeme rozetleri — dış görsel yok, ince çerçeveli metin */
.footer-odeme {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.footer-odeme li {
    padding: .3rem .5rem;
    border: 1px solid var(--a-cizgi);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--a-metin-2);
}

.footer-guvenli {
    margin-top: .7rem;
    font-size: 11px;
    line-height: 1.6;
    color: var(--a-metin-3);
}
.footer-guvenli .kilit { margin-right: .2rem; }

/* ── Alt şerit ── */

.footer-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--a-cizgi);
}

.footer-telif {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--a-metin-2);
}

.footer-yasal {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}
.footer-yasal a {
    font-size: 11.5px;
    color: var(--a-metin-2);
    transition: color var(--hizli);
}
.footer-yasal a:hover {
    color: var(--a-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Yapımcı künyesi ── */

.footer-yapimci {
    padding: 1.1rem 0 1.6rem;
    border-top: 1px solid var(--a-cizgi);
    text-align: center;
}

.footer-yapimci p {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--a-metin-3);
}

.footer-yapimci a {
    color: var(--a-metin-2);
    transition: color var(--hizli);
}
.footer-yapimci a:hover {
    color: var(--a-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-yapimci .ayrac { margin: 0 .35rem; }

.footer-yapimci-alt {
    margin-top: .35rem;
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    text-transform: none !important;
    font-size: 10.5px;
}


/* ═══════════════════════════════════════════════════════════════════
   HAREKET TERCİHİ
   Kullanıcı sistemde hareketi azaltmışsa animasyonlar susar.
   ═══════════════════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════════════════
   KOLEKSİYON BAŞLIK ŞERİDİ
   Solda koleksiyon adı, sağda adet ve sıralama. Kutu yok, çizgi yok —
   Represent'te bu şerit sayfaya sessizce oturur.
   ═══════════════════════════════════════════════════════════════════ */

.kol-tepe {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}

.kol-araclar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 12px;
    color: var(--a-metin-2);
}

.kol-adet { white-space: nowrap; }

.kol-sirala select {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--a-cizgi-kuv);
    padding: .35rem 1.4rem .35rem 0;
    font-size: 12px;
    cursor: pointer;
    /* Tarayıcının kendi okunu gizleyip kendi okumuzu koyuyoruz */
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 6px center, right 1px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.kol-sirala select:focus { outline: none; border-bottom-color: var(--a-metin); }


/* ═══════════════════════════════════════════════════════════════════
   ÜRÜN DETAY SAYFASI
   Solda üst üste akan büyük kareler, sağda sayfayla birlikte kaymayan
   bilgi sütunu. Represent'in düzeni.
   ═══════════════════════════════════════════════════════════════════ */

.kirinti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding-block: 1.1rem .6rem;
    font-size: 12px;
    color: var(--a-metin-3);
}
.kirinti a:hover { color: var(--a-metin); text-decoration: underline; text-underline-offset: 3px; }

.urun-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-inline: var(--yan);
    padding-bottom: var(--bolum);
    align-items: start;
}

@media (max-width: 900px) {
    .urun-duzen { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Galeri ── */

.urun-galeri { display: grid; gap: .5rem; }

.urun-kare {
    background: var(--zemin);
    aspect-ratio: 3 / 4;
    overflow: hidden;
}
.urun-kare img { width: 100%; height: 100%; object-fit: cover; }

/* ── Bilgi sütunu ── */

/* Sticky: galeri uzun olduğu için bilgi sütunu ekranda kalsın.
   top değeri header yüksekliği + nefes payı. */
.urun-yapiskan {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    padding-top: 1rem;
}
@media (max-width: 900px) {
    .urun-yapiskan { position: static; padding-top: 0; }
}

.urun-ad { margin-bottom: .4rem; }

.urun-renk {
    font-size: 14px;
    color: var(--a-metin-2);
    margin-bottom: 1rem;
}

.urun-fiyat {
    font-size: 19px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.urun-fiyat .eski {
    margin-right: .5rem;
    color: var(--a-metin-3);
    text-decoration: line-through;
    font-weight: 400;
}
.urun-fiyat .yeni { color: var(--indirim); }

.urun-kdv {
    margin-top: .25rem;
    font-size: 12px;
    color: var(--a-metin-3);
}

.urun-blok { margin-top: 1.75rem; }

.urun-blok-tepe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.urun-blok-ad {
    margin-bottom: .7rem;
    color: var(--a-metin-2);
}

.urun-kucuk-bag {
    font-size: 12px;
    color: var(--a-metin-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.urun-kucuk-bag:hover { color: var(--a-metin); }

/* ── Renk seçimi ── */

.renk-secim { display: flex; flex-wrap: wrap; gap: .55rem; }

.renk-top {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--a-cizgi-kuv);
    transition: box-shadow var(--hizli);
}
.renk-top:hover { box-shadow: 0 0 0 2px var(--beyaz), 0 0 0 3px var(--a-cizgi-kuv); }
.renk-top.etkin { box-shadow: 0 0 0 2px var(--beyaz), 0 0 0 3px var(--a-metin); }

/* ── Beden ızgarası ── */

.beden-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap: .4rem;
}

.beden-kutu {
    min-height: 46px;
    border: 1px solid var(--a-cizgi-kuv);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--a-metin);
    transition: border-color var(--hizli), background var(--hizli), color var(--hizli);
}
.beden-kutu:hover:not(.yok) { border-color: var(--a-metin); }

.beden-kutu.secili {
    background: var(--a-metin);
    border-color: var(--a-metin);
    color: var(--beyaz);
}

/* Tükenen beden: üstü çizili ve soluk — tıklanamadığı belli olsun */
.beden-kutu.yok {
    color: var(--a-metin-3);
    border-color: var(--a-cizgi);
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.beden-uyari {
    margin-top: .6rem;
    font-size: 12.5px;
    color: var(--indirim);
}
.beden-uyari.bilgi { color: var(--a-metin-2); }

/* ── Sepete ekle ── */

.urun-ekle { min-height: 52px; font-size: 12px; }

.urun-kargo {
    margin-top: .7rem;
    font-size: 12px;
    line-height: 1.6;
    color: var(--a-metin-2);
}

/* ── Açılır bölümler ── */

.urun-acilir { margin-top: 2rem; border-top: 1px solid var(--a-cizgi); }

.acilir { border-bottom: 1px solid var(--a-cizgi); }

.acilir summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.acilir summary::-webkit-details-marker { display: none; }

/* + / − işareti, CSS ile çiziliyor — ikon dosyası gerekmiyor */
.acilir summary .im {
    position: relative;
    flex: none;
    width: 11px; height: 11px;
}
.acilir summary .im::before,
.acilir summary .im::after {
    content: '';
    position: absolute;
    background: var(--a-metin);
    transition: transform var(--hizli), opacity var(--hizli);
}
.acilir summary .im::before { top: 5px; left: 0; width: 11px; height: 1px; }
.acilir summary .im::after  { left: 5px; top: 0; width: 1px; height: 11px; }
.acilir[open] summary .im::after { opacity: 0; transform: rotate(90deg); }

.acilir-ic {
    padding-bottom: 1.2rem;
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--a-metin-2);
}


/* ═══════════════════════════════════════════════════════════════════
   SEPET PANELİ  —  sağdan açılır
   Ürün eklenince kendiliğinden açılır, sepet ikonuna basınca da.
   Sayfadan çıkılmaz; alışveriş kaldığı yerden sürer.
   ═══════════════════════════════════════════════════════════════════ */

.sepet-perde {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(10, 10, 9, .38);
    opacity: 0;
    transition: opacity var(--orta);
}
.sepet-perde.acik { opacity: 1; }

.sepet-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 75;
    width: min(430px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--beyaz);
    color: var(--a-metin);
    /* Kapalıyken sağda bekler; açılınca kayarak gelir */
    transform: translateX(100%);
    transition: transform var(--orta);
    box-shadow: -1px 0 40px rgba(10, 10, 9, .14);
}
.sepet-panel.acik { transform: none; }

/* Panel açıkken arkadaki sayfa kaymasın */
body.sepet-acik { overflow: hidden; }

.sepet-tepe {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem var(--yan);
    border-bottom: 1px solid var(--a-cizgi);
}

.sepet-say {
    font-size: 9px;
    vertical-align: super;
    margin-left: .1rem;
}

.sepet-kapat {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    color: var(--a-metin-2);
    transition: color var(--hizli);
}
.sepet-kapat:hover { color: var(--a-metin); }

.sepet-govde {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ── Boş durum ── */

.sepet-bos {
    padding: 3.5rem var(--yan);
    text-align: center;
}

/* ── Ara toplam ── */

.sepet-ozet-ust {
    padding: 1rem var(--yan);
    background: var(--zemin);
}

.sepet-satir-ozet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 13px;
}
.sepet-satir-ozet .num { font-variant-numeric: tabular-nums; font-weight: 600; }

.sepet-satir-ozet.buyuk {
    margin-top: .4rem;
    padding-top: .6rem;
    border-top: 1px solid var(--a-cizgi);
    font-size: 15px;
    font-weight: 700;
}

.sepet-not {
    margin-top: .3rem;
    font-size: 11px;
    color: var(--a-metin-3);
}

/* ── Ücretsiz kargo çubuğu ── */

.kargo-cubuk {
    padding: .85rem var(--yan);
    border-bottom: 1px solid var(--a-cizgi);
    font-size: 12px;
    color: var(--a-metin-2);
}
.kargo-cubuk b { color: var(--a-metin); }
.kargo-cubuk.tamam { color: var(--olumlu); }

.kargo-ray {
    margin-top: .5rem;
    height: 3px;
    background: var(--zemin-2);
    border-radius: 999px;
    overflow: hidden;
}
.kargo-ray span {
    display: block;
    height: 100%;
    background: var(--a-metin);
    border-radius: 999px;
    transition: width var(--orta);
}
.kargo-cubuk.tamam .kargo-ray span { background: var(--olumlu); }

/* ── Kalemler ── */

.sepet-liste { padding: 0 var(--yan); }

.sepet-kalem {
    display: grid;
    grid-template-columns: 82px 1fr;
    gap: .9rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--a-cizgi);
}
.sepet-kalem:last-child { border-bottom: 0; }

/* Silinirken yumuşak kaybolsun */
.sepet-kalem.gidiyor { opacity: .35; pointer-events: none; }

.sepet-kare {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--zemin);
    overflow: hidden;
}
.sepet-kare img { width: 100%; height: 100%; object-fit: cover; }

.sepet-bilgi { min-width: 0; }

.sepet-kalem-tepe {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
}

.sepet-ad {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
.sepet-ad:hover { text-decoration: underline; text-underline-offset: 3px; }

.sepet-fiyat {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sepet-varyant {
    margin-top: .25rem;
    font-size: 12px;
    color: var(--a-metin-2);
}
.sepet-varyant b { color: var(--a-metin); font-weight: 600; }

.sepet-uyari {
    margin-top: .25rem;
    font-size: 11px;
    color: var(--indirim);
}

.sepet-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .65rem;
}

/* Adet artır / azalt */
.adet-kutu {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--a-cizgi-kuv);
}

.adet-dg {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    font-size: 15px;
    line-height: 1;
    color: var(--a-metin);
    transition: background var(--hizli);
}
.adet-dg:hover:not([disabled]) { background: var(--zemin); }
.adet-dg[disabled] { color: var(--a-metin-3); cursor: not-allowed; }

.adet-sayi {
    min-width: 26px;
    text-align: center;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.sepet-sil {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    color: var(--a-metin-3);
    transition: color var(--hizli);
}
.sepet-sil:hover { color: var(--indirim); }

/* ── Dip ── */

.sepet-dip {
    flex: none;
    padding: 1rem var(--yan) 1.25rem;
    border-top: 1px solid var(--a-cizgi);
    background: var(--beyaz);
}

.sepet-ode { margin-top: .85rem; min-height: 50px; }

.sepet-devam {
    display: block;
    margin-top: .6rem;
    text-align: center;
    font-size: 12px;
    color: var(--a-metin-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sepet-devam:hover { color: var(--a-metin); }

.sepet-kartlar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin-top: .85rem;
}
.sepet-kartlar li {
    padding: .22rem .45rem;
    border: 1px solid var(--a-cizgi);
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--a-metin-3);
}

/* Hareket tercihine saygı */
@media (prefers-reduced-motion: reduce) {
    .sepet-panel, .sepet-perde { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   SEPET SAYFASI  —  /sepet
   Panel asıl deneyim; bu sayfa JavaScript kapalıyken de çalışsın diye
   düz form gönderimiyle kurulu.
   ═══════════════════════════════════════════════════════════════════ */

.sepet-bildirim {
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--zemin);
    font-size: 13px;
}

.sepet-sayfa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-bottom: var(--bolum);
}
@media (max-width: 860px) {
    .sepet-sayfa { grid-template-columns: 1fr; }
}

.sepet-satir {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--a-cizgi);
}
.sepet-satir:first-child { border-top: 1px solid var(--a-cizgi); }

@media (max-width: 680px) {
    .sepet-satir {
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-areas:
            "kare bilgi"
            "kare tutar"
            "adet adet";
    }
    .sepet-satir-kare  { grid-area: kare; }
    .sepet-satir-bilgi { grid-area: bilgi; }
    .sepet-satir-tutar { grid-area: tutar; text-align: left; }
    .sepet-satir-adet  { grid-area: adet; }
}

.sepet-satir-kare {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--zemin);
    overflow: hidden;
}
.sepet-satir-kare img { width: 100%; height: 100%; object-fit: cover; }

.sepet-satir-ad {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: .25rem;
}
.sepet-satir-ad:hover { text-decoration: underline; text-underline-offset: 3px; }

.sepet-birim {
    margin-top: .3rem;
    font-size: 12px;
    color: var(--a-metin-3);
}

.sepet-satir-adet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.adet-form { display: flex; gap: .35rem; align-items: center; }

.adet-girdi {
    width: 62px;
    min-height: 34px;
    padding: .3rem .5rem;
    border: 1px solid var(--a-cizgi-kuv);
    font-size: 13px;
    text-align: center;
    background: var(--beyaz);
}
.adet-girdi:focus { outline: none; border-color: var(--a-metin); }

.sepet-satir-sil {
    font-size: 12px;
    color: var(--a-metin-3);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sepet-satir-sil:hover { color: var(--indirim); }

.sepet-satir-tutar {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Özet kutusu ── */

.sepet-ozet {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    padding: 1.35rem;
    background: var(--zemin);
}
@media (max-width: 860px) {
    .sepet-ozet { position: static; }
}


/* ═══════════════════════════════════════════════════════════════════
   ÖDEME SAYFASI
   ═══════════════════════════════════════════════════════════════════ */

.odeme-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-bottom: var(--bolum);
}
@media (max-width: 900px) {
    .odeme-duzen { grid-template-columns: 1fr; }
}

.odeme-kart {
    padding: 1.5rem;
    border: 1px solid var(--a-cizgi);
    margin-bottom: 1rem;
}

.odeme-baslik {
    margin-bottom: 1.1rem;
    color: var(--a-metin-2);
}

.alan-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}
.alan-izgara > .alan-2 { grid-column: 1 / -1; }

.alan-izgara label {
    display: block;
    margin-bottom: .35rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--a-metin-2);
}

.zorunlu { color: var(--indirim); }

.alan-izgara input[type=text],
.alan-izgara input[type=email],
.alan-izgara input[type=tel],
.alan-izgara select,
.alan-izgara textarea {
    width: 100%;
    min-height: 44px;
    padding: .6rem .8rem;
    background: var(--beyaz);
    border: 1px solid var(--a-cizgi-kuv);
    font-size: 14px;
}
.alan-izgara textarea { min-height: 88px; resize: vertical; line-height: 1.6; }

.alan-izgara input:focus,
.alan-izgara select:focus,
.alan-izgara textarea:focus {
    outline: none;
    border-color: var(--a-metin);
}

.alan-ipucu {
    display: block;
    margin-top: .3rem;
    font-size: 11.5px;
    color: var(--a-metin-3);
}

/* Onay kutuları */
.onay {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: 13px;
    line-height: 1.6;
    cursor: pointer;
}
.onay + .onay { margin-top: .85rem; }
.onay input { width: 17px; height: 17px; margin-top: .15rem; flex: none; }
.onay a { text-decoration: underline; text-underline-offset: 3px; }

/* Hata kutusu */
.odeme-hata {
    padding: 1rem 1.15rem;
    margin-bottom: 1.5rem;
    background: #FCEDEE;
    border-left: 3px solid var(--indirim);
    font-size: 13.5px;
    color: #8C2A25;
}
.odeme-hata ul { margin: .5rem 0 0 1.1rem; list-style: disc; }
.odeme-hata li + li { margin-top: .25rem; }

/* ── Sipariş özeti ── */

.odeme-ozet {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    padding: 1.35rem;
    background: var(--zemin);
}
@media (max-width: 900px) { .odeme-ozet { position: static; } }

.odeme-kalemler li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .6rem 0;
    border-bottom: 1px solid var(--a-cizgi);
    font-size: 13px;
}
.odeme-kalemler li:last-child { border-bottom: 0; }

.odeme-kare {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--zemin-2);
    overflow: hidden;
}
.odeme-kare img { width: 100%; height: 100%; object-fit: cover; }

/* Adet rozeti — köşede küçük daire */
.odeme-adet {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 19px; height: 19px;
    display: grid; place-items: center;
    background: var(--a-metin);
    color: var(--beyaz);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.odeme-kalem-ad { min-width: 0; line-height: 1.4; }
.odeme-kalem-ad small {
    display: block;
    font-size: 11.5px;
    color: var(--a-metin-2);
}

/* ── PayTR çerçevesi ── */

.odeme-cerceve {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: var(--bolum);
}

.odeme-guvenlik {
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    background: var(--zemin);
    font-size: 12.5px;
    color: var(--a-metin-2);
    text-align: center;
}

.odeme-cerceve iframe {
    width: 100%;
    min-height: 620px;
    border: 0;
}


/* ═══════════════════════════════════════════════════════════════════
   SİPARİŞ SONUÇ SAYFASI
   ═══════════════════════════════════════════════════════════════════ */

.sonuc {
    max-width: 640px;
    margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 5rem);
    text-align: center;
}

.sonuc-im {
    width: 62px; height: 62px;
    margin: 0 auto 1.5rem;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 26px;
}
.sonuc-im.iyi  { background: #E4F3EC; color: var(--olumlu); }
.sonuc-im.kotu { background: #FCEDEE; color: var(--indirim); }
.sonuc-im.bekle{ background: var(--zemin); color: var(--a-metin-2); }

.sonuc-kod {
    display: inline-block;
    margin: 1rem 0 1.5rem;
    padding: .5rem .9rem;
    background: var(--zemin);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    letter-spacing: .04em;
}

.sonuc-kutu {
    margin-top: 2rem;
    padding: 1.25rem;
    border: 1px solid var(--a-cizgi);
    text-align: left;
}

.sonuc-satir {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    font-size: 13.5px;
}
.sonuc-satir + .sonuc-satir { border-top: 1px solid var(--a-cizgi); }
.sonuc-satir span:first-child { color: var(--a-metin-2); }
.sonuc-satir .num { font-variant-numeric: tabular-nums; font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════
   MÜŞTERİ HESABI
   ═══════════════════════════════════════════════════════════════════ */

.hesap-dar {
    max-width: 400px;
    margin-inline: auto;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.hesap-form { display: grid; gap: 1.1rem; }

.hesap-form label {
    display: block;
    margin-bottom: .35rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--a-metin-2);
}

.hesap-form input[type=text],
.hesap-form input[type=email],
.hesap-form input[type=tel],
.hesap-form input[type=password],
.hesap-form textarea {
    width: 100%;
    min-height: 46px;
    padding: .65rem .85rem;
    background: var(--beyaz);
    border: 1px solid var(--a-cizgi-kuv);
    font-size: 14px;
}
.hesap-form textarea { resize: vertical; line-height: 1.6; }

.hesap-form input:focus,
.hesap-form textarea:focus { outline: none; border-color: var(--a-metin); }

.hesap-form input[disabled] {
    background: var(--zemin);
    color: var(--a-metin-3);
    cursor: not-allowed;
}

.hesap-alt {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 13px;
    color: var(--a-metin-2);
}
.hesap-alt a { text-decoration: underline; text-underline-offset: 3px; color: var(--a-metin); }

/* ── Giriş yapmış düzen ── */

.hesap-duzen {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-bottom: var(--bolum);
}
@media (max-width: 760px) {
    .hesap-duzen { grid-template-columns: 1fr; }
}

.hesap-menu { display: flex; flex-direction: column; }

.hesap-menu a {
    padding: .7rem 0;
    font-size: 13.5px;
    color: var(--a-metin-2);
    border-bottom: 1px solid var(--a-cizgi);
    transition: color var(--hizli);
}
.hesap-menu a:hover  { color: var(--a-metin); }
.hesap-menu a.etkin  { color: var(--a-metin); font-weight: 600; }
.hesap-menu a.cikis  { margin-top: .5rem; border-bottom: 0; color: var(--a-metin-3); }
.hesap-menu a.cikis:hover { color: var(--indirim); }

@media (max-width: 760px) {
    .hesap-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .4rem;
        border-bottom: 1px solid var(--a-cizgi);
        padding-bottom: .75rem;
        margin-bottom: 1rem;
    }
    .hesap-menu a {
        padding: .4rem .75rem;
        border: 1px solid var(--a-cizgi-kuv);
        border-radius: 999px;
        font-size: 12.5px;
    }
    .hesap-menu a.etkin { background: var(--a-metin); border-color: var(--a-metin); color: var(--beyaz); }
    .hesap-menu a.cikis { margin-top: 0; border: 1px solid var(--a-cizgi); }
}

/* ── Özet kutuları ── */

.hesap-ozet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--a-cizgi);
    border: 1px solid var(--a-cizgi);
    margin-bottom: 1.5rem;
}
.hesap-ozet > div { padding: 1.1rem; background: var(--beyaz); }

.hesap-ozet-sayi {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.hesap-ozet-ad { margin-top: .1rem; font-size: 12px; color: var(--a-metin-2); }

/* ── Sipariş satırı ── */

.siparis-satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--a-cizgi);
    transition: background var(--hizli);
}
.siparis-satir:first-child { border-top: 1px solid var(--a-cizgi); }
.siparis-satir:hover { background: #FCFCFB; }

.siparis-satir b { display: block; font-size: 13.5px; }
.siparis-satir small { display: block; font-size: 12px; color: var(--a-metin-2); margin-top: .1rem; }
.siparis-satir .num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 520px) {
    .siparis-satir { grid-template-columns: minmax(0, 1fr) auto; }
    .siparis-satir .durum-rozet { grid-column: 1 / -1; justify-self: start; }
}

/* ── Durum rozeti ── */

.durum-rozet {
    display: inline-block;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.durum-rozet.iyi   { background: #E4F3EC; color: var(--olumlu); }
.durum-rozet.kotu  { background: #FCEDEE; color: var(--indirim); }
.durum-rozet.bilgi { background: #E7F0FA; color: #2B6CB0; }
.durum-rozet.uyari { background: #FDF3E3; color: #9A6200; }

/* ── Kartlar ── */

.hesap-kart {
    padding: 1.25rem;
    border: 1px solid var(--a-cizgi);
    margin-bottom: 1rem;
}

.hesap-kart-tepe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--a-cizgi);
}

.hesap-kalem {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
    padding: .6rem 0;
    font-size: 13px;
}
.hesap-kalem b { display: block; }
.hesap-kalem small { display: block; font-size: 12px; color: var(--a-metin-2); margin-top: .1rem; }
.hesap-kalem .num { font-weight: 600; font-variant-numeric: tabular-nums; }

.hesap-kare {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--zemin);
    overflow: hidden;
}
.hesap-kare img { width: 100%; height: 100%; object-fit: cover; }

.hesap-toplam {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--a-cizgi);
}

.hesap-bos {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--a-metin-2);
    font-size: 13.5px;
}
.hesap-bos .baslik {
    font-size: 16px;
    font-weight: 600;
    color: var(--a-metin);
    margin-bottom: .4rem;
}

/* Giriş yapmış müşteri: hesap ikonunun altında ince nokta */
.ikon-dg.uye::after {
    content: '';
    position: absolute;
    bottom: 5px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   YASAL VE BİLGİLENDİRME SAYFALARI
   Uzun metin okunurluğu: dar sütun, rahat satır aralığı.
   ═══════════════════════════════════════════════════════════════════ */

.yasal {
    max-width: 68ch;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 3rem) var(--yan) var(--bolum);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--a-metin-2);
}

.yasal h2 {
    margin: 2.25rem 0 .75rem;
    font-family: var(--disp);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--a-metin);
}

.yasal h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--a-metin);
}

.yasal p  { margin-bottom: 1rem; }
.yasal b  { color: var(--a-metin); font-weight: 600; }

.yasal ul, .yasal ol {
    margin: 0 0 1.25rem 1.2rem;
    padding: 0;
}
.yasal ul { list-style: disc; }
.yasal ol { list-style: decimal; }
.yasal li { margin-bottom: .4rem; }

.yasal a {
    color: var(--a-metin);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Taslak uyarısı — göze çarpsın ama içeriği bastırmasın */
.yasal-not {
    margin-top: 2.5rem;
    padding: .9rem 1.1rem;
    background: var(--zemin);
    border-left: 3px solid var(--uyari);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--a-metin-2);
}

/* SSS açılır bölümleri yasal sayfada da kullanılıyor */
.yasal .acilir { border-bottom: 1px solid var(--a-cizgi); }
.yasal .acilir:first-of-type { border-top: 1px solid var(--a-cizgi); }
.yasal .acilir summary { font-size: 13.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }

/* Tablo sarmalayici — dar ekranda yalnizca tablo kayar, sayfa degil */
.tablo-sar {
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Beden tablosu */
.beden-tablo {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}
.beden-tablo th,
.beden-tablo td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--a-cizgi);
    text-align: left;
}
.beden-tablo thead th {
    background: var(--zemin);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--a-metin-2);
}
.beden-tablo tbody td:first-child { font-weight: 700; color: var(--a-metin); }


/* ═══════════════════════════════════════════════════════════════════
   MOBİL
   ───────────────────────────────────────────────────────────────────
   Buradaki kurallar 390px genişlikte gerçek cihaz emülasyonuyla
   ölçülerek yazıldı. Dört başlık altında toplanıyor:

     1. Dokunma hedefleri   — parmak 44px ister, fare 20px'e basar
     2. iOS yakınlaştırması — 16px altındaki alana odaklanınca Safari
                              sayfayı büyütür ve bir daha küçültmez
     3. Güvenli alan        — çentik ve ana ekran çizgisinin altında
                              kalan içerik
     4. Dar header          — 390px'e altı öğe sığmıyor

   Kırılma noktaları (bu dosyanın tamamında kullanılan ölçek):
     1280 geniş masaüstü · 1080 dar masaüstü · 860 tablet
      600 telefon        ·  420 küçük telefon
   ═══════════════════════════════════════════════════════════════════ */


/* ── 1. Dokunma hedefleri ─────────────────────────────────────────── */

/* Fare yokken ikon düğmeleri 38px'ten 44px'e çıkar. Görsel boyut
   aynı kalır; büyüyen yalnızca basılabilir alandır. */
@media (hover: none) {
    .ikon-dg { width: 44px; height: 44px; }

    /* Sepetteki adet artır/azalt — 28px'ti, parmakla ıskalanıyordu */
    .adet-dg { width: 40px; height: 40px; font-size: 17px; }

    /* Sıralama ve filtre bağlantıları */
    .kol-sirala select { min-height: 44px; }

    /* Bülten gönder oku — 42px'ti */
    .bulten-dg { width: 44px; height: 44px; }

    /* Kart üzerindeki hızlı ekle — 30px'ti. Dokunmatikte zaten
       sürekli görünüyor (fare olmadığı için hover yok), dolayısıyla
       asıl kullanıldığı yer burası. */
    .hizli-dg { width: 40px; height: 40px; right: .45rem; bottom: .45rem; }

    /* Küçük düğmeler parmak için alçak kalıyor */
    .dg-kucuk { min-height: 44px; }

    /* Sepet satırındaki "Kaldır" — 30x19'du, yanlışlıkla
       komşu bağlantıya basılıyordu. Metin aynı boyutta kalır,
       büyüyen yalnızca basılabilir alan. */
    .sepet-satir-sil {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-right: .5rem;
    }
}


/* ── 2. iOS: girdi yakınlaştırması ────────────────────────────────── */

/* Safari, 16px'ten küçük yazılı bir alana odaklanınca sayfayı
   büyütür; kullanıcı ödeme formunu bitirene kadar yatay kaydırmak
   zorunda kalır. 16px bunu tamamen engeller.

   Yalnızca dokunmatikte uygulanıyor — masaüstünde 14px tipografi
   bozulmasın. */
@media (hover: none) {
    /* Bileşenlerin kendi kuralları (.alan-izgara input[type=text] gibi)
       iki sınıf ağırlığında; sade bir "input" kuralı onları yenemiyor.
       Bu yüzden aynı seçiciler burada tekrar ediliyor. */
    .alan-izgara input[type=text],
    .alan-izgara input[type=email],
    .alan-izgara input[type=tel],
    .alan-izgara input[type=number],
    .alan-izgara select,
    .alan-izgara textarea,

    .hesap-form input[type=text],
    .hesap-form input[type=email],
    .hesap-form input[type=tel],
    .hesap-form input[type=password],
    .hesap-form input[type=number],
    .hesap-form select,
    .hesap-form textarea,

    .kol-sirala select,

    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=password],
    input[type=number],
    input[type=search],
    select,
    textarea {
        font-size: 16px;
    }
}


/* ── 3. Güvenli alan ──────────────────────────────────────────────── */

/* Çentikli telefonlarda alttaki ana ekran çizgisi sabit öğelerin
   üstüne biner. Sepet çekmecesinin ödeme düğmesi ve kart logoları
   bunun altında kalıyordu. */
.sepet-dip {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.sepet-panel {
    padding-right: env(safe-area-inset-right, 0px);
}

/* Yatay kullanımda çentik header'ı yiyor */
.header {
    padding-left:  max(var(--yan), env(safe-area-inset-left, 0px));
    padding-right: max(var(--yan), env(safe-area-inset-right, 0px));
}

.panel-kol {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}


/* ── 4. Dar header ────────────────────────────────────────────────── */

/* Panelin tepesindeki şerit — kapı anahtarı + kapatma.
   Geniş ekranda panel örtüye dokunularak kapandığı için gizli. */
.panel-tepe { display: none; }

.panel-anahtar { display: flex; align-items: center; gap: 1.1rem; }

.panel-anahtar a {
    font-size: 13px;
    font-weight: 500;
    opacity: .5;
    padding: .2rem 0;
}
.panel-anahtar a.etkin {
    opacity: 1;
    font-weight: 600;
    box-shadow: inset 0 -1px 0 currentColor;
}

.panel-kapat {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-right: -.6rem;
    border-radius: 50%;
}
.panel-kapat svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none; stroke-width: 1.5;
}

@media (max-width: 600px) {
    /* Kapı anahtarı header'dan çıkar — "Private Label" iki satıra
       kırılıp wordmark'ın üstüne biniyordu. Yerini menü düğmesi alır;
       anahtarın kendisi panelin tepesine taşındı. */
    .header-sol .anahtar { display: none; }

    .header-sol { gap: 0; }
    .menu-dg    { margin-left: -.55rem; }

    /* Üç sütun yerine: menü | wordmark | ikonlar */
    .header { grid-template-columns: auto 1fr auto; }
    .header-orta { justify-content: center; }

    .wordmark { font-size: 15px; letter-spacing: .12em; }

    /* Panelin tepesindeki şerit yalnızca burada görünür */
    .panel-tepe {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.4rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--a-cizgi);
    }

    /* Beden kareleri: 5+1 yerine 4+3 — tek başına kalan XXL
       satırı dengesiz duruyordu */
    .beden-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    /* En dar cihazlarda wordmark ile ikonlar sıkışıyor */
    .wordmark   { font-size: 13.5px; letter-spacing: .1em; }
    .header-sag { gap: 0; }
}