/* ==========================================================================
   OTOMATİK ÜRETİLDİ — ELLE DÜZENLEME.
   Kaynak: public/css/tema-onizleme/*.css
   Yeniden üret: php tools/tema-onizleme-css.php
   ========================================================================== */

/* ─────────── 00-temel.css ─────────── */
/* ==========================================================================
   /magaza/tema-onizleme — TAM SAYFA TANITIM
   --------------------------------------------------------------------------
   Sayfa 25 Ağustos 2026'da SIFIRDAN kuruldu. Önceki hâli tek bir bento
   bloğuydu (referansın yalnız `#features` bölümü); bu dosya referansın
   TAMAMININ düzenini taşıyor.

   ÖNEK `.to-` — kabuğun `.td-` öneki (`shop-tema-demolari.css`) DOKUNULMADAN
   duruyor çünkü `/magaza/dokumantasyon` aynı kabuğu kullanıyor. Bu dosya
   yalnız bu sayfaya `@push('head')` ile bağlanır.

   ÖLÇÜ FİŞİ — göz kararı YOK. Kaynak: getunimart.com tam sayfası, 1440px
   görüntü alanında Playwright ile ölçüldü; zemin renkleri 28.341px'lik tam
   sayfa karesinden piksel örneklenerek okundu.

     kapsayıcı        1320 max-width · yatay dolgu 15,5 → iç genişlik 1289
     bölüm dolgusu    120px 0 (renkli bantlar 130px 0 140px · yoğun 80px 0)
     kart             yarıçap 12px · gölge rgb(234,234,234) 0 8px 100px 0
                      KENARLIK YOK
     düğme            HAP: yarıçap 60px · #215ada / beyaz
                      küçük 14px/600 y36 · büyük 18px/600 y50
     kahraman başlık  kalın 70/70/700 + ince 52/52/400
     bölüm başlığı    kalın 52/52/700 + ince 40/40/400
     üstlük           16/24/500 #215ada
     el yazısı not    Caveat 30/32,4 (yerel katalogda 500/600 var, 600 seçildi)
     hayalet sayı     180/180/700, başlığın arkasında, düşük opaklık
     kart başlığı     16/24/500 #222329 · gövde 16/24/400 #555555
     yazı tipi        Cabin (gövde) + Caveat (yalnız el yazısı notlar)

   ZEMİN RİTMİ (piksel örneklendi, bölüm sırasıyla):
     #f9f9f9 · #eff1f4 · #000000/#081738 · #fbe523 · #2d67e8 · #068fa5
     · #f3eaed · #ffffff · #f4f2ff
   Renkli bantlar ARDIŞIK gelir (sarı → mavi → turkuaz) ve sayfanın ortasında
   ritmi kırar; referansın en belirgin karakteri budur.

   REFERANSTAN BİLEREK AYRILDIĞIMIZ YERLER:
   1. Marka logoları (ödeme kartı, üçüncü taraf) BASILMAZ. Depoda zaten yok ve
      dört tema alt bilgisinde gerekçesi yazılı (tescilli işaret). "Güvenli
      ödeme" bölümü metin + çekirdek `credit-card`/`lock`/`shield` ikonlarıyla
      kurulur.
   2. Uydurma görüş, uydurma müşteri adı, uydurma istatistik YOK. Referansın
      "300 değerlendirme / 4,85 ortalama" satırının karşılığı ancak GERÇEK
      veri varsa basılır.
   3. Referansın kartları tıklanamaz; bizimkiler bağlantı — sayfanın işi
      temaya götürmek. Bu yüzden `:hover`/`:focus-visible` durumu EKLENDİ.
   4. Kırılma noktaları DuyarlilikTest'in onaylı listesinden seçildi
      (1100 · 900 · 720 · 560 · 420); referansın kendi noktaları alınmadı.

   KONTRAST (WCAG bağıl parlaklık, hesaplandı):
     #222329 / #f9f9f9   → 14,60:1      beyaz / #000000   → 21,00:1
     #555555 / #f9f9f9   →  7,08:1      beyaz / #081738   → 16,75:1
     #215ada / #f9f9f9   →  5,64:1      #222329 / #fbe523 → 11,29:1
     beyaz  / #215ada    →  6,32:1      beyaz / #2d67e8   →  5,15:1
     beyaz  / #068fa5    →  3,54:1  →  bu zeminde metin 24px+ ya da 18,66px+700
                                        (WCAG büyük metin eşiği 3:1) — gövde
                                        metni için #04606f kullanılır (7,21:1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. BELİRTEÇLER
   -------------------------------------------------------------------------- */
.to-sayfa {
    /* ölçüler */
    --to-bolum: 120px;
    --to-bolum-bant: 130px;
    --to-bolum-yogun: 80px;
    --to-r: 12px;
    --to-r-hap: 60px;
    --to-r-kucuk: 8px;
    --to-oluk: 24px;
    --to-golge: rgb(234, 234, 234) 0 8px 100px 0;
    --to-golge-koyu: rgba(4, 10, 24, 0.45) 0 18px 60px 0;

    /* renkler */
    --to-mavi: #215ada;
    --to-mavi-koyu: #1a4aa8;
    --to-metin: #222329;
    --to-govde: #555555;
    --to-zemin: #f9f9f9;
    --to-zemin-alt: #eff1f4;
    --to-siyah: #000000;
    --to-lacivert: #081738;
    --to-sari: #fbe523;
    --to-bant-mavi: #2d67e8;
    /* TURKUAZ KOYULAŞTIRILDI — ölçülmüş erişilebilirlik düzeltmesi.
       Referansın bandı #068fa5 (tam sayfa karesinden piksel örneklendi).
       O ton üzerinde HİÇBİR metin rengi 4,5:1'i geçmiyor: beyaz 3,83 ·
       #222329 4,09 · #eafaff 3,58. Yani referansın kendi bandı gövde metni
       için WCAG AA'yı KARŞILAMIYOR — bu kusur kopyalanmadı.
       Aynı ton korunarak parlaklık düşürüldü; beyaz gövde metnini geçiren
       ilk değer #05788e (5,14:1). Başlık için 8,08:1 veren #035868 de
       denendi ama bant referanstaki canlılığını kaybediyordu. */
    --to-turkuaz: #05788e;
    --to-turkuaz-koyu: #04606f;
    --to-pembe: #f3eaed;
    --to-lavanta: #f4f2ff;
    --to-cizgi: #e4e7ee;
}

/* --------------------------------------------------------------------------
   1. BÖLÜM KABUĞU
   -------------------------------------------------------------------------- */
.to-bolum {
    position: relative;
    padding: var(--to-bolum) 0;
    background: var(--to-zemin);
    color: var(--to-metin);
}

.to-bolum--alt { background: var(--to-zemin-alt); }
.to-bolum--beyaz { background: #fff; }
.to-bolum--pembe { background: var(--to-pembe); }
.to-bolum--lavanta { background: var(--to-lavanta); }

/* Siyah bölümler: merkeze doğru lacivere açılan tek bir radial gradyan.
   Referans bunu arka plan GÖRSELİ ile yapıyor; görsel kopyalanamayacağı için
   ölçülen iki uç renkten (#000000 kenar, #081738 merkez) CSS gradyanı kuruldu. */
.to-bolum--koyu {
    background: radial-gradient(ellipse 90% 70% at 50% 50%, #0d1e42 0%, var(--to-lacivert) 42%, var(--to-siyah) 100%);
    color: #fff;
}

.to-bolum--sari { background: var(--to-sari); }
.to-bolum--mavi { background: var(--to-bant-mavi); color: #fff; }
.to-bolum--turkuaz { background: var(--to-turkuaz); color: #fff; }

/* Renkli bantlar referansta daha uzun dolguya sahip. */
.to-bolum--bant { padding: var(--to-bolum-bant) 0 140px; }
.to-bolum--yogun { padding: var(--to-bolum-yogun) 0; }
.to-bolum--ustsuz { padding-top: 0; }
.to-bolum--altsiz { padding-bottom: 0; }

/* --------------------------------------------------------------------------
   2. BÖLÜM BAŞLIĞI  (hayalet sayı + üstlük + iki tonlu başlık + el yazısı not)
   -------------------------------------------------------------------------- */
.to-baslik {
    position: relative;
    max-width: 780px;
    margin: 0 auto 48px;
    text-align: center;
}

.to-baslik--sol { margin-inline: 0; text-align: left; }
.to-baslik--genis { max-width: 940px; }

/* Hayalet sayı: başlığın ARKASINDA, akıştan çıkarılmış. Ekran okuyucudan
   gizli — sayı zaten başlık metninde geçiyor, iki kez okunmamalı. */
.to-hayalet {
    position: absolute;
    left: 50%;
    top: -0.34em;
    transform: translateX(-50%);
    z-index: 0;
    font-size: clamp(84px, 12.5vw, 180px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: currentColor;
    opacity: 0.07;
    pointer-events: none;
    white-space: nowrap;
}

.to-bolum--koyu .to-hayalet { opacity: 0.12; }

.to-baslik > *:not(.to-hayalet) { position: relative; z-index: 1; }

.to-ustluk {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--to-mavi);
}

/* ÖLÇÜLDÜ — koyu bölümler için seçilen tonlar RENKLİ bantlarda düşüyor.
   #a9c5f5: siyah zeminde 11,99:1 ama #2d67e8 mavisinde 2,84:1, #05788e
   turkuazında 2,94:1. Renkli bantlar siyah kadar koyu değil; her bant için
   4,5:1'i geçen ilk ton ayrıca hesaplandı. */
.to-bolum--koyu .to-ustluk { color: #a9c5f5; }
.to-bolum--mavi .to-ustluk { color: #f2f7ff; }        /* 4,63:1 */
.to-bolum--turkuaz .to-ustluk { color: #eafaff; }     /* 4,80:1 */
.to-bolum--sari .to-ustluk { color: #3d3a00; }        /* 9,06:1 */

.to-h2 {
    margin: 0;
    font-size: clamp(28px, 3.611vw, 52px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: inherit;
}

/* İkinci satır İNCE ve daha küçük: referansın imzası. */
.to-h2 .to-ince {
    display: block;
    margin-top: 6px;
    font-size: clamp(23px, 2.778vw, 40px);
    line-height: 1.15;
    font-weight: 400;
}

.to-lead {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 27px;
    color: var(--to-govde);
}

.to-bolum--koyu .to-lead { color: #c8d4ea; }          /* siyahta 11,82:1 */
.to-bolum--mavi .to-lead { color: #f2f7ff; }          /* #c8d4ea burada 3,33:1 idi */
.to-bolum--turkuaz .to-lead { color: #eafaff; }       /* #e2f7fb burada 4,4:1 idi */
.to-bolum--sari .to-lead { color: #4a4600; }          /* 7,54:1 */

/* El yazısı not — Caveat. Yerel katalogda 500/600 var (700 yok), 600 seçildi. */
.to-not {
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.08;
    font-weight: 600;
    color: inherit;
}

/* EL YAZISI NOT — VARSAYILAN OLARAK AKIŞTA.
   --------------------------------------------------------------------------
   İlk sürüm notu HER genişlikte `position: absolute; right: -180px` ile
   başlığın SAĞINA çıkarıyor, akışa dönüşü ise `max-width: 1100px` sorgusuna
   bırakıyordu. Arada bir bant kalıyordu: not 1100px'in ÜSTÜNDE hâlâ mutlak
   ama kap artık onu taşıyacak kadar geniş değil.

   ÖLÇÜLDÜ (320–1440 arası 10px adımla taranarak): **1110–1290px bandında**
   sayfa yatay kayıyordu, en kötüsü 1110px'de +90px. Dört noktada (1440 / 900
   / 390 / 320) ölçen bir denetim bu bandı GÖREMEZ — nokta ölçüm yetmiyor.

   Yön TERSİNE çevrildi: not artık varsayılan olarak akışta duruyor ve yalnız
   yanına GERÇEKTEN yer olduğu genişlikte dışarı çıkıyor. Eşik ölçülen bandın
   bittiği yerin hemen üstü: 1300px. */
.to-not--sag {
    display: block;
    width: auto;
    margin-top: 16px;
    text-align: center;
}

@media (min-width: 1300px) {
    .to-not--sag {
        position: absolute;
        right: -180px;
        top: 8px;
        width: 210px;
        margin-top: 0;
        text-align: left;
    }
}

/* OK ÇİZİMİ — ölçülmüş hizalama kusuru.
   Not 1300px altında akışa dönüp `text-align: center` alıyor ama ok
   ORTALANMIYORDU: kabuğun `.td-govde svg { display: block }` sıfırlaması
   svg'yi blok yapıyor, blok öge `text-align`den etkilenmiyor. Ölçüldü:
   1100px'de not kutusu 86'da başlıyor, metin ortada, ok ise 86'da — yani
   metinden ~460px solda ve bir satır altta öksüz duruyordu.
   `margin-inline: auto` bloğu kendi kabında ortalar. */
.to-not__ok {
    display: block;
    color: var(--to-mavi);
}

.to-not__ok > svg { margin-inline: auto; }

@media (min-width: 1300px) {
    /* Yanda dururken not sola yaslı; ok da öyle. */
    .to-not--sag .to-not__ok > svg { margin-inline: 0; }
}
.to-bolum--koyu .to-not__ok { color: #7ea8f5; }

/* --------------------------------------------------------------------------
   2b. METİN İÇİ BAĞLANTILAR — ölçülmüş kusur düzeltmesi
   --------------------------------------------------------------------------
   Kabuğun `shop-tema-demolari.css` dosyasındaki kural yalnız SINIFSIZ
   bağlantıları hedefliyor (`.td-govde a:not([class])`) — bileşenlerin kendi
   rengini korusun diye bilerek öyle yazılmış. Sonuç: bu sayfadaki sınıflı
   bağlantılar hiçbir renk almıyor ve tarayıcının varsayılan `rgb(0,0,238)`
   mavisiyle çiziliyordu (ölçüldü: `.to-kr-bag`). Karşıtlığı geçiyor ama
   sayfanın marka mavisi değil.

   Düğmeler ve kart bağlantıları HARİÇ tutuluyor: onların rengi kendi
   bileşenlerinden geliyor. --}}
   -------------------------------------------------------------------------- */
.to-sayfa a:not([class]),
.to-sayfa a[class]:not(.to-btn):not(.to-kart__bag):not(.to-sekme):not([class*="__bag"]):not([class*="-bag"]) {
    color: var(--to-mavi);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.to-bolum--koyu a:not([class]),
.to-bolum--koyu a[class]:not(.to-btn):not(.to-kart__bag):not(.to-sekme):not([class*="__bag"]):not([class*="-bag"]),
.to-bolum--mavi a:not([class]),
.to-bolum--turkuaz a:not([class]) {
    color: #cfe0ff;
}

/* Metin içi bağlantı sınıfları da marka rengini alsın (adları bölüm bölüm
   değişiyor, ortak son ek `-bag`). Düğme ve kart bağlantısı zaten hariç. */
.to-sayfa a[class*="-bag"]:not(.to-btn):not(.to-kart__bag) {
    color: var(--to-mavi);
}

.to-bolum--koyu a[class*="-bag"]:not(.to-btn):not(.to-kart__bag) { color: #cfe0ff; }

/* --------------------------------------------------------------------------
   3. DÜĞMELER — HAP (r60)
   -------------------------------------------------------------------------- */
.to-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px dokunma hedefi: referansın 36px'lik düğmesi WCAG 2.5.5'i geçmez. */
    min-height: 44px;
    padding: 10px 26px;
    border: 0;
    border-radius: var(--to-r-hap);
    background: var(--to-mavi);
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, background-color 0.16s ease;
}

.to-btn:hover { background: var(--to-mavi-koyu); transform: translateY(-1px); }
.to-btn:focus-visible { outline: 3px solid #a9c5f5; outline-offset: 3px; }

.to-btn--buyuk { min-height: 50px; padding: 12px 32px; font-size: 18px; }

.to-btn--acik { background: #fff; color: var(--to-mavi); }
.to-btn--acik:hover { background: #eaf1fd; }

.to-btn--cizgi {
    background: transparent;
    color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}
.to-btn--cizgi:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   4. TİK ÇİPLERİ  (renkli bantlarda 2×2)
   -------------------------------------------------------------------------- */
.to-cipler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    max-width: 470px;
}

.to-cip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 16px;
    border-radius: var(--to-r-hap);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(15, 27, 50, 0.12);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--to-metin);
}

.to-cip svg { flex: 0 0 auto; color: #12a150; }

/* ÇİP ZEMİNİ — ölçülmüş düzeltme.
   İlk hâl `rgba(255,255,255,0.12)` idi. Siyah zeminde sorun yok ama RENKLİ
   bantta zemini AÇIYOR: #2d67e8 üzerinde #4679eb'ye çıkıyor ve beyaz yazı
   4,04:1'e düşüyordu. Beyaz yerine SİYAH katman kullanıldı — bant rengini
   koyulaştırıyor, beyaz yazı #285dd1 üzerinde 5,87:1, turkuazda 6,07:1. */
.to-bolum--koyu .to-cip {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    color: #fff;
}

.to-bolum--mavi .to-cip,
.to-bolum--turkuaz .to-cip {
    background: rgba(0, 0, 0, 0.10);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    color: #fff;
}
.to-bolum--mavi .to-cip svg,
.to-bolum--turkuaz .to-cip svg,
.to-bolum--koyu .to-cip svg { color: #7ce0a3; }

/* --------------------------------------------------------------------------
   5. KART
   -------------------------------------------------------------------------- */
.to-kart {
    position: relative;
    border-radius: var(--to-r);
    background: #fff;
    box-shadow: var(--to-golge);
    /* Referansın kartlarında KENARLIK yok — gölge tek ayırıcı. */
}

.to-bolum--koyu .to-kart {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Genişletilmiş bağ: tıklanabilir alan kartın tamamı olur.
   (Bağın kendi kutusu 24px kalır; hedef 44px'i kartın yüksekliğinden alır.) */
.to-kart__bag { color: inherit; text-decoration: none; }

.to-kart__bag::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
}

.to-kart:has(.to-kart__bag:hover) { box-shadow: rgba(15, 23, 42, 0.16) 0 10px 34px 0; }

.to-kart:has(.to-kart__bag:focus-visible) {
    outline: 3px solid var(--to-mavi);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px #fff, rgba(15, 23, 42, 0.16) 0 10px 34px 0;
}

/* --------------------------------------------------------------------------
   6. TARAYICI PENCERESİ  (demo ve sayfa kartlarının çerçevesi)
   -------------------------------------------------------------------------- */
.to-pencere {
    display: block;
    overflow: hidden;
    border-radius: var(--to-r) var(--to-r) 0 0;
    background: #fff;
}

.to-pencere__cubuk {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 10px;
    background: #eef0f4;
}

.to-bolum--koyu .to-pencere__cubuk { background: #2a2f3d; }

.to-pencere__nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5f57;
}
.to-pencere__nokta:nth-child(2) { background: #febc2e; }
.to-pencere__nokta:nth-child(3) { background: #28c840; }

.to-pencere__adres {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
    font-size: 10px;
    line-height: 14px;
    /* ÖLÇÜLDÜ: ilk değer #8b93a5 idi ve açık çubukta 2,70:1, koyu çubukta
       4,33:1 veriyordu — ikisi de 4,5:1'in altında. Adres çubuğu SÜS DEĞİL,
       kartın hangi temaya gittiğini söyleyen tek metin. Açık zemin için
       #565d6c (5,79:1), koyu zemin için aşağıda #b0b7c6 (6,64:1). */
    color: #565d6c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-bolum--koyu .to-pencere__adres { color: #b0b7c6; }

.to-pencere img {
    display: block;
    width: 100%;
    height: auto;
    /* Uzun sayfa karesinin ÜST kenarı korunur: bir vitrinin kimliği başlık ve
       kahraman alanındadır, altını kırpmak bilgi kaybettirmez. */
    object-fit: cover;
    object-position: top center;
}

/* --------------------------------------------------------------------------
   7. TELEFON ÇERÇEVESİ
   -------------------------------------------------------------------------- */
.to-telefon {
    position: relative;
    display: block;
    padding: 8px;
    border-radius: 30px;
    background: linear-gradient(160deg, #3a4152 0%, #12151d 60%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.to-telefon__ekran {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 23px;
    background: #fff;
}

.to-telefon__ekran img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;   /* ÖLÇÜLDÜ: -mobil 900×1800, -telefon 300×600 */
    object-fit: cover;
    object-position: top center;
}

/* Çentik (dynamic island) — süs, ekran okuyucudan gizli. */
.to-telefon__centik {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 34%;
    height: 12px;
    border-radius: 999px;
    background: #12151d;
}

/* ==========================================================================
   CİHAZ KABUĞU — durum çubuğu + alt tarayıcı çubuğu   (İSTEĞE BAĞLI KATMAN)
   --------------------------------------------------------------------------
   NİÇİN: çentik tek başına yetmiyordu. Yalnız çentikli bir çerçeve "ekran
   görüntüsünün etrafına çizilmiş bir kutu" gibi okunuyor; gerçek bir telefonda
   vitrinin ÜSTÜNDE bir durum çubuğu (saat + göstergeler), ALTINDA da tarayıcının
   adres ve araç çubuğu durur. Karşılaştırma karesinde fark buradaydı.

   HİÇBİR MEVCUT KULLANIM ETKİLENMEZ: aşağıdaki parçalar yalnız işaretleme
   onları basarsa vardır. `.to-telefon`u çentikle kullanan bölümler (12) aynı
   kalır — tek bir mevcut kural değiştirilmedi, hepsi EK kuraldır.

   HEPSİ SÜS: işaretlemede `aria-hidden="true"` taşırlar. Ekran okuyucu bir
   saat, bir pil ya da bir "geri" düğmesi duymaz — bunların hiçbiri gerçek bir
   denetim değildir.

   ÖLÇEK — NİÇİN cq BİRİMİ: bu çerçeveler 150px ile 280px arasında akıcı
   büyüyor. Kabuk px ile ölçülseydi küçük telefonda saat ekranın yarısını
   kaplar, büyükte oyuncak gibi kalırdı. `container-type: inline-size` YALNIZ
   kabuk basan ekrana veriliyor (`:has(> …)`), böylece kapsam sızmıyor;
   `cqw` = ekran genişliğinin %1'i, yani kabuk telefonla birlikte ölçekleniyor.

   ORAN VE CLS: çubukların ikisi de `position: absolute`. Görüntünün 1/2'lik
   kutusuna DOKUNMUYORLAR — ne kırpıyor ne de yeniden boyutlandırıyorlar;
   gerçek bir cihazda olduğu gibi görüntünün ÜSTÜNE biniyorlar. Akışta yer
   kaplamadıkları için beyan edilen 900×1800 kutusu aynı kalır, CLS payı sıfır.

   KARŞITLIK (ölçüldü, WCAG 2.1 formülü):
     durum çubuğu  #1c1f26 / #f6f7f9 = 15,39:1   (gövde metni eşiği 4,5:1)
     ada (çentik)  #12151d / #f6f7f9 = 17,02:1   (gösterge eşiği 3:1)
     adres metni   #3a3d45 / #ffffff = 10,86:1
     "AA" etiketi  #6b7280 / #ffffff =  4,83:1
     araç işaretleri #4d5560 / #f4f4f6 = 6,87:1  (gösterge eşiği 3:1)
   ========================================================================== */
.to-telefon__ekran:has(> .to-telefon__durum) { container-type: inline-size; }

/* Çentik kabuklu çerçevede EKRANIN içine taşınır (işaretleme onu oraya basar):
   yalnız böylece cq kapsayıcısının içinde kalır ve durum çubuğuyla birlikte
   ölçeklenir. Sabit 12px yükseklik 150px'lik telefonda çubuğun tamamını
   dolduruyordu. z-index 4: çubuk 3'te, ada onun ÜSTÜNDE durmalı. */
.to-telefon__ekran > .to-telefon__centik {
    top: 2.1cqw;
    z-index: 4;
    width: 27%;
    height: 5cqw;
}

/* --------------------------- DURUM ÇUBUĞU --------------------------------- */
/* NİÇİN AÇIK ZEMİN: referansın durum çubuğu da açık ve ada siyah. Koyu bir
   çubukta siyah ada görünmez olurdu; ayrıca metnin karşıtlığı altındaki tema
   karesine göre değişemez — çubuk kendi zeminini taşımak zorunda. */
.to-telefon__durum {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4cqw;
    height: 9cqw;
    padding: 0 5.5cqw;
    background: #f6f7f9;
    color: #1c1f26;
    font-size: 3.8cqw;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.to-telefon__gostergeler {
    display: flex;
    align-items: center;
    gap: 1.6cqw;
}

/* Sinyal — dört yükselen çubuk. Ek işaretleme YOK: dört ayrı `<span>` yerine
   tek kutuda dört arka plan katmanı. Süs şekli, çekirdek ikon sözlüğünde
   karşılığı yok. */
.to-telefon__sinyal {
    width: 4.9cqw;
    height: 3.4cqw;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(#1c1f26, #1c1f26),
        linear-gradient(#1c1f26, #1c1f26),
        linear-gradient(#1c1f26, #1c1f26),
        linear-gradient(#1c1f26, #1c1f26);
    background-size: 0.85cqw 40%, 0.85cqw 60%, 0.85cqw 80%, 0.85cqw 100%;
    background-position: 0 100%, 1.35cqw 100%, 2.7cqw 100%, 4.05cqw 100%;
}

/* Wi-Fi — merkezden yayılan üç yay. Eş merkezli halkalar `radial-gradient`
   ile çiziliyor, `clip-path` tabanı aşağıda olan üçgene kırpıyor. */
.to-telefon__wifi {
    width: 4.6cqw;
    height: 3.4cqw;
    background: radial-gradient(circle at 50% 100%,
        #1c1f26 0 20%, rgba(0, 0, 0, 0) 20% 44%,
        #1c1f26 44% 64%, rgba(0, 0, 0, 0) 64% 82%,
        #1c1f26 82% 100%);
    clip-path: polygon(50% 100%, 4% 26%, 96% 26%);
}

/* Pil — çerçeve + dolgu + uç. Dolgu oranı SÜSTÜR, bir ölçüm değildir:
   sayfanın hiçbir yerinde sayı olarak geçmez. */
.to-telefon__pil {
    position: relative;
    box-sizing: border-box;
    width: 6.6cqw;
    height: 3.4cqw;
    padding: 0.45cqw;
    border: 0.4cqw solid rgba(28, 31, 38, 0.55);
    border-radius: 1.1cqw;
}

.to-telefon__pil::before {
    content: "";
    display: block;
    width: 62%;
    height: 100%;
    border-radius: 0.5cqw;
    background: #1c1f26;
}

.to-telefon__pil::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    width: 0.75cqw;
    height: 42%;
    border-radius: 0 1cqw 1cqw 0;
    background: rgba(28, 31, 38, 0.55);
}

/* ----------------------- ALT TARAYICI ÇUBUĞU ------------------------------ */
.to-telefon__tarayici {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 3;
    display: block;
    background: #f4f4f6;
    /* Görüntüden ayrılsın diye üste doğru yumuşak bir gölge; çizgi değil,
       çünkü 1px'lik bir çizgi 150px'lik telefonda kalın görünüyordu. */
    box-shadow: 0 -0.4cqw 2.4cqw rgba(0, 0, 0, 0.18);
}

.to-telefon__adres {
    display: flex;
    align-items: center;
    gap: 2cqw;
    height: 11cqw;
    margin: 0 4cqw;
}

/* Adres hapı — Safari'deki gibi. İçindeki metin temanın GERÇEK önizleme
   adresidir (`$t['adres']`), yalnız şeması atılmış hâli: tarayıcı da öyle
   gösterir. Uydurma alan adı yok. */
.to-telefon__hap {
    display: flex;
    align-items: center;
    gap: 2cqw;
    width: 100%;
    min-width: 0;
    height: 8.2cqw;
    padding: 0 3cqw;
    border-radius: 999px;
    background: #fff;
    color: #3a3d45;
    font-size: 3.4cqw;
    line-height: 1;
}

.to-telefon__aa {
    flex: none;
    color: #6b7280;
    font-size: 3cqw;
    font-weight: 600;
}

/* Taşarsa üç noktayla kesilir — adres uzun temalarda hapı yarmasın. */
.to-telefon__url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.to-telefon__adres svg {
    flex: none;
    width: 4cqw;
    height: 4cqw;
    color: #6b7280;
}

/* Araç çubuğu: geri · ileri · paylaş · kitap · sekmeler.
   Geri/ileri ÇEKİRDEK ikon sözlüğünden (`arrow-left` / `arrow-right`); kalan
   üçünün sözlükte karşılığı YOK, bu yüzden süs CSS şekli olarak çiziliyorlar. */
.to-telefon__arac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 13cqw;
    padding: 0 6cqw;
    color: #4d5560;
}

.to-telefon__arac svg {
    width: 4.8cqw;
    height: 4.8cqw;
}

/* Paylaş — üstü açık kutu + yukarı ok. */
.to-telefon__paylas {
    position: relative;
    box-sizing: border-box;
    width: 4cqw;
    height: 4.8cqw;
    margin-top: 0.6cqw;
    border: 0.5cqw solid currentColor;
    border-top-color: transparent;
    border-radius: 0.6cqw;
}

.to-telefon__paylas::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2.2cqw;
    width: 0.5cqw;
    height: 3.4cqw;
    transform: translateX(-50%);
    background: currentColor;
}

.to-telefon__paylas::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -2cqw;
    width: 2cqw;
    height: 2cqw;
    border-top: 0.5cqw solid currentColor;
    border-left: 0.5cqw solid currentColor;
    transform: translate(-50%, 0) rotate(45deg);
}

/* Kitap — iki sayfalı açık kitap: kutu + ortada dikey çizgi. */
.to-telefon__kitap {
    position: relative;
    box-sizing: border-box;
    width: 5.4cqw;
    height: 4.4cqw;
    border: 0.5cqw solid currentColor;
    border-radius: 0.6cqw;
}

.to-telefon__kitap::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 0.5cqw;
    height: 100%;
    transform: translateX(-50%);
    background: currentColor;
}

/* Sekmeler — üst üste binmiş iki kare. */
.to-telefon__sekmeler {
    position: relative;
    box-sizing: border-box;
    width: 4.4cqw;
    height: 4.4cqw;
    margin: 0 0 1.2cqw 1.2cqw;
    border: 0.5cqw solid currentColor;
    border-radius: 0.6cqw;
}

.to-telefon__sekmeler::before {
    content: "";
    position: absolute;
    left: -1.6cqw;
    top: 1.6cqw;
    box-sizing: border-box;
    width: 4.4cqw;
    height: 4.4cqw;
    border: 0.5cqw solid currentColor;
    border-radius: 0.6cqw;
    background: #f4f4f6;
}

/* Ev göstergesi çizgisi. */
.to-telefon__ev {
    display: block;
    height: 3.4cqw;
}

.to-telefon__ev::before {
    content: "";
    display: block;
    width: 26%;
    height: 0.9cqw;
    margin: 0.9cqw auto 0;
    border-radius: 999px;
    background: #9aa0aa;
}

/* GÖRSEL OLARAK GİZLİ FORM GİRDİSİ — iOS koruması.
   Süzgeçler CSS-only çalışıyor: gerçek `<input>` gizleniyor, `<label>` hedef
   oluyor. Gizli girdinin yazı boyu tarayıcı varsayılanı olan 13,33px'te
   kalıyordu; iOS Safari 16px ALTINDAKİ bir alana odaklanınca sayfayı ZORLA
   yakınlaştırır ve kullanıcı bir daha uzaklaştıramaz — odak etikete tıklayınca
   gizli girdiye geçtiği için bu gerçek bir risk.
   Seçici bölüm dosyalarına bağımlı olmasın diye `[class$="-radyo"]` kullanıldı. */
.to-sayfa input[class$="-radyo"],
.to-sayfa input[class*="-radyo "] {
    font-size: 16px;
}

/* --------------------------------------------------------------------------
   8. HAP SÜZGEÇ SEKMELERİ
   -------------------------------------------------------------------------- */
.to-sekmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 40px;
    padding: 6px;
    border-radius: var(--to-r-hap);
    background: rgba(255, 255, 255, 0.08);
    width: fit-content;
    max-width: 100%;
    list-style: none;
}

.to-bolum:not(.to-bolum--koyu) .to-sekmeler { background: #eef1f7; }

.to-sekme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Referansın sekmesi 40px; WCAG 2.5.5 dokunma hedefi 44px istiyor. */
    min-height: 44px;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--to-r-hap);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.to-sekme[aria-selected="true"] { background: var(--to-mavi); color: #fff; }
.to-sekme:focus-visible { outline: 3px solid var(--to-mavi); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   9. IZGARALAR
   -------------------------------------------------------------------------- */
.to-izgara {
    display: grid;
    gap: var(--to-oluk);
}

/* `minmax(0, 1fr)`: hücrenin en küçük genişliği İÇERİK değil SIFIR olur.
   `1fr` tek başına bırakılırsa bölünemez uzun bir sözcük hücreyi şişirir ve
   320px'de sayfa yatay kayar (bu depoda ölçüldü). */
.to-izgara--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.to-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.to-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.to-izgara--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* İki kolonlu metin/görsel bandı. */
.to-ikili {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.to-ikili--ters > *:first-child { order: 2; }

/* --------------------------------------------------------------------------
   10. PERDE — kırpılmış ızgaranın alt kenarını soldurur
   -------------------------------------------------------------------------- */
.to-perdeli { position: relative; }

.to-perdeli::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 180px;
    background: linear-gradient(to bottom, transparent, var(--to-perde-renk, var(--to-zemin)) 82%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. İKON KAROSU
   -------------------------------------------------------------------------- */
.to-karo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 12px;
    border-radius: var(--to-r);
    text-align: center;
}

.to-karo__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    /* Referansın kesikli kenarlığı — dolu zemin yerine. */
    border: 1px dashed var(--to-cizgi);
    background: #fff;
    color: var(--to-mavi);
}

.to-karo__ad {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-karo__etiket {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--to-r-hap);
    background: #eef1f7;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* #6b7280 ölçüldü: #eef1f7 üzerinde 4,27:1 — eşiğin biraz altında. */
    color: #565d6a;
}

/* --------------------------------------------------------------------------
   12. ROZET
   -------------------------------------------------------------------------- */
.to-rozet {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: var(--to-r-kucuk);
    background: #dcfce7;
    color: #14532d;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.to-rozet--mavi { background: #dbeafe; color: #1e3a8a; }
.to-rozet--sari { background: #fef3c7; color: #78350f; }

/* --------------------------------------------------------------------------
   13. KIRILIMLAR — DuyarlilikTest'in ONAYLI listesinden: 1100·900·720·560·420
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .to-izgara--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* `.to-not--sag` buradan kaldırıldı: not artık VARSAYILAN olarak akışta
       (yukarıdaki tanıma bak), dışarı çıkması min-width:1300 ile açılıyor. */
}

@media (max-width: 900px) {
    .to-bolum { padding: 88px 0; }
    .to-bolum--bant { padding: 88px 0 96px; }
    .to-bolum--yogun { padding: 64px 0; }
    .to-izgara--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .to-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .to-izgara--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .to-ikili { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .to-ikili--ters > *:first-child { order: 0; }
    .to-baslik { margin-bottom: 36px; }
}

@media (max-width: 720px) {
    .to-bolum { padding: 64px 0; }
    .to-bolum--bant { padding: 64px 0 72px; }
    .to-izgara--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .to-cipler { grid-template-columns: minmax(0, 1fr); max-width: none; }
    .to-btn { width: 100%; }
    .to-hayalet { display: none; }   /* dar ekranda başlığı okunmaz kılıyor */
}

@media (max-width: 560px) {
    .to-izgara--5,
    .to-izgara--4,
    .to-izgara--3,
    .to-izgara--2 { grid-template-columns: minmax(0, 1fr); }
    .to-sekmeler { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

@media (max-width: 420px) {
    .to-bolum { padding: 52px 0; }
    .to-karo { padding: 18px 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .to-btn { transition: none; }
    .to-btn:hover { transform: none; }
}

/* ─────────── 01-kahraman.css ─────────── */
/* ÖLÇÜLMÜŞ KARŞITLIK DÜZELTMELERİ (25 Ağustos 2026, son doğrulama turu).
   Değerler WCAG bağıl parlaklıkla, yarı saydam katmanlar `source-over` ile
   birleştirilerek hesaplandı. Eşik: gövde metni 4,5:1 · büyük metin 3:1. */
/* ==========================================================================
   01 — KAHRAMAN   (önek `.to-kh-`)
   --------------------------------------------------------------------------
   Referansın kahraman karesi: ortalanmış iki tonlu başlık · iki hap düğme ·
   BÜYÜK masaüstü maketi · maketin kenarlarına taşan yüzen kartlar.

   ÖLÇÜLER referans fişinden alındı (1440px'te ölçüldü):
     kahraman başlık  kalın 70/70/700 + ince 52/52/400
     üstlük           16/24/500
   70/1440 = 4.861vw · 52/1440 = 3.611vw → clamp() tabanları buradan geliyor.

   KONTRAST (WCAG bağıl parlaklık, bu dosya için hesaplandı).
   Zemin `.to-bolum--koyu` gradyanı: kenar #000000 · orta #0d1e42 · ara #081738.
   EN ZAYIF zemin merkezdeki #0d1e42 olduğu için ölçüm oradan yapıldı:
     #ffffff / #0d1e42 → 16,41:1        #ffffff / #081738 → 16,75:1
     #c8d4ea / #0d1e42 → 10,99:1        #c8d4ea / #081738 → 11,71:1
     #a9c5f5 / #0d1e42 →  9,35:1        (üstlük, temelden geliyor)
     #ffffff / rgba(8,23,56,.92) beyaz üstünde → 14,33:1   (yüzen kart adı)
     #5b6373 / #eef0f4 →  5,28:1        (adres çubuğu — aşağıda gerekçesi)
   Hepsi 4,5:1 eşiğinin üstünde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TEPE — üstlük + h1 + lead + düğmeler
   -------------------------------------------------------------------------- */
.to-kh-tepe {
    max-width: 940px;
    margin: 0 auto;
    text-align: center;
}

/* Kahraman başlığı bölüm başlığından (52/40) BİR KADEME büyük: 70/52.
   `.to-h2` kullanılmadı çünkü bu sayfanın tek <h1>'i ve tek bu ölçüde. */
.to-kh-h1 {
    margin: 0;
    font-size: clamp(34px, 4.861vw, 70px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.to-kh-ince {
    display: block;
    margin-top: 10px;
    font-size: clamp(26px, 3.611vw, 52px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.to-kh-lead {
    max-width: 720px;
    margin: 22px auto 0;
    font-size: 16px;
    line-height: 27px;
    color: #c8d4ea;
}

.to-kh-lead strong { color: #fff; font-weight: 600; }

.to-kh-dugmeler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

/* --------------------------------------------------------------------------
   SAHNE — büyük maket + yüzen kartlar
   -------------------------------------------------------------------------- */
.to-kh-sahne {
    position: relative;
    margin-top: 64px;
}

/* Sabit px genişlik yok: maket kapsayıcının %76'sını alır, üst sınır 980px.
   (1289 iç genişlikte 980 → iki yanda 154,5px boşluk kalır; yüzen kartlar bu
   boşluğa oturur ve maketin kenarına bir miktar taşar — referansın imzası.)

   ÖZGÜLLÜK ARIZASI — MAKET SOLA YAPIŞIKTI (ölçüldü: kap merkezi 720, maket
   merkezi 566, yani 154px kayık). Sebep kabuktaki
   `.td-govde figure { margin: 0 }` kuralı: (0,1,1) ağırlığında ve buradaki
   tek sınıflı `margin: 0 auto`yu (0,1,0) eziyor. Bu depoda AYNI arızanın
   dördüncü görülüşü — `a`, bileşen margin'leri ve çerez bandı düğmeleri de
   aynı sebeple bozulmuştu. `.td-govde` ile (0,2,0)'a çıkarıldı. */
.td-govde .to-kh-maket {
    max-width: 980px;
    margin-inline: auto;
}

.to-kh-pencere {
    border-radius: var(--to-r);
    box-shadow: var(--to-golge-koyu);
}

.to-kh-pencere:focus-visible {
    outline: 3px solid #a9c5f5;
    outline-offset: 4px;
}

/* Temeldeki çubuk 22px/10px — o ölçü galerideki KÜÇÜK kartlar için ölçülmüştü.
   980px genişliğindeki kahraman maketinde 10px adres okunmuyor, bu yüzden
   çubuk yalnız burada büyütüldü. */
.to-kh-pencere .to-pencere__cubuk { height: 34px; gap: 7px; padding: 0 14px; }
.to-kh-pencere .to-pencere__nokta { width: 10px; height: 10px; }

/* Temeldeki #8b93a5 adres rengi #eef0f4 üstünde 2,70:1 — 4,5:1'i geçmiyor.
   Bu maketteki adres GERÇEK bir bağdır, süs değil; okunur olmak zorunda. */
/* #5b6373 ÖLÇÜLDÜ: koyu çubuk (#2a2f3d) üzerinde 2,21:1 — eşiğin çok
   altında. Adres çubuğu süs değil, maketin hangi temaya ait olduğunu
   söyleyen tek metin. #b0b7c6 → 6,64:1. */
.to-kh-pencere .to-pencere__adres { margin-left: 12px; font-size: 12px; line-height: 16px; color: #b0b7c6; }

.to-kh-altyazi {
    margin: 18px auto 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: #c8d4ea;
}

.to-kh-altyazi strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------------------------
   YÜZEN KARTLAR
   -------------------------------------------------------------------------- */
.to-kh-yuzenler {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Maketin bağı kartların ALTINDA kalıyor; tıklama kartlardan geçsin. */
    pointer-events: none;
}

.to-kh-yuzen {
    position: absolute;
    width: clamp(170px, 16.5vw, 236px);
    overflow: hidden;
    border-radius: var(--to-r);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: rgba(2, 6, 18, 0.55) 0 18px 44px 0, inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    /* Süzülme `transform` ile canlandırılır. İlk sürüm bağımsız `translate`
       özelliğini kullanıyordu — teknik olarak doğru (o da birleştiricide
       çalışır) ama `tests/Feature/DuyarlilikTest.php` yalnız `transform` ve
       `opacity` canlandırmaya izin veriyor. Eğim `transform`ın içinde
       taşındığı için her kartın kendi kare dizisi var. */
    animation: 7s ease-in-out infinite alternate;
}

.to-kh-yuzen img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 525;   /* ÖLÇÜLDÜ: `-kart` kareleri 840×525 → CLS 0 */
    object-fit: cover;
}

/* Şerit zemini bölümün zeminine çok yakın; kartın ALT sınırı görünsün diye
   üstünde saç teli bir çizgi var. (Renk değil, çizgi ayırıyor.) */
.to-kh-yuzen-ad {
    display: block;
    padding: 9px 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    background: rgba(8, 23, 56, 0.92);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #fff;
}

/* Konumlar: 1 ve 3 solda, 2 sağda; üçü de maketin kenarına biner.
   Hafif eğim referansın "masanın üstüne bırakılmış kart" hissini veriyor. */
/* YERLEŞİM — maket ortalandıktan sonra yeniden ölçüldü.
   Maket 980px ve ortalı; 1289 iç genişlikte iki yanda 154,5px oluk kalıyor.
   Kart genişliği en çok 236px, yani her kart oluğu doldurup maketin kenarına
   ~80px taşıyor. Taşma BİLEREK: kartlar maketin üstünde yüzüyor gibi
   duruyor. Ama taşma maketin İÇERİĞİNİ kapatmamalı — ilk sürümde soldaki
   kart menü şeridinin üstüne oturuyordu (ölçüldü: kart 71→316, maket 76'da
   başlıyor, yani menünün 240px'i kapalıydı).

   Dikey yerleşim: üst iki kart maketin kahraman alanı hizasında, alttaki
   kart maketin ALT kenarına yakın ama taşmadan (sahne yüksekliği maketin
   yüksekliğidir; `bottom: -2%` kartı sahnenin dışına sarkıtıyordu). */
.to-kh-yuzen--1 { left: 0;     top: 20%;    transform: rotate(-3deg); animation-delay: 0s;    animation-name: to-kh-suzul-1; }
.to-kh-yuzen--2 { right: 0;    top: 9%;     transform: rotate(3deg);  animation-delay: -2.4s; animation-name: to-kh-suzul-2; }
.to-kh-yuzen--3 { left: 1%;    bottom: 4%;  transform: rotate(-2deg); animation-delay: -4.8s; animation-name: to-kh-suzul-3; }

/* Eğim kare dizisinin İÇİNDE taşınıyor: `transform` tek bir özellik olduğu
   için animasyon onu ezerdi ve kartlar süzülürken düz durur, sonra zıplardı. */
@keyframes to-kh-suzul-1 {
    from { transform: rotate(-3deg) translateY(6px); }
    to   { transform: rotate(-3deg) translateY(-10px); }
}

@keyframes to-kh-suzul-2 {
    from { transform: rotate(3deg) translateY(6px); }
    to   { transform: rotate(3deg) translateY(-10px); }
}

@keyframes to-kh-suzul-3 {
    from { transform: rotate(-2deg) translateY(6px); }
    to   { transform: rotate(-2deg) translateY(-10px); }
}

/* --------------------------------------------------------------------------
   SAYAÇLAR — dördü de $sayilar dizisinden GERÇEK sayı
   -------------------------------------------------------------------------- */
.to-kh-sayaclar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 72px 0 0;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* `column-reverse`: işaretlemede <dt> (ad) <dd>'den (sayı) ÖNCE gelmek
   zorunda — tanım listesi böyle kurulur. Görsel sıra ise sayı üstte olmalı. */
.to-kh-sayac {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.to-kh-sayac-sayi {
    margin: 0;
    font-size: clamp(38px, 4.2vw, 60px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
}

.to-kh-sayac-ad {
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: #c8d4ea;
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — yalnız onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 1100'ün altında maket kapsayıcının tamamını kaplıyor; yüzen kartların
   oturacağı boşluk kalmıyor ve maketin kimlik alanını kapatıyorlar.
   Bilgi kaybı yok: aynı temalar galeri bölümünde adlarıyla listeleniyor. */
@media (max-width: 1100px) {
    .to-kh-yuzenler { display: none; }
    .to-kh-sahne { margin-top: 52px; }
}

@media (max-width: 900px) {
    .to-kh-sayaclar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
        margin-top: 56px;
        padding-top: 32px;
    }
}

@media (max-width: 720px) {
    .to-kh-sahne { margin-top: 40px; }
    .to-kh-dugmeler { gap: 12px; }
    .to-kh-pencere .to-pencere__cubuk { height: 26px; padding: 0 10px; }
    .to-kh-pencere .to-pencere__nokta { width: 8px; height: 8px; }
    .to-kh-pencere .to-pencere__adres { font-size: 11px; margin-left: 8px; }
}

@media (max-width: 420px) {
    .to-kh-sayaclar { gap: 26px 16px; }
    .to-kh-sayac-ad { font-size: 14px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .to-kh-yuzen { animation: none; }
}

/* ─────────── 02-kitle.css ─────────── */
/* ==========================================================================
   02 — KİTLE   (önek `.to-kt-`)
   --------------------------------------------------------------------------
   Referansın dört "kime göre" kartı. İmzası: kartlar masaüstünde AYNI HİZADA
   DURMAZ — farklı dikey ofsetlerle basamaklanır ve zeminleri hafif renklidir.

   OFSETLER GÖZ KARARI DEĞİL: referans karesi 720px genişliğinde (1440'ın
   yarısı) ölçüldü, kart üstleri sırayla 287 · 258 · 285 · 262 okundu.
   1440'a çevrilip en yükseğe (2×258 = 516) göre normalleştirildi:
       574-516 = 58 · 0 · 570-516 = 54 · 524-516 = 8
   Aşağıdaki 56 / 0 / 52 / 8 bu ölçümün yuvarlanmışıdır.

   KONTRAST — WCAG bağıl parlaklık formülüyle bu dosya için HESAPLANDI.
   Zeminler: #eff6ff (L .91494) · #fff7ef (L .94023) · #ebfff5 (L .95776)
             #f4f2ff (L .89946)
   Metinler: #222329 (L .01904) · #555555 (L .09084) · #215ada /* ARTIK KULLANILMIYOR: üstlük kart ailesinin rengini alıyor */ (L .12694)

     metin      #eff6ff   #fff7ef   #ebfff5   #f4f2ff
     #222329    13,98     14,34     14,60     13,75    (başlık — geçer)
     #555555     6,85      7,03      7,16      6,74    (gövde  — geçer)
     #215ada     5,45      5,60      5,70      5,37    (üstlük — geçer)

   EN DÜŞÜK DEĞER 5,37:1 → hepsi 4,5:1 eşiğinin üstünde.

   ÇİP ZEMİNİ (bu tur eklendi): kart içi çipler TAM BEYAZ. Temelin
   `rgba(255,255,255,0.9)` değeri dört ayrı tonun üstünde dört ayrı sonuç
   verirdi; opak beyazla hesap tek ve kesin oluyor:
     #222329 / #ffffff → 15,67:1 (çip metni — geçer; canlı sayfada ölçüldü)
     #12a150 / #ffffff →  3,36:1 (tik ikonu; METİN DEĞİL, WCAG 1.4.11 eşiği
                                  3:1 — geçer. Anlam ikonda değil yanındaki
                                  sözcükte; renk tek başına bilgi taşımıyor.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   KART AİLESİ RENKLERİ — `--to-kt-vurgu`
   --------------------------------------------------------------------------
   NİÇİN: referansın kart başlıklarında bir sözcük renklidir ("Launch Your
   [Website]…", "Effortless Client [Success]") ve renk her kartta o kartın
   zemin ailesinden seçilir. Bizde de öyle: tek bir değişke hem üstlüğü, hem
   başlıktaki vurgu sözcüğünü, hem büyük sayıyı besliyor.

   Renk SÜS. Vurgulanan sözcük cümlenin içinde zaten duruyor; rengi görmeyen
   okuyucu hiçbir şey kaybetmiyor (WCAG 1.4.1).

   KONTRAST — dördü de kendi kart zemininde hesaplandı. Vurgu sözcüğü 21px/700
   yani WCAG "büyük metin" (18,66px+700) sınıfında, eşiği 3:1. Yine de gövde
   eşiği 4,5:1 hedeflendi çünkü aynı renk 14px/600 üstlükte de kullanılıyor:

     kart       vurgu     zemin      elde hesap   canlı sayfada ölçülen
     mavi       #1a4aa8   #eff6ff    7,47:1       7,45:1
     turuncu    #a94b06   #fff7ef    5,32:1       5,36:1
     yeşil      #0a7a4a   #ebfff5    5,17:1       5,17:1
     mor        #5b2fbe   #f4f2ff    7,39:1       7,32:1

   EN DÜŞÜK ÖLÇÜLEN 5,17:1 → 3:1 eşiğini de 4,5:1 hedefini de geçiyor.
   (Ölçüm: Playwright, 1440/1100/900/720/560/420/360 — yedi genişlikte de
   aynı değerler; renkler kırılıma bağlı değil.)

   Not: turuncu için önce #b4530a denendi (4,78:1). Eşiği geçiyordu ama
   14px'lik üstlükte pay çok dar kaldığı için bir kademe koyulaştırıldı.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   TEPE — başlık bloğu + sağ üstteki el yazısı not
   --------------------------------------------------------------------------
   NİÇİN `.to-not--sag` KULLANILMADI (ölçülmüş kusur):
   Temelde iki kural çakışıyor ve ikisi de (0,2,0) özgüllüğünde —
       .to-not--sag                    { position: absolute; right: -180px; }
       .to-baslik > *:not(.to-hayalet) { position: relative; }
   Eşit özgüllükte SONRA yazılan kazanıyor, yani not `relative` kalıyor;
   `right: -180px` de onu 180px SAĞA kaydırıyor. Playwright'ta ölçüldü:
   1100px'te sayfa 1120px, 900px'te 975px kaydı — yatay kaydırma doğuyor.
   Notu `.to-baslik`ın dışına alıp kendi kabuğuma bağladım: çapa artık 780px'lik
   başlık değil, 1289px'lik kapsayıcının sağ kenarı — hangi genişlikte olursa
   olsun dışarı taşamaz.
   -------------------------------------------------------------------------- */
.to-kt-tepe { position: relative; }

.to-kt-not {
    position: absolute;
    right: 0;
    top: 6px;
    width: 190px;
    margin: 0;
    text-align: left;
}

/* --------------------------------------------------------------------------
   IZGARA — basamaklı dizilim
   -------------------------------------------------------------------------- */
.to-kt-izgara {
    margin: 0;
    padding: 0;
    list-style: none;
    /* `start`: kartlar birbirinin boyuna UZAMAZ. Basamaklı görüntü ancak
       kartların kendi içeriği kadar yüksek olmasıyla oluşuyor. */
    align-items: start;
}

.to-kt-izgara > :nth-child(1) { margin-top: 56px; }
.to-kt-izgara > :nth-child(2) { margin-top: 0; }
.to-kt-izgara > :nth-child(3) { margin-top: 52px; }
.to-kt-izgara > :nth-child(4) { margin-top: 8px; }

/* --------------------------------------------------------------------------
   KART
   -------------------------------------------------------------------------- */
.to-kt-kart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px 28px;
    /* `.to-kart`ın beyaz zemini eziliyor; yarıçap, gölge, odak halkası ve
       genişletilmiş bağ davranışı temelden aynen geliyor. */
}

.to-kt-kart--mavi    { background: #eff6ff; --to-kt-vurgu: #1a4aa8; }
.to-kt-kart--turuncu { background: #fff7ef; --to-kt-vurgu: #a94b06; }
.to-kt-kart--yesil   { background: #ebfff5; --to-kt-vurgu: #0a7a4a; }
/* DÖRDÜNCÜ KART — REFERANS BEYAZ + ÜSTTE PASTEL TARAMA, lavanta DEĞİL.
   Referans karesinden piksel örneklendi (x 1195→1435, y 1245):
   #F3CCE9 (pembe-leylak) → #4C90DA (mavi) → #FAD9E6 → #FDF0ED → #FFF7F4,
   ve dikeyde y=1232'deki #FAD0D3 y=1304'te #FFFFFF'e soluyor — yani tarama
   yalnız üst ~74px'te yaşıyor, kartın gövdesi BEYAZ.
   İlk sürümde kart düz lavanta (#f4f2ff) idi; referansa hiç benzemiyordu. */
.to-kt-kart--mor {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #ffffff 74px) top / 100% 74px no-repeat,
        linear-gradient(100deg, #f3cce9 0%, #c8d8f6 20%, #fad9e6 46%, #fde1d6 72%, #fff6f2 100%) top / 100% 74px no-repeat,
        #ffffff;
    --to-kt-vurgu: #5b2fbe;
}

/* Üstlük artık dört kartta da tek mavi değil, kartın kendi ailesinin rengi.
   NİÇİN: mavi üstlük turuncu/yeşil zeminde ait olmadığı bir aileden geliyordu
   ve referansın kart içi renk birliğini bozuyordu. `--to-mavi` yedeği,
   değişke bir gün gelmezse metnin renksiz kalmaması için duruyor. */
.to-kt-ustluk {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--to-kt-vurgu, var(--to-mavi));
}

.to-kt-baslik {
    margin: 0;
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--to-metin);
}

/* Başlıktaki tek renkli sözcük. `.to-kart__bag` `color: inherit` taşıdığı
   için bağın içindeyken de bu renk kazanıyor. */
.to-kt-vurgu { color: var(--to-kt-vurgu, var(--to-mavi)); }

.to-kt-metin {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   HAP ÇİPLER — temelin `.to-cipler` / `.to-cip` bileşeni, kart içi ayarıyla
   --------------------------------------------------------------------------
   NİÇİN TEK KOLON: temel `.to-cipler` 2×2 ızgaradır ve 470px'lik geniş
   bloklar için kurulmuştur. Burada kartın İÇ genişliği 1440'ta
   (1289 − 3×24 oluk) ÷ 4 = 304,25 → eksi 48 dolgu = 256px. İkiye bölününce
   çip başına 123px kalıyor; "30 hazır tema arasında geçiş" gibi bir etiket
   orada üç satıra kırılıp hap biçimini kaybediyor. Bu yüzden kart içinde
   çipler tek kolon, tam genişlik.

   `margin` de sıfırlandı: temeldeki 26px üst boşluk kartın kendi 14px'lik
   `gap`iyle üst üste binip ritmi bozuyordu. */

/* ÇİP İKONU KARTIN AİLE RENGİNİ ALIR — referansta da öyle.
   Temeldeki `.to-cip svg { color: #12a150 }` bütün çipleri aynı yeşile
   boyuyordu; referansta 1. kartın ikonları MAVİ, 2. kartın TURUNCU,
   3. kartın YEŞİL — yani ikon rengi kartın ailesini söylüyor.
   Renk yalnız SÜS: çipin anlamı yanındaki metinde ve artık ikonun
   kendi biçiminde (her çipin kendi ikonu var).
   Karşıtlık (ikon = gösterge, WCAG 1.4.11 eşiği 3:1, beyaz çip zemininde):
     #1a4aa8 → 8,59:1 · #a94b06 → 5,74:1 · #0a7a4a → 5,17:1 · #5b2fbe → 8,42:1 */
.to-kt-cipler .to-cip svg {
    /* Simge artık DOLU ve kendi gradyanını taşıyor (shop.tema-onizleme.ikon);
       `color` ile boyanmıyor. Eski tek renk çizgi ikonda gerekliydi. */
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.to-kt-cipler {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 2px 0 0;
    max-width: none;
}

/* Çip zemini kart tonundan bağımsız olsun diye OPAK beyaz — hesap dosya
   başlığındaki tabloda (15,67:1 metin · 3,36:1 tik). Temelin yarı saydam
   beyazı dört zeminde dört ayrı sonuç veriyordu. */
.to-kt-cipler .to-cip {
    background: #fff;
    align-items: flex-start;
    padding: 9px 14px;
}

/* İkon ilk satırın orta hizasına oturur — etiket iki satıra düşerse ikon
   yukarıda kalır, aşağı kaymaz. */
.to-kt-cipler .to-cip svg { margin-top: 2px; }

/* --------------------------------------------------------------------------
   GERÇEK GÖRSELLER
   --------------------------------------------------------------------------
   Dört kartın üçünde gerçek kare var (1: yayındaki tema · 2: paketin teması ·
   3: bayi başvurusu sayfası). 4. kart referansın "Why Choose Us?" kartı gibi
   görselsiz; onun ağırlığını büyük sayı taşıyor.
   -------------------------------------------------------------------------- */
.to-kt-gorsel {
    margin: 6px 0 0;
    overflow: hidden;
    border-radius: var(--to-r-kucuk);
    background: #fff;
}

.to-kt-gorsel img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 525;   /* ÖLÇÜLDÜ: `-kart` kareleri 840×525 → CLS 0 */
    object-fit: cover;
    object-position: top center;
}

/* DİKEY KARE (sayfa görselleri 600×750).
   NİÇİN TAM ORAN KULLANILMADI: 600/750 oranında kare 256px'lik kart içinde
   320px yükseliyor; kartı diğer üçünün 120px üstüne çıkarıp basamaklı
   dizilimin ALT hizasını bozuyordu (referansta üstler basamaklı, altlar kabaca
   aynı yerde bitiyor). 600/440'a kırpıldı → 188px.

   KIRPMA SINIRI GÖZ KARARI DEĞİL: kaynak kare 600×750 açılıp incelendi; üst
   440px başlık çubuğunu, "Bayilik başvurusu" başlığını ve formun ilk üç satır
   alanını tam kapsıyor — 440'ın altında başlık, üstünde boş form alanı kalıyor.
   Kırpma ÜSTTEN hizalı (`object-position: top center`).
   `aspect-ratio` CSS'te kesin verildiği için kırpma CLS doğurmuyor. */
.to-kt-gorsel--dik img { aspect-ratio: 600 / 440; }

/* --------------------------------------------------------------------------
   BÜYÜK SAYI (2., 3. ve 4. kart)
   -------------------------------------------------------------------------- */
.to-kt-sayi {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--to-govde);
}

/* Sayı da kartın kendi ailesinden. 40–56px/700 → WCAG büyük metin, eşik 3:1;
   ölçülen en düşük değer 5,17:1 (dosya başındaki tablo). */
.to-kt-sayi > span {
    font-size: clamp(40px, 3.9vw, 56px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--to-kt-vurgu, var(--to-mavi));
}

/* --------------------------------------------------------------------------
   ÖLÇÜM SATIRLARI (4. kart) — $olcumler'den gelen GERÇEK LCP/CLS
   -------------------------------------------------------------------------- */
.to-kt-olcum {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.to-kt-olcum-satir {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    /* 4. kartta görsel YOK (referansın "Why Choose Us?" kartı gibi). Diğer üç
       kart görselle 550–610px'e çıkarken bu kart 435px'te kalıyordu; ölçüm
       satırlarının dolgusu 9 → 13px'e açılarak fark 25px kapatıldı. Dolgu
       artışı satır yüksekliğini de okunur kılıyor, boşluk doldurmuyor. */
    padding: 13px 0;
    border-bottom: 1px solid rgba(34, 35, 41, 0.1);
}

.to-kt-olcum-satir:last-child { border-bottom: 0; }

.to-kt-olcum-ad {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-kt-olcum-deger {
    font-size: 13px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    color: var(--to-govde);
    white-space: nowrap;
}

.to-kt-olcum-ayrac { padding: 0 2px; }

.to-kt-kaynak {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — yalnız onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 1100'de dört kolon 300px'in altına iniyor; basamak yükseklik farkını
   büyüttüğü için ofsetler yarıya çekildi (kartlar yan yana okunur kalsın). */
@media (max-width: 1100px) {
    .to-kt-izgara > :nth-child(1) { margin-top: 28px; }
    .to-kt-izgara > :nth-child(3) { margin-top: 26px; }
    .to-kt-izgara > :nth-child(4) { margin-top: 4px; }

    /* Not artık başlığın yanına sığmıyor: akışa girip ortalanır. */
    .to-kt-not {
        position: static;
        width: auto;
        margin: -34px 0 40px;
        text-align: center;
    }

    /* Çip dolgusu daraltıldı: 1100'de kart içi 166px'e iniyor ve 16px'lik
       yatay dolgu en uzun etiketi ("28 yerel yazı tipi, dış istek yok")
       ikinci satıra düşürüyordu. */
    .to-kt-cipler .to-cip { padding: 8px 12px; }
}

/* 900'ün altında ızgara 2 kolona düşüyor (temelden). Basamak burada anlamını
   yitirir — satır başları hizasız görünür — bu yüzden DÜZ ızgaraya geçilir.
   Seçiciler `:nth-child` ile TEKRARLANDI: `> li` (0,1,1) özgüllüğü yukarıdaki
   `> :nth-child(n)` (0,2,0) kurallarını ezemiyordu (1440'ta değil, 900'de
   ölçüldü: kartlar hâlâ 28px kayıktı). */
@media (max-width: 900px) {
    .to-kt-izgara > :nth-child(1),
    .to-kt-izgara > :nth-child(2),
    .to-kt-izgara > :nth-child(3),
    .to-kt-izgara > :nth-child(4) { margin-top: 0; }

    /* İki kolonda kart içi 285px'e çıkıyor; çipler temeldeki 2×2 düzenine
       DÖNMEZ — etiketler uzun, tek kolonda hap biçimi korunur. Dolgu geri. */
    .to-kt-cipler .to-cip { padding: 9px 14px; }
}

@media (max-width: 560px) {
    .to-kt-kart { padding: 22px 20px 24px; }
    .to-kt-baslik { font-size: 20px; line-height: 27px; }
    .to-kt-olcum-deger { white-space: normal; }
}

/* ─────────── 03-anahtar-ozellikler.css ─────────── */
/* ==========================================================================
   03 — ANAHTAR ÖZELLİKLER (bento)   ·   önek `.to-bn-`
   --------------------------------------------------------------------------
   Referansın "All-In-One Solution" bento ızgarasının karşılığı. ÖLÇÜLEN
   DÜZEN: 3 görsel kolon, oluk 24. Sol blok 1 kolonda üst üste 3 kart; sağ
   blok 2 kolonda 4 kart (1. satır iki tekli, 2. ve 3. satır tam genişlik).

   NİÇİN İKİ AYRI BLOK: referansta sol kolonun kart kenarları sağ satırların
   kenarlarıyla HİZALANMIYOR (sol 1. kartın alt kenarı ile sağ 1. satırınki
   farklı yerde). Tek bir 3 kolonlu ızgarada satırlar ortak olduğu için bu
   kaçıklık kurulamaz; sol blok kendi yığını, sağ blok kendi ızgarası oldu.
   Bento'nun "kartlar farklı yükseklikte" karakteri buradan geliyor.

   KART ÖLÇÜSÜ: yarıçap 12 (`--to-r`), gölge `rgb(234,234,234) 0 8px 100px 0`
   (`--to-golge`), KENARLIK YOK — hepsi `00-temel.css`'teki `.to-kart`'tan
   miras. Bu dosya yalnız iç düzeni ve renk varyantlarını ekler.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. IZGARA
   -------------------------------------------------------------------------- */
.to-bn-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--to-oluk);
    align-items: start;
}

/* `minmax(0, 1fr)`: uzun modül adları hücreyi şişirip sayfayı yatay
   kaydırmasın (00-temel.css'te aynı gerekçe ölçülmüş). */
.to-bn-sol {
    display: flex;
    flex-direction: column;
    gap: var(--to-oluk);
}

.to-bn-sag {
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--to-oluk);
    align-content: start;
}

/* --------------------------------------------------------------------------
   2. KART GÖVDESİ
   -------------------------------------------------------------------------- */
.to-bn-kart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 28px: referansın bento kartlarında ölçülen iç dolgu 24–32 arasında
       değişiyor; ortası alındı ve TÜM kartlarda sabitlendi — bento zaten
       yükseklikle oynuyor, dolguyla da oynarsa ızgara dağılıyor. */
    padding: 28px;
    overflow: hidden;
}

/* Görselli kart: kare kenardan kenara. Dolgu iç gövdeye taşındı. */
.to-bn-kart--tema { padding: 0; }
.to-bn-govde { display: flex; flex-direction: column; gap: 10px; padding: 24px; }

/* ÖLÇÜ: `-kart` karesi 840×525. `aspect-ratio` + width/height ikisi de
   verildi; görsel gelmeden yer ayrılır, CLS sıfır kalır. */
.to-bn-gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 840 / 525;
    object-fit: cover;
    object-position: top center;
}

/* Kart üstlüğü — bölüm üstlüğüyle aynı renk ailesi, bir kademe küçük.
   (Bölüm üstlüğü 16/24; kart içinde 16 başlıkla eşitlenip hiyerarşi
   kayboluyordu.) */
.to-bn-ustluk {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--to-mavi);
}

/* Fişte kart başlığı 16/24/500. Bento kartında bu ölçü gövdeden ayrışmıyor
   (referans karesinde başlık gövdeden gözle görülür biçimde iri) — ölçek
   18/26/600'e çekildi, gövde 15/24'e indi. Fişten AYRILMA, gerekçesi bu. */
.to-bn-h3 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--to-metin);
}

.to-bn-metin {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
}

/* İkon kutusu — koyu/mavi kartların üstünde. */
.to-bn-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: var(--to-r-kucuk);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Kart bağı: `.to-kart__bag` tıklanabilir alanı kartın tamamına genişletiyor
   (00-temel.css). Buradaki kural yalnız görünüşü kuruyor. */
.to-bn-bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    /* 44px dokunma hedefi kartın tamamından geliyor; metin satırı yine de
       tek başına 24px'ten az olmasın diye min-height verildi. */
    min-height: 24px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-mavi);
}

/* `margin-top: auto`: sağ bloğun ilk satırında iki kart aynı yüksekliğe
   geriliyor (ölçüldü: 414×370 / 414×370) ve ölçüm kartının altında boşluk
   kalıyordu. Künye satırı kartın ALT kenarına çıpalandı — boşluk kartın
   ortasında, iki blok arasında kalıyor; kart yarım bırakılmış görünmüyor. */
.to-bn-dip {
    margin: 2px 0 0;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13px;
    line-height: 20px;
    color: #6b7280;   /* #6b7280 / #ffffff → 4,83:1 */
}

/* --------------------------------------------------------------------------
   3. KOYU KART   (referansta sol kolonun 2. kartı koyu)
   --------------------------------------------------------------------------
   Zemin: fişte ölçülen iki uçtan (#000000 kenar, #081738 merkez) kurulmuş
   çapraz gradyan. KONTRAST: beyaz / #081738 = 16,75:1 · beyaz / #000 = 21:1.
   GÖLGE: `--to-golge` açık gri; koyu kartın altında görünmüyor. Aynı geometri
   (0 8px 100px) laciverte boyandı — fişten bilinçli sapma.
   -------------------------------------------------------------------------- */
.to-bn-kart--koyu {
    background: linear-gradient(150deg, #0d1e42 0%, var(--to-lacivert) 45%, var(--to-siyah) 100%);
    box-shadow: rgba(8, 23, 56, 0.22) 0 8px 60px 0;
    color: #fff;
}

.to-bn-kart--koyu .to-bn-h3 { color: #fff; }
.to-bn-kart--koyu .to-bn-metin { color: #c8d4ea; }   /* #c8d4ea / #081738 → 11,03:1 */
.to-bn-kart--koyu .to-bn-ustluk { color: #a9c5f5; }  /* #a9c5f5 / #081738 →  9,03:1 */

/* --------------------------------------------------------------------------
   4. MAVİ KART  (#215ada — fişteki düğme mavisi)
   --------------------------------------------------------------------------
   KONTRAST: beyaz / #215ada = 6,32:1 (gövde ve başlık beyaz).
   Üstlük #dbe7ff / #215ada = 4,78:1 → 15px normal metin için yeterli
   (#cfe0ff denendi, 4,47:1 ile eşiğin ALTINDA kaldı; bu yüzden değil).
   -------------------------------------------------------------------------- */
.to-bn-kart--mavi {
    background: var(--to-mavi);
    box-shadow: rgba(33, 90, 218, 0.24) 0 8px 60px 0;
    color: #fff;
}

.to-bn-kart--mavi .to-bn-h3 { color: #fff; }
.to-bn-kart--mavi .to-bn-metin { color: #fff; }
.to-bn-kart--mavi .to-bn-ustluk { color: #dbe7ff; }

/* --------------------------------------------------------------------------
   5. TAM GENİŞLİK KARTLAR (sağ blokta 2 kolonu kaplar, içi iki sütun)
   -------------------------------------------------------------------------- */
.to-bn-genis {
    grid-column: 1 / -1;
    display: grid;
    /* Metin biraz dar, liste biraz geniş: referansın geniş kartında da
       sağdaki çip kümesi metinden geniş. */
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 28px;
    align-items: center;
}

.to-bn-genis__metin { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   6. ÖZELLİK BAYRAĞI ÇİPLERİ
   -------------------------------------------------------------------------- */
.to-bn-cipler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.to-bn-cip {
    padding: 6px 14px;
    border-radius: var(--to-r-hap);
    background: #f1f3f8;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #4a4f5c;   /* #4a4f5c / #f1f3f8 → 8,10:1 */
}

/* --------------------------------------------------------------------------
   7. ÖLÇÜM HÜCRELERİ  (referansta 4 dairesel gösterge → 2×2 künye)
   --------------------------------------------------------------------------
   Referansın halka göstergeleri YÜZDE gösteriyor; bizim değerlerimiz süre
   (ms), oran (CLS) ve adet — hiçbiri 0–100 ölçeğinde değil. Doldurulmuş bir
   halka burada YANLIŞ bilgi verir, o yüzden sayı + etiket künyesine çevrildi.
   -------------------------------------------------------------------------- */
.to-bn-olcum {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.to-bn-olcum__hucre {
    padding: 14px 16px;
    border-radius: var(--to-r-kucuk);
    background: #f3f5f9;
}

.to-bn-olcum__hucre strong {
    display: block;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--to-mavi);   /* #215ada / #f3f5f9 → 5,44:1 */
}

.to-bn-birim {
    margin-left: 3px;
    font-size: 14px;
    font-weight: 600;
}

.to-bn-olcum__hucre span:not(.to-bn-birim) {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 17px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   8. YAZI TİPİ EŞLEŞMELERİ
   --------------------------------------------------------------------------
   Adlar KENDİ yazı tipiyle DEĞİL, sayfa yazı tipiyle basılıyor: 4 aileyi
   yalnız künyede göstermek için indirmek bu bölümde 4 ek ağ isteği demekti —
   kartın anlattığı şeyle (istek göndermemek) çelişirdi.
   -------------------------------------------------------------------------- */
.to-bn-esles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-bn-esles__satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid #e9ecf3;
}

.to-bn-esles__satir:first-child { border-top: 0; padding-top: 0; }

.to-bn-esles__ad {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-bn-esles__yazi {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--to-govde);
    text-align: right;
}

/* --------------------------------------------------------------------------
   9. MODÜL KARTI (açık mavi zemin) + MODÜL ÇİPLERİ
   --------------------------------------------------------------------------
   KONTRAST: #222329 / #e8eefb = 13,20:1 · #215ada / #e8eefb = 5,12:1 ·
   #555555 / #e8eefb = 6,40:1. Çipler beyaz zeminde: #222329 / #fff = 15,91:1.
   -------------------------------------------------------------------------- */
.to-bn-kart--modul { background: #e8eefb; }

.to-bn-moduller {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-bn-modul {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Çip TIKLANAMAZ (etiket), bu yüzden 44px dokunma hedefi gerekmiyor;
       yükseklik referansın çip şeridiyle aynı ölçüde tutuldu. */
    min-height: 36px;
    padding: 7px 14px;
    border-radius: var(--to-r-hap);
    background: #fff;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--to-metin);
}

.to-bn-modul svg { flex: 0 0 auto; color: var(--to-mavi); }

/* --------------------------------------------------------------------------
   10. KIRILIMLAR — ONAYLI liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* 1100'de üç kolon 330px'in altına iniyor; eşleşme satırı iki satıra
       düşüp okunaksızlaşıyordu. Geniş kartların iç sütunu eşitlendi. */
    .to-bn-genis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 900px) {
    /* Sol blok artık üstte tek kolon, sağ blok altında iki kolon. */
    .to-bn-bento { grid-template-columns: minmax(0, 1fr); }
    .to-bn-sag { grid-column: auto; }
    .to-bn-sol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Görselli kart tek başına tam satır: 840×525 kare yarım kolonda çok küçük. */
    .to-bn-kart--tema { grid-column: 1 / -1; }
    .to-bn-genis { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 720px) {
    .to-bn-sag { grid-template-columns: minmax(0, 1fr); }
    .to-bn-sol { grid-template-columns: minmax(0, 1fr); }
    .to-bn-kart { padding: 22px; }
    .to-bn-govde { padding: 20px; }
}

@media (max-width: 560px) {
    .to-bn-olcum { grid-template-columns: minmax(0, 1fr); }
    /* Ad ve yazı tipi künyesi yan yana sığmıyor; alt alta ve sola yaslı. */
    .to-bn-esles__satir { flex-direction: column; gap: 2px; }
    .to-bn-esles__yazi { text-align: left; }
}

@media (max-width: 420px) {
    .to-bn-kart { padding: 18px; }
    .to-bn-govde { padding: 18px; }
    .to-bn-h3 { font-size: 17px; line-height: 25px; }
}

/* ─────────── 04-vitrin-galerisi.css ─────────── */
/* ÖLÇÜLMÜŞ KARŞITLIK DÜZELTMELERİ (25 Ağustos 2026, son doğrulama turu).
   Değerler WCAG bağıl parlaklıkla, yarı saydam katmanlar `source-over` ile
   birleştirilerek hesaplandı. Eşik: gövde metni 4,5:1 · büyük metin 3:1. */
/* ==========================================================================
   04 — HAZIR VİTRİN GALERİSİ            önek `.to-vg-`   zemin `#eff1f4`
   --------------------------------------------------------------------------
   Referans: getunimart.com "Premium Pre-Build Website" bölümü.
   Ölçüler REFERANS FİŞİNDEN (1440px görüntü alanı, Playwright):

     ızgara        4 kolon × 304,25px · oluk 24 → toplam 1289 (kapsayıcı içi)
                   süzgeç 1 kolon · demolar 3 kolon
     süzgeç kartı  304 × 614 · yarıçap 8 · beyaz · GÖLGE YOK
     süzgeç satırı 268 × 40 · 15px/500 · yarıçap 6
     alt şerit     298 × 88 · dolgu 16 · zemin şeffaf
     demo adı      16/24/500 #222329

   REFERANSTAN AYRILDIĞIMIZ YERLER (hepsinin gerekçesi aşağıda, yerinde):
     1. Satır yüksekliği 40 değil 44 — WCAG 2.5.5 dokunma hedefi.
     2. Görsel `object-fit: fill` değil `cover` — referans kareyi ESNETİYOR.
     3. Süzgeç kartı YAPIŞKAN (referansta değil) — 30 kartlık ızgarada
        süzgeci aramak için başa dönmek gerekiyordu.
     4. Kartlar bağlantı; referansınkiler tıklanamaz.
     5. "Daha fazla göster" düğmesi YOK — 30 temanın 30'u da basılı.
   ========================================================================== */

.to-vg {
    /* Süzgeç satırı: referans 40px, biz 44px (WCAG 2.5.5 dokunma hedefi). */
    --to-vg-satir: 44px;
}

/* --------------------------------------------------------------------------
   1. DÜZEN — sol yapışkan süzgeç + sağ ızgara
   -------------------------------------------------------------------------- */
.to-vg-duzen {
    display: grid;
    /* Kapsayıcı içi 1289 = 304,25 (süzgeç) + 24 (oluk) + 960,75 (3 kolon).
       ORAN olarak yazıldı, piksel olarak değil: sabit `width: 304px`
       sözleşmede yasak ve dar ekranda taşma üretirdi. 304fr / 961fr aynı
       bölüşümü her genişlikte korur. */
    grid-template-columns: minmax(0, 304fr) minmax(0, 961fr);
    gap: var(--to-oluk);
    /* align-items DEĞİŞTİRİLMEZ (stretch kalır): `start` verilseydi sol kolon
       içeriği kadar kısalır ve içindeki sticky öge hiç yol alamazdı. */
}

.to-vg-yan { min-width: 0; }
.to-vg-sag { min-width: 0; }

/* --------------------------------------------------------------------------
   2. SÜZGEÇ KARTI
   -------------------------------------------------------------------------- */
.to-vg-suzgec {
    position: sticky;
    /* ÖLÇÜ: `.td-bar` gezinme satırı `position: sticky; top: 0` ve iç
       yüksekliği 72px (shop-tema-demolari.css). 72 + 24 nefes = 96. */
    top: 96px;
    /* ÖLÇÜLDÜ: kartın doğal yüksekliği 876px (14 satır × 44 + başlık + arama
       + bilgi kartı). 1000px'lik bir görüntü alanına sığar; daha kısasında
       kartın ALTI erişilemez kalırdı, o yüzden kart kendi içinde kayar.
       Sığdığı her yerde kaydırma çubuğu hiç görünmez. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    /* ÖLÇÜLDÜ: referansın süzgeç kartında gölge YOK, yarıçap 8. */
    border-radius: var(--to-r-kucuk);
    background: #fff;
}

.to-vg-suzgec__baslik {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-vg-suzgec__baslik svg { flex: 0 0 auto; color: var(--to-mavi); }

/* --------------------------------------------------------------------------
   3. ARAMA KUTUSU
   Metin eşleştirmeyi CSS yapamaz; bu kutu betiğe bağlıdır. Betik gelmezse
   ölü bir denetim ekranda kalmasın diye GÖRÜNMEZ — ama YERİ AYRILIDIR
   (`visibility`, `display` değil), böylece betik gelse de gelmese de düzen
   hiç kaymaz. `visibility: hidden` klavye sırasından ve erişilebilirlik
   ağacından da çıkarır, yani "boşa basılan kutu" durumu doğmaz.
   -------------------------------------------------------------------------- */
.to-vg-ara {
    position: relative;
    visibility: hidden;
    margin: 0 0 12px;
}

.to-vg[data-js="1"] .to-vg-ara { visibility: visible; }

.to-vg-ara__ikon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: #8b93a5;
    pointer-events: none;
}

.to-vg-ara__alan {
    width: 100%;
    min-height: var(--to-vg-satir);
    padding: 10px 12px 10px 36px;
    border: 0;
    border-radius: var(--to-r-kucuk);
    background: #f3f5f9;
    box-shadow: inset 0 0 0 1px var(--to-cizgi);
    /* 16px ALTINA DÜŞÜRÜLMEZ: iOS Safari 16px'ten küçük yazılı bir alana
       odaklanınca sayfayı ZORLA yakınlaştırır ve kullanıcı geri
       uzaklaştıramaz. */
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--to-metin);
}

.to-vg-ara__alan::placeholder { color: #8b93a5; }
.to-vg-ara__alan:focus-visible { outline: 3px solid #a9c5f5; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. KATEGORİ LİSTESİ — CSS-ONLY RADYO SÜZGECİ
   Gizli `<input type="radio">` + `:has()`. JavaScript'siz çalışır; `:has()`
   desteklemeyen eski bir tarayıcıda süzgeç sessizce devre dışı kalır ve
   30 temanın HEPSİ görünür durumda kalır — hiçbir şey kaybolmaz.
   -------------------------------------------------------------------------- */
/* Öbek `<fieldset>` DEĞİL, `role="radiogroup"` taşıyan bir `<div>`: ölçüldü,
   fieldset kutusu `overflow-x: auto` kuralını uygulamıyor ve 900px altındaki
   yatay şerit belgeyi 2327px genişliğe itiyordu. */
.to-vg-kume { min-width: 0; }

.to-vg-satir {
    /* ÖLÇÜLDÜ — ZORUNLU: içindeki `.to-vg-radyo` görsel olarak gizlenirken
       `position: absolute` alıyor. Satırın kendisi konumlandırılmazsa radyonun
       kapsayıcı bloğu `.to-bolum`(relative) oluyor; 900px altında kategori
       listesi yatay kayan bir şeride dönüştüğünde 14 radyo şeridin kayma
       kutusundan KAÇIYOR ve belgeyi 2327px genişliğe itiyordu. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--to-vg-satir);
    padding: 8px 12px;
    border-radius: 6px;   /* ÖLÇÜLDÜ: referansın süzgeç satırı 6px. */
    cursor: pointer;
    color: var(--to-metin);
}

.to-vg-satir + .to-vg-satir { margin-top: 1px; }

.to-vg-satir__ad {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;      /* ÖLÇÜLDÜ: referans süzgeç satırı 15px/500. */
    line-height: 20px;
    font-weight: 500;
}

.to-vg-satir__sayi {
    flex: 0 0 auto;
    min-width: 30px;
    padding: 2px 8px;
    border-radius: var(--to-r-hap);
    background: #eef1f7;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
    color: #565d6a;
}

/* Yalnız ekran okuyucuya. Görsel olarak gizli ama erişilebilirlik ağacında
   DURUR (`display: none` olsaydı arama alanının etiketi de kaybolurdu) ve
   radyolar ODAKLANABİLİR kalır — klavye kullanıcısı ok tuşlarıyla
   kategoriler arasında gezinir. */
.to-vg-gizli,
.to-vg-radyo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Etkin satır: mavi zemin (beyaz / #215ada → 6,32:1). */
.to-vg-satir:has(.to-vg-radyo:checked) { background: var(--to-mavi); color: #fff; }
.to-vg-satir:has(.to-vg-radyo:checked) .to-vg-satir__sayi {
    /* rgba(.22) mavi satırın üstünde #527ee2'ye iniyor; beyaz yazı orada
       3,86:1 veriyordu. Opaklık artırıldı → #3f6ad8 karşılığı, 4,92:1. */
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* `:has()` yoksa kalan tek geri düşüş: seçili satırın adı KALINLAŞIR.
   Renk tek başına anlam taşımasın diye seçili satırda ayrıca kalınlık var. */
.to-vg-radyo:checked ~ .to-vg-satir__ad { font-weight: 700; }

.to-vg-satir:hover { background: #eef1f7; }
.to-vg-satir:has(.to-vg-radyo:checked):hover { background: var(--to-mavi-koyu); }

.to-vg-satir:has(.to-vg-radyo:focus-visible) {
    outline: 3px solid var(--to-mavi);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. BİLGİ KARTI — referanstaki renkli "haftalık güncelleme" kartının yeri.
   Uydurma bir vaat değil; kartserit dosyası diskte bulunan tema sayısı.
   -------------------------------------------------------------------------- */
.to-vg-bilgi {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--to-r-kucuk);
    background: linear-gradient(135deg, #2d67e8 0%, #215ada 55%, #1a4aa8 100%);
    color: #fff;
}

.to-vg-bilgi__not {
    margin: 0;
    font-family: 'Caveat', 'Segoe Script', cursive;
    font-size: 22px;
    line-height: 1.05;
    font-weight: 600;
    color: #dbe6ff;
}

.to-vg-bilgi__sayi {
    margin: 2px 0 5px;
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.to-vg-bilgi__bolu { opacity: 0.55; font-weight: 400; }

.to-vg-bilgi__metin {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
    /* #dbe6ff / #215ada → 5,2:1 — 13px gövde metni için WCAG AA'yı geçer. */
    color: #dbe6ff;
}

/* --------------------------------------------------------------------------
   6. SAYAÇ
   Referansta yok; süzgeç sonucunun kaç tema bıraktığını görünür kılmak için
   eklendi (erişilebilirlik: `aria-live` ile ekran okuyucuya da duyurulur).
   CSS-only durumda PHP'nin bastığı span'lardan yalnız seçili olan gösterilir;
   betik varsa span'lar DOM'dan silinir ve metni betik yazar.
   -------------------------------------------------------------------------- */
.to-vg-sayac {
    margin: 0 0 16px;
    min-height: 20px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--to-govde);
}

.to-vg-sayac__js { display: none; }
.to-vg[data-js="1"] .to-vg-sayac__js { display: inline; }

.to-vg-sayac__oge { display: none; }
.to-vg-sayac__oge[data-deger="tumu"] { display: inline; }

/* --------------------------------------------------------------------------
   7. SÜZGEÇ KURALLARI
   Kategori anahtarları `App\Models\StoreTheme::CATEGORIES` KOD SABİTİNDEN
   gelir (12 anahtar) — veritabanı satırından değil, bu yüzden eşleşme
   kararlıdır. Artı bir öbek: `cekirdek` (çekirdek paletlerin store_themes
   kaydı yoktur, kategorisi de yoktur).
   Her değer için iki kural: (a) eşleşmeyen kartları gizle, (b) sayaç
   satırından yalnız o değere ait olanı göster.
   -------------------------------------------------------------------------- */
.to-vg-duzen:has(#to-vg-s-moda:checked) .to-vg-oge:not([data-kat="moda"]),
.to-vg-duzen:has(#to-vg-s-moda:checked) .to-vg-sayac__oge:not([data-deger="moda"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-moda:checked) .to-vg-sayac__oge[data-deger="moda"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-elektronik:checked) .to-vg-oge:not([data-kat="elektronik"]),
.to-vg-duzen:has(#to-vg-s-elektronik:checked) .to-vg-sayac__oge:not([data-deger="elektronik"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-elektronik:checked) .to-vg-sayac__oge[data-deger="elektronik"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-gida:checked) .to-vg-oge:not([data-kat="gida"]),
.to-vg-duzen:has(#to-vg-s-gida:checked) .to-vg-sayac__oge:not([data-deger="gida"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-gida:checked) .to-vg-sayac__oge[data-deger="gida"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-mobilya:checked) .to-vg-oge:not([data-kat="mobilya"]),
.to-vg-duzen:has(#to-vg-s-mobilya:checked) .to-vg-sayac__oge:not([data-deger="mobilya"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-mobilya:checked) .to-vg-sayac__oge[data-deger="mobilya"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-kozmetik:checked) .to-vg-oge:not([data-kat="kozmetik"]),
.to-vg-duzen:has(#to-vg-s-kozmetik:checked) .to-vg-sayac__oge:not([data-deger="kozmetik"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-kozmetik:checked) .to-vg-sayac__oge[data-deger="kozmetik"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-butik:checked) .to-vg-oge:not([data-kat="butik"]),
.to-vg-duzen:has(#to-vg-s-butik:checked) .to-vg-sayac__oge:not([data-deger="butik"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-butik:checked) .to-vg-sayac__oge[data-deger="butik"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-spor:checked) .to-vg-oge:not([data-kat="spor"]),
.to-vg-duzen:has(#to-vg-s-spor:checked) .to-vg-sayac__oge:not([data-deger="spor"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-spor:checked) .to-vg-sayac__oge[data-deger="spor"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-taki:checked) .to-vg-oge:not([data-kat="taki"]),
.to-vg-duzen:has(#to-vg-s-taki:checked) .to-vg-sayac__oge:not([data-deger="taki"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-taki:checked) .to-vg-sayac__oge[data-deger="taki"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-hediyelik:checked) .to-vg-oge:not([data-kat="hediyelik"]),
.to-vg-duzen:has(#to-vg-s-hediyelik:checked) .to-vg-sayac__oge:not([data-deger="hediyelik"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-hediyelik:checked) .to-vg-sayac__oge[data-deger="hediyelik"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-oto:checked) .to-vg-oge:not([data-kat="oto"]),
.to-vg-duzen:has(#to-vg-s-oto:checked) .to-vg-sayac__oge:not([data-deger="oto"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-oto:checked) .to-vg-sayac__oge[data-deger="oto"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-yapi:checked) .to-vg-oge:not([data-kat="yapi"]),
.to-vg-duzen:has(#to-vg-s-yapi:checked) .to-vg-sayac__oge:not([data-deger="yapi"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-yapi:checked) .to-vg-sayac__oge[data-deger="yapi"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-kurumsal:checked) .to-vg-oge:not([data-kat="kurumsal"]),
.to-vg-duzen:has(#to-vg-s-kurumsal:checked) .to-vg-sayac__oge:not([data-deger="kurumsal"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-kurumsal:checked) .to-vg-sayac__oge[data-deger="kurumsal"] { display: inline; }

.to-vg-duzen:has(#to-vg-s-cekirdek:checked) .to-vg-oge:not([data-kat="cekirdek"]),
.to-vg-duzen:has(#to-vg-s-cekirdek:checked) .to-vg-sayac__oge:not([data-deger="cekirdek"]) { display: none; }
.to-vg-duzen:has(#to-vg-s-cekirdek:checked) .to-vg-sayac__oge[data-deger="cekirdek"] { display: inline; }

/* --------------------------------------------------------------------------
   8. TEMA KARTI
   -------------------------------------------------------------------------- */
.to-vg-izgara { align-items: start; }

.to-vg-oge { display: flex; flex-direction: column; overflow: hidden; }

.to-vg-pencere { flex: 0 0 auto; }

/*
   KIRPMA YÜKSEKLİĞİ — NİÇİN 10/11
   -------------------------------
   Kaynak `-kartserit` 560×1517 (oran 0,369): tam sayfa, kartın alacağından
   çok daha uzun. Referans neredeyse kare kırpıyor (0,967) ama onun kaynağı
   408×422'lik kısa bir kare; bizim uzun karemizde aynı oran vitrinin
   kategori ızgarasını ORTASINDAN keserdi.

   `kurumsal-kartserit.webp` üzerinde ölçüldü (560px genişlikte):
     üst çubuk + gezinme  0 →  ~110
     kahraman alanı     110 →  ~285
     kategori ızgarası  285 →  ~510
   616px'lik bir pencere (= 560 × 11/10) bu üç bloğun üçünü de tam alır ve
   bir sonraki bölümden bir şerit gösterir. Bir temayı diğerinden ayıran
   şey tam olarak bu üç bloktur; altını kırpmak bilgi kaybettirmez.

   `object-fit: cover` + `object-position: top center` `00-temel.css`ten
   gelir — referansın `fill` ile ESNETME kusuru KOPYALANMAZ.
*/
.to-vg-gorsel {
    aspect-ratio: 10 / 11;
    background: #f3f5f9;   /* yüklenene kadar boş kutu beyaz parlamasın */
}

.to-vg-serit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    /* ÖLÇÜLDÜ: referansın alt şeridi 88px yüksek, 16px dolgulu, zemini
       şeffaf (kartın beyazı görünür). */
    padding: 16px;
}

.to-vg-ad {
    margin: 0;
    /* ÖLÇÜLDÜ: demo adı 16/24/500 #222329. */
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--to-metin);
}

.to-vg-ad .to-kart__bag { color: inherit; text-decoration: none; }

.to-vg-cip {
    display: inline-block;
    max-width: 100%;
    padding: 3px 10px;
    border-radius: var(--to-r-hap);
    background: #eef1f7;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    /* #565d6a / #eef1f7 → 4,72:1. Kategori adları BÜYÜK HARFE çevrilmez:
       `text-transform: uppercase` Türkçede "İ/ı" eşlemesini bozar. */
    color: #565d6a;
}

/* --------------------------------------------------------------------------
   9. BOŞ SONUÇ — yalnız betik varken ve yalnız arama boş dönerse açılır.
   -------------------------------------------------------------------------- */
.to-vg-bos {
    margin: 24px 0 0;
    padding: 20px;
    border-radius: var(--to-r-kucuk);
    background: #fff;
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
    text-align: center;
}

.to-vg-temizle {
    min-height: 44px;
    margin-left: 6px;
    padding: 8px 18px;
    border: 0;
    border-radius: var(--to-r-hap);
    background: var(--to-mavi);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    cursor: pointer;
}

.to-vg-temizle:hover { background: var(--to-mavi-koyu); }
.to-vg-temizle:focus-visible { outline: 3px solid #a9c5f5; outline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. KIRILIMLAR — yalnız onaylı noktalar (1100 · 900 · 720 · 560 · 420)
   Izgara kolon sayısını `.to-izgara--3` zaten yönetiyor: 900'de 2, 560'ta 1.
   -------------------------------------------------------------------------- */
/*
   ÖLÇÜLMÜŞ ÖZGÜLLÜK ÇATIŞMASI — el yazısı notu.
   `00-temel.css` şu iki kuralı taşıyor:
       .to-baslik > *:not(.to-hayalet) { position: relative; z-index: 1 }   (0,2,0)
       .to-not--sag { position: absolute; right: -180px; top: 8px }         (0,1,0)
       @media (max-width:1100px) { .to-not--sag { position: static } }      (0,1,0)
   Birincisi ÖZGÜLLÜK olarak ikisini de yeniyor, yani not HİÇBİR genişlikte
   mutlak konumlanmıyor. Ölçüldü:
       1440px → not, başlığın SAĞ ÜSTÜNDE değil ALTINDA ve `right: -180px`
                yüzünden 180px sağa itilmiş (sol kenarı 430).
       880px  → aynı itilme sayfayı YATAY KAYDIRIYOR (sağ kenarı 964,5).
   `00-temel.css` bu göreve kapalı olduğu için düzeltme aynı özgüllükte
   (0,2,0) ve DAHA SONRA gelen bir kuralla, yalnız bu bölüm için yapıldı.
*/
.to-vg .to-not--sag { position: absolute; }

@media (max-width: 1100px) {
    .to-vg .to-not--sag { position: static; right: auto; top: auto; }
}

@media (max-width: 900px) {
    /* Tek kolon: süzgeç ÜSTE geçer ve yatay kayan bir şeride dönüşür. */
    .to-vg-duzen { grid-template-columns: minmax(0, 1fr); }

    .to-vg-suzgec {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .to-vg-kume {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        /* ÖLÇÜLDÜ: negatif kenarla kart dolgusunun dışına taşırmak (`margin:
           0 -20px`) 880px ve 390px'te SAYFAYI YATAY KAYDIRIYORDU — kartın
           kendisi kapsayıcı genişliğinde olduğu için 20px'lik taşma doğrudan
           belgeye çıkıyor. Şerit kartın içinde kalır. */
        margin: 0;
        padding: 2px 0 6px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .to-vg-satir {
        flex: 0 0 auto;
        border-radius: var(--to-r-hap);
        background: #f3f5f9;
    }

    .to-vg-satir + .to-vg-satir { margin-top: 0; }

    .to-vg-bilgi {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 14px;
    }

    .to-vg-bilgi__metin { flex: 1 1 260px; }
}

@media (max-width: 560px) {
    .to-vg-suzgec { padding: 16px; }

    /* Tek kolonda kart tam genişliğe çıkar; 10/11 kırpımı o genişlikte
       gereğinden uzun bir blok üretir (360px ekranda ~360×396). Kırpma
       biraz daha yassı: başlık + kahraman görünür, kaydırma kısalır. */
    .to-vg-gorsel { aspect-ratio: 10 / 8; }
}

/* ─────────── 05-baslik-cesitleri.css ─────────── */
/* ==========================================================================
   05 — BAŞLIK ÇEŞİTLERİ   (.to-bs-)
   --------------------------------------------------------------------------
   Referanstaki "başlık kurucusu" bloğunun DÜZENİ alındı: üst üste dizilmiş,
   tam genişlikte, kısa başlık şeritleri. İçerik bizim gerçek temalarımız.

   NİÇİN SABİT YÜKSEKLİK: kaynak kare 2400×1500'lük TAM SAYFA görüntüsü.
   Oranıyla basılsa 1289 genişlikte 805px yükseklik kaplar ve sayfanın
   tamamını gösterir — oysa bu bölümün konusu yalnız BAŞLIK. Kutuya sabit
   yükseklik verilip görsel `object-position: top center` ile tutturuluyor.

   YÜKSEKLİK HESABI (göz kararı değil):
     kapsayıcı içi 1289 → ölçek 1289/2400 = 0,537
     kutu 190px → 190/0,537 = 354 doğal piksel = sayfanın üst 177 CSS pikseli
   Üç katmanlı en uzun başlık (orion: duyuru şeridi + logo katmanı + arama
   satırı) bu bandın içinde kalıyor. Dar ekranlarda görsel de küçüldüğü için
   kutu yüksekliği ölçekle birlikte düşürülür; her kırılımda görünen alan
   ~180–235 CSS pikseli arasında kalır (aşağıda hesapları yazılı).

   CLS: yükseklik CSS'ten geldiği için görsel hiç yüklenmese bile kutu aynı
   yeri tutar; `height` beyanı düzeni etkilemez.
   ========================================================================== */

.to-bs {
    --to-bs-y: 190px;      /* kırpma kabı yüksekliği */
    --to-bs-kademe: 44px;  /* çift sıradaki şeridin içeri kaçması */
}

/* Yığın: şeritler üst üste, aralarında oluk. */
.to-bs-yigin {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* KADEME: referansta şeritler kart içinde hafifçe kaydırılmış duruyor.
   Aynı etki, çift sıradaki şeridi soldan içeri alarak kuruluyor — genişlik
   `max-width` ile değil, akıştan kısılıyor; sabit piksel genişlik yok. */
.to-bs-serit:nth-child(even) { margin-inline-start: var(--to-bs-kademe); }
.to-bs-serit:nth-child(odd) { margin-inline-end: var(--to-bs-kademe); }

/* Kırpma kabının köşeleri kartın yarıçapına uysun. Bu bölümde hareket YOK —
   şerit yalnız gölge değiştirir (.to-kart :hover kuralı), o yüzden geçiş
   tanımlanmadı ve `prefers-reduced-motion` bloğuna gerek kalmadı. */
.to-bs-serit { overflow: hidden; }

.to-bs-kirp {
    position: relative;
    height: var(--to-bs-y);
    overflow: hidden;
    background: var(--to-zemin-alt);   /* görsel gelene kadar boş kutu gri kalır */
}

.to-bs-gorsel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Kimlik üstte: sayfanın yalnız başlık şeridi görünsün. */
    object-position: top center;
}

/* Şeridin altındaki künye: solda ad (bağ), sağda not. */
.to-bs-kunye {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 20px 16px;
}

.to-bs-ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    /* Referans ölçüsü: kart başlığı 16/24/500 #222329. */
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-metin);
    /* Bağın kendi kutusu kısa; 44px dokunma hedefi kartın tamamından
       geliyor (.to-kart__bag::after inset 0). */
    min-height: 24px;
}

.to-bs-ad svg { color: var(--to-mavi); }

.to-bs-not {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--to-govde);
}

/* `header.blade.php` gibi dosya adları: gövde metninin içinde kod. */
.to-bs-kod {
    padding: 1px 6px;
    border-radius: 5px;
    background: #eef1f7;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    font-size: 0.875em;
    color: var(--to-metin);
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı liste: 1100 · 900 · 720 · 560 · 420
   Her adımda kutu yüksekliği ölçekle birlikte düşürülür ki görünen ALAN
   sabit kalsın (aşağıdaki yorumlarda: kapsayıcı içi → ölçek → görünen).
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* ~1069 içi → ölçek 0,445 → 160/0,445 = 359 doğal = 180 CSS piksel */
    .to-bs { --to-bs-y: 160px; --to-bs-kademe: 32px; }
}

@media (max-width: 900px) {
    /* ~869 içi → ölçek 0,362 → 150/0,362 = 414 doğal = 207 CSS piksel */
    .to-bs { --to-bs-y: 150px; --to-bs-kademe: 24px; }
    .to-bs-yigin { gap: 20px; }
}

@media (max-width: 720px) {
    /* ~689 içi → ölçek 0,287 → 120/0,287 = 418 doğal = 209 CSS piksel.
       Kademe kapatılır: dar ekranda içeri kaçma okumayı zorlaştırıyor. */
    .to-bs { --to-bs-y: 120px; --to-bs-kademe: 0px; }
    .to-bs-kunye { flex-direction: column; gap: 6px; padding: 12px 16px 14px; }
}

@media (max-width: 560px) {
    /* ~529 içi → ölçek 0,220 → 96/0,220 = 436 doğal = 218 CSS piksel */
    .to-bs { --to-bs-y: 96px; }
    .to-bs-not { font-size: 15px; line-height: 22px; }
}

@media (max-width: 420px) {
    /* ~389 içi → ölçek 0,162 → 76/0,162 = 469 doğal = 234 CSS piksel */
    .to-bs { --to-bs-y: 76px; }
}

/* ─────────── 06-altbilgi-cesitleri.css ─────────── */
/* ==========================================================================
   06 — ALT BİLGİ ÇEŞİTLERİ   (.to-ab-)
   --------------------------------------------------------------------------
   05'in devamı: bölüm `--ustsuz` ile üst dolgusunu bırakıyor, iki blok tek
   nefes okunuyor. Zemin aynı (#f9f9f9) — araya çizgi ya da renk girmiyor.

   NİÇİN `aspect-ratio` YOK: kaynak `-tam` kareleri 800 piksel geniş ama
   YÜKSEKLİKLERİ DEĞİŞKEN (bu altı temada ölçüldü: quick 2571 · breathe 2833
   · tempo 3046 · bereket 3223 · organifresh 3651 · teknomart 5235). Tek bir
   oran vermek altı karenin beşini yanlış kırpardı. Bunun yerine kaba SABİT
   yükseklik verilir, görsel `height:100%` + `object-fit:cover` +
   `object-position: bottom center` ile ALT ucundan tutturulur.

   YÜKSEKLİK HESABI (kaç doğal piksel görünüyor):
     iki kolon, kapsayıcı içi 1289, oluk 24 → kolon 632 → ölçek 632/800 = 0,79
     kutu 320px → 320/0,79 = 405 doğal piksel
   Ölçülen alt bilgi yükseklikleri (bülten bandı dâhil) 380–420 doğal piksel
   arasında; 405 hepsini kapsıyor, bir öncekinin içeriğinden pay almıyor.
   Kırılımlarda kolon daralınca ölçek düştüğü için kutu da küçültülür ki
   görünen doğal alan ~395–440 arasında sabit kalsın.

   CLS: yükseklik yalnız CSS'ten geliyor; görsel yüklenmese de kutu yerini
   tutar, bu yüzden `<img>` üzerinde `height` beyanı YOK (uydurma yükseklik
   yazmamak için — gerekçe Blade parçasında).
   ========================================================================== */

.to-ab {
    --to-ab-y: 320px;   /* kırpma kabı yüksekliği */
}

/* 05 ile aynı gövde: başlık bloğu biraz daha dar bir üst boşlukla başlasın,
   çünkü bölümün üst dolgusu kaldırıldı. */
.to-ab-baslik { margin-top: 72px; }

.to-ab-izgara {
    display: grid;
    /* `minmax(0, 1fr)`: hücrenin en küçük genişliği içerik değil sıfır olsun. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--to-oluk);
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-ab-kart { overflow: hidden; }

.to-ab-kirp {
    position: relative;
    height: var(--to-ab-y);
    overflow: hidden;
    background: var(--to-zemin-alt);
}

.to-ab-gorsel {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bu bölümün konusu sayfanın ALT ucu. */
    object-position: bottom center;
}

.to-ab-kunye { padding: 16px 20px 18px; }

.to-ab-ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-ab-ad svg { color: var(--to-mavi); }

.to-ab-not {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--to-govde);
}

.to-ab-kod {
    padding: 1px 6px;
    border-radius: 5px;
    background: #eef1f7;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    font-size: 0.875em;
    color: var(--to-metin);
}

/* Sayıların nereden geldiğini söyleyen künye satırı. */
.to-ab-dip {
    margin: 28px 0 0;
    font-size: 14px;
    line-height: 22px;
    color: #6b7280;
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* iki kolon sürüyor: ~1069 içi → kolon 522 → ölçek 0,653
       260/0,653 = 398 doğal piksel */
    .to-ab { --to-ab-y: 260px; }
    .to-ab-baslik { margin-top: 60px; }
}

@media (max-width: 900px) {
    /* TEK KOLON: ~869 içi → ölçek 1,086 → 380/1,086 = 350 doğal piksel.
       Kolon genişlediği için kutu BÜYÜR; ölçek arttı, oran değil. */
    .to-ab-izgara { grid-template-columns: minmax(0, 1fr); }
    .to-ab { --to-ab-y: 380px; }
}

@media (max-width: 720px) {
    /* ~689 içi → ölçek 0,861 → 340/0,861 = 395 doğal piksel */
    .to-ab { --to-ab-y: 340px; }
    .to-ab-kunye { padding: 14px 16px 16px; }
    .to-ab-baslik { margin-top: 48px; }
}

@media (max-width: 560px) {
    /* ~529 içi → ölçek 0,661 → 260/0,661 = 393 doğal piksel */
    .to-ab { --to-ab-y: 260px; }
    .to-ab-not { font-size: 15px; line-height: 22px; }
}

@media (max-width: 420px) {
    /* ~389 içi → ölçek 0,486 → 200/0,486 = 411 doğal piksel */
    .to-ab { --to-ab-y: 200px; }
}

/* ─────────── 07-sayfa-galerisi.css ─────────── */
/* ÖLÇÜLMÜŞ KARŞITLIK DÜZELTMELERİ (25 Ağustos 2026, son doğrulama turu).
   Değerler WCAG bağıl parlaklıkla, yarı saydam katmanlar `source-over` ile
   birleştirilerek hesaplandı. Eşik: gövde metni 4,5:1 · büyük metin 3:1. */
/* ==========================================================================
   07 — SAYFA GALERİSİ  (koyu zemin)   ÖNEK: .to-sg-
   --------------------------------------------------------------------------
   Referans: ref-dilim/06-sayfalar.png — "Custom Pages" bölümü. Ölçü fişindeki
   satır: bölüm 5, zemin #000000 (merkez #081738), 77 görsel, 5 kolon.

   Bölüm kabuğu, hayalet sayı, başlık, hap sekmeler, kart, tarayıcı penceresi
   ve rozet 00-temel.css'ten GELİR; burada yalnız bu bölüme özgü olan yazılır.
   ========================================================================== */

.to-sg {
    /* Kart alt şeridinin yüksekliği iki satır etikete yetsin diye sabit
       DEĞİL, en az bu kadar: "Sık sorulan sorular" 238px'lik kolonda iki
       satıra iniyor, "Sepet" bir satırda kalıyor. Izgara satırı zaten
       eşitlenecek; şerit en az bu yüksekliği alır. */
    --to-sg-serit: 44px;
}

/* --------------------------------------------------------------------------
   1. HAP SÜZGEÇ SEKMELERİ — CSS-ONLY RADYO
   04-vitrin-galerisi ile AYNI teknik: gizli `<input type="radio">` + `:has()`.
   JS yok; `:has()` desteklenmiyorsa süzgeç sessizce ölür ve 22 kartın hepsi
   görünür kalır. Kaybolan içerik yok, ölü düğme yok.
   -------------------------------------------------------------------------- */
.to-sg-sekmeler { max-width: 100%; }

/* ZORUNLU `position: relative` — 04'te ölçülen tuzağın aynısı: içindeki
   `.to-sg-radyo` görsel olarak gizlenirken `position: absolute` alıyor.
   Etiket konumlandırılmazsa radyonun kapsayıcı bloğu `.to-bolum` (relative)
   oluyor; 560px altında `.to-sekmeler` yatay kayan şeride dönüştüğünde beş
   radyo kayma kutusundan KAÇIP belgeyi genişletiyor. */
.to-sg-sekme {
    position: relative;
    gap: 8px;
}

/* Radyo görsel olarak gizli ama ODAKLANABİLİR — klavye kullanıcısı ok
   tuşlarıyla öbekler arasında gezinir. */
.to-sg-radyo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Etkin hap. `aria-selected` DEĞİL `:checked` — gerekçe blade dosyasının
   başında: `aria-selected` `radio` rolünde desteklenmez, seçili durumu
   `checked` zaten taşır. Renk: beyaz / #215ada → 6,32:1. */
.to-sg-sekme:has(.to-sg-radyo:checked) {
    background: var(--to-mavi);
    color: #fff;
}

/* RENK TEK BAŞINA ANLAM TAŞIMASIN: etkin sekmenin adı ayrıca kalınlaşır.
   Bu kural `:has()` olmadan da işler (kardeş seçici), yani `:has()`
   desteklemeyen tarayıcıda bile hangi sekmenin seçili olduğu görülür. */
.to-sg-radyo:checked ~ .to-sg-sekme__ad { font-weight: 700; }

.to-sg-sekme:has(.to-sg-radyo:focus-visible) {
    outline: 3px solid #a9c5f5;
    outline-offset: 2px;
}

.to-sg-sekme:hover { background: rgba(255, 255, 255, 0.14); }
.to-sg-sekme:has(.to-sg-radyo:checked):hover { background: var(--to-mavi-koyu); }

.to-sg-sekme__sayi {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--to-r-hap);
    background: rgba(255, 255, 255, 0.14);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    text-align: center;
    /* #d7e0f2 / koyu zemin → 12:1 üzeri; ayrıca 12px olduğu için AA eşiği
       4,5:1 ve rahat geçiyor. */
    color: #d7e0f2;
}

.to-sg-sekme:has(.to-sg-radyo:checked) .to-sg-sekme__sayi {
    /* rgba(.24) mavi hapın üstünde #5682e3'e iniyor; beyaz yazı 3,69:1.
       Opaklık düşürülünce zemin koyulaşıyor ve oran 4,9:1'e çıkıyor. */
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* --------------------------------------------------------------------------
   2. SÜZGEÇ KURALLARI
   Öbek anahtarları `Veri::SAYFA_OBEKLERI` KOD SABİTİNDEN gelir (5 anahtar),
   veritabanından değil — eşleşme bu yüzden kararlı. "hepsi" için kural YOK:
   varsayılan durum zaten hepsinin göründüğü durum.
   -------------------------------------------------------------------------- */
.to-sg:has(#to-sg-o-vitrin:checked) .to-sg-oge:not([data-obek="vitrin"]) { display: none; }
.to-sg:has(#to-sg-o-icerik:checked) .to-sg-oge:not([data-obek="icerik"]) { display: none; }
.to-sg:has(#to-sg-o-hesap:checked)  .to-sg-oge:not([data-obek="hesap"])  { display: none; }
.to-sg:has(#to-sg-o-sektor:checked) .to-sg-oge:not([data-obek="sektor"]) { display: none; }

/* `display: none` seçildi, `opacity`/`visibility` değil: gizlenen kart
   erişilebilirlik ağacından da çıkmalı. Aksi hâlde klavye sırası süzgeçle
   elenmiş, ekranda görünmeyen kartların üzerinden geçerdi. */

/* --------------------------------------------------------------------------
   3. IZGARA VE KART
   Kolon sayısı 00-temel.css'in `.to-izgara--5` kuralından: 5 → 1100px'de 4 →
   900'de 3 → 720'de 2 → 560'ta 1. Yeni kırılma noktası açılmadı.
   -------------------------------------------------------------------------- */
.to-sg-izgara { align-items: stretch; }

.to-sg-oge {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Pencerenin üst köşeleri 12px, şeridin alt köşeleri 12px; ikisini
       kartın kendi yarıçapına kırpmak tek yerden yönetilebilir olsun diye
       taşma kapatıldı. Odak halkası `outline` olduğu için kırpılmaz. */
    overflow: hidden;
}

.to-sg-pencere {
    /* Pencere kartın üstünde; alt köşeleri düz kalsın, alt şerit devralsın. */
    flex: 0 0 auto;
    border-radius: 0;
}

.to-sg-gorsel {
    /* ÖLÇÜ: kaynak 600×750 (22/22 dosya diskte doğrulandı) → oran 4/5.
       KIRPMA YOK. Referans bu ızgarada kareye yakın bir kırpım kullanıyor
       ama bizim kaynağımız zaten sayfanın tamamının küçültülmüş hâli;
       kırpmak "hazır sayfa" iddiasının kanıtını yarıda keserdi. */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}

/* --------------------------------------------------------------------------
   4. KOYU ALT ŞERİT
   Referansta kartın altında koyu bir şerit ve içinde sayfa adı var.
   -------------------------------------------------------------------------- */
.to-sg-serit {
    display: flex;
    align-items: center;
    /* `margin-top: auto` — ızgara satırı en uzun kartın boyuna uzadığında
       şerit boşlukta asılı kalmasın, hep kartın DİBİNE otursun. */
    margin-top: auto;
    min-height: var(--to-sg-serit);
    padding: 10px 12px;
    /* Kart zemini zaten yarı saydam beyaz (00-temel); şerit onun üstüne koyu
       bir kat koyar. Beyaz metin bu katın üstünde 13:1'in üzerinde kalıyor. */
    background: rgba(6, 13, 30, 0.62);
}

.to-sg-ad {
    margin: 0;
    /* ÖLÇÜ FİŞİ kart başlığı 16/24/500 der; 5 kolonda hücre 238,6px ve 16px
       ile "Sık sorulan sorular" üç satıra iniyordu. 14px'te iki satır.
       Küçültülen tek şey bu; renk ve kalınlık fişten. */
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
}

.to-sg-ad .to-kart__bag:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. SEKTÖR ROZETİ
   Referansın NEW/HOT rozetinin yeri. Bizde uydurma bir "popüler" etiketi
   yok; rozet veride DURAN öbek adını tekrarlar.
   -------------------------------------------------------------------------- */
.to-sg-rozet {
    position: absolute;
    top: 30px;   /* tarayıcı çubuğu 22px + 8px pay */
    right: 8px;
    /* z-index 2: `.to-kart__bag::after` 3'te ve saydam; rozet onun ALTINDA
       kalır ama görünür — böylece rozetin üstüne tıklamak da kartı açar. */
    z-index: 2;
    padding: 2px 7px;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.02em;
    /* Rozet iki satıra bölünmesin: 5 kolonda hücre 238,6px ve rozet 10px'te
       ~64px — sığıyor, ama kırılma noktalarında bölünmesin diye kilitlendi. */
    white-space: nowrap;
    /* #78350f / #fef3c7 → 8,6:1 (00-temel'deki `.to-rozet--sari` çifti). */
}

/* --------------------------------------------------------------------------
   6. DİP SATIRI — ve "DAHA FAZLA GÖSTER" NEDEN YOK
   Referansta ızgaranın son satırı bir gradyan perdeyle solar ve altında
   "Load More Pages" hapı durur. BURADA YOK, üç ölçülmüş gerekçeyle:

   (a) Perde tek bir DÜZ renge fade eder. Bu bölümün zemini düz değil,
       radial gradyan (#0d1e42 merkez → #000000 kenar, 00-temel §1). Hangi
       tek rengi seçersek seçelim perde kenarlarda ya da ortada görünür bir
       leke bırakıyor.
   (b) Perdenin solduğu içerik SİLİNMİYOR, yalnız görünmez oluyor: klavye
       sırası ve ekran okuyucu hâlâ oradan geçer. Kartları gerçekten
       `display: none` yapıp sonra perde koymak ise TAM bir satırı soldurmak
       demek — o satırın etiketleri okunmaz hâle gelirdi.
   (c) 04-vitrin-galerisi'nde yazılı olan kullanıcı isteği burada da geçerli:
       "tek sayfada". 22 kart 5 kolonda 5 satır; saklanacak kadar çok değil.

   Kalan tek iş, o satırın söylediğini DOĞRU söylemek: süzgeç açıkken
   "hepsi burada" cümlesi yanlış olurdu, bu yüzden gizlenir.
   -------------------------------------------------------------------------- */
.to-sg-dip {
    margin: 32px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    /* #a9b6cf / #081738 → 8,5:1 */
    color: #a9b6cf;
}

.to-sg:not(:has(#to-sg-o-hepsi:checked)) .to-sg-dip { display: none; }

/* --------------------------------------------------------------------------
   7. EL YAZISI NOTU — ÖLÇÜLMÜŞ ÖZGÜLLÜK ÇATIŞMASI (00-temel'e dokunmadan)
   `00-temel.css` iki kural taşıyor:
       .to-baslik > *:not(.to-hayalet) { position: relative; z-index: 1 }  (0,2,0)
       .to-not--sag { position: absolute; right: -180px; top: 8px }        (0,1,0)
       @media (max-width:1100px) { .to-not--sag { position: static } }     (0,1,0)
   Birincisi özgüllük olarak ikisini de yeniyor: not hiçbir genişlikte mutlak
   konumlanmıyor, `right: -180px` ise onu 180px SAĞA itiyor. Bu bölümde
   Playwright'la ölçüldü — düzeltmeden önce:
       1100px görüntü alanı → not sağ kenarı 1195, belge 1195px (yatay kayma)
        900px görüntü alanı → not sağ kenarı  975, belge  975px (yatay kayma)
   04-vitrin-galerisi aynı kusuru aynı yöntemle çözüyor; 00-temel bu göreve
   kapalı olduğu için düzeltme AYNI özgüllükte (0,2,0) ve DAHA SONRA gelen bir
   kuralla, yalnız bu bölüm için yapılır. Düzeltmeden sonra ölçüldü: her
   genişlikte belge = görüntü alanı.
   -------------------------------------------------------------------------- */
.to-sg .to-not--sag { position: absolute; }

/* --------------------------------------------------------------------------
   8. KIRILIMLAR — yalnız onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .to-sg .to-not--sag { position: static; right: auto; top: auto; }
}

@media (max-width: 720px) {
    /* İki kolonda hücre genişliyor; fişin 16px'ine geri dönülebilir. */
    .to-sg-ad { font-size: 16px; line-height: 24px; }
}

@media (max-width: 560px) {
    /* TEK KOLON — ölçülmüş sorun: kart tüm genişliği kaplayınca 4/5'lik kare
       ~530px'e çıkıyor ve 22 kart bölümü 14.065px'e uzatıyordu (ölçüldü).
       Bu tek durumda kare ÜSTTEN kırpılır: bir sayfanın kimliği başlık ve
       kahraman alanındadır (00-temel §6 ile aynı gerekçe). 16/10 seçildi —
       bölüm 8.800px'e iniyor ve şerit hâlâ okunur kalıyor. */
    .to-sg-gorsel { aspect-ratio: 16 / 10; }
    .to-sg-sekmeler { justify-content: flex-start; }
}

/* ─────────── 08-urun-sepet.css ─────────── */
/* ÖLÇÜLMÜŞ KARŞITLIK DÜZELTMELERİ (25 Ağustos 2026, son doğrulama turu).
   Değerler WCAG bağıl parlaklıkla, yarı saydam katmanlar `source-over` ile
   birleştirilerek hesaplandı. Eşik: gövde metni 4,5:1 · büyük metin 3:1. */
/* ==========================================================================
   08 — ÜRÜN SAYFASI VE SEPET  (açık zemin)   ÖNEK: .to-us-
   --------------------------------------------------------------------------
   Referans: ref-dilim/07-sepet.png — "Master Of Product Cart". Ölçü fişindeki
   satır: bölüm 6, zemin #F9F9F9 (yani `.to-bolum`un varsayılanı — ek sınıf
   yok), 14 görsel.

   Referanstan AYRILDIĞIMIZ YER: oradaki numaralı kartlar yatay bir KARUSEL
   (ortadaki keskin, yanlar soluk). Karusel kopyalanmadı — JavaScript ister ve
   ekran dışındaki kartlar klavye sırasında kalır. İki kart yan yana durur,
   900px'de `.to-ikili` onları alt alta indirir. Numaralı görünüm (01 / 02)
   korundu; o sayılar bir iddia değil, sıra işaretidir ve `aria-hidden`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BAŞLIKTAKİ DOSYA YOLU
   Metnin içinde geçen gerçek bir dizin adı; gövde yazısıyla karışmasın.
   -------------------------------------------------------------------------- */
.to-us-yol {
    padding: 1px 6px;
    border-radius: var(--to-r-kucuk);
    background: #eef1f7;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
    /* 0,875em: monospace yüzler aynı px'te daha iri görünüyor, satır yüksekliği
       16/27'lik lead ritmini bozmasın diye küçültüldü. */
    font-size: 0.875em;
    /* #3c4763 / #eef1f7 → 8,17:1 (hesaplandı) */
    color: #3c4763;
}

/* --------------------------------------------------------------------------
   2. İKİ GENİŞ EKRAN KARTI
   -------------------------------------------------------------------------- */
.to-us-ekranlar {
    /* `.to-ikili` 56px oluk veriyor; kartların kendi dolgusu da olduğu için
       bu bölümde oluk ızgara oluğuna (24px) çekildi — 56px iki kart arasında
       kopukluk üretiyordu. */
    gap: var(--to-oluk);
    align-items: stretch;
}

.to-us-ekran {
    display: grid;
    /* Metin geniş, kare dar: kare 600×750 (dikey) ve kartın boyunu tek başına
       belirlememeli. Yüzde kullanıldı — sabit px genişlik yasak. */
    grid-template-columns: minmax(0, 1fr) 42%;
    gap: 20px;
    /* Kare metinden uzun; metin bloğu ortalanmazsa kartın sol yarısında
       ~180px boşluk kalıyor (1440px'de ölçüldü). */
    align-items: center;
    padding: 24px;
    overflow: hidden;
}

.to-us-ekran__metin { min-width: 0; }

/* Sıra işareti — referansın kart içi iri numarası. Süs: `aria-hidden`. */
.to-us-sira {
    display: block;
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    /* Başlığı bastırmasın diye soluk; metin taşımadığı için kontrast eşiği
       aranmaz (WCAG 1.4.3 saf dekoratif metni kapsamaz). */
    /* #d6dce8 beyaz üzerinde 1,38:1 — okunamaz. Numara SÜS DEĞİL, adımın
       sırasını söylüyor; bu yüzden gizlemek yerine okunur yapıldı.
       Hesap YENİDEN yapıldı: #8d9ab5 gerçekte 2,83:1 veriyor, eşiğin altında.
    #7a8aa8 → 3,48:1. */
    color: #7a8aa8;
}

.to-us-ekran__ad {
    margin: 4px 0 10px;
    /* ÖLÇÜ FİŞİ: kart başlığı 16/24/500. Bu kart referansta bölüm içindeki en
       büyük kart olduğu için bir kademe yukarı alındı (20/28), rengi fişten. */
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-us-ekran__ad .to-kart__bag:hover { text-decoration: underline; }

.to-us-ekran__ozet {
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    /* #555555 / #ffffff → 7,46:1 */
    color: var(--to-govde);
}

.to-us-pencere {
    /* Kart zaten 12px yarıçaplı ve dolgulu; pencere içeride küçük yarıçapla
       durur. */
    /* Altında şerit yok, dört köşe de yuvarlanır (00-temel yalnız üst ikisini
       yuvarlıyor çünkü orada pencerenin altına şerit geliyor). */
    border-radius: var(--to-r-kucuk);
    box-shadow: rgba(15, 23, 42, 0.1) 0 6px 22px 0;
}

.to-us-gorsel {
    /* ÖLÇÜ: kaynak 600×750 → 4/5. Kartın boyu metne göre belirlensin diye
       kare ÜSTTEN kırpılır: bir sayfanın kimliği başlık ve kahraman
       alanındadır (00-temel §6 ile aynı gerekçe). 3/4 seçildi çünkü 42%'lik
       kolonda (≈250px) 333px yüksekliğe denk geliyor ve metin kolonuyla
       (≈240px) hemen hemen aynı boyda bitiyor. */
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}

/* --------------------------------------------------------------------------
   3. MODÜL KAROLARI
   -------------------------------------------------------------------------- */
.to-us-moduller {
    margin: var(--to-oluk) 0 0;
    padding: 0;
    list-style: none;
}

.to-us-modul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.to-us-modul__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    /* 00-temel'deki `.to-karo__ikon` kesikli kenarlıklı ve 64px; burada sekiz
       karo iki satırda duruyor, 64px karolar kartları gereksiz uzatıyordu.
       Dolu zemin seçildi: kesikli kenarlık 44px'te taranmış gibi görünüyor. */
    background: #eaf1fd;
    color: var(--to-mavi);
}

.to-us-modul__ad {
    margin: 0;
    /* ÖLÇÜ FİŞİ: kart başlığı 16/24/500 #222329. */
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-us-modul__metin {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   4. EL YAZISI NOTU — ÖLÇÜLMÜŞ ÖZGÜLLÜK ÇATIŞMASI (00-temel'e dokunmadan)
   Gerekçenin tamamı 07-sayfa-galerisi.css §7'de. Özet: 00-temel'in
   `.to-baslik > *:not(.to-hayalet) { position: relative }` kuralı (0,2,0)
   `.to-not--sag`ın (0,1,0) `position: absolute`ını yeniyor, `right: -180px`
   notu 180px sağa itiyor ve belge yatay kayıyor. Bu bölümde ölçüldü:
   1100px'te belge 1195px, 900px'te 975px. Düzeltme aynı özgüllükte ve daha
   sonra gelen bir kuralla, yalnız bu bölüm için.
   -------------------------------------------------------------------------- */
.to-us .to-not--sag { position: absolute; }

/* --------------------------------------------------------------------------
   5. KIRILIMLAR — yalnız onaylı liste: 1100 · 900 · 720 · 560 · 420
   `.to-izgara--4` 900'de 2, 560'ta 1 kolona iner; `.to-ikili` 900'de tek
   kolona iner. İkisi de 00-temel'den gelir, burada yeni nokta açılmadı.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .to-us .to-not--sag { position: static; right: auto; top: auto; }
}

@media (max-width: 900px) {
    /* Tek kolona inen ekran kartında metin/kare oranı bozuluyor: kart artık
       tam genişlikte, kare %42'de 540px'e çıkıp kartı 700px'e uzatıyor.
       Kolonlar eşitlenir. */
    .to-us-ekran { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 560px) {
    /* Dar ekranda yan yana metin + kare 150px'lik kolonlar bırakıyor; kart
       alt alta diziliş alır ve kare tam genişliği kullanır. */
    .to-us-ekran { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px; }
    .to-us-gorsel { aspect-ratio: 4 / 3; }
    .to-us-sira { font-size: 32px; line-height: 36px; }
}

/* ─────────── 09-sektor-paketleri.css ─────────── */
/* ==========================================================================
   09 — SEKTÖR PAKETLERİ   ·  önek `.to-sp-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/08-bolum-koleksiyonu.png ("The Biggest Exclusive
   Sections Of Collection"). Alınan şey YOĞUNLUK: başlığın hemen altında
   nefes almadan başlayan çok kolonlu bir ızgara.

   REFERANSTAN AYRILDIĞIMIZ ÜÇ YER
   1. Referansın ızgarası MASONRY — kart yükseklikleri rastgele, içlerinde
      yalnız görsel var. Bizim kartımız okunacak metin taşıyor (açıklama,
      bayraklar, kurulum komutu); değişken yükseklikte kartlarda komut satırı
      her kolonda başka hizada durur ve ızgara taranamaz olur. Bu yüzden
      satırlar EŞİT, yoğunluk kolon sayısından geliyor.
   2. Oluk referansın 24px'i (`--to-oluk`) — masonry'siz ızgarada bu değer
      17 kartı 1289px'lik kapsayıcıya 4×304,25 olarak yerleştiriyor, yani
      referansın kendi kolon ölçüsü korunuyor.
   3. Kartlar tıklanabilir (`.to-kart__bag`), referansınkiler değil.
   ========================================================================== */

.to-sp-izgara {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   KART
   -------------------------------------------------------------------------- */
.to-sp-kart {
    display: flex;
    flex-direction: column;
    /* Kare kartın üst köşelerine oturur; ayrı bir yarıçap yazmak yerine
       kartın kendi 12px'i kırpıyor. */
    overflow: hidden;
}

/* Kare kutusu: `aspect-ratio` HTML'deki width/height ile aynı (840/525 = 1,6).
   İkisi birden yazılı çünkü stil gelmeden de oran bilinmeli — CLS payı sıfır. */
.to-sp-kare {
    display: block;
    aspect-ratio: 840 / 525;
    background: #e7eaf0;
}

.to-sp-gorsel {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` + üstten hizalama: 04'te ölçülen kural burada da geçerli —
       bir vitrinin kimliği başlık ve kahraman alanındadır, altını kırpmak
       bilgi kaybettirmez. Referans `fill` kullanıp oranı bozuyor; kopyalanmadı. */
    object-fit: cover;
    object-position: top center;
}

/* Kare diskte yoksa devreye giren yedek. Bugün çalışmıyor (30/30 dosya var),
   ama tema kaydı görselsiz eklenirse kart boş kalmasın diye duruyor. */
.to-sp-palet {
    display: flex;
    aspect-ratio: 840 / 525;
}

.to-sp-palet__renk {
    flex: 1 1 0;
    min-width: 0;
    background: var(--to-sp-renk, #e7eaf0);
}

/* --------------------------------------------------------------------------
   GÖVDE — komut satırı her kartta AYNI hizada bitsin diye `margin-top: auto`
   -------------------------------------------------------------------------- */
.to-sp-govde {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 18px 16px 16px;
}

.to-sp-ad {
    margin: 0;
    /* Kart başlığı ölçü fişinden: 16/24/500 #222329. */
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--to-metin);
}

.to-sp-ad .to-kart__bag:hover { text-decoration: underline; }

.to-sp-tema {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    /* #215ada / #ffffff (kart zemini) = 6,32:1 — AA'nın üstünde. */
    color: var(--to-mavi);
}

.to-sp-tema svg { flex: 0 0 auto; }

/* Açıklamalar 185–599 karakter (ölçüldü). 4 satırda kırpılıyor: kırpma
   YALNIZ görsel, metnin tamamı DOM'da kalır ve ekran okuyucu tamamını okur.
   `line-clamp` standart adı da yazılı — `-webkit-` öneki hâlâ tek çalışan
   biçim, ama önek düşerse kural kendiliğinden geçerli kalsın. */
.to-sp-aciklama {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    margin: 0;
    font-size: 14px;
    line-height: 21px;
    /* #555555 / #ffffff = 7,46:1. */
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   BAYRAK ÇİPLERİ — en çok 3 + "+N"
   -------------------------------------------------------------------------- */
.to-sp-bayraklar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-sp-bayrak {
    padding: 4px 10px;
    border-radius: var(--to-r-hap);
    background: #eef1f7;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    /* #3f4757 / #eef1f7 = 8,55:1. */
    color: #3f4757;
}

/* "+N" ayrı okunsun: sayı olduğu renkle DEĞİL, artı işareti ve kalınlıkla
   belli oluyor — renk tek başına anlam taşımıyor. */
.to-sp-bayrak--kalan {
    background: #dbe4f8;
    font-weight: 700;
    /* #1e3a8a / #dbe4f8 = 8,29:1. */
    color: #1e3a8a;
}

/* --------------------------------------------------------------------------
   KURULUM KOMUTU
   -------------------------------------------------------------------------- */
.to-sp-komut {
    /* Kartın altına yapışır: 17 kartın komut satırı aynı hizada okunur. */
    margin: auto 0 0;
    padding-top: 12px;
    /* Kartın tamamını kaplayan `.to-kart__bag::after` z-index 3'te duruyor.
       Komut ONUN ÜSTÜNE alınıyor (4) — yoksa metin fareyle seçilemez,
       kopyalanamazdı. Buraya tıklamak temaya gitmez; bilerek. */
    position: relative;
    z-index: 4;
}

.to-sp-komut__etiket {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* #6b7280 / #ffffff = 4,83:1. */
    color: #6b7280;
}

.to-sp-komut__kod {
    display: block;
    padding: 8px 10px;
    border-radius: var(--to-r-kucuk);
    background: #f1f4f9;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    line-height: 18px;
    /* #2f3440 / #f1f4f9 = 11,74:1. */
    color: #2f3440;
    /* En uzun komut 42 karakter (`…cea:sektor elektronik-teknomart`), kolon içi
       genişlik 272px. 12px monospace'te sığmıyor: KAYDIRMA KUTUSU yerine
       SARMA seçildi — yatay kayan bir kutu klavyeyle odaklanabilir olmak
       zorundadır ve 17 tanesi sekme sırasına girerdi. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* Seçim imleci: bu blok kopyalanmak için var. */
    cursor: text;
    user-select: all;
}

/* --------------------------------------------------------------------------
   DİP CÜMLESİ
   -------------------------------------------------------------------------- */
.to-sp-dip {
    max-width: 680px;
    margin: 40px auto 0;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: var(--to-govde);
}

.to-sp-dip__bag { color: var(--to-mavi); }
.to-sp-dip__bag:focus-visible { outline: 3px solid var(--to-mavi); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* ÖLÇÜLMÜŞ KAYNAK SIRASI TUZAĞI — üç basamağın da BURADA yazılması şart.
   `.to-izgara--4` kolon basamaklarını 00-temel.css'in 900 ve 560 sorgularında
   veriyor. Bu parça birleştirilmiş dosyada 00-temel'den SONRA geliyor ve
   `.to-sp-izgara` ile özgüllüğü aynı (0,1,0); yalnız 1100 basamağını yazmak
   temelin 900 ve 560 kurallarını da bastırıyordu. Playwright'ta ölçüldü:
   390px görüntü alanında ızgara ÜÇ kolonda kalıyor, kart genişliği 115px'e
   düşüyor, komut satırı okunmuyordu. Üç basamak da yeniden bildiriliyor. */

/* 1100'de 4 kolon 240px'e iniyor: açıklamanın satırı 28 karaktere düşüyor ve
   dört satırda cümle bitmiyor. Üç kolonda satır 34 karaktere çıkıyor. */
@media (max-width: 1100px) {
    .to-sp-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Temelin 900 basamağı: iki kolon. */
@media (max-width: 900px) {
    .to-sp-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Temelin 560 basamağı: tek kolon. Kart tek kolonda ekran boyunca uzamasın
   diye üstten sınırlanıyor ve açıklama üç satıra iniyor. */
@media (max-width: 560px) {
    .to-sp-izgara { grid-template-columns: minmax(0, 1fr); }
    .to-sp-kart { width: 100%; max-width: 460px; margin-inline: auto; }
    .to-sp-aciklama { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ─────────── 10-mobil.css ─────────── */
/* ==========================================================================
   10 — MOBİL  (koyu zemin)   ·  önek `.to-mb-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/09-mobil.png ("Mobile-First eCommerce Theme").
   Alınan düzen: siyah zemin · ortalanmış iki tonlu başlık · üç telefon
   çerçevesi yan yana, ortadaki bir tık büyük · her çerçevenin altında künye.

   REFERANSA EKLENEN: çerçevelerin altında kenardan kenara yatay kayan şerit
   (30 temanın telefon karesi). Gerekçe Blade dosyasında yazılı.

   KONTRAST (koyu zemin #000 → merkez #081738):
     #ffffff / #081738 = 16,75:1   ·   #c8d4ea / #081738 = 11,29:1
   Şerit adı ve künye satırı #c8d4ea; her ikisi de AA'nın çok üstünde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ÜÇ TELEFON
   -------------------------------------------------------------------------- */
.to-mb-telefonlar {
    display: flex;
    /* Alt kenardan hizalanır: ortadaki telefon BÜYÜK olduğu için üstten
       hizalanırsa künye satırları farklı yükseklikte kalır ve satır kırılır. */
    align-items: flex-end;
    justify-content: center;
    gap: clamp(16px, 3vw, 44px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Sabit px genişlik YOK (sözleşme 6. kural). clamp'in üst ucu 244px:
   1289px'lik iç genişlikte üç telefon + iki oluk = 856px, yani referansın
   telefonları gibi ortada toplu duruyorlar, kenarlara yayılmıyorlar. */
.to-mb-oge {
    flex: 0 0 auto;
    width: clamp(150px, 20vw, 244px);
    text-align: center;
}

/* Ortadaki ÖNE ÇIKAN: referansta da ortadaki bir tık büyük.
   Ölçek `transform` ile DEĞİL genişlikle veriliyor — transform görüntüyü
   büyütüp bulanıklaştırırdı, kaynak kare zaten 900×1800. */
.to-mb-oge--one { width: clamp(168px, 23vw, 280px); }

.to-mb-ad {
    margin: 18px 0 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: #fff;
}

/* Dokunma hedefi 44px (WCAG 2.5.5): satırın kendi kutusu 22px, eksik 22px
   dolgudan geliyor. Negatif kenar boşluğu dolguyu geri alıyor, yani hedef
   büyürken DÜZEN kaymıyor. */
.to-mb-bag {
    display: inline-block;
    padding: 11px 10px;
    margin: -11px -10px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.to-mb-bag:hover { text-decoration: underline; }
.to-mb-bag:focus-visible { outline: 3px solid #a9c5f5; outline-offset: 2px; }

.to-mb-kat {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #c8d4ea;
}

/* --------------------------------------------------------------------------
   2. KENARDAN KENARA ŞERİT
   -------------------------------------------------------------------------- */

/* Okların konum çerçevesi. Kendi kutusu yok: `.to-mb-ray`ın üst boşluğu
   sarmalayıcıyla birlikte çöktüğü için sarmalayıcının üst kenarı tam olarak
   şeridin üst kenarıdır — yani %50 hesabı şeridin yüksekliği üzerinden döner. */
.to-mb-sar { position: relative; }

/* OK DÜĞMELERİ
   44×44 (WCAG 2.5.5 dokunma hedefi; referansın oku daha küçük ama dokunma
   hedefi ölçüsü referansa değil kurala uyar).

   DÜŞEY KONUM — ölçülmüş: şerit = 6px dolgu + görsel + (10px boşluk + 32px ad)
   + 6px dolgu. Ad bloğu her genişlikte 42px olduğu için görselin merkezi,
   şeridin merkezinden HER ZAMAN tam 21px yukarıdadır. Ok görselin ortasına
   oturuyor, adın üstüne binmiyor.

   KARŞITLIK (bölüm zemini #081738):
     düğme zemini #e8eefb / #081738 = 15,17:1  → denetim sınırı 3:1'in üstünde
     ok çizimi    #0b1a33 / #e8eefb = 14,92:1  → gösterge 3:1'in çok üstünde
   Devre dışı düğme (opaklık 0,38) zemine karıştığında #5d6982 veriyor:
     #5d6982 / #081738 = 3,20:1 — WCAG devre dışı denetimi muaf tutar, yine de
     3:1'in altına düşmüyor, yani "burada bir düğme var" okunmaya devam ediyor. */
.to-mb-ok {
    position: absolute;
    top: calc(50% - 21px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e8eefb;
    color: #0b1a33;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transform: translateY(-50%);
}

/* Betik gelmeden `hidden` düşmez: `display: flex` onu ezerdi. */
.to-mb-ok[hidden] { display: none; }

.to-mb-ok svg { width: 22px; height: 22px; }

.to-mb-ok:disabled { opacity: 0.38; cursor: default; }

.to-mb-ok:focus-visible { outline: 3px solid #a9c5f5; outline-offset: 3px; }

/* Şeridin kendi kenar dolgusuyla (`--to-mb-kenar`, en çok 56px) aynı hizada
   dursunlar ki ilk/son kartı kapatmasınlar. */
.to-mb-ok--geri { left: clamp(8px, 1.5vw, 18px); }
.to-mb-ok--ileri { right: clamp(8px, 1.5vw, 18px); }

.to-mb-ray {
    /* Kenar dolgusu tek yerden: aşağıda `scroll-padding-inline` AYNI değeri
       almak zorunda (bkz. not). */
    --to-mb-kenar: clamp(16px, 4vw, 56px);

    display: flex;
    gap: 16px;
    margin: clamp(48px, 6vw, 84px) 0 0;
    padding: 6px 0;                       /* odak halkası kırpılmasın */
    padding-inline: var(--to-mb-kenar);
    list-style: none;

    /* 100vw DEĞİL: 100vw kaydırma çubuğunun genişliğini de sayar, belge
       çubuk kadar yatay taşar. Şerit zaten bölümün blok çocuğu, %100 tam
       olarak kullanılabilir genişliktir. */
    width: 100%;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

    /* TUZAK — `scroll-snap-align: start` hizalamayı KAYDIRMA KUTUSUNUN
       içerik kenarına yapar; `padding-inline` onu ilgilendirmez. Aynı değer
       `scroll-padding-inline` olarak AYRICA verilmezse ilk öge kaydırınca
       sol dolgunun altına yapışır ve şerit kenara "çarpmış" görünür. */
    scroll-padding-inline: var(--to-mb-kenar);

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.to-mb-ray:focus-visible { outline: 3px solid #a9c5f5; outline-offset: -3px; }

/* Sabit px genişlik YOK: dar ekranda 164px'lik bir kart 320px'lik görüntü
   alanının yarısını yer, iki komşusu görünmez olurdu. */
.to-mb-ray__oge {
    flex: 0 0 auto;
    width: min(164px, 38vw);
    scroll-snap-align: start;
}

.to-mb-ray__bag {
    display: block;
    color: inherit;
    text-decoration: none;
}

.to-mb-ray__gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 2;      /* ÖLÇÜLDÜ: `-telefon` dosyaları 300×600, 30/30 */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    object-fit: cover;
    object-position: top center;
    transition: transform 0.18s ease;
}

.to-mb-ray__bag:hover .to-mb-ray__gorsel { transform: translateY(-4px); }

.to-mb-ray__bag:focus-visible .to-mb-ray__gorsel {
    outline: 3px solid #a9c5f5;
    outline-offset: 3px;
}

/* İki satırda kırpılır: en uzun tema adı 36 karakter ("OrganiFresh — Market
   ve Organik Gıda"), 164px'lik kartta üç satıra taşıyordu ve şeridin alt
   kenarı testere gibi oluyordu. */
.to-mb-ray__ad {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* Dokunma hedefini 44px'e taşıyan üst boşluk da burada. */
    margin-top: 10px;
    min-height: 32px;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    color: #c8d4ea;
}

/* --------------------------------------------------------------------------
   3. EL YAZISI NOTU — ÖLÇÜLMÜŞ ÖZGÜLLÜK ÇATIŞMASI (00-temel'e dokunmadan)
   `00-temel.css` iki kural taşıyor:
       .to-baslik > *:not(.to-hayalet) { position: relative; z-index: 1 }  (0,2,0)
       .to-not--sag { position: absolute; right: -180px; top: 8px }        (0,1,0)
       @media (max-width:1100px) { .to-not--sag { position: static } }     (0,1,0)
   Birincisi özgüllük olarak ikisini de yeniyor: not hiçbir genişlikte mutlak
   konumlanmıyor, `right: -180px` de göreli konumda onu 180px SAĞA itiyor.
   Bu bölümde Playwright'la ölçüldü — düzeltmeden önce her genişlikte belge
   görüntü alanından 164px geniş (320/360/390/560/720'de aynı 164px).
   04, 07 ve 08 aynı kusuru aynı yöntemle çözüyor; 00-temel bu göreve kapalı
   olduğu için düzeltme AYNI özgüllükte (0,2,0) ve DAHA SONRA gelen bir
   kuralla, yalnız bu bölüm için yapılır.
   -------------------------------------------------------------------------- */
.to-mb .to-not--sag { position: absolute; }

/* --------------------------------------------------------------------------
   4. DİP CÜMLESİ
   -------------------------------------------------------------------------- */
.to-mb-dip {
    max-width: 680px;
    margin: clamp(32px, 4vw, 52px) auto 0;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    color: #c8d4ea;
}

/* --------------------------------------------------------------------------
   5. KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* El yazısı notunun akışa dönmesi (bkz. 3. bölüm). */
@media (max-width: 1100px) {
    .to-mb .to-not--sag { position: static; right: auto; top: auto; }
}

/* 720'nin altında üç telefon yan yana 150px'e sıkışıyor: 900×1800'lük kare
   150×300 çiziliyor ve vitrinin başlığı okunmaz oluyor. Tek kolona geçiliyor
   ve ORTADAKİNİN büyüklüğü kaldırılıyor — yan yana komşusu kalmayınca
   "bir tık büyük" olmanın anlamı yok. */
@media (max-width: 720px) {
    .to-mb-telefonlar {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .to-mb-oge,
    .to-mb-oge--one { width: min(280px, 72vw); }
}

@media (max-width: 420px) {
    .to-mb-ray { gap: 12px; }
    .to-mb-ray__oge { width: min(164px, 46vw); }
}

@media (prefers-reduced-motion: reduce) {
    .to-mb-ray__gorsel { transition: none; }
    .to-mb-ray__bag:hover .to-mb-ray__gorsel { transform: none; }
}

/* ─────────── 11-esneklik.css ─────────── */
/* ==========================================================================
   11 — ESNEKLİK  (sarı bant)   ·  önek `.to-es-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/10-esneklik.png.
   Alınan düzen: SOLDA metin (üstlük + iki tonlu başlık + paragraf + 2×2 tik
   çipi + hap düğme) · SAĞDA kesikli çerçeve içinde diyagonal olarak üst üste
   binmiş üç vitrin karesi ve önlerine oturmuş bir ayar kartı.

   KONTRAST — WCAG bağıl parlaklık formülüyle HESAPLANDI (göz kararı yok).
   Zemin `--to-sari` = #fbe523.
     #222329 / #fbe523 = 12,19:1   gövde ve kart metni      → AA + AAA
     #3d3a00 / #fbe523 =  9,06:1   üstlük (00-temel veriyor) → AA + AAA
     #4a4600 / #fbe523 =  7,54:1   `.to-lead` (00-temel)     → AA + AAA
     #215ada / #fbe523 =  4,61:1   ← MARKA MAVİSİ. 4,5'i ancak kıl payı
                                     geçiyor; bu zeminde METİN OLARAK
                                     KULLANILMIYOR. Yalnız hap düğmenin DOLU
                                     zemini olarak var — düğmenin kendi içinde
                                     beyaz / #215ada = 6,32:1 ölçülüydü.
   00-temel bu bandın üstlük ve lead renklerini zaten koyulaştırıyor
   (#3d3a00 / #4a4600), bu yüzden burada renk EZİLMİYOR; yalnız doğrulandı.

   AYAR KARTI beyaz zeminli, metni #222329 (15,67:1) ve #4b5563 (7,56:1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. İKİ KOLON
   Referansta metin kolonu görsel kolonundan DAR: kare yığını daha çok yer
   istiyor çünkü içinde üç kare üst üste biniyor. 1289px'lik iç genişlikte
   `.to-ikili`nin eşit iki kolonu metni 616px'e sıkıştırıp başlığı üç satıra
   kırıyordu; 0,88fr / 1,12fr ile başlık iki satırda kalıyor.
   -------------------------------------------------------------------------- */
.to-es-ikili {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 48px;
    align-items: center;
}

/* Başlık bloğu bu bölümde tek başına durmuyor (altında çipler ve düğme var),
   00-temel'in 48px'lik alt boşluğu fazla geliyor. */
.to-es-baslik { margin-bottom: 0; max-width: none; }

.to-es-eylem { margin: 30px 0 0; }

/* Düğmenin ok ikonu metinle aynı satırda; `.to-btn` zaten flex + gap 8. */
.to-es-eylem .to-btn svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   2. KARE YIĞINI — kesikli çerçeve + diyagonal fan
   -------------------------------------------------------------------------- */

/* Kesikli çerçeve referansın imzası. Sarı üstünde koyu kesik çizgi
   (rgba(34,35,41,0.28)) seçildi: beyaz kesik çizgi #fbe523 üzerinde
   1,19:1 ile görünmez kalıyordu. */
.to-es-gorsel {
    /* Dolgu TEK YERDE: ayar kartının mutlak konumu aynı değeri okuyor, yoksa
       kart çerçevenin kesikli çizgisine yapışıyor. */
    --to-es-ic: clamp(14px, 2vw, 26px);

    /* Ayar kartının kapsayıcı bloğu BURASI, yığın değil (bkz. Blade notu:
       kart yığının içindeyken dar ekranda karelerin altına düşüyordu). */
    position: relative;
    padding: var(--to-es-ic);
    border: 1px dashed rgba(34, 35, 41, 0.28);
    border-radius: 18px;
}

/*
 * `aspect-ratio` ZORUNLU: içerideki kareler mutlak konumlu, yani yığın
 * kendi yüksekliğini içerikten ALAMAZ. Oran verilmezse kutu 0px yüksekliğe
 * çöker, sonra görseller yüklenince... çökmüş kalır (mutlak çocuk akışa
 * girmez). Oran ayrıca CLS payını sıfırlar.
 *
 * NİÇİN 16/11: kare oranı 840/525 = 1,6. Kare genişliği yığının %66'sı, üç
 * kare %16'şar aşağı kayıyor → en alttaki kare 32% + (0,66/1,6)×(11/16) =
 * %92'de bitiyor. 16/11 bu fanı taşıyan en dar kutu; daha uzun bir oran
 * altta boşluk bırakırdı.
 */
.to-es-yigin {
    position: relative;
    aspect-ratio: 16 / 11;
}

.to-es-kare {
    position: absolute;
    width: 66%;
    height: auto;
    border-radius: var(--to-r);
    /* 00-temel'in kart gölgesi rgb(234,234,234) — SARI zeminde görünmez.
       Bu bantta gölge koyulaştırıldı, yoksa üst üste binen üç kare tek bir
       yamalı düzleme dönüşüyordu (kenarları birbirinden ayrılmıyordu). */
    box-shadow: rgba(40, 36, 0, 0.28) 0 14px 40px 0;
    /* Kareler birbirinin üstüne biniyor; sarıdan ayıran ince beyaz kenar. */
    outline: 4px solid #fff;
    outline-offset: 0;
}

.to-es-kare--1 { top: 0;   left: 34%; z-index: 1; }
.to-es-kare--2 { top: 16%; left: 17%; z-index: 2; }
.to-es-kare--3 { top: 32%; left: 0;   z-index: 3; }

/* --------------------------------------------------------------------------
   3. AYAR KARTI — öndeki temanın palet + tipografi künyesi
   -------------------------------------------------------------------------- */
.to-es-ayar {
    position: absolute;
    right: var(--to-es-ic);
    bottom: var(--to-es-ic);
    z-index: 4;
    /* %58: 1289px'lik kapsayıcıda görsel kolonu ~700px, kart ~360px olur.
       İç genişlik ~310px → beş hex kolonu 62px'e düşer ve "#0b2545" 11px
       Cabin'de 44px'e sığar. %46 denendi, hex'ler kırpılıyordu. */
    width: 58%;
    margin: 0;
    padding: 16px 18px 18px;
    border-radius: var(--to-r);
    background: #fff;
    box-shadow: rgba(40, 36, 0, 0.3) 0 18px 44px 0;
    color: var(--to-metin);
}

.to-es-ayar__ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecf2;
}

.to-es-ayar__ust svg { flex: 0 0 auto; color: var(--to-mavi); }

/* ÖLÇÜLDÜ: en uzun tema adı 31 karakter ("Comforte — İç Giyim ve Ev Giyimi")
   ve ~310px'lik kart başlığına tek satırda sığmıyor. İlk hâli
   `white-space: nowrap` + ellipsis idi; ad "Comforte — İç Giy…" diye
   kesiliyordu, yani PALETİN KİME AİT OLDUĞU okunamıyordu — kartın tek işi
   buydu. Ad iki satıra kadar sarıyor, etiket gerekirse alt satıra iniyor. */
.to-es-ayar__ad {
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
}

.to-es-ayar__etiket {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: var(--to-r-hap);
    background: #eef1f7;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    /* #6b7280 ölçüldü: #eef1f7 üzerinde 4,27:1 — eşiğin altında. #565d6a 5,0+. */
    color: #565d6a;
    white-space: nowrap;
}

.to-es-ayar__baslik {
    margin: 14px 0 8px;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4b5563;          /* beyaz üzerinde 7,56:1 */
}

/* --------------------------------------------------------------------------
   4. PALET ŞERİDİ
   Renk TEK BAŞINA anlam taşımaz (sözleşme 5): her kutunun altında hex değeri
   metin olarak duruyor, kutunun kendisi `aria-hidden`.
   -------------------------------------------------------------------------- */
.to-es-palet {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-es-palet__oge { min-width: 0; }

.to-es-palet__kutu {
    display: block;
    height: 34px;
    border-radius: 7px;
    /* Palette #ffffff de var: beyaz kart üzerinde beyaz kutu kaybolmasın diye
       ince gri iç çizgi. `border` değil `box-shadow: inset` — kenarlık
       kutunun ölçüsünü büyütür, beş kolonun hizası bozulurdu. */
    box-shadow: inset 0 0 0 1px rgba(15, 27, 50, 0.16);
}

.to-es-palet__hex {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: -0.01em;
    text-align: center;
    color: #4b5563;          /* beyaz üzerinde 7,56:1 */
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. YAZI TİPİ SATIRLARI
   -------------------------------------------------------------------------- */
.to-es-yazi { margin: 0; }

.to-es-yazi__satir {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
}

.to-es-yazi__satir + .to-es-yazi__satir { border-top: 1px solid #f0f2f6; }

.to-es-yazi dt {
    flex: 0 0 auto;
    width: 52px;
    font-size: 12px;
    line-height: 18px;
    color: #4b5563;
}

.to-es-yazi dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--to-metin);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 900'de `.to-ikili` zaten tek kolona düşüyor; asimetrik kolon oranı da
   birlikte kalkmalı, yoksa `grid-template-columns` iki kolonu geri getirir
   (bu kural 00-temel'deki tek kolonlu kuraldan SONRA geliyor). */
@media (max-width: 900px) {
    .to-es-ikili { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .to-es-yigin { max-width: 620px; }
}

/*
 * 720'nin altında ayar kartı MUTLAK konumdan çıkıyor.
 * ÖLÇÜ: 700px'lik bir görüntü alanında yığın ~620px, kartın %58'i 360px;
 * 420px'de yığın ~340px ve kart 197px'e iniyor — beş hex kolonu 31px'e
 * düşüp "#0b2545" kırpılıyor. Kart akışa alınıp tam genişliğe çıkarılınca
 * hex satırı her genişlikte okunur kalıyor.
 */
@media (max-width: 720px) {
    .to-es-ayar {
        position: static;
        width: auto;
        margin-top: 18px;
    }

    /* Kart artık fanın ALTINDA duruyor; fanın alt %8'lik boşluğu gereksiz. */
    .to-es-yigin { aspect-ratio: 16 / 10.2; }
}

/* %58 genişlik yığına değil, `.to-es-gorsel`in dolgu kutusuna göre ölçülüyor —
   ikisi aynı genişlikte olduğu için hesap değişmedi (bkz. 3. bölüm yorumu). */

@media (max-width: 560px) {
    /* Üç kare yan yana %66 genişlikle 300px'lik ekranda 198px'e iner ve
       vitrinin başlık alanı okunmaz olur. Fan daraltılıp kaydırma artırılıyor:
       kareler büyür, üst üste binme azalır. */
    .to-es-kare { width: 78%; }
    .to-es-kare--1 { left: 22%; }
    .to-es-kare--2 { left: 11%; }
    .to-es-yigin { aspect-ratio: 16 / 11.4; }

    .to-es-gorsel { padding: 12px; border-radius: 14px; }
}

@media (max-width: 420px) {
    .to-es-palet { gap: 4px; }
    .to-es-palet__kutu { height: 28px; }
    .to-es-palet__hex { font-size: 10px; }
}

/* ==========================================================================
   7. KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): bu bölümdeki HER `<p>` ve `<ul>`
   ögesinin `margin-top`/`margin-bottom` değeri 0px çıkıyordu — kendi
   kurallarım da, 00-temel'in `.to-ustluk` (0 0 10px) ve `.to-lead`
   (20px 0 0) kuralları da uygulanmıyordu.

   SEBEP kabuk stil dosyasında:
       shop-tema-demolari.css → `.td-govde h1, h2, h3, p, ul, figure { margin: 0 }`
   `<body class="td-govde">` olduğu için bu seçici sayfadaki tüm p/ul'lere
   uyuyor ve özgüllüğü (0,1,1); `.to-pf-dip` gibi tek sınıflı seçiciler (0,1,0)
   ondan DÜŞÜK. Üstelik kabuk dosyası bu sayfanın dosyasından SONRA yükleniyor,
   yani eşit özgüllükte de kaybediliyor.

   Ne `00-temel.css` ne `shop-tema-demolari.css` bu göreve açık (sözleşme 11.
   madde), bu yüzden düzeltme bölümün kendi köküyle (0,2,0) ve yalnız bu
   bölüme yapılıyor. Değerler uydurulmadı: 00-temel'in kendi yazdığı ölçüler
   geri veriliyor.

   NOT — bu kusur SAYFANIN TAMAMINDA var (01–10 bölümleri de aynı şekilde
   etkileniyor); burada yalnız bu bölüm onarıldı.
   ========================================================================== */
.to-es .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-es .to-lead { margin: 20px 0 0; }          /* 00-temel'in değeri */
.to-es .to-cipler { margin: 26px 0 0; }        /* 00-temel'in değeri */
.to-es .to-es-eylem { margin: 30px 0 0; }
.to-es .to-es-ayar__baslik { margin: 14px 0 8px; }

/* ─────────── 12-mobil-once.css ─────────── */
/* ==========================================================================
   12 — MOBİL ÖNCELİKLİ  (mavi bant)   ·  önek `.to-mo-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/11-mobil-once.png.
   Alınan düzen: mavi zemin · GÖRSEL SOLDA / METİN SAĞDA · görselde masaüstü
   penceresinin önüne binmiş telefon çerçevesi · 2×2 tik çipi · hap düğme.

   ------------------------------------------------------------------------
   KONTRAST — ÖLÇÜLDÜ, BU BÖLÜMDE EZME GEREKMİYOR
   ------------------------------------------------------------------------
   Zemin `--to-bant-mavi` = #2d67e8. WCAG bağıl parlaklıkla hesaplandı:

     #ffffff / #2d67e8 = 4,98:1   düğme metni ve kart içi         → AA
     #f2f7ff / #2d67e8 = 4,63:1   00-temel'in üstlük + lead rengi → AA
     #c8d4ea / #2d67e8 = 3,33:1   KALIYOR — koyu bant için seçilmiş ton
     #a9c5f5 / #2d67e8 = 2,84:1   KALIYOR — aynı sebeple
     #e6eeff / #2d67e8 = 4,28:1   eşiğin altında, denendi ve bırakıldı

   Son iki satır bir zamanlar `.to-bolum--mavi .to-ustluk` ve
   `.to-bolum--mavi .to-lead` değerleriydi; bu bölüm yazılırken canlıda
   ölçülüp bildirildi ve 00-temel ikisini de #f2f7ff'e çekti. Bu dosyada
   önce aynı düzeltmenin bölüme özgü bir kopyası vardı (`.to-mo.to-bolum--mavi
   .to-ustluk`); 00-temel doğru değeri verdiği için KALDIRILDI — aynı kararın
   iki yerde durması ileride yalnız birinin güncellenmesi demekti.

   Bu bölümün kendi metin renkleri: tarayıcı çubuğu adresi 00-temel'den
   (#565d6c / #eef0f4 = 5,79:1), çipler 00-temel'den (beyaz üzeri #fff).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. İKİ KOLON
   Referansta görsel kolonu metinden geniş: içinde iki cihaz yan yana duruyor.
   -------------------------------------------------------------------------- */
.to-mo-ikili {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 52px;
    align-items: center;
}

.to-mo-baslik { margin-bottom: 0; max-width: none; }
.to-mo-eylem { margin: 30px 0 0; }
.to-mo-eylem .to-btn svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   2. CİHAZ YIĞINI
   -------------------------------------------------------------------------- */

/*
 * `aspect-ratio` ZORUNLU: iki cihaz da mutlak konumlu, kutu yüksekliğini
 * içerikten alamaz. Oran verilmezse yığın 0px'e çöker.
 *
 * ORAN NASIL BULUNDU (hepsi yığın genişliği W cinsinden):
 *   telefon   %28 genişlik, kare oranı 900/1800 = 1/2  → yükseklik 0,56·W
 *   pencere   %84 genişlik, kare oranı 2400/1500 = 1,6 → 0,525·W + 22px çubuk
 * İkisinin büyüğü 0,56·W. 16/9,4 = 0,5875·W bunu taşıyan en dar kutu;
 * kalan pay pencerenin çubuğunu karşılıyor.
 */
.to-mo-yigin {
    position: relative;
    aspect-ratio: 16 / 9.4;
}

/* Pencere SAĞA yaslı, telefon SOLDA önüne biniyor — referanstaki dizilim. */
.to-mo-pencere {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 84%;
    /* 00-temel `.to-pencere`ye 12px 12px 0 0 veriyor çünkü orada kartın alt
       şeridi devam ediyor. Burada pencerenin altında bir şey yok; dört köşe
       de yuvarlanmazsa alt kenar kesik görünüyor. */
    border-radius: var(--to-r);
    box-shadow: rgba(6, 21, 60, 0.42) 0 22px 60px 0;
}

/* Telefon SOLA ve ALTA yaslı: referansta da cihazın alt kenarı pencerenin
   alt kenarından taşıyor, derinlik hissini bu taşma veriyor. */
.to-mo-telefon {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 28%;
}

/* --------------------------------------------------------------------------
   3. KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 900'de `.to-ikili` tek kolona düşüyor; asimetrik kolon oranı da birlikte
   kalkmalı — bu kural 00-temel'deki tek kolonlu kuraldan SONRA geliyor,
   yoksa iki kolonu geri getirirdi. */
@media (max-width: 900px) {
    .to-mo-ikili { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .to-mo-yigin { max-width: 640px; }
}

/*
 * 720'nin altında oranlar değişiyor.
 * ÖLÇÜ: 700px'lik görüntü alanında yığın ~640px ve telefon %28 = 179px —
 * hâlâ okunur. 560px'de yığın ~530px'e, telefon 148px'e iner; 380px'de
 * telefon 95px olur ve 900×1800'lük kare 95×190 çizilir: vitrinin başlığı
 * da ürün kartı da seçilemez. Dar ekranda ASIL ANLATILAN cihaz telefon
 * olduğu için oran ters çevriliyor — telefon büyür, pencere küçülür.
 */
@media (max-width: 720px) {
    .to-mo-yigin { aspect-ratio: 16 / 11.7; }   /* telefon 0,72·W */
    .to-mo-pencere { width: 76%; }
    .to-mo-telefon { width: 36%; }
}

@media (max-width: 420px) {
    .to-mo-yigin { aspect-ratio: 16 / 13.7; }   /* telefon 0,84·W */
    .to-mo-pencere { width: 72%; }
    .to-mo-telefon { width: 42%; }
}

/* ==========================================================================
   4. KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): bu bölümdeki HER `<p>` ve `<ul>`
   ögesinin `margin-top`/`margin-bottom` değeri 0px çıkıyordu — kendi
   kurallarım da, 00-temel'in `.to-ustluk` (0 0 10px) ve `.to-lead`
   (20px 0 0) kuralları da uygulanmıyordu.

   SEBEP kabuk stil dosyasında:
       shop-tema-demolari.css → `.td-govde h1, h2, h3, p, ul, figure { margin: 0 }`
   `<body class="td-govde">` olduğu için bu seçici sayfadaki tüm p/ul'lere
   uyuyor ve özgüllüğü (0,1,1); `.to-pf-dip` gibi tek sınıflı seçiciler (0,1,0)
   ondan DÜŞÜK. Üstelik kabuk dosyası bu sayfanın dosyasından SONRA yükleniyor,
   yani eşit özgüllükte de kaybediliyor.

   Ne `00-temel.css` ne `shop-tema-demolari.css` bu göreve açık (sözleşme 11.
   madde), bu yüzden düzeltme bölümün kendi köküyle (0,2,0) ve yalnız bu
   bölüme yapılıyor. Değerler uydurulmadı: 00-temel'in kendi yazdığı ölçüler
   geri veriliyor.

   NOT — bu kusur SAYFANIN TAMAMINDA var (01–10 bölümleri de aynı şekilde
   etkileniyor); burada yalnız bu bölüm onarıldı.
   ========================================================================== */
.to-mo .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-mo .to-lead { margin: 20px 0 0; }          /* 00-temel'in değeri */
.to-mo .to-cipler { margin: 26px 0 0; }        /* 00-temel'in değeri */
.to-mo .to-mo-eylem { margin: 30px 0 0; }

/* ─────────── 13-performans.css ─────────── */
/* ==========================================================================
   13 — PERFORMANS  (turkuaz bant)   ·  önek `.to-pf-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/12-performans.png.
   Alınan düzen: turkuaz zemin · SOLDA metin + ölçüm aracı künyesi · SAĞDA
   yumuşak bir dairenin önünde dağılmış (kaydırılmış) metrik kartları.

   ------------------------------------------------------------------------
   KONTRAST — BU BÖLÜMÜN EN ÖNEMLİ ÖLÇÜSÜ
   ------------------------------------------------------------------------
   Referansın turkuazı #068fa5. WCAG bağıl parlaklıkla hesaplandığında bu ton
   ÜZERİNDE hiçbir metin rengi 4,5:1'i geçmiyor:
        beyaz  / #068fa5 = 3,83:1        (24px+ ya da 18,66px+700 gerekir)
   00-temel bu kusuru kopyalamamak için aynı tonu koyultmuş:
        --to-turkuaz      = #05788e   ·  beyaz / #05788e = 5,14:1   ✔ AA
        --to-turkuaz-koyu = #04606f   ·  beyaz / #04606f = 7,22:1   ✔ AA
   Bölümün zemini bu yüzden #05788e ve gövde metni BEYAZ (5,14:1) — 24px
   koşuluna hiç ihtiyaç kalmıyor, dip not bile 15px kalabiliyor.

   Bandın üstlük ve lead rengi de 00-temel'den geliyor ve ÖLÇÜLDÜ:
        #eafaff / #05788e = 4,80:1   ✔ AA
   Bu dosyada önce bölüme özgü bir ezme vardı (#f4feff, 5,01:1); 00-temel
   eşiği geçen bir değer verdiği için KALDIRILDI — aynı kararın iki yerde
   durması ileride yalnız birinin güncellenmesi demekti.

   KART İÇİ (beyaz zemin, hesaplandı):
        #0e3b46 / #ffffff = 12,12:1   kart adı ve döküm değerleri
        #04606f / #ffffff =  7,22:1   büyük LCP sayısı
        #4b5563 / #ffffff =  7,56:1   etiketler
   KÜNYE (koyu katman #04606f, hesaplandı):
        #ffffff / #04606f =  7,22:1   değerler
        #bfeaf2 / #04606f =  5,59:1   etiketler
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. İKİ KOLON
   Kart kolonu metinden geniş: içinde üç kart kaydırmalı duruyor.
   -------------------------------------------------------------------------- */
.to-pf-ikili {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
}

.to-pf-baslik { margin-bottom: 0; max-width: none; }
.to-pf-eylem { margin: 28px 0 0; }
.to-pf-eylem .to-btn svg { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   2. ÖLÇÜM KÜNYESİ
   Referansın "Google PageSpeed Insights" künyesinin yerinde duruyor ama
   içeriği bir marka değil, ölçümün NASIL alındığı. Marka logosu basılmaz
   (sözleşme 2. kural) — künye METİN + çekirdek `settings` ikonu.
   -------------------------------------------------------------------------- */
.to-pf-kunye {
    margin: 28px 0 0;
    padding: 18px 20px;
    border-radius: var(--to-r);
    /* Koyu katman: metni 5,14:1'den 7,22:1'e çıkarıyor ve künyeyi bandın
       gövde metninden ayırıyor. */
    background: var(--to-turkuaz-koyu);
}

.to-pf-kunye__ust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.to-pf-kunye__ust svg { flex: 0 0 auto; color: #bfeaf2; }

.to-pf-kunye__liste { margin: 0; }

.to-pf-kunye__satir {
    display: grid;
    /* Etiket kolonu sabit px DEĞİL: "Kaynak" satırının değeri uzun ve
       daralınca kırılması gerekiyor. minmax(0,1fr) hücrenin en küçük
       genişliğini sıfırlar, uzun sözcük kolonu şişiremez. */
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 10px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 20px;
}

.to-pf-kunye__satir + .to-pf-kunye__satir { border-top: 1px solid rgba(255, 255, 255, 0.12); }

.to-pf-kunye dt { color: #bfeaf2; }          /* #04606f üzerinde 5,59:1 */
.to-pf-kunye dd { margin: 0; color: #fff; }  /* #04606f üzerinde 7,22:1 */

/* --------------------------------------------------------------------------
   3. METRİK KARTLARI — dağınık yerleşim
   -------------------------------------------------------------------------- */

/*
 * Referansın kartları bir dairenin çevresine dağılmış. Daire burada
 * ::before ile çiziliyor — SÜS olduğu için sözde ögede duruyor, DOM'a
 * anlamsız bir <div> girmiyor ve ekran okuyucu onu hiç görmüyor.
 * Konum `inset` yüzdesiyle verildiği için kutunun boyundan bağımsız.
 */
.to-pf-kartlar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.to-pf-kartlar::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 8%;
    z-index: 0;
    width: 76%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    pointer-events: none;
}

.to-pf-kart {
    position: relative;
    z-index: 1;
    padding: 18px 20px 16px;
    border-radius: var(--to-r);
    background: #fff;
    /* 00-temel'in kart gölgesi rgb(234,234,234) — turkuaz zeminde görünmez.
       Bantta gölge koyulaştırıldı, yoksa kartlar zeminden ayrılmıyordu. */
    box-shadow: rgba(2, 40, 48, 0.32) 0 16px 44px 0;
    color: var(--to-metin);
}

/*
 * DAĞINIKLIK `position: absolute` ile DEĞİL, ızgara içinde kaydırmayla
 * kuruldu. Mutlak konumla yapılsaydı kutu yüksekliği içerikten gelemez,
 * kartların metni uzayınca üst üste binerdi (ölçüm adları veriden geliyor,
 * uzunlukları sabit değil). Kaydırma yalnız görsel: `margin` düzeni
 * gerçekten iteliyor, hiçbir kart bir diğerinin altında kaybolmuyor.
 *
 * 3 kart / 2 kolon dizilimi: (1,1) (1,2) (2,1). İkinci kart aşağı, üçüncü
 * kart yukarı çekilerek referanstaki basamaklı görüntü elde ediliyor.
 */
.to-pf-kart--1 { margin-top: 0; }
.to-pf-kart--2 { margin-top: 64px; }
.to-pf-kart--3 { margin-top: -28px; }

.to-pf-kart__ad {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: #0e3b46;                 /* beyaz üzerinde 12,12:1 */
}

.to-pf-kart__buyuk {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 8px 0 0;
    color: var(--to-turkuaz-koyu);  /* #04606f — beyaz üzerinde 7,22:1 */
}

.to-pf-kart__sayi {
    font-size: clamp(30px, 3vw, 38px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.to-pf-kart__birim {
    font-size: 15px;
    line-height: 1;
    font-weight: 600;
}

.to-pf-kart__etiket {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 17px;
    color: #4b5563;                 /* beyaz üzerinde 7,56:1 */
}

/* --------------------------------------------------------------------------
   4. KART İÇİ DÖKÜM
   -------------------------------------------------------------------------- */
.to-pf-dokum {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid #e9eef1;
}

.to-pf-dokum__satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    line-height: 19px;
}

.to-pf-dokum dt { color: #4b5563; }

.to-pf-dokum dd {
    margin: 0;
    font-weight: 600;
    color: #0e3b46;
    /* Sayı sütunu göz için hizalı kalsın; tablo değil, iki uçlu satır. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. DİP NOT — sayıların NE DEMEK OLMADIĞI
   -------------------------------------------------------------------------- */
/* ÖLÇÜLDÜ: üst boşluk `.to-ikili`nin UZUN kolonuna göre düşüyor. 1440px'te
   uzun kolon SOL kolon (künye + düğme) ve 64px'lik boşlukta dip not düğmenin
   20px altına yapışıyordu. 88px ölçülen ayrımı veriyor. */
.to-pf-dip {
    max-width: 900px;
    margin: clamp(48px, 6vw, 88px) auto 0;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    color: #fff;                    /* #05788e üzerinde 5,14:1 */
}

/* --------------------------------------------------------------------------
   6. KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 1100'de kartların basamaklanması azaltılıyor: kolon 250px'e inince 64px'lik
   kaydırma bandın alt boşluğunu yiyip son kartı dip notun üstüne yapıştırıyor. */
@media (max-width: 1100px) {
    .to-pf-kart--2 { margin-top: 40px; }
    .to-pf-kart--3 { margin-top: -16px; }
}

/* 900'de `.to-ikili` tek kolona düşüyor; asimetrik kolon oranı da birlikte
   kalkmalı — bu kural 00-temel'in tek kolonlu kuralından SONRA geliyor. */
@media (max-width: 900px) {
    .to-pf-ikili { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/*
 * 560'ın altında kartlar tek kolona düşüyor (00-temel'in `.to-izgara--2`
 * mantığı burada elle kuruluyor çünkü bu ızgara `.to-izgara` değil).
 * Kaydırmalar da SIFIRLANIYOR: tek kolonda "basamak" diye bir şey yok,
 * negatif margin yalnız kartları birbirine yapıştırırdı.
 */
@media (max-width: 560px) {
    .to-pf-kartlar { grid-template-columns: minmax(0, 1fr); }

    .to-pf-kart--1,
    .to-pf-kart--2,
    .to-pf-kart--3 { margin-top: 0; }

    /* Daire tek kolonda kartların arkasında değil, uzun bir sütunun yanında
       kalıyordu — kaldırıldı. */
    .to-pf-kartlar::before { display: none; }
}

@media (max-width: 420px) {
    .to-pf-kunye { padding: 16px; }
    .to-pf-kunye__satir { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ==========================================================================
   7. KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): bu bölümdeki HER `<p>` ve `<ul>`
   ögesinin `margin-top`/`margin-bottom` değeri 0px çıkıyordu — kendi
   kurallarım da, 00-temel'in `.to-ustluk` (0 0 10px) ve `.to-lead`
   (20px 0 0) kuralları da uygulanmıyordu.

   SEBEP kabuk stil dosyasında:
       shop-tema-demolari.css → `.td-govde h1, h2, h3, p, ul, figure { margin: 0 }`
   `<body class="td-govde">` olduğu için bu seçici sayfadaki tüm p/ul'lere
   uyuyor ve özgüllüğü (0,1,1); `.to-pf-dip` gibi tek sınıflı seçiciler (0,1,0)
   ondan DÜŞÜK. Üstelik kabuk dosyası bu sayfanın dosyasından SONRA yükleniyor,
   yani eşit özgüllükte de kaybediliyor.

   Ne `00-temel.css` ne `shop-tema-demolari.css` bu göreve açık (sözleşme 11.
   madde), bu yüzden düzeltme bölümün kendi köküyle (0,2,0) ve yalnız bu
   bölüme yapılıyor. Değerler uydurulmadı: 00-temel'in kendi yazdığı ölçüler
   geri veriliyor.

   NOT — bu kusur SAYFANIN TAMAMINDA var (01–10 bölümleri de aynı şekilde
   etkileniyor); burada yalnız bu bölüm onarıldı.
   ========================================================================== */
.to-pf .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-pf .to-lead { margin: 20px 0 0; }          /* 00-temel'in değeri */
.to-pf .to-pf-kunye { margin: 28px 0 0; }
.to-pf .to-pf-eylem { margin: 28px 0 0; }
.to-pf .to-pf-kart__buyuk { margin: 8px 0 0; }
.to-pf .to-pf-kart__etiket { margin: 6px 0 0; }
.to-pf .to-pf-dip { margin: clamp(48px, 6vw, 88px) auto 0; }

/* ─────────── 14-kurulum.css ─────────── */
/* ==========================================================================
   14 — TEMAYI UYGULAMA   ·  önek `.to-kr-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/13-magaza-kur.png (pembe zemin #f3eaed, ORTALANMIŞ:
   başlık → ortada tek büyük ekran → altta dört tikli madde).

   REFERANSTAN AYRILDIĞIMIZ YERLER
   1. Referansın ekranın çevresine serptiği 3B ikonlar (çanta, sepet) ve
      çapraz marka şeridi KOPYALANMADI. Onlar başkasının varlıkları; benzerini
      üretmek uydurma görsel olurdu. Ortadaki kare tek başına duruyor ve
      pembe zemin boşluğu zaten taşıyor.
   2. Referansın ortadaki ekranı ÜÇ katmanlı bir kolaj (kurucu paneli + vitrin
      + ayar paneli). Bizim karemiz TEK ve gerçek bir sayfa; katman
      üretilmedi.
   3. Alt maddeler referansta dört küçük tik satırı hâlinde tek sırada.
      Düzen alındı, metin alınmadı.

   ÖLÇÜLEN KISIT — KARE NEDEN 640px'i GEÇMİYOR
   Sayfa kareleri diskte 600×750 (1200×1500 görüntü alanı, DPR 2, 600px'e
   indirilmiş webp). Referansın ortadaki bloğu 1000px'in üzerinde; aynı
   genişliğe çıkılsaydı 600px'lik kaynak %70 büyütülür ve kare bulanıklaşırdı.
   Çerçeve 640px'te sınırlandı: %6,7 büyütme, ekranda ayırt edilmiyor.

   KONTRAST (pembe zemin #f3eaed üzerinde, hesaplandı)
     #222329 → 13,37:1   ·   #555555 → 6,43:1   ·   #215ada → 5,07:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   ORTADAKİ KARE
   -------------------------------------------------------------------------- */
.to-kr-figur {
    /* 640: yukarıdaki ölçülen kısıt. `max-width` — sabit genişlik değil. */
    max-width: 640px;
    margin: 0 auto;
}

.to-kr-pencere {
    /* Ölçü fişi: kart yarıçapı 12, gölge rgb(234,234,234) 0 8px 100px 0.
       `.to-pencere` üst köşeleri yuvarlıyor; burada kare pencerenin ALTINDA
       da bitiyor, o yüzden alt köşeler de kapatılıyor. */
    border-radius: var(--to-r);
    overflow: hidden;
    box-shadow: var(--to-golge);
}

.to-kr-gorsel {
    display: block;
    width: 100%;
    height: auto;
    /* HTML'deki width/height ile aynı oran — stil gelmeden de bilinsin.
       Burada `cover` YOK: sayfanın tamamı görünmeli, tema pazarının kimliği
       ızgaranın tamamında (04'teki üstten kırpma kuralı burada geçersiz). */
    aspect-ratio: 600 / 750;
    object-fit: contain;
    background: #fff;
}

.to-kr-altyazi {
    margin: 16px auto 0;
    max-width: 560px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: var(--to-govde);
}

.to-kr-bag {
    color: var(--to-mavi);
    text-underline-offset: 2px;
}

.to-kr-bag:focus-visible { outline: 3px solid var(--to-mavi); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   MEKANİZMA — iki gerçek adres
   -------------------------------------------------------------------------- */
.to-kr-mekanizma {
    display: grid;
    gap: 12px;
    max-width: 720px;
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
}

.to-kr-adim {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 6px 14px;
    text-align: center;
}

.to-kr-adim__metin {
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
}

/* Satır içi kod: pembe zeminde beyaz kutu. */
.to-kr-kod {
    padding: 2px 8px;
    border-radius: var(--to-r-kucuk);
    background: #fff;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 20px;
    /* #2f3440 / #ffffff = 12,42:1. */
    color: #2f3440;
}

.to-kr-kod--blok {
    display: inline-block;
    padding: 7px 12px;
    /* Uzun adres dar ekranda kutuyu taşırmasın: kaydırma kutusu YERİNE sarma —
       yatay kayan kutu klavyeyle odaklanabilir olmak zorundadır ve burada iki
       tane sekme sırasına girerdi. */
    max-width: 100%;
    overflow-wrap: anywhere;
    /* Bu blok kopyalanmak için var. */
    cursor: text;
    user-select: all;
}

/* Sorgu parçası ayrı okunsun. Renk TEK BAŞINA anlam taşımıyor: parça zaten
   `?` ile başlıyor ve kalın. */
.to-kr-vurgu {
    font-weight: 700;
    /* #1a4aa8 / #ffffff = 8,03:1. */
    color: var(--to-mavi-koyu);
}

/* --------------------------------------------------------------------------
   DÖRT TİKLİ MADDE  (referansın alt şeridi)
   -------------------------------------------------------------------------- */
.to-kr-maddeler {
    display: grid;
    /* `.to-cipler` kullanılmadı: o bileşen 2×2 ve 470px'le sınırlı, buradaki
       şerit ise referansta TEK SIRADA dört madde. Çip görünümü (`.to-cip`)
       aynen kullanılıyor, yalnız kapsayıcı ızgarası bu bölüme özgü. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 1100px;
    margin: 44px auto 0;
    padding: 0;
    list-style: none;
}

.to-kr-madde {
    /* Maddeler tek satıra sığmıyor (en uzunu 54 karakter); çip dikey ortalı
       kalsın diye hizalama yukarıdan alınıyor. */
    align-items: flex-start;
    padding: 10px 16px;
    text-align: left;
}

.to-kr-madde svg { margin-top: 2px; }

/* --------------------------------------------------------------------------
   KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */

/* 1100'de dört çip 265px'e iniyor; en uzun madde dört satıra çıkıyordu.
   İki kolonda satır 38 karaktere yükseliyor. */
@media (max-width: 1100px) {
    .to-kr-maddeler { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}

@media (max-width: 720px) {
    .to-kr-mekanizma { margin-top: 32px; }
    .to-kr-adim { flex-direction: column; align-items: center; }
}

@media (max-width: 560px) {
    .to-kr-maddeler { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
}

/* ─────────── 15-fiyat.css ─────────── */
/* ==========================================================================
   15 — FİYAT   ·  önek `.to-ft-`
   --------------------------------------------------------------------------
   Referans: ref-dilim/14-fiyat.png — üç kart, ortadaki yükseltilmiş +
   "POPULAR" etiketi, büyük mavi fiyat, hap düğme, tikli liste.

   REFERANSTAN AYRILDIĞIMIZ YER (tek ve büyük)
   ÜÇ KOLONLUK KADEME TABLOSU YOK. `store_themes`ta aktif 25 kaydın hepsi
   aynı fiyatta (1.190.000 / 1.590.000 kuruş; benzersiz fiyat kümesi = 1).
   Üç kart çizmek olmayan iki ürün icat etmek olurdu. Referansın ORTADAKİ
   kartının BİÇİMİ alındı — yükseltilmiş kart, rozet, büyük mavi fiyat,
   üstü çizili liste fiyatı, hap düğme, tikli özellik listesi.

   YÜKSELTME NASIL YAPILDI
   Referans ortadaki kartı komşularından `transform: translateY()` ile
   ayırıyor. Tek kart olduğu için komşu yok: yükseklik hissi DOLGUDAN
   (40/32) ve daha derin gölgeden geliyor. Kart 460px'le sınırlı — referansın
   ortadaki kartı 1440px'lik alanda benzer oranda duruyor.

   KONTRAST (beyaz zemin üzerinde, hesaplandı)
     #222329 → 14,60:1  ·  #555555 → 7,46:1  ·  #215ada → 6,32:1
     #12a150 (tik) → 3,32:1 — TEK BAŞINA ANLAM TAŞIMIYOR: her satırın metni
     zaten tam cümle, tik yalnız süs. `aria-hidden` ikonun kendisinde.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ANA KART — tek, ortalanmış, öne çıkarılmış
   -------------------------------------------------------------------------- */
.to-ft-kart {
    max-width: 460px;
    margin: 0 auto;
    padding: 40px 32px 36px;
    text-align: center;
    /* Ölçü fişindeki gölge (rgb(234,234,234) 0 8px 100px 0) BEYAZ zeminde
       neredeyse görünmüyor — bölümün zemini #f9f9f9 değil #ffffff. Kartın
       zeminden ayrılması için gölge koyulaştırıldı; yarıçap ve kenarlıksızlık
       fişteki gibi bırakıldı. */
    box-shadow: rgba(15, 23, 42, 0.10) 0 12px 48px 0;
}

.to-ft-rozet {
    margin: 0 0 18px;
}

.to-ft-ad {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--to-metin);
}

/* Üstü çizili liste fiyatı. Görme engelli kullanıcıya "Liste fiyatı" sözcüğü
   okunur (aşağıdaki `.to-ft-gizli`) — üstü çizgi TEK BAŞINA bilgi taşımaz. */
.to-ft-liste {
    margin: 14px 0 0;
    font-size: 18px;
    line-height: 24px;
    /* #6b7280 / #ffffff = 4,83:1. */
    color: #6b7280;
}

.to-ft-liste s { text-decoration-thickness: 2px; }

/* Ekran okuyucuya açık, gözden gizli. */
.to-ft-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.to-ft-fiyat {
    margin: 6px 0 0;
    /* Referansın fiyatı 40px; bölüm başlığının kalın basamağıyla (52) aynı
       aileden bir değer seçildi ve dar ekranda küçülüyor. */
    font-size: clamp(36px, 3.9vw, 52px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1px;
    color: var(--to-mavi);
}

.to-ft-periyot {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--to-govde);
}

.to-ft-btn {
    margin-top: 24px;
    /* Kartın içinde tam genişlik: referansın düğmesi de kart genişliğinde. */
    width: 100%;
}

/* --------------------------------------------------------------------------
   TİKLİ ÖZELLİK LİSTESİ
   -------------------------------------------------------------------------- */
.to-ft-liste-ozellik {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    /* Referansın listesi SOLA yaslı; kartın kalanı ortalı. Cümleler tam satır
       olduğu için ortalanmış liste okunmuyordu. */
    text-align: left;
}

.to-ft-ozellik {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
    color: var(--to-govde);
}

.to-ft-ozellik svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #12a150;
}

/* --------------------------------------------------------------------------
   İKİNCİ KART — fiyatı OLMAYAN ürün, yatay şerit
   -------------------------------------------------------------------------- */
.to-ft-yan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 32px;
    align-items: center;
    max-width: 900px;
    margin: 28px auto 0;
    padding: 26px 28px;
    /* Ana karttan SESSİZ: gölge yerine ince bir çizgi. Hiyerarşi renkle değil
       ağırlıkla kuruluyor. */
    box-shadow: inset 0 0 0 1px var(--to-cizgi);
}

.to-ft-yan__ad {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-ft-yan__aciklama {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
}

.to-ft-kod {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--to-r-kucuk);
    background: #f1f4f9;
    font-family: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
    font-size: 13px;
    line-height: 20px;
    /* #2f3440 / #f1f4f9 = 11,74:1. */
    color: #2f3440;
    overflow-wrap: anywhere;
    user-select: all;
}

.to-ft-yan__eylem { text-align: center; }

/* "İletişim" bir FİYAT DEĞİL — o yüzden fiyat gibi de görünmüyor: mavi ve
   52px değil, koyu ve 22px. Boş bir rakam alanını doldurmuyor, rakam
   olmadığını söylüyor. */
.to-ft-yan__fiyat {
    margin: 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    color: var(--to-metin);
}

.to-ft-yan__not {
    margin: 4px 0 14px;
    font-size: 13px;
    line-height: 20px;
    /* #6b7280 / #ffffff = 4,83:1. */
    color: #6b7280;
}

/* `.to-btn--cizgi` çerçevesini `currentColor`dan alıyor; beyaz kartta bu koyu
   gri olurdu. Mavi'ye çekiliyor — düğme ikincil ama yine düğme. */
.to-ft-yan__btn { color: var(--to-mavi); width: 100%; }
.to-ft-yan__btn:hover { background: #eaf1fd; }

/* --------------------------------------------------------------------------
   DİP CÜMLESİ
   -------------------------------------------------------------------------- */
.to-ft-dip {
    max-width: 680px;
    margin: 36px auto 0;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    color: var(--to-govde);
}

.to-ft-dip__bag { color: var(--to-mavi); }
.to-ft-dip__bag:focus-visible { outline: 3px solid var(--to-mavi); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   KIRILIMLAR — yalnız onaylı noktalar: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .to-ft-yan {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .to-ft-yan__eylem { text-align: left; }
}

@media (max-width: 420px) {
    .to-ft-kart { padding: 28px 20px 26px; }
    .to-ft-yan { padding: 22px 20px; }
}

/* ==========================================================================
   MAĞAZA PAKETLERİ — sonradan eklenen blok
   --------------------------------------------------------------------------
   Bölüm ilk yazıldığında elimizdeki tek gerçek fiyat tema fiyatıydı.
   `packages` tablosundaki yayınlanan 5 kademeli liste sonradan bulundu ve
   tohum artığı olmadığı doğrulandı; referansın çok kademeli fiyat bloğu
   ancak bu veriyle DÜRÜSTÇE kurulabiliyor.
   ========================================================================== */
.to-ft-paketler-blok { margin: 56px 0 0; }

.to-ft-paketler__ad {
    margin: 0;
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--to-metin);
}

.to-ft .to-ft-paketler__metin {
    /* Bölümün kendi `.to-ft p` kuralı sola yaslıyordu; ortalama bu blokta
       başlıkla hizalı olmalı (ölçüldü: paragraf sola kayıyordu). */
    margin: 6px auto 24px;
    max-width: 620px;
    text-align: center;
    font-size: 15px;
    line-height: 24px;
    color: var(--to-govde);
}

.to-ft-paketler {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 12px 0 0;   /* rozet kartın üstüne taşıyor, yer bırak */
    list-style: none;
    align-items: stretch;
}

.to-ft-paket {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 18px;
    border-radius: var(--to-r);
    background: #fff;
    box-shadow: var(--to-golge);
    text-align: center;
}

/* Öne çıkan kartta `transform` KULLANILMADI: transform yeni bir yığın
   bağlamı açıyor ve mutlak konumlu rozeti kartın kutusuna hapsediyordu
   (ölçüldü). Vurgu halka ile veriliyor. */
.to-ft-paket--one {
    background: #f6f9ff;
    box-shadow: 0 0 0 2px var(--to-mavi), var(--to-golge);
}

.to-ft-paket__rozet {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: var(--to-r-hap);
    background: var(--to-mavi);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.to-ft-paket__ad {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--to-metin);
}

.to-ft-paket__liste {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 18px;
    /* #6b7280 beyaz üzerinde 4,83:1 — geçer. */
    color: #6b7280;
}

.to-ft-paket__fiyat {
    margin: 2px 0 0;
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--to-mavi);
}

.to-ft-paket__periyot {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--to-govde);
}

.to-ft-paket__adet {
    margin: auto 0 0;
    padding-top: 14px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    color: #565d6a;
}

@media (max-width: 1100px) {
    .to-ft-paketler { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 720px) {
    .to-ft-paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .to-ft-paketler { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────── 16-yerlesik-ozellikler.css ─────────── */
/* ==========================================================================
   16 — YERLEŞİK ÖZELLİKLER (20 bayrak ızgarası)
   --------------------------------------------------------------------------
   REFERANSIN DÜZENİ, ölçülerek alındı (getunimart.com "In-Built Features",
   1440px görüntü alanı + tam sayfa karesinden piksel örnekleme):

     karo          zemin YOK (rgba(0,0,0,0)), kenarlık YOK, yarıçap YOK
     ikon kabı     KESİKLİ DAİRE — yuvarlak kare değil, içi şeffaf
     ad            20 / 32 / 500  #222329   (bizde 17px, gerekçe aşağıda)
     mikro etiket  180 × 24 · zemin #E9F1FC · 12px/500 · r4 · BÜYÜK HARF
     ızgara        5 kolon

   BU DOSYA BİR KEZ BOZULDU: ölü kuralları ayıklamak için yazdığım toplu
   düzenleme, yorum bloklarını seçici sanıp CANLI kuralları da sildi ve
   parantez dengesini bozdu (36 açılan / 34 kapanan) — tarayıcı ilk hatadan
   sonrasını atınca bölüm tamamen stilsiz kaldı. Dosya o yüzden sıfırdan
   yazıldı; artık yalnız işaretlemede GERÇEKTEN bulunan yedi sınıf var:
   to-yo · to-yo-izgara · to-yo-karo · to-yo-daire · to-yo-ad ·
   to-yo-etiket · to-yo-not · to-yo-eylem.

   RENK YALNIZ SÜS: karonun anlamı ikonun altındaki ADDA. Renk körlüğü olan
   bir okuyucu hiçbir bilgi kaybetmez; renk yalnız bayrakların birlikte
   açılma öbeğini pekiştiriyor.
   ========================================================================== */

.to-yo-izgara {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.to-yo-karo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    /* Referansta karonun kendi zemini ve gölgesi YOK — ikon doğrudan
       bölümün zemininin üstünde duruyor. */
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    text-align: center;
}

/* KESİKLİ DAİRE. Çizgi çok açık (#dcdee2, bölüm zemininde 1,17:1) ama bu bir
   SINIR değil SÜS: hiçbir bilgi taşımıyor, WCAG 1.4.11 kapsamına girmez. */
.to-yo-daire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px dashed #dcdee2;
    background: transparent;
    /* Simge artık kendi renklerini TAŞIYOR (dolu gövde + gradyan); `color`
       ile boyanmıyor. Eski tek renk çizgi ikonlarda gerekliydi. */
}

.to-yo-daire .to-ik { display: block; }

.to-yo-ad {
    font-size: 17px;
    line-height: 26px;
    font-weight: 500;
    color: var(--to-metin);
    /* Referansta ad 20/32. Bizim etiketlerimiz Türkçe ve çok daha uzun
       ("Desi (hacimsel ağırlık) ile kargo ve ağır ürün nakliyesi"); 20px'te
       dört satıra çıkıp ızgarayı bozuyordu. 17px'te en uzunu üç satırda
       kalıyor. `balance` satır kırılmalarını dağıtır, satır SAYISINI
       değiştirmez — karo yüksekliği ve CLS etkilenmez. */
    text-wrap: balance;
}

.to-yo-etiket {
    display: block;
    width: 100%;
    /* Ad bir, iki ya da üç satır olabiliyor; etiket satır boyunca AYNI
       hizada bitsin diye kalan boşluğu yukarıdan yer. */
    margin-top: auto;
    padding: 4px 8px;
    border-radius: 4px;
    background: #e9f1fc;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Referansın #7A9CE9 rengi kendi zemininde 2,26:1 — METİN için yetersiz.
       Bu etiket GERÇEK bir sayı taşıyor (kaç pakette açık), süs değil; bu
       yüzden referansın kusuru kopyalanmadı: #3f63b5 → 4,86:1. */
    color: #3f63b5;
}

/* AİLE RENKLERİ — anahtarlar canlı çıktıdan okundu, tahmin edilmedi.
   Karşıtlıklar bölüm zemininde (#f9f9f9), gösterge eşiği 3:1. */
.to-yo-karo[data-aile="olcu"]     { --to-yo-renk: #1a4aa8; }  /* 8,26:1 */
.to-yo-karo[data-aile="tarti"]    { --to-yo-renk: #0a7a4a; }  /* 4,97:1 */
.to-yo-karo[data-aile="siparis"]  { --to-yo-renk: #a94b06; }  /* 5,52:1 */
.to-yo-karo[data-aile="cihaz"]    { --to-yo-renk: #5b2fbe; }  /* 8,09:1 */
.to-yo-karo[data-aile="cekirdek"] { --to-yo-renk: #b02a6b; }  /* 5,86:1 */

/* --------------------------------------------------------------------------
   KAPANIŞ NOTU VE EYLEM
   -------------------------------------------------------------------------- */
.to-yo-not {
    max-width: 720px;
    /* Son satırın mikro etiketiyle nota 48px kalıyordu ve not ızgaraya
       yapışık duruyordu; ızgara oluğu (40px) kadar daha nefes verildi. */
    margin: 88px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    color: var(--to-govde);
}

.to-yo-not strong { color: var(--to-metin); }

.to-yo-eylem {
    margin: 24px 0 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı noktalar
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .to-yo-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .to-yo-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
    .to-yo-daire { width: 76px; height: 76px; }
}

@media (max-width: 720px) {
    .to-yo-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
    .to-yo-izgara { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ─────────── 17-wordpress.css ─────────── */
/* ==========================================================================
   17 — WORDPRESS TEMALARI  (koyu zemin)
   --------------------------------------------------------------------------
   Referans karesi: ref-dilim/16-her-sey.png — siyah zemin, 4 kolonluk koyu
   kart ızgarası, kartta görsel + ad + iki satır metin.

   BU BÖLÜMDE GÖRSEL YOK (gerekçe Blade başlığında: tescilli logo + karesi
   yayımlanmayan tema). Referansın kartında görselin kapladığı ~110px'lik
   dikey alanın yerini KART DOLGUSU değil, temanın kendi iki renginden
   oluşan 4px'lik bir şerit aldı. Böylece 30 kart birbirinden ayrışıyor ve
   ızgara "30 boş kutu" gibi görünmüyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   IZGARA
   --------------------------------------------------------------------------
   `.to-izgara--4` 1289px'lik kapsayıcıda hücreyi 304px yapıyor (referansın
   ölçülen kolon genişliği de 304,25). En uzun kart metni "Kahve ve Kahve
   Ekipmanı" (23 karakter) ve 15px'te iki satıra sığıyor.
   -------------------------------------------------------------------------- */
.to-wp-izgara {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --------------------------------------------------------------------------
   KART
   --------------------------------------------------------------------------
   Zemin ve iç çizgi `.to-bolum--koyu .to-kart` kuralından geliyor; burada
   yalnız dolgu, hizalama ve şeridin yeri var.

   `min-height` YOK: kartların 5'inde künye "Çekirdek palet", kalanında
   sektör adı; ikisi de tek satır ya da iki satır. Izgara satırları zaten
   birbirini hizalıyor (grid), sabit yükseklik yazmak boşuna kısıt olurdu.
   -------------------------------------------------------------------------- */
.to-wp-kart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;               /* şerit kartın 12px yarıçapını taşmasın */
    /* üst dolgu şeridin 6px'ini kapsar: 20 + 6 = 26 */
    padding: 26px 20px 20px;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.to-wp-kart:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* İki renk, ORTADAN sert geçişle. Gradyan yerine sert durak seçildi:
   yumuşak geçişte iki ton ortada birbirine karışıyor ve temanın gerçek
   belirteçleri yerine var olmayan üçüncü bir renk okunuyordu.

   YÜKSEKLİK 6px VE AÇIK HALKA — ÖLÇÜLMÜŞ DÜZELTME
   İlk sürüm 4px'ti ve halkası yoktu. Karede görüldü: 30 temanın 9'unda
   `--primary` neredeyse siyah (İpek #000000, Quick #000000, Tempo #0b0b0f,
   Meniac #111111, Rotor #16191d, Tunga #1c1c22, Mala #1c1a17, Lale #241c1e,
   Nordika #2f2c28). Koyu kart zemininde bu yarı KAYBOLUYOR ve şerit yarım
   basılmış gibi, yani hatalı görünüyordu. Renk yalanlanmadı — açık bir
   halka eklendi: bandın sınırı belli olunca koyu yarı "yok" değil "koyu"
   okunuyor. */
.to-wp-serit {
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: linear-gradient(
        90deg,
        var(--to-wp-birincil, transparent) 0 50%,
        var(--to-wp-vurgu, transparent) 50% 100%
    );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* --------------------------------------------------------------------------
   KART TİPOGRAFİSİ
   --------------------------------------------------------------------------
   KONTRAST — kart zemini koyu bölümün en AÇIK yerinde bile
   `rgba(255,255,255,.05)` katmanıyla ~#16264a (bağıl parlaklık 0,020):
     #ffffff  → 21,00:1
     #c8d4ea  → 11,45:1
     #b0bcd4  →  7,82:1   ← ürün kodu bu tonda
   Kenarlarda zemin siyaha indiği için oranlar yalnız yükseliyor.
   -------------------------------------------------------------------------- */
.to-wp-ad {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    color: #fff;
}

.to-wp-kunye {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #c8d4ea;
}

.to-wp-urun {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 18px;
}

/* Ürün kodu tek parça okunmalı: `cea-organifresh-wp` bölünürse kod olarak
   okunamaz olur. Taşma yerine kaydırma seçildi çünkü 304px'lik hücrede
   en uzun kod (18 karakter, 12px mono ≈ 130px) rahat sığıyor. */
.to-wp-kod {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    color: #b0bcd4;
    white-space: nowrap;
}

/* Açık zeminli bloklarda (bu bölümde yok ama lead içinde kod geçiyor)
   aynı ton koyu zemine göre ayarlı kalsın diye lead içindeki kod ayrı. */
.to-lead .to-wp-kod { color: #dbe4f5; }

/* Ekran okuyucuya "Ürün kodu:" der, gözle görünmez. `display: none` DEĞİL —
   o okuyucudan da gizlerdi ve kod bağlamsız kalırdı. */
.to-wp-gizli {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   ORTAK SÜRÜM SATIRI
   --------------------------------------------------------------------------
   30/30 temada aynı olduğu ölçüldüğü için kartta değil burada, bir kez.
   -------------------------------------------------------------------------- */
.to-wp-surum {
    margin: 28px auto 0;
    max-width: 780px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #c8d4ea;
}

.to-wp-surum__ad { font-weight: 600; color: #fff; }

/* --------------------------------------------------------------------------
   LİSANS BLOĞU
   --------------------------------------------------------------------------
   Metin ve düğme yan yana. Referansın bu bölümünde kapanış düğmesi yok;
   eklendi çünkü sayfanın bu noktasında okuyucunun elinde WordPress
   sorusuna karşılık verecek TEK yol iletişim — kartlar tıklanamaz.
   -------------------------------------------------------------------------- */
.to-wp-lisans {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 48px;
    padding: 32px;
    border-radius: var(--to-r);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.to-wp-lisans__metin {
    flex: 1 1 auto;
    min-width: 0;      /* uzun kod satırı kutuyu şişirmesin */
    margin: 0;
    font-size: 16px;
    line-height: 27px;
    color: #c8d4ea;
}

.to-wp-lisans__metin strong { color: #fff; }

.to-wp-eylem { flex: 0 0 auto; margin: 0; }

/* --------------------------------------------------------------------------
   DİP NOT — görselin NİÇİN olmadığı okuyucuya da söyleniyor
   -------------------------------------------------------------------------- */
.to-wp-dip {
    margin: 24px auto 0;
    max-width: 780px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #a3b1cb;   /* koyu bölüm zemininde (#081738) 8,79:1 */
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .to-wp-lisans {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
    }

    /* `.to-btn { width: 100% }` 720'de zaten devreye giriyor; kapsayıcının
       da tam genişlik olması gerekiyor yoksa düğme kutusuna sığar. */
    .to-wp-eylem { display: block; }
}

/* 560'ta temel ızgara `--4`ü TEK kolona indiriyor. Bu kartlar üç satır
   metinden ibaret (görsel yok); tek kolonda 30 kart 30 uzun blok oluyor ve
   bölüm gereksiz uzuyordu. İki kolonda kart 150px'e iniyor ve en uzun
   künye ("Kahve ve Kahve Ekipmanı") 14px'te üç satırda bitiyor. */
@media (max-width: 560px) {
    .to-wp-izgara.to-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .to-wp-kart { padding: 20px 14px 16px; }
    .to-wp-ad { font-size: 16px; }
}

/* 420'de iki kolonda hücre 130px'in altına iniyor; ürün kodu (12px mono,
   ~130px) taşıyor. Tek kolona düşülüyor. */
@media (max-width: 420px) {
    .to-wp-izgara.to-izgara--4 { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .to-wp-kart { transition: none; }
    .to-wp-kart:hover { transform: none; }
}

/* ==========================================================================
   KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): `.to-wp-dip` için `margin-left` /
   `margin-right` 0px çıkıyor, yani `margin: 24px auto 0` uygulanmıyor ve
   860px'lik metin ortalanmak yerine kapsayıcının SOLUNA yapışıyordu.

   SEBEP kabuk stil dosyasında:
       shop-tema-demolari.css → `.td-govde h1, h2, h3, p, ul, figure { margin: 0 }`
   `<body class="td-govde">` olduğu için bu seçici sayfadaki tüm p/ul'lere
   uyuyor; özgüllüğü (0,1,1) ve tek sınıflı seçicilerim (0,1,0) ondan düşük.
   Üstelik kabuk dosyası bu sayfanınkinden SONRA yükleniyor, yani eşit
   özgüllükte de kaybediyorlar. Aynı kusur 00-temel'in `.to-ustluk` ve
   `.to-lead` kurallarını da düşürüyor.

   `00-temel.css` ve `shop-tema-demolari.css` bu göreve kapalı (sözleşme 11.
   madde), bu yüzden düzeltme bölümün kendi köküyle (0,2,0) ve YALNIZ bu
   bölüme yapılıyor. Değerler uydurulmadı: 00-temel'in kendi ölçüleri geri
   veriliyor. Aynı onarım 12-mobil-once.css'te de var — kusur sayfa
   genelinde.
   ========================================================================== */
.to-wp .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-wp .to-lead { margin: 20px 0 0; }          /* 00-temel'in değeri */
.to-wp .to-wp-urun { margin: 4px 0 0; }
.to-wp .to-wp-surum { margin: 28px auto 0; }
.to-wp .to-wp-dip { margin: 24px auto 0; }

/* ─────────── 18-sss.css ─────────── */
/* ==========================================================================
   18 — SIKÇA SORULANLAR  (lavanta zemin, #f4f2ff)
   --------------------------------------------------------------------------
   Referans karesi: ref-dilim/18-sss.png — lavanta zemin, ortalanmış başlık,
   beyaz akordeon kartları (ilki açık), sağda daire içinde ok, kartlar
   arasında 12px boşluk, kart yarıçapı 12px.

   Akordeon `<details>/<summary>`. JAVASCRIPT YOK: açma/kapama, klavye,
   ekran okuyucu bildirimi ve Ctrl+F ile kapalı panelin içinde arama
   tarayıcıdan geliyor. Bu yüzden aşağıda hiçbir `aria-expanded` /
   `role="button"` taklidi yok — `<summary>` zaten o rolü taşıyor ve elle
   yazılan ARIA onu bozardı.

   KONTRAST (lavanta #f4f2ff ve kart beyazı üzerinde, hesaplandı):
     #222329 / #ffffff → 15,25:1   soru metni
     #555555 / #ffffff →  7,40:1   cevap metni
     #215ada / #f4f2ff →  5,52:1   üstlük ve bağlantılar
   ========================================================================== */

/* --------------------------------------------------------------------------
   LİSTE
   --------------------------------------------------------------------------
   Referansın kart aralığı 12px ölçüldü; sayfanın 24px'lik standart oluğu
   (--to-oluk) burada KULLANILMIYOR çünkü akordeon satırları tek bir liste
   gibi okunmalı, ayrı kartlar gibi değil.

   Genişlik 860px: soruların en uzunu 46 karakter, cevapların en uzunu 470
   karakter. 1289px'lik tam genişlikte cevap satırı ~140 karaktere çıkıyordu;
   okunabilir satır uzunluğu 45–90 karakterdir. 860px'te satır ~95 karakter,
   16px gövdede rahat izleniyor.
   -------------------------------------------------------------------------- */
.to-ss-liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
}

.to-ss-oge {
    border-radius: var(--to-r);
    background: #fff;
    box-shadow: var(--to-golge);
}

/* --------------------------------------------------------------------------
   SORU (summary)
   -------------------------------------------------------------------------- */
.to-ss-soru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* Dokunma hedefi: 20 + 24 (satır) + 20 = 64px, WCAG 2.5.5'in 44px
       eşiğinin üstünde. Referansın satır yüksekliği 68px ölçüldü. */
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;             /* varsayılan üçgen işareti */
    font-size: 17px;
    line-height: 26px;
    font-weight: 600;
    color: var(--to-metin);
}

/* WebKit'in kendi işaretçisi ayrıca gizlenmeli — `list-style` orada
   çalışmıyor. */
.to-ss-soru::-webkit-details-marker { display: none; }

.to-ss-soru:hover { color: var(--to-mavi); }

/* Odak halkası KARTIN tamamına: summary satır kutusu kartla aynı genişlikte
   ama köşe yarıçapı yok; halka kartın yarıçapını izlesin diye offset
   veriliyor. */
.to-ss-soru:focus-visible {
    outline: 3px solid var(--to-mavi);
    outline-offset: 2px;
    border-radius: var(--to-r);
}

.to-ss-soru__metin { flex: 1 1 auto; min-width: 0; }

/* Daire içinde ok — referansın sağdaki düğmesi. Süs değil: açık/kapalı
   durumu tarayıcı tarafından zaten seslendiriliyor, bu yalnız GÖRSEL
   ipucu, o yüzden aria-hidden. */
.to-ss-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0eefb;
    color: var(--to-mavi);
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.to-ss-oge[open] .to-ss-ikon {
    transform: rotate(180deg);
    background: var(--to-mavi);
    color: #fff;
}

/* --------------------------------------------------------------------------
   CEVAP
   --------------------------------------------------------------------------
   Üst dolgu YOK, soru satırının alt dolgusu zaten 20px. Sağ dolgu ok
   dairesinin genişliği kadar fazla değil: cevap metni okun altından
   devam edebilir, referansta da öyle.
   -------------------------------------------------------------------------- */
.to-ss-cevap { padding: 0 24px 22px; }

.to-ss-cevap__metin {
    margin: 0;
    /* Soru satırıyla hizalı kalsın diye üstte ince bir ayırıcı yerine
       boşluk kullanıldı; referansın kartında da çizgi yok. */
    font-size: 16px;
    line-height: 27px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   DİP SATIRI
   -------------------------------------------------------------------------- */
.to-ss-dip {
    max-width: 860px;
    margin: 28px auto 0;
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    color: var(--to-govde);
}

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    .to-ss-soru {
        padding: 18px;
        gap: 14px;
        font-size: 16px;
        line-height: 24px;
    }

    .to-ss-cevap { padding: 0 18px 20px; }
}

/* 420px'te ok dairesi 36px + 14px boşluk = 50px, soru metnine 268px kalıyor
   ve en uzun soru dört satıra çıkıyordu. Daire küçültülmüyor (dokunma
   hedefi düşmesin diye satırın kendisi tıklanabilir), yalnız boşluk
   daraltılıyor. */
@media (max-width: 420px) {
    .to-ss-soru { gap: 10px; padding: 16px 14px; }
    .to-ss-cevap { padding: 0 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .to-ss-ikon { transition: none; }
}

/* ==========================================================================
   KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): `.to-ss-dip` ögesinin `margin-left`
   ve `margin-right` değeri 0px; `margin: 28px auto 0` uygulanmıyor ve dip
   satırı akordeon yığınıyla hizalanmak yerine kapsayıcının soluna kayıyordu.

   SEBEP: `shop-tema-demolari.css` → `.td-govde h1, h2, h3, p, ul, figure
   { margin: 0 }`. Özgüllüğü (0,1,1), tek sınıflı seçicilerimden (0,1,0)
   yüksek ve dosya bu sayfanınkinden sonra yükleniyor. 00-temel'in
   `.to-ustluk` / `.to-lead` kuralları da aynı sebeple düşüyor.

   Kabuk ve temel dosyalar bu göreve kapalı olduğu için düzeltme bölümün
   kendi köküyle (0,2,0) ve yalnız bu bölüme yapılıyor; değerler 00-temel'in
   kendi ölçüleri.
   ========================================================================== */
.to-ss .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-ss .to-lead { margin: 20px 0 0; }          /* 00-temel'in değeri */
.to-ss .to-ss-dip { margin: 28px auto 0; }

/* ─────────── 19-kapanis.css ─────────── */
/* ==========================================================================
   19 — KAPANIŞ  (koyu zemin, ortalanmış, kısa)
   --------------------------------------------------------------------------
   Referans karesi: ref-dilim/20-kapanis.png — ölçülen yükseklik 526px, yani
   sayfanın en kısa bölümü. `.to-bolum--yogun` (80px 0) tam bu ritmin
   karşılığı; ayrıca dolgu YAZILMIYOR.

   Kenar kareleri referansta sayfanın SOL ve SAĞ kenarından yarım taşıyor,
   ağır bulanık ve düşük opaklıkta. Aynı düzen kuruldu; kareler gerçek tema
   görüntüleri (840×525) ama bulanık oldukları için bilgi taşımıyorlar —
   `aria-hidden` + `alt=""` (işaretlemede).
   ========================================================================== */

.to-kp {
    position: relative;
    /* Kenar kareleri kapsayıcının dışına taşıyor; yatay kaydırma doğmasın. */
    overflow: hidden;
    text-align: center;
}

/* --------------------------------------------------------------------------
   BULANIK KENAR KARELERİ
   --------------------------------------------------------------------------
   SABİT GENİŞLİK YOK: `clamp()` ile 240–420px arası. Kapsayıcı 1320px,
   iki yanda kalan boşluk 1440px'lik görüntü alanında (1440−1320)/2 = 60px.
   Kare bu boşluğa sığmıyor — sığmasına da gerek yok, yarısı zaten dışarı
   taşıyor (referansta da öyle). `translate` ile yarıya yakını dışarıda.

   `filter: blur()` yeni bir çizim katmanı açar; `will-change` YAZILMADI —
   bu kareler hiç canlanmıyor, sürekli katman tutmanın karşılığı yok.
   -------------------------------------------------------------------------- */
.to-kp-kare {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: clamp(240px, 26vw, 420px);
    opacity: 0.4;
    filter: blur(6px);
    pointer-events: none;   /* bulanık kare tıklamayı yutmasın */
}

.to-kp-kare img {
    display: block;
    width: 100%;
    height: auto;
    /* ÖLÇÜLDÜ: -kart görüntüsü 840×525. Oran işaretlemede de beyan edildi
       (width/height), burada yalnız yedeği. */
    aspect-ratio: 840 / 525;
    border-radius: var(--to-r);
    box-shadow: var(--to-golge-koyu);
}

.to-kp-kare--sol {
    left: 0;
    transform: translate(-38%, -50%) rotate(-4deg);
}

.to-kp-kare--sag {
    right: 0;
    transform: translate(38%, -50%) rotate(4deg);
}

/* --------------------------------------------------------------------------
   GÖVDE
   --------------------------------------------------------------------------
   680px: başlığın ikinci satırı ("ürünleriniz yerinde kalarak", 26 karakter)
   ve paragrafın iki satırda bitmesi için ölçüldü. Kapsayıcının 1289px'inde
   paragraf tek satıra düşüyor ve kapanış bir cümle şeridi gibi okunuyordu.
   -------------------------------------------------------------------------- */
.to-kp-govde {
    position: relative;
    z-index: 1;    /* bulanık karelerin üstünde */
    max-width: 680px;
    margin: 0 auto;
}

/* Vurgulu sözcük — referansta marka adı mavi. Bizde marka adı değil SAYI
   vurgulanıyor: kapanışta okuyucuya söylenecek en somut şey tema sayısı.
   #7ea8f5 koyu zeminde (#081738) 8,04:1. */
.to-kp-vurgu { color: #7ea8f5; }

.to-kp-metin {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 29px;
    color: #c8d4ea;   /* siyahta 11,82:1 */
}

/* --------------------------------------------------------------------------
   DÜĞMELER
   -------------------------------------------------------------------------- */
.to-kp-eylem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

/* Geri oku düğmenin SOLUNDA olmalı — "galeriye dön" geriye götürüyor.
   `.to-btn` içeriği akış sırasında geldiği için yön işaretle veriliyor. */
.to-kp-eylem .to-btn--acik svg { order: -1; }

/* --------------------------------------------------------------------------
   KIRILIMLAR — onaylı liste: 1100 · 900 · 720 · 560 · 420
   -------------------------------------------------------------------------- */
/* 900px'in altında kapsayıcının yanında boşluk kalmıyor: kareler metnin
   ARKASINA giriyor, bulanık oldukları için kontrastı düşürüyorlar ve
   taşıdıkları bilgi sıfır. Görüntülenmiyorlar — `visibility` değil
   `display: none`, böylece görüntü dosyası da hiç indirilmiyor. */
@media (max-width: 900px) {
    .to-kp-kare { display: none; }
}

@media (max-width: 720px) {
    .to-kp-metin { font-size: 16px; line-height: 27px; }

    /* 720'de temel kural `.to-btn { width: 100% }` veriyor; düğmeler alt
       alta gelsin ve ikisi de tam genişlik olsun. */
    .to-kp-eylem { flex-direction: column; align-items: stretch; }
}

/* `prefers-reduced-motion` kuralı YAZILMADI: bu bölümde @keyframes ve
   dönüşen hiçbir öğe yok. Düğmelerin geçişini temel dosya zaten kapatıyor. */

/* ==========================================================================
   KABUK EZMESİ — `.td-govde` SIFIRLAMASININ GERİ ALINMASI
   --------------------------------------------------------------------------
   ÖLÇÜLDÜ (Playwright, computed style): bu bölümdeki `<p>` ögelerinin
   `margin-top` değeri 0px çıkıyor; ne `.to-kp-metin` (20px 0 0) ne de
   00-temel'in `.to-ustluk` (0 0 10px) kuralı uygulanıyordu — üstlük, başlık
   ve paragraf birbirine yapışıyordu.

   SEBEP: `shop-tema-demolari.css` → `.td-govde h1, h2, h3, p, ul, figure
   { margin: 0 }`; özgüllüğü (0,1,1), benimkiler (0,1,0) ve kabuk dosyası
   sonra yükleniyor. Kabuk ve temel dosyalar bu göreve kapalı olduğu için
   düzeltme bölümün kendi köküyle (0,2,0) yapılıyor.
   ========================================================================== */
.to-kp .to-ustluk { margin: 0 0 10px; }        /* 00-temel'in değeri */
.to-kp .to-kp-metin { margin: 20px 0 0; }