/* ==========================================================================
   blocofy landing · tema v3 "Gerçek ekran" · çekirdek CSS
   Kaynak: v2 "Tuval" (tasarim/yeni-yon-2/yon-a3.html + yon-a-not.md: palet, koyu token'lar, zemin sistemi); v3 (spec 2026-10-10 §4):
   Tuval motifleri (imleçler, seçim tutamaçları ve ölçüler, cetvel / ızgara / sütun zeminleri, yazı kutusu ve yapışkan hap, kodla çizilmiş
   ürün arayüzleri, kurgusal firma paletleri, ışık havuzları) kalktı; ürün sahneleri partial/tv-kayit ile gerçek ekran kaydıdır.
   v3.1 (spec 2026-10-11 §2, D40 a): bölüm zeminleri çeşitlenir (nokta · ince ızgara · sütun çizgileri · seyrek · spot · sade · düz), ışık
   havuzları ve hareket katmanının giriş stilleri geri gelir (bölüm 5, 5a, 5b). Cetvel, tutamaç, ölçü ve imleç (D37) geri GELMEZ.
   Kurallar:
   - Literal renk (hex/rgb) YALNIZ aşağıdaki token bloklarında. Section ve partial CSS'i var(--tv-*) kullanır.
     Maske gradyanlarında renk değil alfa kullanılır: var(--tv-maske) (opak) ve transparent.
   - Önek: tv- (sınıf ve değişken). Motor öznitelikleri data-bl-* ve motor sınıfları (bl-motion, bl-glare…) aynen.
     Platformun --color-*, --font-*, --brand-*, --btn-* vb. değişkenleri ve .color-scheme-N sınıfları yeniden tanımlanmaz.
   - Koyu tema: sistem tercihi (kullanıcı "açık" seçmediyse) ya da html[data-theme="dark"]; iki koyu blok birebir aynıdır.
   - Section'a özel CSS section dosyasının kendi <style>'ında; ortak partial stilleri burada "partial: tv-…" başlıklı bölümlerde.
   Bölümler: 1 font · 2 token'lar · 3 temel · 4 düzen ve tipografi · 5 zemin sistemi · 6 düğmeler · 7 çipler
   · 8 ortak partial'lar (partial: tv-cip, tv-tema-secici, tv-kayit, tv-fiyat) · 9 zorlanmış renk kipi
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font: Satoshi Variable (ITF FFL 2.0, değiştirilmeden self-host; medya kütüphanesi)
   Kök-göreli /cdn/<id>: canlı, özel alan adı ve editör önizlemesi aynı kökene çözülür.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("/cdn/5c269d25-92aa-4e84-8f13-508a0a309ef4/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/cdn/38d3d302-295b-47f0-995e-27422940d9fd/Satoshi-VariableItalic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* Metrik uyumlu yedek: Arial ailesi Satoshi'nin genişliğine ve dikey ölçülerine çekilir → font değişiminde CLS ≈ 0
   (v1 ölçümü, rapor-tema-temeli.md). */
@font-face {
  font-family: "Satoshi Fallback";
  src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.5%;
  ascent-override: 104.7%;
  descent-override: 24.9%;
  line-gap-override: 10.4%;
}

/* --------------------------------------------------------------------------
   2. Token'lar. Açık = :root. Kontrastlar (kendi zemininde) rapor: .superpowers/sdd/2026-10-08-tema-v2-tuval/task-1-report.md.
   theme-color meta değerleri (layout) --tv-tuval ile aynı: #ecebe7 / #131416.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* zemin ve yüzey */
  --tv-tuval: #ecebe7;           /* sayfa zemini: hafif sıcak nötr, krem değil */
  --tv-tuval-derin: #e2e0db;     /* uzaklaştırılmış tuval, alt bilgi */
  --tv-yuzey: #fbfbf9;           /* çerçeve, panel, kutu */
  --tv-yuzey-2: #f3f2ef;
  /* mürekkep (metin) */
  --tv-murekkep: #0e0f12;        /* başlık, birincil düğme */
  --tv-murekkep-2: #44464c;      /* gövde */
  --tv-murekkep-3: #55575d;      /* çerçeve etiketi, ikincil bilgi (§v2: nokta pikselinde de AA) */
  --tv-cizgi: #dddbd5;
  --tv-cizgi-2: #c3c0b9;         /* ikincil düğme ve çip kenarı */
  --tv-girdi-kenar: #767980;     /* form alanı kenarı (WCAG 1.4.11 ≥ 3:1): yüzeyde 4,21:1, tuvalde 3,65:1 [final fix: Ö1] */
  --tv-nokta: #d0cdc7;           /* nokta ızgara (§v2) */
  --tv-odak: var(--tv-murekkep);
  /* durum: yeşil YALNIZ onay ve yayında */
  --tv-yayinda: #0b7643;
  --tv-yayinda-yazi: #ffffff;
  --tv-yayinda-yumusak: #d8ede0;
  --tv-hata: #b3261e;            /* form hatası (yazı ve çerçeve): yüzeyde 6,3:1, tuvalde 5,5:1 */
  --tv-taslak-zemin: #e4e2dc;
  --tv-taslak-yazi: #44464c;
  /* kod kartı zemini, segment seçimi, menü vurgusu */
  --tv-kod-zemin: #16171b;
  --tv-seg-secili: #fbfbf9;
  --tv-menu-vurgu: color-mix(in srgb, var(--tv-murekkep) 7%, transparent);
  /* gölgeler */
  --tv-golge: 0 1px 1px rgba(40, 34, 24, .05), 0 12px 30px -16px rgba(40, 34, 24, .34);
  --tv-golge-lg: 0 1px 1px rgba(40, 34, 24, .05), 0 34px 70px -34px rgba(40, 34, 24, .45);
  --tv-golge-art: 0 30px 80px -50px rgba(0, 0, 0, .35);
  --tv-golge-dugme: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(14, 15, 18, .22), 0 8px 18px -8px rgba(14, 15, 18, .5);
  --tv-golge-onay: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 14px -8px rgba(11, 118, 67, .7);
  /* kod kartı (v3: Görev 7'nin Geliştirici sekmesi Liquid kod örneği için korunur, metin-v4 V3.G.roller.gelistirici.kod; zemin --tv-kod-zemin iki
     temada koyu, yazı renkleri temadan bağımsız).
     Karşıtlık --tv-kod-zemin açık #16171b / koyu #0c0d0f üstünde: yazı 15,0 / 16,2 · yorum 5,4 / 5,8 · sekme 8,0 / 8,7 ·
     etiket 8,3 · değer 8,4 · dize 11,2 · tamam 10,6 · terminal 11,4 (açık; koyuda hepsi daha yüksek). */
  --tv-kod-yazi: #e8e8eb;
  --tv-kod-yorum: #8a8d95;
  --tv-kod-sekme: #a9abb2;
  --tv-kod-cizgi: #2a2b31;
  --tv-kod-etiket: #f2a07b;
  --tv-kod-deger: #8fb7ff;
  --tv-kod-dize: #9ed8b3;
  --tv-kod-tamam: #7fdca3;
  --tv-kod-terminal: #c9cbd1;
  /* zemin sistemi */
  --tv-nokta-iri: #c9c6bf;                 /* seyrek: iri nokta */
  --tv-art: #f6f5f2;                       /* düz: çalışma yüzeyi (artboard) */
  --tv-art-kenar: #d6d3cc;
  --tv-spot: rgba(255, 255, 255, .62);
  --tv-gren-o: .05;                        /* sayfa geneli film greni */
  --tv-art-gren: .06;                      /* düz yüzeyde ek gren (brief: açıkta ≤ .06) */
  --tv-gren-f: invert(1);                  /* gürültü beyaz tanecik üretir; açıkta tersine çevrilir */
  --tv-izgara-ince: rgba(20, 18, 12, .045);  /* v3.1 izgara: 24 px ince ızgara */
  --tv-izgara-kalin: rgba(20, 18, 12, .085); /* v3.1 izgara: 120 px ana ızgara */
  --tv-sutun-dolgu: rgba(20, 18, 12, .026);  /* v3.1 sutun: sütun dolgusu */
  --tv-sutun-kenar: rgba(20, 18, 12, .05);   /* v3.1 sutun: sütun sol kenarı */
  /* v3.1 ışık havuzları: demo sitelerin paletinden (Avlu terrakota, Kırk Basamak deniz, Mafsal aşı boyası) + nötr; yeşil yok (yeşil = onay).
     Tepe alfası düşük: üstündeki en açık ikincil metin (--tv-murekkep-3) havuz merkezinde de ≥ 4,5:1 (rapor: v3.1 task-1-report §zemin). */
  --tv-havuz-sicak: rgba(180, 81, 46, .13);
  --tv-havuz-deniz: rgba(42, 125, 187, .11);
  --tv-havuz-asi: rgba(200, 146, 42, .12);
  --tv-havuz-notr: rgba(255, 255, 255, .7);
  /* tema bağımsız */
  --tv-gren: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 3.2 0 0 0 -1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tv-maske: #000;                        /* yalnız mask-image alfa için */
  /* ölçüler */
  --tv-yazi: "Satoshi", "Satoshi Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tv-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tv-r: 14px;                  /* çerçeve, panel, kutu */
  --tv-r-dugme: 10px;
  --tv-ease: cubic-bezier(.16, 1, .3, 1);
  --tv-kap: 1280px;              /* içerik genişliği */
  --tv-kenar: 24px;              /* yan boşluk: 24 px, ≥ 768 px'te 48 px */
  --tv-cx: calc(max(0px, (100vw - var(--tv-kap) - 2 * var(--tv-kenar)) / 2) + var(--tv-kenar)); /* içerik sol kenarı (zemin hizası) */
}
@media (min-width: 768px) {
  :root { --tv-kenar: 48px; }
}
/* Koyu: sistem tercihi (açık seçilmediyse). Aşağıdaki [data-theme="dark"] bloğuyla BİREBİR aynı tutulur. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --tv-tuval: #131416;
    --tv-tuval-derin: #0e0f11;
    --tv-yuzey: #1b1c1f;
    --tv-yuzey-2: #232428;
    --tv-murekkep: #f4f5f7;
    --tv-murekkep-2: #c3c5cb;
    --tv-murekkep-3: #9fa2a9;
    --tv-cizgi: #2c2e33;
    --tv-cizgi-2: #43454c;
    --tv-girdi-kenar: #7d8087;     /* yüzeyde 4,31:1, tuvalde 4,66:1 [final fix: Ö1] */
    --tv-nokta: #2e3035;
    --tv-yayinda: #59d38c;
    --tv-yayinda-yazi: #0e0f12;
    --tv-yayinda-yumusak: #163623;
    --tv-hata: #ff8f87;
    --tv-taslak-zemin: #2b2c31;
    --tv-taslak-yazi: #c9cbd1;
    --tv-kod-zemin: #0c0d0f;
    --tv-seg-secili: #2e2f35;
    --tv-menu-vurgu: color-mix(in srgb, var(--tv-murekkep) 9%, transparent);
    --tv-golge: 0 1px 1px rgba(0, 0, 0, .35), 0 14px 30px -16px rgba(0, 0, 0, .7);
    --tv-golge-lg: 0 1px 1px rgba(0, 0, 0, .35), 0 34px 70px -34px rgba(0, 0, 0, .8);
    --tv-nokta-iri: #383a40;
    --tv-art: #18191c;
    --tv-art-kenar: #2c2e33;
    --tv-spot: rgba(222, 226, 236, .085);
    --tv-gren-o: .085;
    --tv-art-gren: .09;
    --tv-gren-f: none;
    --tv-izgara-ince: rgba(255, 255, 255, .032);
    --tv-izgara-kalin: rgba(255, 255, 255, .06);
    --tv-sutun-dolgu: rgba(255, 255, 255, .018);
    --tv-sutun-kenar: rgba(255, 255, 255, .034);
    --tv-havuz-sicak: rgba(214, 104, 64, .17);
    --tv-havuz-deniz: rgba(64, 140, 214, .16);
    --tv-havuz-asi: rgba(222, 164, 62, .13);
    --tv-havuz-notr: rgba(222, 226, 236, .07);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --tv-tuval: #131416;
  --tv-tuval-derin: #0e0f11;
  --tv-yuzey: #1b1c1f;
  --tv-yuzey-2: #232428;
  --tv-murekkep: #f4f5f7;
  --tv-murekkep-2: #c3c5cb;
  --tv-murekkep-3: #9fa2a9;
  --tv-cizgi: #2c2e33;
  --tv-cizgi-2: #43454c;
  --tv-girdi-kenar: #7d8087;
  --tv-nokta: #2e3035;
  --tv-yayinda: #59d38c;
  --tv-yayinda-yazi: #0e0f12;
  --tv-yayinda-yumusak: #163623;
  --tv-hata: #ff8f87;
  --tv-taslak-zemin: #2b2c31;
  --tv-taslak-yazi: #c9cbd1;
  --tv-kod-zemin: #0c0d0f;
  --tv-seg-secili: #2e2f35;
  --tv-menu-vurgu: color-mix(in srgb, var(--tv-murekkep) 9%, transparent);
  --tv-golge: 0 1px 1px rgba(0, 0, 0, .35), 0 14px 30px -16px rgba(0, 0, 0, .7);
  --tv-golge-lg: 0 1px 1px rgba(0, 0, 0, .35), 0 34px 70px -34px rgba(0, 0, 0, .8);
  --tv-nokta-iri: #383a40;
  --tv-art: #18191c;
  --tv-art-kenar: #2c2e33;
  --tv-spot: rgba(222, 226, 236, .085);
  --tv-gren-o: .085;
  --tv-art-gren: .09;
  --tv-gren-f: none;
  --tv-izgara-ince: rgba(255, 255, 255, .032);
  --tv-izgara-kalin: rgba(255, 255, 255, .06);
  --tv-sutun-dolgu: rgba(255, 255, 255, .018);
  --tv-sutun-kenar: rgba(255, 255, 255, .034);
  --tv-havuz-sicak: rgba(214, 104, 64, .17);
  --tv-havuz-deniz: rgba(64, 140, 214, .16);
  --tv-havuz-asi: rgba(222, 164, 62, .13);
  --tv-havuz-notr: rgba(222, 226, 236, .07);
}
/* --------------------------------------------------------------------------
   3. Temel
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
/* Bağlantıyla bölüm geçişi anlık: yolda kurulan pin-spacer yerleşim değiştirince
   tarayıcının smooth kaydırması hedefe varmadan kesilebiliyor. Normal kullanıcı
   kaydırması ve kaydırmaya bağlı efektler bu tercihten etkilenmez. */
@media (prefers-reduced-motion: no-preference) {
  html.bl-hazir:not([data-bl-hareket="kapali"]) { scroll-behavior: auto; }
}
/* v3.1 Görev 3: ScrollTrigger tam yenilemeden sonra html'e satır içi `scroll-behavior: smooth` bırakabilir (src/hareket/efektler/hero-sahne.ts);
   "Hareketleri durdur" basılıyken satır içi değer yumuşak kaydırmayı geri getirmesin. */
html[data-bl-hareket="kapali"] { scroll-behavior: auto !important; }
body {
  margin: 0;
  font: 400 17px/1.55 var(--tv-yazi);
  color: var(--tv-murekkep);
  background-color: var(--tv-tuval);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
/* Film greni: tek SVG gürültü, sabit katman (kaydırmada yeniden boyanmaz). z 2: içeriğin üstünde; üst menü z ≥ 3 almalı. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: var(--tv-gren) 0 0 / 220px 220px; opacity: var(--tv-gren-o); filter: var(--tv-gren-f);
}
main { display: block; overflow-x: clip; }
main:focus { outline: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
code, kbd, samp, pre { font-family: var(--tv-mono); font-size: .875em; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--tv-murekkep) 18%, transparent); color: var(--tv-murekkep); }
:focus-visible { outline: 2px solid var(--tv-odak); outline-offset: 3px; }

/* Atla bağlantısı ve görsel olarak gizli metin */
.tv-atla {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 10px 14px; border-radius: var(--tv-r-dugme);
  background: var(--tv-murekkep); color: var(--tv-yuzey);
  font-weight: 600; text-decoration: none;
}
.tv-atla:focus { top: 12px; }
.tv-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.tv-ikon { width: 1.25em; height: 1.25em; flex: none; }

/* Hareket güvenlik ağı: azaltılmış harekette ya da "Hareketleri durdur"da CSS animasyonu/geçişi oynamaz, son hâl görünür. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
html[data-bl-hareket="kapali"] *, html[data-bl-hareket="kapali"] *::before, html[data-bl-hareket="kapali"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* --------------------------------------------------------------------------
   4. Düzen ve tipografi
   Kapsayıcı: içerik 1280 px + yan boşluk 24 px (≥ 768 px'te 48 px).
   -------------------------------------------------------------------------- */
.tv-kap {
  width: 100%;
  max-width: calc(var(--tv-kap) + 2 * var(--tv-kenar));
  margin-inline: auto;
  padding-inline: var(--tv-kenar);
}
.tv-h1 { font-size: clamp(46px, 6.65vw, 96px); font-weight: 830; letter-spacing: -.052em; line-height: .99; text-wrap: balance; }
.tv-h2 { font-size: clamp(38px, 4.7vw, 66px); font-weight: 820; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.tv-h3 { font-size: 28px; font-weight: 760; letter-spacing: -.03em; line-height: 1.1; }
.tv-h4 { font-size: 20px; font-weight: 720; letter-spacing: -.015em; line-height: 1.25; }
.tv-giris { font-size: 19px; line-height: 1.5; color: var(--tv-murekkep-2); max-width: 31em; }
.tv-metin { font-size: 17px; line-height: 1.55; color: var(--tv-murekkep-2); max-width: 38em; }
.tv-kucuk { font-size: 14.5px; line-height: 1.45; color: var(--tv-murekkep-2); }
.tv-ust { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 650; color: var(--tv-murekkep-2); }
.tv-etiket { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--tv-yazi); color: var(--tv-murekkep-3); white-space: nowrap; }
.tv-kod { font: 500 .875em/1.4 var(--tv-mono); }
/* --------------------------------------------------------------------------
   5. Zemin sistemi: her bölüm kendi zemininde; art arda iki bölüm aynı zemini taşımaz (scripts/qa-genel-kurallar.mjs zeminHatalari).
   Kullanım: <section class="tv-zemin tv-zemin--<tür>" …>. Desen bölümün ::before/::after'ında (z -1, bölüm kendi yığın
   bağlamında: içerik daima üstte); bu yüzden zemin taşıyan kök kendi ::before/::after'ını kullanmaz.
   Hepsi CSS gradyanı ve maske; karede çalışan JS yok. v3: Tuval zeminleri (izgara: çalışma yüzeyi ızgarası, cetvel: kenar cetvelleri,
   sutun: yerleşim sütunları, seyrek'in uzak çerçeve hatları) ve ışık havuzları kalktı; sade eklendi.
   v3.1 (spec 2026-10-11 §2): ince ızgara (izgara) ve sütun çizgileri (sutun) içerik kapsayıcısına hizalı, sakin desen olarak geri geldi
   (cetvel sayıları, çerçeve hatları ve ölçüler YOK, D37); ışık havuzları 5a'da. Gren: tek statik SVG (body::after; duz ek katmanı aynı SVG).
   Ana sayfa (v3.1): hero nokta · güven sade · ozellikler izgara · bulunur sutun · ulasir nokta · asistan spot · roller duz · vitrin seyrek
   · sss sade · basla spot · alt bilgi duz. Diğer sayfalar: nokta: sayfa başlığı, karşılaştırma · sade: fiyat, form, yasal metin · duz: her planda
   · seyrek: SSS (/fiyatlar).
   -------------------------------------------------------------------------- */
/* overflow-x: clip: taşan dekoratif zemin yatay kaydırma yaratmaz; kaydırma kabı oluşturmaz (sticky çocuklar çalışır), dikey taşma serbest. */
.tv-zemin { position: relative; isolation: isolate; overflow-x: clip; }
.tv-zemin::before, .tv-zemin::after { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* nokta: 24 px nokta ızgara; maskeyle sol üstte dolu (--tv-nokta-odak), kenarlara ve alta doğru seyrek.
   ::after'da: içeriğin altında. */
.tv-zemin--nokta::after {
  content: "";
  background: radial-gradient(circle at 1px 1px, var(--tv-nokta) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask:
    radial-gradient(135% 105% at var(--tv-nokta-odak, 26% 18%), var(--tv-maske) 48%, color-mix(in srgb, var(--tv-maske) 30%, transparent) 100%),
    linear-gradient(180deg, var(--tv-maske) calc(100% - 230px), transparent);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(135% 105% at var(--tv-nokta-odak, 26% 18%), var(--tv-maske) 48%, color-mix(in srgb, var(--tv-maske) 30%, transparent) 100%),
    linear-gradient(180deg, var(--tv-maske) calc(100% - 230px), transparent);
  mask-composite: intersect;
}

/* duz: tuval üstünde düz çalışma yüzeyi + gren; geniş ekranda (içerik kenarı 48 px'ten içeride) yanlarda tuval görünür. */
.tv-zemin--duz { --tv-al: max(0px, calc(var(--tv-cx) - 48px)); }
.tv-zemin--duz::before, .tv-zemin--duz::after { content: ""; left: var(--tv-al); right: var(--tv-al); }
.tv-zemin--duz::before { background: var(--tv-art); box-shadow: 0 0 0 1px var(--tv-art-kenar), var(--tv-golge-art); }
.tv-zemin--duz::after { background: var(--tv-gren) 0 0 / 220px 220px; opacity: var(--tv-art-gren); filter: var(--tv-gren-f); }

/* seyrek: 40 px seyrek iri nokta (başlıkta yukarıdan belirir). v3: v2'nin ::after "uzak çerçeve hatları" (Tuval) kalktı. */
.tv-zemin--seyrek::before {
  content: "";
  background: radial-gradient(circle at 20px 20px, var(--tv-nokta-iri) 1.7px, transparent 2.3px) 0 0 / 40px 40px;
  -webkit-mask: linear-gradient(180deg, transparent 0, var(--tv-maske) 300px);
  mask: linear-gradient(180deg, transparent 0, var(--tv-maske) 300px);
}
/* spot: nokta + yumuşak spot ışığı; ::after ikinci (kaydırılmış) ızgara: noktalar ortada sıklaşır, kenarda söner. */
.tv-zemin--spot::before {
  content: "";
  background:
    radial-gradient(ellipse 1180px 820px at 50% 50%, var(--tv-spot) 0, var(--tv-spot) 38%, transparent 74%),
    radial-gradient(circle at 1px 1px, var(--tv-nokta) 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(ellipse 1100px 700px at 50% 52%, var(--tv-maske) 30%, color-mix(in srgb, var(--tv-maske) 22%, transparent) 72%, transparent 100%);
  mask: radial-gradient(ellipse 1100px 700px at 50% 52%, var(--tv-maske) 30%, color-mix(in srgb, var(--tv-maske) 22%, transparent) 72%, transparent 100%);
}
.tv-zemin--spot::after {
  content: "";
  background: radial-gradient(circle at 1px 1px, var(--tv-nokta) .9px, transparent 1.35px) 12px 12px / 24px 24px;
  -webkit-mask: radial-gradient(ellipse 720px 460px at 50% 52%, var(--tv-maske) 25%, transparent 100%);
  mask: radial-gradient(ellipse 720px 460px at 50% 52%, var(--tv-maske) 25%, transparent 100%);
}

/* sade: yalnız sayfa zemini (desen yok). Yoğun ekran kayıtlı ve uzun metinli bölümler için sakin yüzey. */
.tv-zemin--sade::before, .tv-zemin--sade::after { content: none; }

/* izgara (v3.1): 24 px ince + 120 px ana ızgara, içerik sol kenarına hizalı; üstte ve altta söner (komşu bölüme sert kenar yok). */
.tv-zemin--izgara::after {
  content: "";
  background:
    linear-gradient(var(--tv-izgara-kalin) 1px, transparent 1px) var(--tv-cx) 0 / 120px 120px,
    linear-gradient(90deg, var(--tv-izgara-kalin) 1px, transparent 1px) var(--tv-cx) 0 / 120px 120px,
    linear-gradient(var(--tv-izgara-ince) 1px, transparent 1px) var(--tv-cx) 0 / 24px 24px,
    linear-gradient(90deg, var(--tv-izgara-ince) 1px, transparent 1px) var(--tv-cx) 0 / 24px 24px;
  -webkit-mask: linear-gradient(180deg, transparent, var(--tv-maske) 220px, var(--tv-maske) calc(100% - 260px), transparent);
  mask: linear-gradient(180deg, transparent, var(--tv-maske) 220px, var(--tv-maske) calc(100% - 260px), transparent);
}
/* sutun (v3.1): içerik kapsayıcısının 12 sütunu (dar ekranda 4), sütun başına sol kenar çizgisi + çok açık dolgu, 24 px oluk saydam.
   Katman içerik genişliğinde (left/right = içerik kenarı): kenar boşluklarında desen yok. Üstte ve altta söner. */
.tv-zemin--sutun { --tv-sutun-n: 12; }
.tv-zemin--sutun::after {
  content: ""; left: var(--tv-cx); right: var(--tv-cx);
  background: repeating-linear-gradient(90deg,
    var(--tv-sutun-kenar) 0 1px,
    var(--tv-sutun-dolgu) 1px calc(100% / var(--tv-sutun-n) - 24px),
    transparent calc(100% / var(--tv-sutun-n) - 24px) calc(100% / var(--tv-sutun-n)));
  -webkit-mask: linear-gradient(180deg, transparent, var(--tv-maske) 200px, var(--tv-maske) calc(100% - 200px), transparent);
  mask: linear-gradient(180deg, transparent, var(--tv-maske) 200px, var(--tv-maske) calc(100% - 200px), transparent);
}
@media (max-width: 767.98px) {
  .tv-zemin--sutun { --tv-sutun-n: 4; }
}

/* --------------------------------------------------------------------------
   5a. Işık havuzları (v3.1, spec §2; maket yön A). Büyük radyal gradyan katmanı (filtre yok), bölümün içinde z -1: zemin deseninin
   ::before'unun üstünde, ::after'ının altında; içerik daima üstte. Dekoratif: aria-hidden, tıklanmaz. JS'siz, hareket azaltmada, durdurulmuşken
   ve editörde yerinde durur; hareket katmanı (data-bl-fx="isik", src/hareket/efektler/isik.ts) kaydırmayla yalnız transform ile kaydırır.
   Kullanım: <div class="tv-havuz tv-havuz--<renk> tv-havuz--<konum>" data-bl-fx="isik" data-bl-fx-y="-140" aria-hidden="true"></div>
   renk: (nötr) · sicak · deniz · asi   konum: sag-ust · sol-alt · sol · sag · orta. Bölüm overflow-x: clip → yatay taşma yok.
   -------------------------------------------------------------------------- */
.tv-havuz {
  --tv-hw: 1000px; --tv-hh: 760px;
  position: absolute; z-index: -1; pointer-events: none;
  width: var(--tv-hw); height: var(--tv-hh); border-radius: 50%;
  background: radial-gradient(closest-side, var(--tv-hr, var(--tv-havuz-notr)), transparent);
}
.tv-havuz--sicak { --tv-hr: var(--tv-havuz-sicak); }
.tv-havuz--deniz { --tv-hr: var(--tv-havuz-deniz); }
.tv-havuz--asi { --tv-hr: var(--tv-havuz-asi); }
.tv-havuz--sag-ust { --tv-hw: 1100px; --tv-hh: 820px; right: -260px; top: -220px; }
.tv-havuz--sol-alt { left: -320px; bottom: -180px; }
.tv-havuz--sol { left: -300px; top: 12%; }
.tv-havuz--sag { right: -260px; top: 16%; }
.tv-havuz--orta { --tv-hw: 1200px; left: 50%; top: 50%; margin: calc(var(--tv-hh) / -2) 0 0 calc(var(--tv-hw) / -2); }
/* bl-isik: hareket katmanı havuzu kaydırıyorken (görünür alanda) ayrı katman; duraklayınca kalkar. */
.bl-isik { will-change: transform; }
@media (max-width: 767.98px) {
  .tv-havuz, .tv-havuz--sag-ust, .tv-havuz--orta { --tv-hw: 640px; --tv-hh: 560px; }
  .tv-havuz--sag-ust { right: -300px; top: -160px; }
  .tv-havuz--sol, .tv-havuz--sol-alt { left: -320px; }
  .tv-havuz--sag { right: -320px; }
}

/* --------------------------------------------------------------------------
   5b. Bölüm girişleri (v3.1; data-bl-fx="giris", src/hareket/efektler/giris.ts). Sınıflar ve data-bl-giris YALNIZ hareket katmanı bir hedefi
   görünür alanın altındayken hazırladığında vardır (sunucu çıktısında yok: JS'siz, hareket azaltmada, editörde içerik ilk karede son hâlinde).
   Opaklık YOK: maske (başlık içeriği kırpma çizgisinin altından yükselir) ve kademe (22 px yükselme + yukarıdan aşağı yumuşak maske perdesi).
   -------------------------------------------------------------------------- */
.bl-giris-m { clip-path: inset(-.5em -.5em -.22em -.5em); }
.bl-giris__ic { display: block; }
.bl-giris-m[data-bl-giris="bekliyor"] > .bl-giris__ic { transform: translate3d(0, calc(100% + .35em), 0); }
.bl-giris-m[data-bl-giris="oynuyor"] > .bl-giris__ic { transition: transform 1.15s var(--tv-ease) var(--bl-giris-gecikme, 0ms); }
.bl-giris-k[data-bl-giris] {
  -webkit-mask: linear-gradient(var(--tv-maske) 0 40%, transparent 60%) 0 0 / 100% 260% no-repeat;
  mask: linear-gradient(var(--tv-maske) 0 40%, transparent 60%) 0 0 / 100% 260% no-repeat;
}
.bl-giris-k[data-bl-giris="bekliyor"] { transform: translate3d(0, 22px, 0); -webkit-mask-position: 0 100%; mask-position: 0 100%; }
.bl-giris-k[data-bl-giris="oynuyor"] {
  transition:
    transform .95s cubic-bezier(.22, .61, .36, 1) var(--bl-giris-gecikme, 0ms),
    -webkit-mask-position .95s cubic-bezier(.22, .61, .36, 1) var(--bl-giris-gecikme, 0ms),
    mask-position .95s cubic-bezier(.22, .61, .36, 1) var(--bl-giris-gecikme, 0ms);
}
/* Güvenlik ağı: durdurulmuş, editör, hareket azaltma ve baskı → hazırlanmış hedef de anında son hâlinde (efekt destroy'u da aynısını yapar). */
html[data-bl-hareket="kapali"] :is([data-bl-giris], [data-bl-giris] > .bl-giris__ic),
html[data-bl-editor] :is([data-bl-giris], [data-bl-giris] > .bl-giris__ic) {
  transform: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; transition: none !important;
}
@media (prefers-reduced-motion: reduce), print {
  :is([data-bl-giris], [data-bl-giris] > .bl-giris__ic) {
    transform: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   5c. Akan izometrik duvar (v3.1 Görev 2; data-bl-fx="duvar", src/hareket/efektler/duvar.ts; maket yön A hero duvarı, yön B vitrin duvarı).
   Karolar yalnız demo sitelerin gerçek render'ları (D37). Sunucu çıktısında kök BOŞTUR (aria-hidden): duvarı hareket katmanı kurar; JS'siz, hareket
   azaltmada, "Hareketleri durdur"da ve editörde duvar yoktur. Katmanlar: kök .tv-duvar (taşma gizli, tıklanmaz) → .tv-duvar__sahne (perspektif;
   karolar çözülünce .is-hazir ile bir kez belirir) → .tv-duvar__duzlem (eğim: rotateX + rotateZ) → .tv-duvar__sutun (Web Animations: yalnız
   transform). Sütunlar düzlemin ortasına hizalı (align-items: center): %25 → −%25 akışında görünür pencere her evrede dolu.
   Bölüm ayarlar: --tv-duvar-en (karo/sütun genişliği), --tv-duvar-ara, --tv-duvar-x/-y (sahnenin odak noktası), --tv-duvar-rx/-rz (eğim).
   Sönükleştirme (hero) kökün ::after'ındaki tuval renkli perdeyle (opaklıkla değil); kenar sönümü (vitrin) maskeyle (alttaki zemin deseni görünür).
   -------------------------------------------------------------------------- */
.tv-duvar {
  --tv-duvar-en: 250px; --tv-duvar-ara: 24px; --tv-duvar-x: 50%; --tv-duvar-y: 50%; --tv-duvar-rx: 52deg; --tv-duvar-rz: -32deg;
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
}
.tv-duvar__sahne { position: absolute; left: var(--tv-duvar-x); top: var(--tv-duvar-y); perspective: 2600px; opacity: 0; transition: opacity 1.4s var(--tv-ease); }
.tv-duvar.is-hazir .tv-duvar__sahne { opacity: 1; }
.tv-duvar.is-anlik .tv-duvar__sahne { transition: none; }
.tv-duvar__duzlem {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: var(--tv-duvar-ara);
  transform: translate(-50%, -50%) rotateX(var(--tv-duvar-rx)) rotateZ(var(--tv-duvar-rz));
}
/* İki kopya × (K karo + K ara): padding-bottom son arayı tamamlar → −%50'lik dönem dikişsiz. */
.tv-duvar__sutun { flex: 0 0 var(--tv-duvar-en); display: flex; flex-direction: column; gap: var(--tv-duvar-ara); padding-bottom: var(--tv-duvar-ara); }
.tv-duvar__karo {
  display: block; width: 100%; height: auto; border-radius: 10px; background: var(--tv-yuzey-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tv-murekkep) 10%, transparent), 0 18px 30px -18px rgba(14, 15, 18, .35);
}
.tv-duvar.is-kurulu::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Güvenlik ağı: efekt destroy'da DOM'u söker; yine de durdurulmuş, editör, azaltma ve baskıda kurulmuş bir duvar görünmez. */
html[data-bl-hareket="kapali"] .tv-duvar, html[data-bl-editor] .tv-duvar { display: none; }
@media (prefers-reduced-motion: reduce), print, (forced-colors: active) {
  .tv-duvar { display: none; }
}

/* --------------------------------------------------------------------------
   5d. Hero sahnesi (v3.1 Görev 3; data-bl-fx="hero-sahne", src/hareket/efektler/hero-sahne.ts; maket yön A). Kayıt çerçevesi ilk karede perspektifte
   eğik ve biraz küçük durur (yalnız transform; poster opaklığı hiç değişmez → LCP gecikmez); efekt kaydırmayla düzleştirip tam boya getirir (scrub).
   Başlangıç değerleri tek kaynak: aşağıdaki değişkenler (efekt aynı değişkenleri okur). Eğim YALNIZ hareket kipinde: html.bl-motion (erken satır içi
   betik; "Hareketleri durdur" ve hareket azaltmada yok), editör değil, paket yüklenebildi (yüklenemezse html[data-bl-hareket-yok]: çerçeve düzelir),
   kurulum hatası yok, ekran (baskı değil). Diğer her durumda çerçeve düz ve statik (sunucu çıktısı).
   -------------------------------------------------------------------------- */
[data-bl-fx="hero-sahne"] { --tv-sahne-rx: 30deg; --tv-sahne-olcek: .84; --tv-sahne-p: 1900px; transform-origin: 50% 0; }
@media (max-width: 767.98px) {
  [data-bl-fx="hero-sahne"] { --tv-sahne-rx: 16deg; --tv-sahne-olcek: .92; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  html.bl-motion:not([data-bl-editor]):not([data-bl-hareket-yok]) [data-bl-fx="hero-sahne"]:not([data-bl-fx-durum="hata"]) {
    transform: perspective(var(--tv-sahne-p)) rotateX(var(--tv-sahne-rx)) scale(var(--tv-sahne-olcek));
  }
  html[data-bl-hareket-yok] [data-bl-fx="hero-sahne"] { transition: transform .6s var(--tv-ease); }
}
/* Satır satır giriş (.tv-satirlar: hero H1'i; her çocuk bir satır, display:block): ilk karede başlar, satır kısa bir mesafeden yerine yükselir, 120 ms
   kademe. Opaklık ve maske YOK: metin ilk karede okunur (not.md §LCP: maske metni ilk boyamada gizler). JS gerekmez (paket load + boşta gelir; giriş ilk
   açılışın parçası). Yalnız hareket kipinde, editör değil ve bu sayfa görüntülemesinde "Hareketleri durdur" geçişi yapılmadıysa (html[data-bl-gecis],
   src/lib/hareket-yukle.ts: aç'a basınca başlık yeniden girmez). */
.tv-satirlar > * { display: block; }
@keyframes tv-satir-yuksel { from { transform: translate3d(0, var(--tv-satir-y, .3em), 0); } }
@media screen and (prefers-reduced-motion: no-preference) {
  html.bl-motion:not([data-bl-editor]):not([data-bl-gecis]) .tv-satirlar > * { animation: tv-satir-yuksel 1.1s var(--tv-ease) both; }
  html.bl-motion:not([data-bl-editor]):not([data-bl-gecis]) .tv-satirlar > * + * { animation-delay: .12s; }
  html.bl-motion:not([data-bl-editor]):not([data-bl-gecis]) .tv-satirlar > * + * + * { animation-delay: .24s; }
}

/* --------------------------------------------------------------------------
   6. Düğmeler. Taban (.tv-dugme) = ikincil görünüm; --birincil mürekkep zemin; --onay yeşil (yalnız Onayla).
   --kucuk 36 px görünür yükseklik, ::before ile 44 px dokunma alanı (glare ::after'ı kullanır, çakışmaz).
   -------------------------------------------------------------------------- */
.tv-dugme {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px;
  border: 0; border-radius: var(--tv-r-dugme);
  font: 650 15.5px/1 var(--tv-yazi); letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
  color: var(--tv-murekkep); background: transparent; box-shadow: inset 0 0 0 1px var(--tv-cizgi-2);
  cursor: pointer;
  transition: transform .15s var(--tv-ease), background-color .2s, box-shadow .2s, color .2s;
}
.tv-dugme:hover { background-color: var(--tv-menu-vurgu); }
.tv-dugme:active { transform: translateY(1px); }
.tv-dugme:disabled, .tv-dugme[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.tv-dugme .tv-ikon { width: 18px; height: 18px; }
.tv-dugme--ikincil { color: var(--tv-murekkep); background: transparent; box-shadow: inset 0 0 0 1px var(--tv-cizgi-2); }
.tv-dugme--birincil { color: var(--tv-yuzey); background: var(--tv-murekkep); box-shadow: var(--tv-golge-dugme); }
.tv-dugme--birincil:hover { background-color: color-mix(in srgb, var(--tv-murekkep) 86%, var(--tv-yuzey)); }
.tv-dugme--onay { color: var(--tv-yayinda-yazi); background: var(--tv-yayinda); box-shadow: var(--tv-golge-onay); }
.tv-dugme--onay:hover { background-color: color-mix(in srgb, var(--tv-yayinda) 90%, var(--tv-murekkep)); }
.tv-dugme--kucuk { min-height: 36px; padding: 0 13px; font-size: 14px; }
.tv-dugme--kucuk::before { content: ""; position: absolute; inset: -4px 0; }
/* "Hareketleri durdur" geçişi bölüm içinde (G2 V3.G.hareket; v3.1 Görev 2 fix 1: Vitrin duvarının yanında; Görev 3 hero'da aynı sınıfı kullanabilir).
   Etiket sabit, durum aria-pressed; simge duraklat ↔ oynat. Tıklamayı src/lib/hareket-yukle.ts belge düzeyinde dinler ([data-bl-hareket-dugme]). */
.tv-hareket-dugme .tv-ikon { width: 14px; height: 14px; }
.tv-hareket-dugme [data-ikon="oynat"], .tv-hareket-dugme[aria-pressed="true"] [data-ikon="durdur"] { display: none; }
.tv-hareket-dugme[aria-pressed="true"] [data-ikon="oynat"] { display: inline-flex; }
.tv-hareket-dugme[aria-pressed="true"] { background: var(--tv-menu-vurgu); box-shadow: inset 0 0 0 1.5px var(--tv-murekkep); }
/* Kayıt çağrıları (R29): etiket tema ayarından gelir ve uzunluğu editörün elinde (deneme açıkken 20 karakter). Kapta sığıyorsa görünüm aynı (tek satır);
   sığmıyorsa sarılır, kapıdan taşmaz. Üst menü çağrısı kendi bloğunda (partial/tv-ustmenu-govde). Dar ekranda etiket sığmazsa nowrap yüzünden sayfa taşardı. */
.tv-roller__cagri, .tv-fiyat-kart__cta { max-width: 100%; padding-block: 6px; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }

/* --------------------------------------------------------------------------
   7. Çipler
   .tv-cip: seçilebilir çip (aria-pressed). .tv-cip-durum: Taslak · Yayında (metin görünür; nokta/işaret süs).
   .tv-cip-ornek: "Örnek gösterim" / "Kurgusal veri" / "Örnek site" etiketi (metin-v4 G3; ekran kaydının dışında, tv-kayit).
   -------------------------------------------------------------------------- */
.tv-cip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--tv-cizgi-2);
  font: 650 13.5px/1 var(--tv-yazi); color: var(--tv-murekkep-2); white-space: nowrap; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s;
}
.tv-cip:hover { background-color: var(--tv-menu-vurgu); color: var(--tv-murekkep); }
.tv-cip[aria-pressed="true"], .tv-cip[aria-checked="true"], .tv-cip[aria-current="true"] {
  background: var(--tv-murekkep); color: var(--tv-yuzey); box-shadow: none;
}
.tv-cip-durum {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px 0 8px; border-radius: 999px;
  font: 700 12px/1 var(--tv-yazi); letter-spacing: .005em; white-space: nowrap;
}
.tv-cip-durum::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.tv-cip-durum--taslak { background: var(--tv-taslak-zemin); color: var(--tv-taslak-yazi); }
.tv-cip-durum--taslak::before { width: 9px; height: 9px; border: 1.5px dashed currentColor; }
.tv-cip-durum--yayinda { background: var(--tv-yayinda); color: var(--tv-yayinda-yazi); }
.tv-cip-durum--yayinda::before {
  width: 10px; height: 10px; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2 4 7.6 8.6 2.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.tv-cip-ornek {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px;
  font: 700 11px/1 var(--tv-yazi); color: var(--tv-murekkep-2);
  background: var(--tv-yuzey); box-shadow: inset 0 0 0 1px var(--tv-cizgi-2); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Ortak partial'lar (theme/partial/tv-*.liquid; imzalar partial başlıklarında). Renk yalnız token;
   literal renk yok (yalnız token bloklarında; v3'te kurgusal firma paletleri kalktı).
   -------------------------------------------------------------------------- */

/* partial: tv-cip — onay işareti SVG'si iki türde de basılır; yalnız Yayında'da görünür (Taslak'ta kesik çizgili nokta). */
.tv-cip-durum__isaret {
  flex: none; width: 10px; height: 10px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tv-cip-durum--taslak .tv-cip-durum__isaret { display: none; }
.tv-cip-durum--yayinda:has(> .tv-cip-durum__isaret)::before { content: none; }

/* partial: tv-tema-secici — görünüm (renk modu) seçici (metin-v4 G1). Menü biçimi: simge düğmesi + Açık · Koyu · Cihaza göre menüsü; simge
   html[data-theme]'dan (layout ön-script'i ilk boyamadan önce koyar; yok = Cihaza göre), menü tiki aria-checked'den (tema-menu.ts).
   Segment biçimi: yerel radyo grubu; radyo etiketin tamamını kaplar (saydam, tıklama ve odak onda), görünüm label:has(). JS yoksa
   seçici gizli (seçim uygulanamaz). */
html:not(.js) .tv-tema, html:not(.js) .tv-tema-seg { display: none !important; }
.tv-tema { position: relative; }
.tv-tema-dugme {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: var(--tv-r-dugme); background: transparent; color: var(--tv-murekkep-2);
  cursor: pointer; transition: background-color .2s, color .2s;
}
.tv-tema-dugme:hover, .tv-tema-dugme[aria-expanded="true"] { color: var(--tv-murekkep); background: var(--tv-menu-vurgu); }
.tv-tema-dugme__i { display: none; grid-area: 1 / 1; }
.tv-tema-dugme__i .tv-ikon { width: 19px; height: 19px; }
:root:not([data-theme="light"]):not([data-theme="dark"]) .tv-tema-dugme__i[data-ikon="system"],
:root[data-theme="light"] .tv-tema-dugme__i[data-ikon="light"],
:root[data-theme="dark"] .tv-tema-dugme__i[data-ikon="dark"] { display: block; }
.tv-tema-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 184px; padding: 5px;
  border-radius: 12px; background: var(--tv-yuzey); box-shadow: var(--tv-golge-lg), 0 0 0 1px var(--tv-cizgi);
  transform-origin: top right; animation: tv-tema-liste-gir .16s var(--tv-ease);
}
@keyframes tv-tema-liste-gir { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
.tv-tema-liste__baslik { padding: 7px 10px 6px; font-size: 12px; font-weight: 700; color: var(--tv-murekkep-3); }
.tv-tema-liste__oge {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font: 600 14.5px/1 var(--tv-yazi); color: var(--tv-murekkep-2); text-align: left;
}
.tv-tema-liste__oge .tv-ikon { width: 16px; height: 16px; }
.tv-tema-liste__oge:hover, .tv-tema-liste__oge:focus-visible { background: var(--tv-menu-vurgu); color: var(--tv-murekkep); }
.tv-tema-liste__oge:focus-visible { outline: 2px solid var(--tv-odak); outline-offset: -2px; }
.tv-tema-liste__oge[aria-checked="true"] { color: var(--tv-murekkep); }
.tv-tema-liste__tik { margin-left: auto; opacity: 0; }
.tv-tema-liste__oge .tv-tema-liste__tik { width: 14px; height: 14px; }
.tv-tema-liste__oge[aria-checked="true"] .tv-tema-liste__tik { opacity: 1; }
.tv-tema-seg {
  display: inline-flex; gap: 2px; margin: 0; padding: 3px; min-inline-size: 0;
  border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--tv-cizgi-2);
}
.tv-tema-seg__secenek {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  font: 650 14px/1 var(--tv-yazi); color: var(--tv-murekkep-3); cursor: pointer;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.tv-tema-seg__secenek input {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0;
  border-radius: inherit; opacity: 0; cursor: pointer; appearance: none;
}
.tv-tema-seg__secenek .tv-ikon { width: 15px; height: 15px; }
.tv-tema-seg__secenek:hover { color: var(--tv-murekkep); }
/* Seçili parça (WCAG 1.4.11, Ruling R17): sınırı 1.5 px --tv-murekkep-3 halka. Ölçülen oran: alt bilgi zemini (--tv-tuval-derin)
   5.47 / 7.50, parça dolgusu (--tv-seg-secili) 6.97 / 5.22, mobil panel (--tv-yuzey) 6.97 / 6.67 (açık / koyu); hepsi ≥ 3:1. */
.tv-tema-seg__secenek:has(input:checked) { background: var(--tv-seg-secili); color: var(--tv-murekkep); box-shadow: 0 0 0 1.5px var(--tv-murekkep-3); }
.tv-tema-seg__secenek:has(input:focus-visible) { outline: 2px solid var(--tv-odak); outline-offset: 2px; }
.tv-tema-seg__ipucu {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 2; padding: 5px 8px; border-radius: 6px;
  background: var(--tv-murekkep); color: var(--tv-yuzey); font: 650 12px/1 var(--tv-yazi); white-space: nowrap;
  opacity: 0; pointer-events: none; transform: translate(-50%, 3px); transition: opacity .15s, transform .15s var(--tv-ease);
}
.tv-tema-seg__secenek:hover .tv-tema-seg__ipucu, .tv-tema-seg__secenek:has(input:focus-visible) .tv-tema-seg__ipucu { opacity: 1; transform: translate(-50%, 0); }
.tv-tema-seg--yazili .tv-tema-seg__secenek { height: 36px; padding: 0 12px; font-size: 15px; }

/* partial: tv-kayit — panelin gerçek ekran kaydı (src/lib/kayit.ts). Sade tarayıcı penceresi (üç nokta, adres metni yok); ekran kutusu CSS
   aspect-ratio'dan kurulur (--tv-kayit-oran / mobilde --tv-kayit-oran-m, partial satır içi verir): poster, kare ya da video gelince yerleşim kaymaz.
   Görsel altta, video üstte (opaklık 0 → .is-yuklu'da 1; yalnız opacity geçişi). Şerit: etiket çipi (kaydın dışında) + Duraklat/Oynat. Şeridin
   yüksekliği sabittir: düğme JS'le görünür olunca bir şey kaymaz. */
.tv-kayit { min-width: 0; }
.tv-kayit__pencere { overflow: hidden; border-radius: var(--tv-r); background: var(--tv-yuzey); box-shadow: var(--tv-golge-lg), 0 0 0 1px var(--tv-cizgi); }
.tv-kayit__cubuk { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; background: var(--tv-yuzey-2); border-bottom: 1px solid var(--tv-cizgi); }
.tv-kayit__cubuk i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--tv-cizgi-2); }
.tv-kayit__ekran { position: relative; aspect-ratio: var(--tv-kayit-oran, 16 / 10); background: var(--tv-yuzey-2); }
.tv-kayit__ekran picture { display: contents; }
.tv-kayit__resim, .tv-kayit__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-kayit__video { opacity: 0; transition: opacity .35s var(--tv-ease); }
.tv-kayit.is-yuklu .tv-kayit__video { opacity: 1; }
.tv-kayit__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px; margin-top: 12px; }
.tv-kayit__etiket { flex: none; }
/* Görünür altyazı (metin-v4 K; Görev 7): etiketin yanında, düğmeden önce; dar ekranda sarar. */
.tv-kayit__altyazi { flex: 1 1 14em; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--tv-murekkep-2); }
.tv-kayit__dugme { margin-left: auto; gap: 7px; }
.tv-kayit__dugme .tv-ikon { width: 15px; height: 15px; }
.tv-kayit__dugme-i { display: inline-flex; }
.tv-kayit__dugme [data-ikon="oynat"], .tv-kayit__dugme.is-oynat [data-ikon="duraklat"] { display: none; }
.tv-kayit__dugme.is-oynat [data-ikon="oynat"] { display: inline-flex; }
@media (max-width: 767.98px) {
  .tv-kayit__ekran { aspect-ratio: var(--tv-kayit-oran-m, var(--tv-kayit-oran, 16 / 10)); }
  .tv-kayit__cubuk { height: 24px; padding: 0 11px; }
  .tv-kayit__cubuk i { width: 7px; height: 7px; }
}

/* partial: tv-fiyat — plan kartları (TvFiyatOzet, TvFiyatlar). Kart yüzeyi .tv-fiyat-kart__yuzey; önerilen kart kalın mürekkep çerçeve taşır ve
   "Önerilen" rozeti kartın üst kenarına oturur (v3: seçim tutamaçları kalktı). Maket yon-a3 .plans: önerilen kart daha geniş iç boşluk ve
   daha büyük fiyat taşır, kartlar alt kenarda hizalı. Hiçbir animasyon yok (fiyat ve rozet hareket etmez). ul'lar öğe-nitelikli yazılır
   (ul[role="list"] sıfırlaması tek sınıfın özgüllüğünü geçer). */
.tv-fiyat__izgara { display: grid; grid-template-columns: repeat(var(--tv-fiyat-n, 3), minmax(0, 1fr)); gap: 28px; align-items: end; }
.tv-fiyat-kart { position: relative; min-width: 0; padding-top: 26px; }
.tv-fiyat-kart__yuzey {
  position: relative; display: flex; flex-direction: column; padding: 28px 28px 26px;
  background: var(--tv-yuzey); border-radius: var(--tv-r); box-shadow: var(--tv-golge), 0 0 0 1px var(--tv-cizgi);
}
.tv-fiyat-kart--onerilen .tv-fiyat-kart__yuzey { padding: 36px 32px 32px; box-shadow: var(--tv-golge-lg), 0 0 0 2px var(--tv-murekkep); }
.tv-fiyat-kart__rozet { position: absolute; left: 24px; top: 0; transform: translateY(-50%); }
.tv-fiyat-kart__ad { font-size: 22px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; }
.tv-fiyat-kart__fiyat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 22px; }
.tv-fiyat-kart__tutar { font-size: clamp(46px, 4.6vw, 68px); font-weight: 830; letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums; }
.tv-fiyat-kart--onerilen .tv-fiyat-kart__tutar { font-size: clamp(54px, 5.4vw, 80px); }
.tv-fiyat-kart__soneki { font-size: 16px; font-weight: 700; color: var(--tv-murekkep-2); }
.tv-fiyat-kart__yillik, .tv-fiyat-kart__gerekce { margin-top: 12px; font-size: 14.5px; line-height: 1.5; font-weight: 550; color: var(--tv-murekkep-2); }
ul.tv-fiyat-kart__haklar { list-style: none; margin: 22px 0 0; padding: 0; }
.tv-fiyat-kart__hak { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--tv-cizgi); font-size: 15.5px; font-weight: 650; }
.tv-fiyat-kart__hak-ad { color: var(--tv-murekkep-2); }
.tv-fiyat-kart__hak-deger { text-align: right; }
.tv-fiyat-kart__cta { width: 100%; margin-top: 22px; }
.tv-fiyat-rozet { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--tv-murekkep); color: var(--tv-yuzey); font: 700 11.5px/1 var(--tv-yazi); }
@media (max-width: 959px) {
  .tv-fiyat__izgara { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .tv-fiyat-kart--onerilen .tv-fiyat-kart__yuzey { padding: 32px 28px 28px; }
}
@media (max-width: 559px) {
  .tv-fiyat-kart__yuzey, .tv-fiyat-kart--onerilen .tv-fiyat-kart__yuzey { padding: 26px 20px 22px; }
}

/* --------------------------------------------------------------------------
   9. Zorlanmış renk kipi (Windows Yüksek Karşıtlık, forced-colors: active). [final fix: Ö2, WCAG 1.4.11]
   Bu kipte tarayıcı box-shadow'u siler, renkleri sistem renklerine çevirir ve gradient arka planları (nokta zeminleri, spot ışığı) bırakır.
   Kenarlar box-shadow ile çizildiği için form alanı, çip, düğme ve kartlar yalnız etiket olarak kalırdı: bunlara GERÇEK border verilir (box-sizing
   border-box: boyut değişmez). Özgüllük için `html` öneki: bölümlerin satır içi <style> kuralları aynı sırada kardeştir ve `border: 0` içerir. Seçili
   durumlar (aria-pressed/checked/selected) dolgu rengiyle ayrıştığı için Highlight sistem rengine geçer (forced-color-adjust: none; yalnız sistem
   renkleri).
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  html :is(
    .tv-girdi, .tv-dugme, .tv-cip, .tv-cip-ornek, .tv-cip-durum, .tv-tema-seg, .tv-alt__hareket, .tv-ustm__menu-dugme,
    .tv-fm__onay-isaret, .tv-donem__secenekler, .tv-alan__kuruldu
  ) { border: 1px solid ButtonBorder; }
  html :is(
    .tv-fm__kart, .tv-acc, .tv-tema-liste, .tv-roller__kart, .tv-roller__panel, .tv-karsi__kap, .tv-fiyat-kart__yuzey, .tv-faq__bos, .tv-kayit__pencere
  ) { border: 1px solid CanvasText; }
  /* Seçili / etkin durum: dolgu bu kipte düştüğü için sistem vurgu rengi (yalnız sistem renkleri). */
  html :is(
    .tv-cip[aria-pressed="true"], .tv-cip[aria-checked="true"], .tv-cip[aria-current="true"], .tv-dugme[aria-pressed="true"],
    .tv-alt__hareket[aria-pressed="true"], .tv-tema-seg__secenek:has(input:checked)
  ) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  html :is(.tv-dugme--birincil, .tv-dugme--onay, .tv-fiyat-rozet) { forced-color-adjust: none; background: ButtonText; color: ButtonFace; border-color: ButtonText; }
  html .tv-girdi[aria-invalid="true"], html .tv-fm__onay-etiket input[aria-invalid="true"] ~ .tv-fm__onay-isaret { border-width: 2px; }
  /* Özel onay kutusu: işaret yalnız işaretliyken görünür (renk düşünce `color: transparent` işareti gizlemez). */
  html .tv-fm__onay-isaret .tv-ikon { visibility: hidden; }
  html .tv-fm__onay-etiket input:checked ~ .tv-fm__onay-isaret { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  html .tv-fm__onay-etiket input:checked ~ .tv-fm__onay-isaret .tv-ikon { visibility: visible; }
  /* v3.1: ışık havuzları (renkli gradyan; bu kipte gradyan kalır) sistem renklerinin üstüne renk basmasın. */
  html .tv-havuz { display: none; }
}
/* v3.1: yalnız çalışan anlatım efekti bu sınıfı kurar. JS'siz/mobil/editör sunucu düzeni korunur. */
.is-anlatim .tv-sonuc__ic { padding-block: 32px; min-height: calc(100dvh - 112px); }
.is-anlatim .tv-sonuc__bas { max-width: none; }
.is-anlatim .tv-sonuc__bas .tv-h2 { margin-top: 10px; font-size: clamp(34px, 3.3vw, 48px); }
.is-anlatim .tv-sonuc__bas .tv-giris { margin-top: 16px; max-width: 48em; font-size: 17px; }
.tv-anlatim__izgara { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; margin-top: 32px; align-items: start; }
.tv-anlatim__metin { position: relative; padding-left: 24px; min-width: 0; }
.is-anlatim ol.tv-yollar { border: 0; margin: 0; }
.is-anlatim .tv-yol { display: block; padding: 12px 0; border: 0; }
.is-anlatim .tv-yol__baslik { font-size: 24px; }
.is-anlatim .tv-yol__govde { display: none; margin-top: 12px; gap: 12px; }
.is-anlatim .tv-yol.is-aktif .tv-yol__govde { display: grid; }
.is-anlatim .tv-yol__metin { font-size: 16px; line-height: 1.5; }
.is-anlatim .tv-sonuc__editor { display: block; margin-top: 16px; }
.is-anlatim .tv-sonuc__editor-metin { font-size: 17px; line-height: 1.45; }
.is-anlatim .tv-sonuc__editor .tv-sonuc__kayitlar { display: none; }
.tv-anlatim__sec { display: block; width: 100%; padding: 4px 0; border: 0; background: none; text-align: left; color: var(--tv-murekkep-2); font: inherit; letter-spacing: inherit; cursor: pointer; }
.tv-anlatim__sec[aria-current] { color: var(--tv-murekkep); }
.tv-anlatim__sec:focus-visible { outline: 2px solid var(--tv-murekkep); outline-offset: 5px; }
.tv-anlatim__cizgi { position: absolute; top: 16px; bottom: 0; left: 0; width: 2px; background: var(--tv-cizgi); }
.tv-anlatim__cizgi i { display: block; height: 100%; background: var(--tv-murekkep); transform-origin: top; transition: transform .24s ease; }
.tv-anlatim__sahne { display: grid; min-width: 0; }
.tv-anlatim__sahne > .tv-kayit { grid-area: 1 / 1; margin: 0; }