/*
 * Parsel Kilidi acilis sayfasi (24.09.2026 yeniden tasarim).
 *
 * NEDEN token'lar uygulamadan kopyali: kullanici acilis sayfasindan
 * dogrudan /uygulama'ya geciyor; iki ekranin rengi, fontu, kose yaricapi ve
 * dugme ritmi ayrisinca urun "iki ayri site" gibi duruyordu (13.09.2026).
 * Degerler `statik/stil.css` :root bloguyla ayni tutulur.
 *
 * TEK AYRILIK: kucuk punto gri metin. Uygulamanin --metin-soluk (#586069)
 * degeri koyu zeminde 11-12 px satirlarda 4,5:1 kontrasti tutmuyor; satis
 * sayfasindaki tarife/altbilgi satirlari icin --soluk daha acik secildi.
 *
 * Sayfanin imzasi: ornek videodaki 1266/4 parselinin GERCEK sinir cizgisi
 * (kahraman arka planinda kendini cizer) ve "plan paftasi" dilinde tek
 * aralikli kucuk etiketler. Baska susleme yok.
 */
:root {
    --zemin: #0f141d;          /* stil.css --bg-ana */
    --zemin-taban: #090c12;    /* stil.css --bg-taban */
    --zemin-kart: #141b26;     /* stil.css --bg-kart */
    --zemin-yuksek: #1c2534;   /* stil.css --bg-kart-yuksek */
    --cerceve: rgba(255, 255, 255, .08);
    --cerceve-orta: rgba(255, 255, 255, .14);
    --metin: #f0f6fc;
    --ikincil: #8b949e;
    --soluk: #9aa0a6;
    --turuncu: #f39200;
    --turuncu-acik: #ffaa33;
    --turuncu-soluk: rgba(243, 146, 0, .12);
    --turuncu-parlak: rgba(243, 146, 0, .35);
    --turuncu-murekkep: #17120a;   /* turuncu zemin ustundeki yazi: 9,6:1 */
    --yaricap-kucuk: 6px;
    --yaricap: 10px;
    --yaricap-buyuk: 14px;
    --golge-kart: 0 8px 24px rgba(0, 0, 0, .45);
    --gecis: .2s cubic-bezier(.16, 1, .3, 1);
    --font-baslik: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-govde: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* NEDEN tek aralikli: ada/parsel, m2, bicim gibi veri etiketleri plan
       paftasi diliyle yazilir; ek yazi tipi indirilmez, sistemdeki kullanilir. */
    --font-veri: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
    --max: 1160px;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
    margin: 0;
    overflow-x: hidden;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--font-govde);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, video:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--turuncu);
    outline-offset: 3px;
}
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-baslik); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
img, video { max-width: 100%; }

/* NEDEN atlama linki: klavyeyle gelen kullanici uzun menuyu tek tusla gecer. */
.atlama-linki {
    position: absolute;
    left: -9999px;
    z-index: 5;
    padding: 10px 16px;
    border-radius: var(--yaricap-kucuk);
    background: var(--turuncu);
    color: var(--turuncu-murekkep);
    font-size: 13px;
    font-weight: 700;
}
.atlama-linki:focus { left: 16px; top: 14px; }

/* NEDEN overflow-x clip: kahraman sinir cizgisi kenardan tasabilir; clip
   kaydirma kutusu olusturmadan yatay tasmayi keser (dar ekranda duzen
   penceresi 425 px'e genislemisti). */
.sayfa { min-height: 100vh; overflow-x: clip; }
.ust-bar, main, .altbilgi { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }

/* --- ust cubuk ------------------------------------------------------------ */
.ust-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.marka { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-baslik); font-size: 17px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.marka-isaret { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(243, 146, 0, .7); border-radius: var(--yaricap-kucuk); color: var(--turuncu); }
.marka-isaret svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ana-nav { display: flex; align-items: center; gap: 8px 24px; color: var(--ikincil); font-size: 14px; font-weight: 500; }
.ana-nav a:not(.dugme):hover, .hukuk-nav a:hover { color: var(--metin); }
.nav-giris { color: var(--metin); }

/* --- dugmeler ------------------------------------------------------------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--yaricap-kucuk);
    padding: 11px 18px;
    font-family: var(--font-baslik);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform var(--gecis), background var(--gecis), border-color var(--gecis);
}
/* NEDEN koyu yazi: beyaz yazi turuncu ustunde 3,0:1 kaliyordu (Lighthouse
   kontrast uyarisi); koyu murekkep 9,6:1 verir ve atlama linkiyle ayni dildir. */
.dugme-vurgu { background: var(--turuncu); color: var(--turuncu-murekkep); box-shadow: 0 2px 10px var(--turuncu-parlak); }
.dugme-vurgu:hover { background: var(--turuncu-acik); transform: translateY(-1px); }
.dugme-buyuk { padding: 15px 24px; font-size: 16px; }

/* --- bolum iskeleti ------------------------------------------------------- */
.bolum { padding: 96px 0; border-top: 1px solid var(--cerceve); }
.bolum-baslik { max-width: 640px; }
.bolum-baslik h2 { margin-top: 14px; font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; }
.bolum-aciklama { margin-top: 14px; color: var(--ikincil); font-size: 16px; line-height: 1.6; }
.satir-baslik { display: flex; align-items: end; justify-content: space-between; gap: 28px; max-width: none; }
/* NEDEN tek aralikli ust etiket: bolum etiketleri sayfanin veri dilini tasir;
   basliktan (Jakarta) ve govdeden (Inter) acikca ayrilir. */
.ust-etiket { display: flex; align-items: center; gap: 10px; color: var(--turuncu-acik); font-family: var(--font-veri); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ust-etiket::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--turuncu); }

/* --- kahraman ------------------------------------------------------------- */
.kanca {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: "metin video" "kanit video";
    align-items: center;
    column-gap: clamp(32px, 6vw, 80px);
    row-gap: 36px;
    padding-top: 40px;
    padding-bottom: 88px;
    border-top: 0;
}
/* NEDEN video sutununda (Kemal, 24.09.2026): imza yazinin arkasindan gecince
   basligi ve metni kirlettiyordu. Artik cercevenin ARKASINDA, sol alttan
   tasar; yazi kutulariyla kesismez (yuruyus_acilis.py olcer). */
.parsel-cizgi {
    position: absolute;
    z-index: 0;
    left: -44%;
    bottom: 8%;
    width: 88%;
    height: auto;
    pointer-events: none;
    overflow: visible;
}
.parsel-cizgi-alan { fill: rgba(243, 146, 0, .025); }
.parsel-cizgi-kenar {
    fill: none;
    stroke: rgba(243, 146, 0, .6);
    /* NEDEN kullanici biriminde (vector-effect yok): non-scaling-stroke
       pathLength'i bozuyor, cizgi yarim kaliyordu. .5 birim ~1,2-1,5 px. */
    stroke-width: .5px;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: sinir-ciz 1.7s cubic-bezier(.4, 0, .2, 1) .25s forwards;
}
@keyframes sinir-ciz { to { stroke-dashoffset: 0; } }
.kanca-metin { position: relative; z-index: 1; grid-area: metin; }
.kanca h1 { margin-top: 0; max-width: 12ch; font-size: clamp(42px, 5.6vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; }
.kanca h1 em { color: var(--turuncu); font-style: normal; }
.kanca-aciklama { max-width: 520px; margin-top: 26px; color: var(--ikincil); font-size: 17px; line-height: 1.65; }
.cagri-grubu { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.ikincil-cagri { display: inline-flex; align-items: center; gap: 8px; color: var(--metin); font-family: var(--font-baslik); font-size: 15px; font-weight: 700; }
.ikincil-cagri:hover { color: var(--turuncu-acik); }
.kanca-not { max-width: 460px; margin-top: 18px; color: var(--soluk); font-size: 13px; line-height: 1.55; }
.kanit-seridi { grid-area: kanit; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; color: var(--ikincil); font-family: var(--font-veri); font-size: 12px; letter-spacing: .04em; }
.kanit-seridi li { display: inline-flex; align-items: center; gap: 8px; }
.kanit-seridi li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--turuncu); box-shadow: 0 0 0 4px var(--turuncu-soluk); }
.video-kapsayici { position: relative; z-index: 1; grid-area: video; justify-self: end; width: min(100%, 360px); }
/* NEDEN 9:16 cerceve: ornek video dikey (Reels boyu). Yatay video konursa
   `aspect-ratio` 16/9 yapilir; video `object-fit: cover` ile cerceveyi doldurur. */
.video-cerceve { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 9 / 16; border: 1px solid var(--cerceve-orta); border-radius: var(--yaricap-buyuk); background: var(--zemin-taban); box-shadow: var(--golge-kart), 0 0 0 6px rgba(255, 255, 255, .03); }
.video-cerceve video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--zemin-taban); }
/* Kahraman "Sesi ac" dugmesi: koyu yari saydam hap, acikken turuncu vurgu. */
.ses-dugmesi { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 11px; border: 1px solid var(--cerceve-orta); border-radius: 999px; background: rgba(9, 12, 18, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--metin); font: 600 13px/1 var(--font-govde); cursor: pointer; transition: border-color var(--gecis), background var(--gecis), color var(--gecis); }
.ses-dugmesi[hidden] { display: none; }
.ses-dugmesi:hover { border-color: var(--turuncu); background: rgba(9, 12, 18, .82); }
.ses-dugmesi[aria-pressed="true"] { border-color: var(--turuncu); background: var(--turuncu-murekkep); color: var(--turuncu-acik); box-shadow: 0 0 0 4px var(--turuncu-soluk); }
.ses-ikon { font-size: 14px; line-height: 1; }
.adimlar p.adim-ek { margin-top: 8px; }
/* "Siz hazirlayin" (25.09.2026): adimlarin altinda tek satir. */
.siz-hazirlayin-satiri { margin-top: 28px; color: var(--ikincil); font-size: 14.5px; line-height: 1.65; }
.siz-hazirlayin-satiri a { margin-right: 6px; color: var(--turuncu-acik); font-weight: 650; text-decoration: none; }
.siz-hazirlayin-satiri a:hover { text-decoration: underline; }
.adim-fiyat { display: block; margin-top: 6px; color: var(--soluk); font-family: var(--font-veri); font-size: 12px; letter-spacing: .03em; }
.adim-fiyat strong { color: var(--metin); font-weight: 600; white-space: nowrap; }
.video-not { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--soluk); font-family: var(--font-veri); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.video-not-isaret { flex: none; width: 8px; height: 8px; border: 1.5px solid var(--turuncu); transform: rotate(45deg); }

/* --- nasil calisir -------------------------------------------------------- */
.adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: adim; }
.adimlar li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding-top: 22px; border-top: 1px solid var(--cerceve-orta); }
.adim-sayi { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(243, 146, 0, .6); border-radius: 50%; color: var(--turuncu-acik); font-family: var(--font-veri); font-size: 13px; font-weight: 600; }
.adimlar h3 { font-size: 20px; }
.adimlar p { margin-top: 10px; color: var(--ikincil); font-size: 14.5px; line-height: 1.65; }

/* --- iki yol -------------------------------------------------------------- */
.mod-grid, .fark-grid, .paket-grid { display: grid; gap: 16px; }
.mod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
.mod-kart { overflow: hidden; border: 1px solid var(--cerceve); border-radius: var(--yaricap); background: var(--zemin-kart); }
.mod-kart-vurgu { border-color: rgba(243, 146, 0, .45); }
/* NEDEN height auto: width/height nitelikleri sunum ipucu olarak sabit
   yukseklik verir; aspect-ratio ancak height auto iken calisir. */
.mod-gorsel { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--cerceve); }
.mod-govde { padding: 24px 26px 26px; }
.mod-etiket { color: var(--turuncu-acik); font-family: var(--font-veri); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.mod-kart h3 { margin-top: 10px; font-size: 22px; }
.mod-kart h3 span { color: var(--ikincil); font-weight: 500; }
.mod-kart p { margin-top: 12px; color: var(--ikincil); font-size: 14.5px; line-height: 1.65; }
.mod-fiyat { padding-top: 14px; border-top: 1px solid var(--cerceve); color: var(--ikincil); font-family: var(--font-veri); font-size: 12.5px; }
.mod-fiyat strong { color: var(--metin); font-weight: 600; }

/* --- ornek film seridi ---------------------------------------------------- */
.serit-oklar { display: flex; gap: 8px; }
.serit-ok { width: 42px; height: 42px; border: 1px solid var(--cerceve-orta); border-radius: 50%; background: var(--zemin-kart); color: var(--metin); font-size: 18px; cursor: pointer; transition: border-color var(--gecis), background var(--gecis); }
.serit-ok:hover { border-color: var(--turuncu); background: var(--zemin-yuksek); }
/* NEDEN kenardan tasar: serit sayfanin sag kenarina kadar akar, "devami var"
   hissi tasan kliple verilir; kaydirma cubugu gizlenmez (erisilebilirlik). */
.film-seridi {
    display: flex;
    gap: 14px;
    margin: 40px calc(50% - 50vw) 0;
    padding: 4px calc(50vw - 50%) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--cerceve-orta) transparent;
}
.klip { position: relative; flex: none; height: 400px; overflow: hidden; border: 1px solid var(--cerceve); border-radius: var(--yaricap); background: var(--zemin-taban); scroll-snap-align: start; }
.klip-video { display: block; height: 100%; width: auto; object-fit: cover; background: var(--zemin-taban); }
.klip-16x9 .klip-video { aspect-ratio: 16 / 9; }
.klip-9x16 .klip-video { aspect-ratio: 9 / 16; }
.klip-4x5 .klip-video { aspect-ratio: 4 / 5; }
.klip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(to top, rgba(9, 12, 18, .85), transparent); color: var(--metin); font-size: 13px; pointer-events: none; }
.klip figcaption strong { display: inline-block; margin-right: 8px; padding: 2px 6px; border-radius: 4px; background: var(--turuncu); color: var(--turuncu-murekkep); font-family: var(--font-veri); font-size: 11px; font-weight: 600; }
.klip-ozellik { display: block; margin-top: 4px; color: #c9d1d9; font-size: 11px; }
.galeri-not { margin-top: 12px; color: var(--soluk); font-size: 13px; }

/* --- sinir stilleri ------------------------------------------------------- */
.stil-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 14px 12px; margin: 40px 0 0; padding: 0; list-style: none; }
.stil { position: relative; }
.stil img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--cerceve); border-radius: var(--yaricap-kucuk); background: var(--zemin-taban); transition: border-color var(--gecis); }
.stil:hover img, .stil.oynuyor img { border-color: rgba(243, 146, 0, .7); }
.stil span { display: block; margin-top: 8px; color: var(--ikincil); font-family: var(--font-veri); font-size: 11.5px; letter-spacing: .04em; }

/* --- neden ---------------------------------------------------------------- */
.fark-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 44px; }
.fark-kart { padding: 22px 20px 24px; border: 1px solid var(--cerceve); border-radius: var(--yaricap); background: var(--zemin-kart); }
.fark-kart h3 { display: flex; gap: 10px; align-items: baseline; font-size: 18px; }
.fark-kart h3::before { content: ""; flex: none; width: 8px; height: 8px; border: 1.5px solid var(--turuncu); transform: translateY(-1px) rotate(45deg); }
.fark-kart p { margin-top: 12px; color: var(--ikincil); font-size: 14px; line-height: 1.65; }
.beyan-kart { margin-top: 28px; padding: 24px 26px 26px; border: 1px solid var(--cerceve-orta); border-left: 3px solid var(--turuncu); border-radius: var(--yaricap); background: var(--zemin-kart); }
.beyan-kart h2 { margin-top: 12px; font-size: 20px; font-weight: 700; }
.beyan-kart p { max-width: 760px; margin-top: 10px; color: var(--ikincil); font-size: 14.5px; line-height: 1.7; }

/* --- tarife --------------------------------------------------------------- */
.fiyat-baslik { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: none; }
.fiyat-notu { max-width: 300px; color: var(--ikincil); font-size: 14px; text-align: right; }
.paket-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 44px; align-items: stretch; gap: 12px; }
.paket-kart { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 24px 20px 20px; border: 1px solid var(--cerceve); border-radius: var(--yaricap); background: var(--zemin-kart); }
.paket-onerilen { border-color: var(--turuncu); box-shadow: inset 0 2px 0 var(--turuncu); }
.onerilen { position: absolute; top: -11px; left: 18px; padding: 3px 8px; border-radius: 99px; background: var(--turuncu); color: var(--turuncu-murekkep); font-family: var(--font-veri); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.paket-ad { color: var(--turuncu-acik); font-family: var(--font-baslik); font-size: 14px; font-weight: 700; }
.paket-kredi { margin-top: 18px; color: var(--ikincil); font-size: 14px; }
.paket-kredi strong { color: var(--metin); font-family: var(--font-baslik); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.paket-karsilik { margin-top: 6px; color: var(--ikincil); font-size: 12.5px; line-height: 1.45; min-height: 2.9em; }
.paket-alt { margin-top: auto; padding-top: 28px; }
.paket-fiyat { font-family: var(--font-baslik); font-size: 24px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.paket-fiyat small { color: var(--ikincil); font-size: 12px; font-weight: 600; }
.kredi-basina { margin-top: 4px; color: var(--soluk); font-family: var(--font-veri); font-size: 11px; }
.paket-link { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--cerceve); color: var(--metin); font-family: var(--font-baslik); font-size: 13px; font-weight: 700; }
.paket-link:hover { color: var(--turuncu-acik); }
.tarife-satri { margin-top: 24px; color: var(--soluk); font-size: 12.5px; line-height: 1.7; }
/* NEDEN varsayilan metin notrdur: sayfa JS'siz de dogru bir sey soylemeli.
   /api/tarife okunamazsa JS metni "baslangic fiyati" uyarisina cevirir. */
.tarife-kaynak-notu { margin-top: 8px; color: var(--soluk); font-size: 12.5px; line-height: 1.7; }
.tarife-kaynak-notu.uyari { color: var(--turuncu-acik); }
/* Odeme "yakinda" kipi (27.09.2026): /api/tarife odeme_yakinda derse acilir. */
.tarife-yakinda-notu { margin-top: 4px; color: var(--soluk); font-size: 12.5px; line-height: 1.7; }
.tarife-yakinda-notu[hidden] { display: none; }
/* Hos geldin hediyesi (27.09.2026): tutar /api/tarife hosgeldin_kredisi'nden;
   0 ya da okunamazsa satir gizli kalir. */
.tarife-hediye-notu { margin-top: 4px; color: var(--soluk); font-size: 12.5px; line-height: 1.7; }
.tarife-hediye-notu[hidden] { display: none; }

/* --- sss ------------------------------------------------------------------ */
.sss { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 8vw, 120px); }
.sss-liste details { border-top: 1px solid var(--cerceve); }
.sss-liste details:last-child { border-bottom: 1px solid var(--cerceve); }
.sss-liste summary { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font-family: var(--font-baslik); font-size: 16px; font-weight: 700; }
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary::after { content: "+"; color: var(--turuncu); font-size: 20px; font-weight: 400; line-height: 1; }
.sss-liste details[open] summary::after { content: "\2212"; }
.sss-liste details p { max-width: 600px; padding: 0 35px 20px 0; color: var(--ikincil); font-size: 14.5px; line-height: 1.65; }

/* --- altbilgi ------------------------------------------------------------- */
.altbilgi { padding: 44px 0 30px; border-top: 1px solid var(--cerceve); }
.alt-ust, .alt-alt { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.alt-slogan { margin-top: 10px; color: var(--ikincil); font-size: 13px; }
.alt-orta { display: grid; gap: 14px; margin-top: 40px; }
.hukuk-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ikincil); font-size: 13px; }
.alt-alt { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--cerceve); color: var(--soluk); font-size: 12px; }
.odeme-logolari { color: var(--ikincil); letter-spacing: .04em; }

/* --- yapisik cagri (yalniz dar ekran) ------------------------------------- */
.yapisik-cagri { display: none; }

/* ============================ dar ekranlar ============================== */
/* NEDEN 1100: bu genislikte metin sutunu ile video arasindaki bosluk
   daraliyor; imza metne yaklasmasin diye daha az tasar. */
@media (max-width: 1100px) {
    .parsel-cizgi { left: -18%; width: 70%; }
}

@media (max-width: 1024px) {
    .kanca { column-gap: 36px; }
    .kanca h1 { font-size: clamp(40px, 6.4vw, 60px); }
    .fark-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .paket-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .ana-nav { gap: 8px 16px; }
    .nav-bolum { display: none; }
    .kanca, .sss { grid-template-columns: 1fr; }
    .kanca { grid-template-areas: "metin" "video" "kanit"; row-gap: 32px; }
    .video-kapsayici { justify-self: center; width: min(100%, 340px); }
    .parsel-cizgi { left: -44%; width: 88%; }
    .mod-grid, .adimlar { grid-template-columns: 1fr; }
    .adimlar { gap: 20px; }
    .klip { height: 360px; }
}

/* NEDEN 620 px: 390 px'lik telefonda dort paket karti ve iki kolonlu
   izgaralar yatay tasma yapiyordu; tek kolona dusuluyor. */
@media (max-width: 620px) {
    .ust-bar, main, .altbilgi { width: min(100% - 32px, var(--max)); }
    .ust-bar { gap: 12px; padding: 16px 0; }
    .ana-nav { gap: 8px 14px; font-size: 13px; }
    .nav-cta { padding: 9px 14px; font-size: 13px; }
    .bolum { padding: 64px 0; }
    .kanca { padding-top: 22px; padding-bottom: 56px; row-gap: 28px; }
    .kanca h1 { font-size: clamp(38px, 11vw, 48px); }
    .kanca-aciklama { margin-top: 20px; font-size: 15px; }
    .cagri-grubu { margin-top: 24px; gap: 12px 18px; }
    .ikincil-cagri { font-size: 14px; }
    .dugme-buyuk { padding: 14px 22px; font-size: 15px; }
    /* NEDEN saga yasli: telefonda imzanin gorunecegi tek yer videonun sol
       yani; cerceve saga yaslanir, imza sol kenar payina kadar tasar. */
    .video-kapsayici { justify-self: end; width: min(100% - 72px, 300px); }
    .parsel-cizgi { left: -26%; width: 84%; bottom: 10%; }
    .kanit-seridi { gap: 10px 18px; font-size: 11.5px; }
    .bolum-baslik h2 { font-size: clamp(26px, 7.4vw, 34px); }
    .satir-baslik, .fiyat-baslik { display: block; }
    .fiyat-notu { max-width: none; margin-top: 14px; text-align: left; }
    .serit-oklar { display: none; }
    .mod-grid, .fark-grid, .paket-grid, .adimlar { grid-template-columns: 1fr; }
    .mod-govde { padding: 20px 20px 22px; }
    .klip { height: auto; }
    .klip-video { width: 100%; height: auto; }
    .klip-16x9 { width: min(88vw, 640px); }
    .klip-9x16 { width: min(58vw, 300px); }
    .klip-4x5 { width: min(70vw, 360px); }
    .film-seridi { margin-top: 28px; }
    .stil-izgara { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: min(44vw, 200px); gap: 14px 10px; margin: 28px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%) 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
    .stil { scroll-snap-align: start; }
    .beyan-kart { padding: 20px 18px 22px; }
    .paket-grid { gap: 10px; margin-top: 32px; }
    .paket-kart { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "ad ad" "kredi fiyat" "karsilik fiyat" "link link"; column-gap: 16px; padding: 20px 18px 16px; }
    .paket-ad { grid-area: ad; }
    .paket-kredi { grid-area: kredi; margin-top: 12px; }
    .paket-kredi strong { font-size: 28px; }
    .paket-karsilik { grid-area: karsilik; min-height: 0; }
    .paket-alt { grid-area: fiyat; align-self: end; padding-top: 0; text-align: right; }
    .paket-link { grid-area: link; margin-top: 16px; }
    .sss { gap: 30px; }
    .sss-liste details p { padding-right: 0; }
    .alt-ust, .alt-alt { align-items: flex-start; flex-direction: column; }
    .alt-orta { margin-top: 32px; }
    /* NEDEN alt bosluk: yapisik cagri cubugu altbilginin son satirini ortmesin. */
    .altbilgi { padding-bottom: 96px; }
    .yapisik-cagri { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cerceve-orta); background: rgba(15, 20, 29, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
    .yapisik-cagri.gorunur { transform: translateY(0); }
    /* NEDEN (26.09.2026): sohbet balonu yapisik cagri cubugunun ustunde dursun. */
    :root { --sohbet-alt: 84px; }
    .yapisik-not { color: var(--ikincil); font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    /* NEDEN ayrica transform: gecis suresini kisaltmak hover sicramasini
       kaldirmaz; hareketi azaltan kullanicida donusum tamamen kapanir. */
    .dugme:hover, .dugme-vurgu:hover { transform: none !important; }
    .parsel-cizgi-kenar { stroke-dashoffset: 0; animation: none; }
    .film-seridi { scroll-behavior: auto; }
}