/* ==========================================================================
   TEMA TANITIM SAYFALARININ ORTAK KABUĞU
   --------------------------------------------------------------------------
   `shop.layouts.demolar` düzenini kullanan İKİ sayfa buradan beslenir:
     /magaza/dokumantasyon   (kendi stilleri: css/shop-dokuman.css)
     /magaza/tema-onizleme   (kendi stilleri: css/shop-tema-onizleme.css)

   Bu dosyada YALNIZ kabuk kalır: html/gövde sıfırlaması, kapsayıcı, duyuru
   şeridi, başlık çubuğu, alt bilgi, odak halkası, `.visually-hidden`.

   NİÇİN `shop-` ÖNEKLİ: tests/Feature/DuyarlilikTest.php kalite kapısı
   `public/css/shop*.css` dosyalarını tarıyor. Ad değişirse sayfa sessizce
   kapısız kalır.

   25 Ağustos 2026 — 1919 satırlık ÖLÜ KOD ÇIKARILDI. Dosya eskiden bento
   galerisinin (76–1103) ve ondan sonra eklenen `.tp-*` bloklarının
   (1925–2815) tamamını taşıyordu; tema önizleme sayfası o gün sıfırdan
   kurulunca ikisi de hiçbir işaretlemeye karşılık gelmez oldu.
   Dokümantasyon sayfasının kullandığı sınıflar tek tek çıkarılıp
   karşılaştırıldı — `dk-*` (kendi dosyasında) ve `visually-hidden` dışında
   bu iki bloktan hiçbir şey kullanmıyordu.
   ========================================================================== */
/* ==========================================================================
   12) SAYFA KABUĞU — BAŞLIK · ALT BİLGİ · ÖZEL ÇÖZÜM KUTUSU
   --------------------------------------------------------------------------
   Kaynak: getunimart.com, 1440px'de ölçüldü.

   BAŞLIK İKİ DURUMLU ÖLÇÜLDÜ, BİZ YAPIŞKAN DURUMU ALDIK:
     • Sayfa başında: şerit DÜZ SARI #fcc418, gezinme satırı TAMAMEN ŞEFFAF
       (arkasındaki koyu kahramanın üstünde), menü beyaz, satır 86px.
     • Kaydırınca: şerit MAVİ, satır BEYAZ, menü #222329, satır 72px,
       gölge rgba(0,0,0,.05) 0 4px 30px 10px, position: fixed, z-index 99.
   Bizim sayfamızda koyu bir kahraman YOK — bento doğrudan #f9f9f9 zeminde
   başlıyor. Şeffaf bir satır orada okunmazdı, o yüzden YAPIŞKAN DURUM kalıcı
   hâle getirildi. Ölçüler o durumun ölçüleridir.

   ŞERİDİN MAVİSİ referansta CSS gradyanı DEĞİL, `topbar-bg-01.webp` raster
   görselidir (background-size: cover). Referansın görseli kopyalanmadı;
   piksel örneklemesinden okunan uçlar CSS gradyanı olarak yeniden kuruldu:
     x=0 rgb(29,83,201) · x=700 rgb(17,59,154) · x=1439 rgb(5,35,104)
   Dikey olarak sabit (y=2/8/18/28/34 aynı) → saf yatay geçiş.

   ÖLÇÜ FİŞİ
     duyuru şeridi   36px · dolgu 8px 0 · metin 12/16,8/400 · bağ 12/16,8/600
                     altı çizili · ORTALI
     gezinme satırı  72px · beyaz · gölge rgba(0,0,0,.05) 0 4px 30px 10px
                     alt kenarlık YOK — ayrım yalnız gölgeyle
     kapsayıcı       1320 max-width · yatay dolgu 15,5 → iç 1289
     logo            yükseklik 32px
     menü            16px/500 · dolgu 0 10px · ögeler arası 8px · #222329
     düğme           36px · dolgu 0 32px · yarıçap 60px · #215ada
                     14px/36px/600 beyaz · hover gölge rgba(33,90,218,.3)
                     0 5px 20px 0 + translateY(-2px)
     kapsayıcı kırılımları  1440→1320 · 1200→1140 · 992→960 · 768→720 · 480→tam
   ========================================================================== */

/* SIFIRLAMA — KABUK ARTIK BAĞIMSIZ.
   Sayfa daha önce tema düzeninin içindeydi ve `box-sizing: border-box`
   sıfırlamasını ORADAN devralıyordu. Kendi kabuğuna geçince o sıfırlama
   kayboldu ve ölçüler kaydı: `.td-kap` max-width 1320 + yatay dolgu 2×15,5
   = 1351px çıktı (fişte 1320) ve duyuru şeridi 36px yerine 52px'e taştı
   çünkü metin sarmaya başladı. Ölçüldü, bu blok o yüzden var. */
.td-html,
.td-html *,
.td-html *::before,
.td-html *::after {
    box-sizing: border-box;
}

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

.td-govde h1,
.td-govde h2,
.td-govde h3,
.td-govde p,
.td-govde ul,
.td-govde figure {
    margin: 0;
}

/* ÖLÇÜLMÜŞ ÖZGÜLLÜK ARIZASI — ÇEREZ BANDININ DÜĞMELERİNİ GÖRÜNMEZ YAPIYORDU.

   Bu kural (0,1,1) ağırlığında ve `riza.css` içindeki tek sınıflı
   `.riza__dugme { color: #0b1220 }` kuralını (0,1,0) EZİYOR. Sonuç: bandın
   "Tümünü reddet" ve "Tümünü kabul et" düğmeleri beyaz zeminin üstünde
   bandın AÇIK metin rengini miras alıyor ve karşıtlık 1,05:1'e düşüyordu —
   yani iki düğme de OKUNAMIYORDU (ölçüldü, /magaza/dokumantasyon).

   Bu yalnız görsel bir kusur değil: KVKK ve AB kararları kabul ile reddin
   AYNI belirginlikte olmasını rızanın GEÇERLİLİK ŞARTI sayıyor. Okunamayan
   bir ret düğmesi o şartı düşürür.

   Bandın kendi düğmeleri hariç tutuldu; başka bileşenler kuralı kullanmaya
   devam ediyor. Dosyanın kendisi aynı arızayı daha önce `a` ve bileşen
   margin'leri için de yaşadı — tek sınıflı bileşen kuralları bu kabukta
   (0,1,1) seçicilerin altında kalıyor. */
/* İKİNCİ DIŞLAMA — `.to-` BİLEŞENLERİ (25 Ağustos 2026).
   Bu kural `:not([class*="riza__"])` eklendiğinde (0,1,1)'den (0,2,1)'e
   ÇIKTI ve artık tek sınıflı bileşen kurallarını DAHA GÜÇLÜ eziyor.
   ÖLÇÜLDÜ: `/magaza/tema-onizleme` telefon şeridine eklenen ok düğmeleri
   `.to-mb-ok { color: #0b1a33 }` (0,1,0) yazılı olmasına rağmen `inherit`
   alıyor, koyu bölümün beyazını çekiyor ve ok çizimi AÇIK zeminde
   beyaz üstüne beyaz kalıyordu — 1,16:1, yani görünmez.

   Bu, bu kabukta aynı arızanın BEŞİNCİ görülüşü (sınıflı bağlantılar,
   bileşen margin'leri, çerez bandı düğmeleri, kahraman maketi, şimdi bu).
   Kural artık `to-` önekli düğmeleri de dışlıyor: o bileşenler kendi
   rengini kendileri veriyor. `/magaza/dokumantasyon` `to-` öneki
   KULLANMIYOR (denetlendi), yani orası etkilenmez. */
.td-govde button:not([class*="riza__"]):not([class^="to-"]):not([class*=" to-"]) {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .td-html {
        scroll-behavior: auto;
    }
}

.td-govde {
    margin: 0;
    background: #f9f9f9;
    color: #555;
    font-family: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}

.td-govde img,
.td-govde svg {
    display: block;
    max-width: 100%;
}

/* ÖLÇÜLMÜŞ ÖZGÜLLÜK ARIZASI: bu kural (0,1,1) ağırlığında ve tek sınıflı
   (0,1,0) düğme kurallarını EZİYORDU — `.td-cta { color: #fff }` yazılıydı
   ama düğme metni rgb(85,85,85) çiziliyordu (ölçüldü). Kural artık yalnız
   SINIFSIZ bağlantılara uygulanıyor; bileşenler kendi rengini koruyor. */
.td-govde a:not([class]) {
    color: inherit;
}

.td-govde a {
    text-decoration: none;
}

/* `.visually-hidden` BU DOSYADA TANIMLI OLMAK ZORUNDA.
   Sayfa daha önce tema düzeninin içindeydi ve sınıfı ORADAN alıyordu. Kendi
   kabuğuna geçince tanım kayboldu: alt bilgi kartlarındaki gerilmiş bağlantı
   metni ("Dokümantasyonu aç") kartın üstünde GÖRÜNÜR hâle geldi (ölçüldü:
   position static, 140×19). */
.td-govde .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.td-govde :focus-visible {
    outline: 3px solid #215ada;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ÖLÇÜ: kapsayıcı 1320 / yatay dolgu 15,5 → iç genişlik 1289 (bento ile aynı). */
.td-kap {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 15.5px;
}

/* --- DUYURU ŞERİDİ --- */
.td-serit {
    /* ÖLÇÜ: referansın raster görselinden okunan uçlar. */
    background: linear-gradient(90deg, rgb(29, 83, 201) 0%, rgb(17, 59, 154) 49%, rgb(5, 35, 104) 100%);
    padding: 8px 0;
    min-height: 36px;
}

.td-serit__ic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.td-serit p {
    margin: 0;
    font-size: 12px;
    line-height: 16.8px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.td-serit a {
    margin-left: 6px;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- GEZİNME SATIRI --- */
.td-bar {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #fff;
    /* ÖLÇÜ: alt kenarlık YOK; ayrım yalnız gölgeyle. */
    box-shadow: rgba(0, 0, 0, .05) 0 4px 30px 10px;
}

.td-bar__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 72px;
}

.td-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.td-logo__isaret {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #215ada;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

/* ÖLÇÜ: logo yüksekliği 32px. Referansta bir görsel; bizde kelime markası
   (mağazanın yüklenmiş bir logosu yok — uydurma bir görsel basılmaz). */
.td-logo__ad {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 32px;
    color: #222329;
    white-space: nowrap;
}

.td-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 -4px;
}

/* ÖLÇÜ: menü 16px/500 · dolgu 0 10px · ögeler arası 8px (li margin 0 4px). */
.td-menu a {
    position: relative;
    margin: 0 4px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    color: #222329;
    white-space: nowrap;
}

.td-menu a:hover {
    color: #215ada;
}

/* Etkin öge: referansta `li.current` + `a::after` sözde ögesi. */
.td-menu a[aria-current]::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: #215ada;
}

.td-bar__sag {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* ÖLÇÜ: 36px · dolgu 0 32px · yarıçap 60px · #215ada · 14/36/600. */
.td-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 32px;
    border-radius: 60px;
    background: #215ada;
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    font-weight: 600;
    white-space: nowrap;
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.td-cta:hover {
    background: #1a4aa8;
    box-shadow: rgba(33, 90, 218, .3) 0 5px 20px 0;
    transform: translateY(-2px);
}

.td-cta__ikon {
    font-size: 9px;
}

/* --- MOBİL MENÜ (<details>, JavaScript yok) --- */
.td-mobil {
    display: none;
    position: relative;
}

.td-mobil > summary {
    display: grid;
    align-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0 9px;
    border-radius: 10px;
    background: #f2f4f7;
    list-style: none;
    cursor: pointer;
}

.td-mobil > summary::-webkit-details-marker {
    display: none;
}

.td-mobil > summary span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #222329;
}

.td-mobil__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 100;
    min-width: 220px;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: rgba(15, 23, 42, .16) 0 12px 34px 0;
}

.td-mobil__panel a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #222329;
}

.td-mobil__panel a:hover {
    background: #f2f4f7;
}

/* ==========================================================================
   ALT BİLGİ — ÖLÇÜLDÜ
   --------------------------------------------------------------------------
   bölge zemini  #f9f9f9 (sayfa zeminiyle AYNI — ayrı bir gri DEĞİL)
   satır dolgusu 80px 0  (dar ekranda 48px)
   kart          413,66 × 446,8 · yarıçap 12 · gölge rgb(234,234,234) 0 8px 100px
                 dolgu 48px 24px 48px 32px (ASİMETRİK: sol 32, sağ 24)
   oluk          24px
   ikon          80×80 · alt boşluk 16
   başlık        24/36/500 · alt boşluk 24 · #222329 (beyaz kart) / #fff (mavi)
   ayraç         2px · #f9f9f9 (beyaz kart) / #648be5 (mavi) · alt boşluk 24
   gövde         18/26,28/400 · #555 / #f3f3f3 · alt boşluk 40
   düğme         50px · dolgu 0 40px · yarıçap 60 · 18/50/600
                 beyaz kartta #215ada zemin + beyaz yazı, mavi kartta tersi
                 hover translateY(-2px) + rgba(33,90,218,.3) 0 5px 20px
   telif çubuğu  #f3f3f3 · dolgu 20px 0 · kart bölgesine BİTİŞİK (boşluk 0)
   dikey ritim   48 + 80 + 16 + 36 + 24 + 2 + 24 + 78,8 + 40 + 50 + 48 = 446,8
   ========================================================================== */

.td-alt {
    position: relative;
    background: #f9f9f9;
}

.td-alt__izgara {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding: 80px 0;
}

.td-alt__kart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 446.8px;
    padding: 48px 24px 48px 32px;
    border-radius: 12px;
    background: #fff;
    box-shadow: rgb(234, 234, 234) 0 8px 100px 0;
    transition: box-shadow .2s ease, transform .2s ease;
}

.td-alt__kart:hover {
    box-shadow: rgba(15, 23, 42, .14) 0 10px 34px 0;
    transform: translateY(-2px);
}

/* Gerilmiş bağlantı: kart <div>, bağlantı görünmez ve kartı kaplıyor.
   Ekran okuyucu KISA bir ad duyar (bento kartlarındaki gerekçenin aynısı). */
.td-alt__bag {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
}

.td-alt__ikon {
    display: grid;
    place-items: center;
    width: 80px;
    height: 80px;
    margin-bottom: 16px;
    font-size: 44px;
    line-height: 1;
}

.td-alt__kart h2 {
    margin: 0 0 24px;
    padding-bottom: 24px;
    width: 100%;
    /* ÖLÇÜ: ayraç 2px, kart zemininden bir ton koyu. */
    border-bottom: 2px solid #f9f9f9;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;
    color: #222329;
}

/* ÖLÇÜ: gövde bloğu 78,8px = 3 × 26,28 — yani ÜÇ SATIR. Türkçe metin dördüncü
   satıra taştığında kart 446,8 yerine 473px oluyordu (ölçüldü); üç satıra
   kırpılıyor. */
.td-alt__kart p {
    margin: 0 0 40px;
    font-size: 18px;
    line-height: 26.28px;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.td-alt__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    height: 50px;
    padding: 0 40px;
    border-radius: 60px;
    background: #215ada;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 50px;
    white-space: nowrap;
    transition: box-shadow .2s ease, transform .2s ease;
}

.td-alt__kart:hover .td-alt__btn {
    transform: translateY(-2px);
    box-shadow: rgba(33, 90, 218, .3) 0 5px 20px 0;
}

.td-alt__kart--mavi {
    background: #215ada;
}

.td-alt__kart--mavi h2 {
    color: #fff;
    border-bottom-color: #648be5;
}

.td-alt__kart--mavi p {
    color: #f3f3f3;
}

.td-alt__kart--mavi .td-alt__btn {
    background: #fff;
    color: #215ada;
}

/* "ÖNERİLEN" kurdelesi — mavi kartın üst kenarında. */
.td-alt__rozet {
    position: absolute;
    top: 0;
    right: 32px;
    padding: 5px 18px;
    border-radius: 0 0 10px 10px;
    background: #fcc418;
    color: #222329;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 18px;
    white-space: nowrap;
}

/* ÖLÇÜ: telif çubuğu kart bölgesine BİTİŞİK (aradaki boşluk 0), zemin #f3f3f3,
   dolgu 20px 0 → yükseklik ~66px. */
.td-alt__dip {
    padding: 20px 0;
    background: #f3f3f3;
}

.td-alt__dip p {
    margin: 0;
    text-align: center;
    font-size: 16px;
    line-height: 26px;
    /* ÖLÇÜLDÜ (25 Ağustos 2026): #6b707f, alt bilginin #f3f3f3 zemininde
       4,45:1 — eşiğin hemen altında. Bu blok /magaza/dokumantasyon ile
       PAYLAŞILIYOR, düzeltme iki sayfayı birden kapsıyor. #61667a → 4,93:1. */
    color: #61667a;
}

/* `.td-govde` ÖN EKİ ŞART. `.td-govde a:not([class])` kuralı (0,2,1) —
   `[class]` bir öznitelik seçicisi ve sınıf ağırlığında sayılıyor. Sınıfsız
   olan bu bağlantı ondan `color: inherit` alıyor ve #6b707f çiziliyordu:
   #f3f3f3 üzerinde 4,45:1, WCAG 1.4.3'ün altında (ölçüldü). Ön ek özgüllüğü
   eşitliyor, dosyada sonra geldiği için bu kural kazanıyor.
   Aynı tuzak daha önce `.td-cta` için de yaşandı. */
.td-govde .td-alt__dip a {
    color: #222329;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Başa dön — çapa bağlantısı, JavaScript yok. */
.td-yukari {
    position: absolute;
    right: 30px;
    bottom: 14px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #215ada;
    background: #fff;
    color: #215ada;
    font-size: 16px;
}

.td-yukari:hover {
    background: #215ada;
    color: #fff;
}

/* ==========================================================================
   "ÖZEL ÇÖZÜM" KUTUSU
   Referans bunu sayfa yüklenince zamanlayıcıyla açıyor. Bizde köşede duran
   bir düğme; ziyaretçi TIKLAYINCA açılıyor (gerekçe düzen dosyasında).
   ========================================================================== */

.td-kutu {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 120;
}

.td-kutu > summary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 22px;
    border-radius: 60px;
    background: linear-gradient(90deg, #215ada 0%, #7b3fe4 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    box-shadow: rgba(33, 90, 218, .34) 0 8px 26px 0;
    list-style: none;
    cursor: pointer;
}

.td-kutu > summary::-webkit-details-marker {
    display: none;
}

/* ÖLÇÜLMÜŞ TUZAK — KAPALI <details> `position: fixed` ÇOCUĞU GİZLEMİYOR.
   Tarayıcı kapalı bir <details>'in içeriğini akıştan çıkararak gizler; akış
   DIŞINA alınmış (fixed) bir çocuk bu gizlemeden kaçıyor. Ölçüldü: kutu
   `open` YOKKEN bile display:block ve 520×372 olarak 1089,792 noktasında
   duruyordu — belgeyi her genişlikte taşırıyordu (görünmüyordu çünkü perde de
   oradaydı, ama tarayıcı kaydırma alanını büyütüyordu). Açıkça gizleniyor. */
.td-kutu:not([open]) .td-kutu__perde,
.td-kutu:not([open]) .td-kutu__kutu {
    display: none;
}

.td-kutu__perde {
    position: fixed;
    inset: 0;
    z-index: -1;
    padding: 24px;
    background: rgba(11, 16, 32, .45);
    backdrop-filter: blur(2px);
}

/* ÖLÇÜ: 490 × 556 · yarıçap 24 · 3px SAYDAM kenarlık + iki katmanlı zeminle
   yapılan "gradyan kenarlık" numarası · dış gölge mercan
   `0 4px 40.9px rgba(255,95,87,.58)` · perde `place-items: center`, dolgu 24.
   Referansın pastel zemini bir CSS gradyanı DEĞİL, `bg.png` rasteri; görsel
   KOPYALANMADI, ölçülen uçlardan CSS gradyanıyla yeniden kuruldu. */
.td-kutu__kutu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(490px, calc(100vw - 48px));
    min-height: min(556px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 34px 32px;
    border: 3px solid transparent;
    border-radius: 24px;
    /* Referansın kutusu çok duraklı bir gradyan; ölçülen uçlardan yeniden
       kuruldu (görseli kopyalanmadı). */
    background:
        radial-gradient(120% 90% at 12% 8%, #fff5cf 0%, rgba(255, 245, 207, 0) 46%),
        radial-gradient(110% 90% at 88% 14%, #cdf3ff 0%, rgba(205, 243, 255, 0) 44%),
        radial-gradient(120% 100% at 20% 96%, #e6d6ff 0%, rgba(230, 214, 255, 0) 52%),
        linear-gradient(135deg, #ffe9e3 0%, #ffd9f2 52%, #d9e6ff 100%),
        linear-gradient(135deg, #ffb978 0%, #ff8f68 22%, #ff6b57 45%, #f6c46c 68%, #e89bf8 84%, #30ccf5 100%);
    /* Gradyan kenarlık: iki katman — içteki padding-box, dıştaki border-box. */
    background-origin: border-box;
    background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
    box-shadow: rgba(255, 95, 87, .58) 0 4px 40.9px 0, rgba(11, 16, 32, .18) 0 18px 60px 0;
    text-align: center;
}

.td-kutu__rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 5px 14px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .82);
    color: #222329;
    font-size: 12px;
    font-weight: 700;
}

.td-kutu__baslik {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 38px;
    font-weight: 400;
    color: #10131c;
}

.td-kutu__baslik b {
    font-weight: 700;
}

.td-kutu__ozet {
    margin: 0 auto 22px;
    max-width: 40ch;
    font-size: 15px;
    line-height: 24px;
    /* Açık gradyan üstünde: #3d4353 ≈ 8,1:1. */
    color: #3d4353;
}

.td-kutu__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border-radius: 60px;
    background: linear-gradient(90deg, #215ada 0%, #7b3fe4 55%, #d6006c 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: rgba(33, 90, 218, .32) 0 8px 24px 0;
}

.td-kutu__btn:hover {
    filter: brightness(1.06);
}

.td-kutu__not {
    margin: 12px 0 20px;
    font-size: 13px;
    line-height: 20px;
    color: #3d4353;
}

.td-kutu__cipler {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.td-kutu__cipler span {
    padding: 5px 13px;
    border-radius: 60px;
    background: rgba(255, 255, 255, .72);
    color: #2a2f3d;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
}

/* ==========================================================================
   KABUK DUYARLILIĞI
   ÖLÇÜ: kapsayıcı 1440→1320 · 1200→1140 · 992→960 · 768→720 · 480→tam genişlik
   ========================================================================== */

@media (max-width: 1399px) {
    .td-kap {
        max-width: 1140px;
    }
}

@media (max-width: 1199px) {
    .td-kap {
        max-width: 960px;
    }

    /* ÖLÇÜ: referansta menü sarmalayıcısı `d-none d-xl-block` — 1200px altında
       gizleniyor ve yerini hamburger alıyor. */
    .td-menu {
        display: none;
    }

    .td-mobil {
        display: block;
    }
}

@media (max-width: 991px) {
    .td-kap {
        max-width: 720px;
    }

    .td-alt__izgara {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .td-alt__kart--mavi {
        grid-column: 1 / -1;
    }
}

/* ÖLÇÜLDÜ: 320px'de `.td-bar__sag` (CTA + hamburger) 368px'e taşıyordu.
   Bu genişlikte CTA yazısı düşer, yalnız ok kalır — hedef aynı, dokunma
   alanı 44px'in üstünde. */
@media (max-width: 399px) {
    .td-cta {
        padding: 0 14px;
        font-size: 0;
        gap: 0;
    }

    .td-cta__ok {
        display: inline;
        font-size: 16px;
    }

    .td-bar__ic {
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .td-kap {
        max-width: none;
        padding-inline: 16px;
    }

    .td-serit p {
        font-size: 11px;
    }

    .td-cta {
        padding: 0 18px;
    }

    .td-cta__ikon,
    .td-cta__ok {
        display: none;
    }

    .td-alt {
        padding-top: 48px;
    }

    .td-alt__izgara {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: 40px;
    }

    .td-alt__kart--mavi {
        grid-column: auto;
    }

    .td-yukari {
        right: 16px;
    }

    .td-kutu {
        right: 14px;
        bottom: 14px;
    }

    .td-kutu > summary {
        height: 42px;
        padding: 0 16px;
    }

    .td-kutu__kutu {
        padding: 26px 20px 20px;
    }

    .td-kutu__baslik {
        font-size: 24px;
        line-height: 32px;
    }
}

/* ==========================================================================

/* Dokümantasyon sayfasının açar düğmesi — dokunma hedefi 44px.
   Bu kural fiziksel olarak silinen `.tp-*` bloğunun içindeydi ama
   işlevi kabuktur; blok çıkarılırken buraya taşındı. */
.td-kutu__acar { min-height: 44px; }