/* Sotto IPTV — site · tokens.json 2.0.0 (A · Gece Altını) · yalnız koyu tema.
 *
 * Dosyanın ilk bölümü ("kabuk") tasarım teslimindeki CSS-REFERENCE bloğunun kendisi:
 * ~/Claude Code/Sotto IPTV/2-tasarim/sotto-canvas/shell/web-shell.html, `<template id="sotto-web-shell-css">`.
 * Birebir kopyalanıyor ki pano ile site arasında elle çevrilmiş bir ara katman olmasın —
 * o katman, iki tarafın bir gün sessizce ayrışacağı yerdir.
 *
 * Sonrasındaki bloklar sayfaların kendi kuralları. Sayfalar yeniden yazıldıkça buradan
 * eksilecekler; bugün duruyorlar, çünkü kabuk ile sayfa gövdesi ayrı commit'lerde geçiyor ve
 * arada sitenin bozuk durmaması gerekiyor.
 *
 * CSP: canlıda `style-src` içinde 'unsafe-inline' YOK; yazı tipi `font-src 'self'` (WEB-01). Yani `style="…"` öznitelikleri tarayıcı
 * tarafından atılıyor, SVG'nin içindekiler de. Her şey sınıfla yazılır.
 * Yerelde denemek için: `python3 tools/web_serve_csp.py`
 */

/* ---- yazı tipi: Outfit 500/600, bizim sunucumuzdan (güvenlik denetimi WEB-01, 4 Eki 2026) ------
 * Google Fonts'tan yüklenince her ziyaretçinin IP adresi rızasız Google'a gidiyordu (LG München I,
 * 2022). Dosyalar Google'ın aynı CSS'inin verdiği değişken woff2 alt kümeleri (Outfit v15, latin +
 * latin-ext; TR/DE harfleri latin-ext'te), lisans `assets/fonts/OFL.txt` (SIL OFL 1.1). Aile ve
 * ağırlıklar önceki `<link>` ile aynı: `family=Outfit:wght@500;600&display=swap`. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- kabuk (CSS-REFERENCE, birebir) ------------------------------------------------- */

:root {
  color-scheme: dark;
  --s0: #0D0B09; --s1: #16130F; --s2: #211C16; --s3: #2E2820;
  --hairline: #2C261F; --border-strong: #4A4136; --border-input: #817668;
  --t1: #F3EEE6; --t2: #BDB3A4; --t3: #9A8F80;
  --accent: #E9B45F; --accent-hover: #F0C27A; --accent-pressed: #D9A45A; --on-accent: #1A1206;
  --ui: system-ui, -apple-system, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --brand: "Outfit", var(--ui);
  --fs-display: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
  --fs-title: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  --fs-section: clamp(1.5rem, 1.333rem + 0.7407vw, 2rem);
  --fs-card: clamp(1.25rem, 1.167rem + 0.3704vw, 1.5rem);
  --fs-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --fs-callout: clamp(0.9375rem, 0.9167rem + 0.09259vw, 1rem);
  --fs-caption: 0.8125rem;
  --fs-button: clamp(1rem, 0.9792rem + 0.09259vw, 1.0625rem);
  --gutter: 16px; --col-gap: 16px; --section-gap: 64px; --header-h: 56px; --after-title: 24px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (min-width: 600px)  { :root { --gutter: 24px; } }
@media (min-width: 840px)  { :root { --gutter: 32px; --col-gap: 24px; --section-gap: 96px; --header-h: 72px; --after-title: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 40px; } }

body { margin: 0; background: var(--s0); color: var(--t1); font: 400 var(--fs-body)/1.55 var(--ui); -webkit-font-smoothing: antialiased; }
.wrap      { max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.wrap-wide { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 840px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
main > section { padding-top: var(--section-gap); scroll-margin-top: calc(var(--header-h) + 24px); }
main > section:last-child { padding-bottom: var(--section-gap); }
.eyebrow { margin: 0 0 12px; font: 600 var(--fs-caption)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
h1, h2, h3 { font-family: var(--brand); font-weight: 600; text-wrap: balance; margin: 0; }
.h-display { font-size: var(--fs-display); line-height: 1.2; letter-spacing: -0.01em; }
h2, .h-title { font-size: var(--fs-title); line-height: 1.25; letter-spacing: -0.01em; }
h3, .h-section { font-size: var(--fs-section); line-height: 1.25; }
.lead { margin: 16px 0 0; max-width: 65ch; color: var(--t2); }
.section-body { margin-top: var(--after-title); }

/* üst çubuk */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--s0); border-bottom: 1px solid var(--hairline); padding-top: env(safe-area-inset-top, 0px); }
.site-head .wrap { height: calc(var(--header-h) - 1px); display: flex; align-items: center; }
.logo { flex: none; display: block; border-radius: 4px; }
.logo svg { display: block; }
/* iki SVG: .logo-sm = D 28 küçük sürüm (keskin üçgen, D ≤ 32 kuralı), .logo-lg = D 36 ana çizim */
.logo .logo-lg { display: none; }
.nav-desktop, .head-actions { display: none; }
.menu { margin-left: auto; }
@media (min-width: 840px) {
  .logo .logo-sm { display: none; }
  .logo .logo-lg { display: block; }
  .nav-desktop { display: flex; align-items: center; gap: 8px; margin-left: 36px; }
  .head-actions { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .menu { display: none; }
  .lang .globe { display: none; }
}
@media (min-width: 1200px) { .lang .globe { display: block; } }
.nav-desktop a { height: 40px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; font: 500 var(--fs-callout)/1.375 var(--ui); color: var(--t2); text-decoration: none; white-space: nowrap; }
.nav-desktop a[aria-current="page"] { font-weight: 600; color: var(--t1); }

/* menü (<840) · JS'siz */
.menu > summary { list-style: none; height: 48px; margin-right: -12px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 8px; font: 600 1rem/1.375 var(--ui); color: var(--t1); cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .when-open, .menu[open] .when-closed { display: none; }
.menu[open] .when-open { display: inline; }
.menu-panel { position: fixed; inset: var(--header-h) 0 0 0; overflow: auto; overscroll-behavior: contain; background: var(--s0); padding: 8px var(--gutter) 24px; }
.menu-panel li + li { border-top: 1px solid var(--hairline); }
.menu-panel a.row { height: 56px; display: flex; align-items: center; font: 600 var(--fs-card)/1.3 var(--ui); color: var(--t1); text-decoration: none; }

/* düğmeler */
.btn { height: 48px; padding: 0 24px; box-sizing: border-box; border: 1px solid transparent; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--fs-button)/1.25 var(--ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease), color 120ms var(--ease); }
.btn-s { height: 40px; padding: 0 16px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: var(--s2); border-color: var(--border-strong); color: var(--t1); }
.btn-secondary:active { background: var(--s3); border-color: var(--border-strong); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-secondary:hover { border-color: var(--border-input); }
  .nav-desktop a:hover, .link-quiet:hover { color: var(--t1); }
  .link:hover, .link-arrow:hover { color: var(--accent-hover); text-decoration: underline; text-decoration-thickness: 2px; }
  .link-quiet:hover { text-decoration: underline; text-decoration-thickness: 1px; }
}
.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:active, .link-arrow:active { color: var(--accent-pressed); }
.link-arrow { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-button)/1.25 var(--ui); color: var(--accent); text-decoration: none; text-underline-offset: 3px; }
.link-quiet { color: var(--t2); text-decoration: none; text-underline-offset: 3px; }
@media (max-width: 599px) { .hero .btn-row { flex-direction: column; align-items: stretch; gap: 12px; } }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible { border-radius: 12px; }

/* dil anahtarı */
.lang { display: flex; align-items: center; gap: 4px; }
.lang .globe { margin-right: 2px; }
.lang a { width: 44px; height: 32px; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 500 var(--fs-caption)/1.25 var(--ui); letter-spacing: 0.08em; color: var(--t2); text-decoration: none; }
.lang a[aria-current="true"] { background: var(--s3); border-color: var(--border-input); font-weight: 600; color: var(--t1); }
@media (max-width: 839px) { .lang a { width: 56px; height: 44px; border-radius: 10px; } }
/* 840–1199: üst çubukta üç dil (TR · EN · DE) var; 840'ta EN sağ boşluğa, DE ekran dışına taşıyordu. */
@media (min-width: 840px) and (max-width: 1199px) {
  .nav-desktop { margin-left: 24px; }
  .head-actions { gap: 16px; }
  .lang a { width: 36px; }
}
/* Üst çubuktaki düğme artık "Beta'ya katıl / Join the beta": 840'ta EN'de yer daraldı. */
@media (min-width: 840px) and (max-width: 1039px) {
  .nav-desktop { margin-left: 16px; gap: 2px; }
  .nav-desktop a { padding: 0 10px; }
  .head-actions { gap: 12px; }
}

/* mağaza yerleri */
.store-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.store-slot { height: 40px; box-sizing: border-box; border: 1px dashed var(--border-input); border-radius: 6px; display: flex; align-items: center; justify-content: center; font: 400 0.75rem/1.33 var(--ui); color: var(--t3); white-space: nowrap; }
.store-slot[data-slot="app-store-badge"] { width: 120px; }
.store-slot[data-slot="google-play-badge"] { width: 135px; }
.store-slots img { display: block; height: 40px; width: auto; }

/* alt bilgi */
.site-foot { border-top: 1px solid var(--hairline); padding: 48px 0 calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--t2); }
@media (min-width: 840px) { .site-foot { padding: 64px 0 32px; } }
.foot-statement { margin: 16px 0 0; font: 400 var(--fs-callout)/1.47 var(--ui); color: var(--t1); max-width: 34rem; }
.foot-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.foot-links a { min-height: 44px; display: flex; align-items: center; }
@media (min-width: 840px) { .foot-links { display: block; margin-top: 8px; } .foot-links a { min-height: 32px; display: inline-flex; } }
.foot-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hairline); font: 400 var(--fs-caption)/1.4 var(--ui); color: var(--t3); }
@media (min-width: 840px) { .foot-legal { margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; gap: 24px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---- ek değişkenler (şartname §5.2) -------------------------------------------------- */
:root {
  --s-selected: #16130F; --s-focus: #211C16;
  --t-disabled: #6B6053;
  --accent-subtle: #302410;
  --live: #FF5C5C;
  --ok: #6FCB8F; --ok-bg: #121F16;
  --warn: #F29D52; --warn-bg: #26190E;
  --err: #FF7A6E; --err-bg: #301312;
  --progress-track: #2E2820; --progress-track-focus: #3A332A; --progress-fill: #9A8F80;
  --stage: #121210;
  --video: #000000;   /* oynatıcı zemini: saf siyah, yoksa ikinci bir yüzey gibi okunur */
  --tile-rose-bg: #3B211D;   --tile-rose-fg: #F0B5A6;
  --tile-green-bg: #1F3024;  --tile-green-fg: #A8D8B2;
  --tile-olive-bg: #2F2C1B;  --tile-olive-fg: #DCD196;
  --tile-teal-bg: #1B2E2C;   --tile-teal-fg: #9ED6CC;
  --tile-plum-bg: #33202E;   --tile-plum-fg: #E3B6D4;
  --tile-blue-bg: #1E2638;   --tile-blue-fg: #B3C6F0;
  --tile-violet-bg: #28213A; --tile-violet-fg: #C7B8F2;
  --tile-amber-bg: #36261B;  --tile-amber-fg: #EDC49D;
  --r1: 4px; --r2: 6px; --r3: 8px; --r4: 12px; --r5: 16px; --r6: 20px; --r-pill: 999px;
  /* Eski üç ad, aynı değerlerle takma ad olarak duruyor: sayfalar numaralı ölçeğe tek tek geçiyor. */
  --r-s: var(--r3); --r-m: var(--r4); --r-l: var(--r6);
  --sp-half: 2px;
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px;
  --sp8: 64px; --sp9: 96px;
  --fs-row: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --fs-badge: 0.8125rem;
  --fs-monogram: clamp(0.9375rem, 0.9167rem + 0.09259vw, 1rem);
  --fs-panel: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);
  --fs-metric: clamp(3.5rem, 2.667rem + 3.704vw, 6rem);
  --fs-price: clamp(2.25rem, 2rem + 1.111vw, 3rem);
  --lh-legal: 1.55;
  --dur-short: 120ms; --dur-medium: 200ms; --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --display: var(--brand);
}
@media (min-width: 840px) { :root { --lh-legal: 1.65; } }

/* Menü panelindeki liste madde imleri.
 *
 * CSS-REFERENCE `.menu-panel li + li` ve `a.row` kurallarını veriyor ama `ul`in kendi
 * `list-style`ını sıfırlamıyor — pano işaretlemesinde liste yoktu. Telefonda ölçüldü
 * (2026-09-27): menü satırları madde imiyle çıkıyordu. Referans bloğu birebir kalsın diye
 * düzeltme burada, ekler bölümünde. */
.menu-panel ul { list-style: none; margin: 0; padding: 0; }

/* İçeriğe geç: görünmez durur, odak alınca sol üstte belirir. */
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 30;
  padding: 12px 16px; border-radius: var(--r4);
  background: var(--s2); color: var(--t1); font: 600 var(--fs-callout)/1.3 var(--ui);
  text-decoration: none;
}
.skip:focus-visible { top: 12px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
p { margin: 0 0 var(--sp4); max-width: 65ch; }
.muted { color: var(--t2); }
.small { font-size: var(--fs-caption); color: var(--t3); }
.section { padding-block: var(--sp8); border-top: 1px solid var(--hairline); }
.section:first-of-type { border-top: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: center; }

/* ---- sayfa blokları (sayfalar yeniden yazıldıkça eksilecek) -------------------------- */

/* ---- alt bilgi rötuşları ------------------------------------------------------------- */

/* Kabuk kuralı ≥840'ta küçük logoyu gizliyor (üst çubukta büyüğü çiziliyor). Alt bilgide her
   genişlikte küçük sürüm kullanılıyor, bu yüzden o kural burada geri alınıyor. */
@media (min-width: 840px) { .foot-logo .logo-sm { display: block; } }
.site-foot .logo { margin-bottom: var(--sp4); }
/* Alt bilgi bağlantıları sessiz: sayfanın gövdesindeki bağlantı rengi burada gürültü yapıyor
   ve on bağlantı yan yana altın çizgiye dönüşüyor. */
.foot-links a, .site-foot .link { color: var(--t2); text-decoration: none; }
@media (hover: hover) { .foot-links a:hover, .site-foot .link:hover { color: var(--t1); text-decoration: underline; } }
.foot-links a[aria-current="page"] { color: var(--t1); font-weight: 600; }
.site-foot .eyebrow { margin-top: var(--sp5); margin-bottom: 0; }
.site-foot .small { color: var(--t3); }

/* Üç sütun (K-W3, panodaki FOOTER-DESKTOP): ≥840'ta marka 1–5 · Sayfalar 7–9 · İletişim ve dil 10–12.
   <840'ta aynı HTML alt alta akar; telefondaki düzen bugünküyle aynı, altına dil anahtarı eklendi. */
.foot-brand .small { margin-top: var(--sp2); }
.foot-contact > p:not(.eyebrow) { margin: 0; }
.foot-contact .link { min-height: 44px; display: inline-flex; align-items: center; }
.foot-contact .lang { margin-top: var(--sp2); }
.foot-legal p { margin: 0; }
.foot-legal p + p { margin-top: var(--sp2); }
@media (min-width: 840px) {
  .foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .foot-brand { grid-column: 1 / span 5; }
  .foot-pages { grid-column: 7 / span 3; }
  .foot-contact { grid-column: 10 / span 3; }
  .foot-pages > .eyebrow:first-child, .foot-contact > .eyebrow:first-child { margin-top: 0; }
  .foot-contact .link { min-height: 32px; margin-top: var(--sp2); }
  .foot-contact .lang { margin-top: var(--sp3); }
  .site-foot .lang a { width: 44px; }
  .foot-legal { align-items: baseline; }
  .foot-legal p:first-child { flex: none; }
  .foot-legal p + p { margin-top: 0; max-width: none; text-align: right; }
}

/* ---- ana sayfa: kahraman ------------------------------------------------------------ */

.hero { padding-top: var(--sp8); }
@media (max-width: 599px) { .hero { padding-top: 40px; } }
.hero-top { display: grid; gap: var(--sp5); }
@media (min-width: 840px) {
  .hero-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .hero-say { grid-column: 1 / span 7; max-width: 690px; }
  .hero-act { grid-column: 8 / span 5; }
}
.chip {
  height: 32px; margin: 0 0 var(--sp5); padding: 0 var(--sp4); border-radius: var(--r5);
  display: inline-flex; align-items: center; gap: var(--sp2);
  background: var(--s1); border: 1px solid var(--hairline);
  font: 500 var(--fs-caption)/1.3 var(--ui); color: var(--t2);
}
.chip-dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent); }
.hero h1 { margin: 0; }
.hero .lead { margin-top: 0; }
.hero .btn-row { margin-top: var(--sp5); }
.tv-line {
  margin: var(--sp5) 0 0; display: flex; align-items: center; gap: var(--sp2);
  font: 400 var(--fs-callout)/1.4 var(--ui); color: var(--t2);
}

/* Figür dekoratiftir; anlamı figcaption'da. Arkasındaki şerit sayfanın genişliğine yayılır,
   o yüzden görselin içinde değil, burada. */
.hero-figure { position: relative; margin: 56px 0 0; padding-bottom: var(--sp6); }
@media (max-width: 839px) { .hero-figure { margin-top: var(--sp6); } }
.hero-band { position: absolute; left: 0; right: 0; top: 300px; bottom: 0; background: var(--s1); }
@media (max-width: 839px) { .hero-band { top: 40%; } }
.hero-figure picture { position: relative; display: block; }
.hero-figure img {
  display: block; width: 100%; max-width: 1288px; height: auto; margin-inline: auto;
  border-radius: var(--r5);
}
@media (max-width: 599px) { .hero-figure img { max-width: 254px; border-radius: var(--r4); } }
.hero-figure figcaption {
  position: relative; margin: var(--sp5) auto 0; max-width: 1200px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp2);
  font: 400 var(--fs-caption)/1.4 var(--ui); color: var(--t3); text-align: center;
}
.hero-figure figcaption strong { font-weight: 600; color: var(--t2); }
.cap-narrow { display: none; }
@media (max-width: 599px) { .cap-wide { display: none; } .cap-narrow { display: inline; } }

/* ---- bölüm başlığı kalıbı ----------------------------------------------------------- */

.section-head { display: grid; gap: var(--sp4); }
@media (min-width: 840px) {
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .section-head > :first-child { grid-column: 1 / span 7; max-width: 690px; }
  .section-head > .lead { grid-column: 8 / span 5; margin: 0; }
}
.section-head h2 { margin: 0; }

/* Başlık tam genişlikte, giriş altında (Premium, K-W1): başlık tek cümle ve 7 sütuna sığmıyor. */
.section-head.is-stack { display: block; }
.section-head.is-stack > :first-child { max-width: none; }
.section-head.is-stack > .lead { margin-top: var(--sp4); max-width: 640px; }

/* Solda başlık ve kısa açıklama, sağda tablo (K-W4). Tek sütunlu tablo sağ yarıyı boş bırakıyordu. */
@media (min-width: 840px) {
  .section.is-side { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .section.is-side > .section-head { grid-column: 1 / span 4; display: block; }
  .section.is-side > .section-head > :first-child { max-width: none; }
  .section.is-side > .section-head > .lead { margin-top: var(--sp4); }
  .section.is-side > .section-body { grid-column: 5 / span 8; margin-top: 0; max-width: none; }
}
@media (min-width: 1040px) {
  .section.is-side > .section-head { grid-column: 1 / span 5; }
  .section.is-side > .section-body { grid-column: 6 / span 7; }
}

/* ---- ölçülen hız -------------------------------------------------------------------- */

.metrics { display: grid; gap: var(--sp5); border-top: 1px solid var(--hairline); padding-top: var(--sp5); }
@media (min-width: 840px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: var(--sp6); }
  .metric { padding: 0 var(--sp6); border-left: 1px solid var(--hairline); }
  .metric:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 839px) { .metric + .metric { border-top: 1px solid var(--hairline); padding-top: var(--sp5); } }
.metric-label {
  margin: 0; display: flex; align-items: center; gap: 6px;
  font: 600 var(--fs-caption)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3);
}
.metric-label::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); }
.metric-number {
  margin: 20px 0 0; font: 600 var(--fs-metric)/1 var(--display);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--t1);
}
.metric-unit { margin-left: 12px; font-size: 0.42em; letter-spacing: 0; color: var(--t2); }
.metric-title { margin: var(--sp2) 0 0; font: 600 20px/1.4 var(--ui); color: var(--t1); }
.metrics-foot { margin-top: 28px; }

/* ---- destek --------------------------------------------------------------------------- */

.support { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.support-hero { max-width: 680px; }
.support-hero h1 { margin: var(--sp3) 0 0; font-size: var(--fs-title); line-height: 1.25; }
.support-hero .lead { margin-top: var(--sp4); }

.search-wrap { margin-top: var(--sp6); max-width: 680px; }
.search-wrap label { display: block; margin-bottom: var(--sp2); }
/* Kenar `--border-input`: giriş alanı kenarının 3:1'i geçmesi için ayrılan rol (sahip kararı P9).
   Odak halkası kutunun kendisine çiziliyor, input'un kendi outline'ı kalkıyor — yoksa halka
   kutunun içinde kalıyor ve 3 px yerine bir çizgi gibi görünüyor. */
.search-box {
  height: 56px; padding: 0 var(--sp4); border-radius: var(--r4);
  background: var(--s1); border: 1px solid var(--border-input);
  display: flex; align-items: center; gap: var(--sp3);
}
.search-box:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.search-icon { color: var(--t3); flex: none; }
.search-box input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  font: 400 17px/1.4 var(--ui); color: var(--t1);
}
.search-box input::placeholder { color: var(--t3); }
.search-wrap .small { margin-top: var(--sp2); }
.search-count { margin: var(--sp2) 0 0; font: 600 var(--fs-caption)/1.4 var(--ui); color: var(--t2); }
.search-none { margin: var(--sp2) 0 0; color: var(--t2); }

.topics { margin-top: var(--sp5); display: flex; align-items: center; gap: var(--sp2); overflow-x: auto; }
@media (max-width: 839px) { .topics { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } }
.topics::-webkit-scrollbar { display: none; }
.topics { scrollbar-width: none; }
.topics .eyebrow { margin: 0 var(--sp2) 0 0; flex: none; }
.topic-chip {
  height: 44px; padding: 0 var(--sp4); border-radius: 22px; flex: none;
  background: var(--s1); border: 1px solid var(--hairline);
  display: inline-flex; align-items: center; white-space: nowrap;
  font: 500 var(--fs-callout)/1.3 var(--ui); color: var(--t2); text-decoration: none;
}
@media (min-width: 840px) { .topic-chip { height: 40px; border-radius: 20px; } }

.topics-grid { display: grid; gap: var(--sp4); align-items: start; }
@media (min-width: 600px) { .topics-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 840px) { .topics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); } }
.topic { background: var(--s1); border-radius: var(--r5); padding: var(--sp5); scroll-margin-top: calc(var(--header-h) + 24px); }
.topic h3 { margin: 0 0 var(--sp2); font-size: var(--fs-section); }
.topic-qs > details { border-top: 1px solid var(--hairline); }
.topic-qs > details > summary {
  list-style: none; min-height: 52px; padding: 14px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp3);
  font: 600 17px/1.4 var(--ui); color: var(--t1);
}
.topic-qs > details > summary::-webkit-details-marker { display: none; }
.topic-qs .chev { flex: none; color: var(--t3); transition: transform var(--dur-short) var(--ease); }
.topic-qs > details[open] .chev { transform: rotate(180deg); }
.topic-qs p { margin: 0 0 var(--sp4); font: 400 var(--fs-body)/1.5 var(--ui); color: var(--t2); }
.topic-qs ul, .topic-qs ol { margin: 0 0 var(--sp4); padding-left: 20px; color: var(--t2); display: grid; gap: var(--sp2); }
.topic-qs strong { color: var(--t1); }

.report { max-width: 680px; }
.report p { margin-top: var(--sp3); color: var(--t2); }
.report .btn { margin-top: var(--sp4); }
.report .small { margin-top: var(--sp3); }

/* ---- hesap silme ---------------------------------------------------------------------- */

.del { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.del-hero { max-width: 680px; }
.del-hero h1 { margin: var(--sp3) 0 0; font-size: var(--fs-title); line-height: 1.25; }
.del-hero .lead { margin-top: var(--sp4); }
.del-chips { margin-top: var(--sp4); display: flex; flex-wrap: wrap; gap: var(--sp2); }
.del-chips .chip { margin: 0; }
.del-hero .small { margin-top: var(--sp3); }

.del-grid { margin-top: var(--sp6); display: grid; gap: var(--sp5); }
@media (min-width: 840px) {
  .del-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .del-say { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: var(--sp6); }
  .del-ways { grid-column: 8 / span 5; grid-row: 1; position: sticky; top: 96px; display: grid; gap: var(--sp4); }
}
/* <840'ta yol kartları ÖNCE gelir: bu sayfaya gelen kişinin ilk işi yolu bulmak, ne silindiğini
   okumak değil. Izgarada sıra CSS ile veriliyor, işaretleme tek. */
@media (max-width: 839px) { .del-ways { order: -1; display: grid; gap: var(--sp4); } .del-say { display: grid; gap: var(--sp6); } }

.way { background: var(--s1); border-radius: var(--r5); padding: var(--sp5); }
@media (min-width: 840px) { .way { border-radius: var(--r6); padding: var(--sp6); } }
.way h2 { margin: 0; font-size: var(--fs-panel); }
.way .eyebrow + h2 { margin-top: var(--sp2); }
.way p { margin: var(--sp3) 0 0; color: var(--t2); }
.way-path {
  margin-top: var(--sp4); padding: var(--sp2) var(--sp3); border-radius: var(--r3);
  background: var(--s2); border: 1px solid var(--hairline);
  font: 600 var(--fs-callout)/1.4 var(--ui); color: var(--t1); display: inline-block;
}
.way-steps { margin: var(--sp4) 0 0; padding-left: 20px; display: grid; gap: var(--sp3); color: var(--t2); }
.way-steps strong { color: var(--t1); }
.way .btn { margin-top: var(--sp4); }

.del-say h2 { font-size: var(--fs-section); }
.del-say section > p { margin-top: var(--sp3); color: var(--t2); }
.del-cards { margin-top: var(--sp5); display: grid; gap: var(--sp4); }
@media (min-width: 600px) { .del-cards { grid-template-columns: 1fr 1fr; } }
.del-card { background: var(--s1); border-radius: var(--r5); padding: var(--sp5); }
.del-card h3 { margin: 0; font-size: var(--fs-card); }
.del-card .small { margin-top: 4px; }
.del-list { list-style: none; margin: var(--sp4) 0 0; padding: 0; display: grid; gap: var(--sp3); }
.del-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp3); align-items: start;
  font: 400 var(--fs-body)/1.5 var(--ui); color: var(--t2); }
.del-list .li-icon { margin-top: 3px; }
.del-list .is-gone { color: var(--err); }
.del-list .is-stay { color: var(--ok); }

.timeline { list-style: none; margin: var(--sp5) 0 0; padding: 0 0 0 28px; position: relative; display: grid; gap: var(--sp5); }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: var(--hairline); }
.timeline li { position: relative; display: grid; gap: 4px; }
.timeline li::before { content: ""; position: absolute; left: -28px; top: 7px; width: 12px; height: 12px;
  border-radius: var(--r-pill); background: var(--accent); }
.timeline strong { color: var(--t1); font-weight: 600; }
.timeline span { color: var(--t2); }

.warnbox { background: var(--warn-bg); border-radius: var(--r5); padding: var(--sp5);
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp3); align-items: start; }
.warnbox-icon { color: var(--warn); }
.warnbox h2 { margin: 0; font-size: var(--fs-card); }
.warnbox p { margin: var(--sp2) 0 0; color: var(--t2); }
.del-help { color: var(--t3); font-size: var(--fs-body); }

/* ---- hukuki şablon -------------------------------------------------------------------- */

/* Hukuki metin KATLANMAZ. Panoda bazı bölümler kapalı çizilmiş; o yalnız çizim kolaylığıydı.
   Sayfada hepsi açık durur, çünkü Ctrl+F, yazdırma ve mağaza incelemesi metnin tamamını
   görmek zorunda. Katlanan tek şey telefondaki İçindekiler. */
.legal { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
/* minmax(0, 1fr): yoksa tek sütun, içindeki tablonun en dar hâline göre genişler ve sayfa yana kayar
   (Almanca uzun bileşik sözcüklerde 390 px'te oldu). */
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
@media (min-width: 840px) {
  .legal-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
  .legal-side { grid-column: 1 / span 3; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
  .legal-text { grid-column: 5 / span 8; }
}
@media (max-width: 839px) { .legal-side { display: none; } }
.legal-text { max-width: 680px; }
.legal-text h1 { margin: var(--sp3) 0 0; font-size: var(--fs-title); line-height: 1.25; }
.legal-meta { margin: var(--sp3) 0 0; font: 400 var(--fs-body)/1.5 var(--ui); color: var(--t3); }
/* Ayraç display:none olunca iki yanındaki metin tek bir ızgara öğesine kaynıyordu ("…Eylül 20268 bölüm");
   sıfır yükseklikte bir öğe olarak kalınca satırlar ayrı durur. */
@media (max-width: 599px) { .legal-meta { display: grid; } .legal-meta span[aria-hidden] { height: 0; overflow: hidden; } }

.toc-list { list-style: none; margin: var(--sp2) 0 0; padding: 0; }
.toc-list li { display: flex; }
.toc-list a {
  min-height: 36px; display: flex; align-items: center; gap: var(--sp2);
  font: 400 15px/1.35 var(--ui); color: var(--t2); text-decoration: none;
}
.toc-num { width: 24px; flex: none; font-variant-numeric: tabular-nums; color: var(--t3); }
.toc-list a[aria-current="location"] { font-weight: 600; color: var(--t1); }
.toc-list a[aria-current="location"]::before {
  content: ""; width: 4px; height: 4px; margin-left: -8px; border-radius: var(--r-pill); background: var(--accent);
}
.side-list { list-style: none; margin: var(--sp2) 0 0; padding: 0; }
.side-list a { min-height: 36px; display: flex; align-items: center; font: 400 15px/1.35 var(--ui); color: var(--t2); text-decoration: none; }
.side-list a[aria-current="page"] { font-weight: 600; color: var(--t1); }
.legal-side nav + nav, .side-help { margin-top: var(--sp6); }
.side-help { font: 400 15px/1.5 var(--ui); color: var(--t3); }

/* Telefonda İçindekiler: kapalı açılır, başlığın altından geçince üst çubuğa yapışır. */
.toc { margin-top: var(--sp5); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
@media (min-width: 840px) { .toc { display: none; } }
.toc > summary {
  list-style: none; min-height: 52px; padding: var(--sp3) 0; cursor: pointer;
  display: flex; align-items: center; gap: var(--sp3);
  font: 600 var(--fs-callout)/1.3 var(--ui); color: var(--t1);
  position: sticky; top: var(--header-h); z-index: 10; background: var(--s0);
}
.toc > summary::-webkit-details-marker { display: none; }
.toc-count { margin-left: auto; font-weight: 400; color: var(--t3); }
.toc .chev { flex: none; color: var(--t3); transition: transform var(--dur-short) var(--ease); }
.toc[open] .chev { transform: rotate(180deg); }
.toc-current { color: var(--t2); font-weight: 400; }
.toc .toc-list { margin: 0 0 var(--sp3); }
.toc .toc-list a { min-height: 44px; }

.legal-text h2 {
  position: relative; margin-top: 48px; font-size: 24px; line-height: 1.25;
}
@media (min-width: 840px) { .legal-text h2 { margin-top: 56px; font-size: var(--fs-section); } }
.sec-num { color: var(--t3); font-variant-numeric: tabular-nums; }
@media (min-width: 840px) {
  .sec-num { position: absolute; left: -72px; width: 48px; text-align: right; }
}
@media (max-width: 839px) { .sec-num::after { content: ". "; } }
.legal-text p, .legal-text li { font: 400 18px/var(--lh-legal) var(--ui); color: var(--t2); }
.legal-text p { margin: var(--sp4) 0 0; max-width: none; }
.legal-text ul, .legal-text ol { margin: var(--sp4) 0 0; padding-left: 20px; display: grid; gap: var(--sp2); }
.legal-text strong { color: var(--t1); font-weight: 600; }
.legal-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.next { margin-top: 64px; padding-top: var(--sp5); border-top: 1px solid var(--hairline); display: grid; gap: var(--sp4); }
@media (min-width: 600px) { .next { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.next > a:first-child { display: grid; gap: 4px; text-decoration: none; }
.next-name { font: 600 20px/1.4 var(--ui); color: var(--t1); }
.next-blurb { font: 400 var(--fs-body)/1.5 var(--ui); color: var(--t2); }

/* ---- indir bloğu (App Store + Android beta) ------------------------------------------------------------ */

.download {
  margin-top: var(--sp5); padding: var(--sp5) var(--sp4);
  border: 1px solid var(--hairline); border-radius: var(--r5);
  display: grid; gap: var(--sp4);
}
@media (min-width: 840px) {
  .download { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp6); padding: var(--sp5) var(--sp6); }
}
.download h3 { margin: 0; font-size: var(--fs-panel); }
.download p { margin: var(--sp2) 0 0; color: var(--t2); }
.download-act { display: grid; gap: var(--sp3); justify-items: start; }
.download-act .tv-line { margin: 0; }
/* Apple's official badge (assets/badges, from Apple's marketing tools; artwork unchanged, only its inline
   style="fill" turned into fill attributes for the CSP). Shown at 48 px high, above Apple's 40 px minimum. */
.store-badge { display: inline-block; border-radius: 9px; }
.store-badge img { display: block; height: 48px; width: auto; }

/* ---- demo paneli (WEB-01 · K-W2) ------------------------------------------------------- */
/* Başlangıç durumu HTML'de hazır: yedi satır, 103 oynuyor (.is-playing), 105 odakta (.is-focused),
   önizlemede 103. demo.js satır üretmez; yalnız sınıf, öznitelik ve metin değiştirir. JS yoksa panel
   durağan bir örnek görünüm olarak kalır ve tuşlar `hidden` gelir.
   ≥1040: liste solda, önizleme sağda · 600–1039: önizleme üstte (sahne ve bilgi yan yana), liste
   altında · <600: sahne, ad ve tek satırlık "Şimdi"; satırlarda ilerleme çubuğu yok. */

.demo { background: var(--s0); border: 1px solid var(--hairline); border-radius: var(--r6); overflow: hidden; }
.demo-head {
  min-height: 64px; padding: var(--sp3) var(--sp5); border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp2) 14px;
}
.demo-title { font: 600 22px/1.3 var(--display); }
.demo-sub { font: 400 14px/1.4 var(--ui); color: var(--t2); font-variant-numeric: tabular-nums; }
.demo-note {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font: 600 var(--fs-caption)/1.4 var(--ui); color: var(--t2);
}
.demo-note svg { flex: none; color: var(--t3); }

/* minmax(0, 1fr): yoksa tek sütun en uzun satırın en dar hâline göre genişler ve panel içinden taşar
   (390 px'te Almanca "Stadtnachrichten" + "noch 13 Min." ile oldu). */
.demo-body { padding: var(--sp5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp5); }
@media (min-width: 1040px) {
  .demo-body { grid-template-columns: minmax(0, 540fr) minmax(0, 580fr); gap: var(--sp6); align-items: start; }
}
@media (max-width: 1039px) { .demo-now { order: -1; } }
@media (min-width: 600px) and (max-width: 1039px) {
  .demo-now { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp5); align-items: start; }
  .demo-now .now-head { margin-top: 0; }
}
@media (max-width: 599px) { .demo-body { padding: var(--sp4); gap: var(--sp4); } .demo-head { padding: var(--sp3) var(--sp4); } }

/* Satırlar. Oynayan: zemin --s-selected, solda altın nokta, adın yanında ekolayzer. Odaktaki: zemin
   --s-focus ve altın halka — TV'de "neredeyim" benzetmesi, liste odakta olmasa da çizilir. */
.zap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-radius: var(--r5); }
.zap-list:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: var(--r5); }
.zap-row {
  position: relative; min-height: 64px; padding: 0 16px 0 20px; border-radius: var(--r4);
  display: flex; align-items: center; color: var(--t1);
  transition: background-color var(--dur-short) var(--ease);
}
.zap-row[role="option"] { cursor: pointer; }
@media (hover: hover) { .zap-row[role="option"]:hover { background: var(--s1); } }
.zap-row.is-playing { background: var(--s-selected); }
.zap-row.is-playing::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: var(--r-pill); background: var(--accent);
}
.zap-row.is-focused { background: var(--s-focus); outline: 3px solid var(--accent); outline-offset: 2px; }
.zap-num { width: 40px; flex: none; font: 400 14px/18px var(--ui); font-variant-numeric: tabular-nums; color: var(--t3); }
.zap-logo {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-monogram)/1 var(--display); letter-spacing: 0.02em;
}
.zap-logo.is-lg { width: 48px; height: 48px; border-radius: var(--r4); font-size: 18px; }
.tile-rose  { background: var(--tile-rose-bg);  color: var(--tile-rose-fg); }
.tile-teal  { background: var(--tile-teal-bg);  color: var(--tile-teal-fg); }
.tile-olive { background: var(--tile-olive-bg); color: var(--tile-olive-fg); }
.tile-plum  { background: var(--tile-plum-bg);  color: var(--tile-plum-fg); }
.zap-text { flex: 1; min-width: 0; margin-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.zap-name { display: flex; align-items: center; gap: var(--sp2); min-width: 0; font: 600 17px/22px var(--ui); }
.zap-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-name svg { flex: none; color: var(--accent); }
.zap-name .zap-eq { display: none; }
.zap-row.is-playing .zap-eq { display: block; }
.zap-prog { font: 400 14px/20px var(--ui); color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zap-when { width: 96px; flex: none; margin-left: var(--sp2); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.zap-left { font: 400 13px/18px var(--ui); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t3); }
.zap-row.is-focused .zap-num, .zap-row.is-focused .zap-left { color: var(--t2); }

/* İlerleme: SVG, genişlik `width` özniteliğiyle değişir (CSP stil özniteliğine izin vermiyor). */
.prog { display: block; width: 48px; height: 3px; }
.prog-track { fill: var(--progress-track); }
.prog-fill { fill: var(--progress-fill); }
.zap-row.is-playing .prog-fill, .zap-row.is-focused .prog-fill { fill: var(--accent); }
.zap-row.is-focused .prog-track { fill: var(--progress-track-focus); }

@media (max-width: 599px) {
  .zap-row { padding: 8px 12px 8px 16px; }
  .zap-num { width: 34px; font-size: 13px; }
  .zap-logo { width: 36px; height: 36px; }
  .zap-text { margin-left: 12px; }
  .zap-name { font-size: 16px; line-height: 21px; }
  /* Üç Kıyı Belgesel satırı yalnız sonda ayrılıyor (FHD · HD · Yedek); kesilmesin, alta insin. */
  .zap-title { white-space: normal; hyphens: auto; overflow-wrap: anywhere; }
  .zap-when { width: auto; }
  .zap-when .prog { display: none; }
}

/* Önizleme: düz renkli sahne (SVG, dış görsel yok), sol üstte CANLI, sol altta Teknik çipi. */
.demo-preview { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r5); overflow: hidden; background: var(--stage); }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.demo-preview[data-scene="coast"] .scene-coast,
.demo-preview[data-scene="city"] .scene-city,
.demo-preview[data-scene="music"] .scene-music,
.demo-preview[data-scene="film"] .scene-film { display: block; }
.demo-preview.is-opening .scene { opacity: 0.35; }
.chip-on {
  position: absolute; left: 12px; height: 28px; padding: 0 10px; border-radius: var(--r3);
  background: var(--s0); display: flex; align-items: center; gap: var(--sp2);
  font: 400 13px/16px var(--ui); white-space: nowrap;
}
.chip-live { top: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--t1); }
.chip-live i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--live); }
.chip-tech { bottom: 12px; max-width: calc(100% - 24px); color: var(--t2); font-variant-numeric: tabular-nums; }
.chip-tech strong { font-weight: 600; color: var(--t1); }

.now-head { margin-top: 20px; display: flex; align-items: center; gap: 14px; }
.now-name { display: block; font: 600 22px/28px var(--ui); color: var(--t1); }
.now-meta { display: block; font: 400 14px/20px var(--ui); font-variant-numeric: tabular-nums; color: var(--t3); }
.now-prog { margin-top: 20px; }
.now-label { margin: 0; font: 600 var(--fs-caption)/17px var(--ui); letter-spacing: 0.08em; color: var(--t3); }
.now-title { margin: 6px 0 0; font: 600 18px/26px var(--ui); color: var(--t1); }
.prog-lg { width: 100%; height: 4px; margin-top: 12px; border-radius: 2px; }
.prog-lg .prog-fill { fill: var(--accent); }
.now-times {
  margin: 10px 0 0; max-width: none; display: flex; justify-content: space-between; gap: var(--sp3);
  font: 400 14px/20px var(--ui); font-variant-numeric: tabular-nums; color: var(--t2);
}
.now-times span + span { font-weight: 500; color: var(--t1); }
.now-line { display: none; }
@media (max-width: 599px) {
  .now-head { margin-top: var(--sp4); }
  .now-name { font-size: 20px; line-height: 26px; }
  .now-prog { display: none; }
  .now-line { display: block; margin: var(--sp3) 0 0; font: 400 14px/20px var(--ui); font-variant-numeric: tabular-nums; color: var(--t2); }
}

/* Kontrol şeridi: üç tuş, klavye ipucu, sağda canlı bölge ("Odakta: …"). */
.demo-controls {
  min-height: 76px; padding: var(--sp4) var(--sp5); border-top: 1px solid var(--hairline);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp3);
}
.keycap {
  width: 52px; height: 44px; margin: 0; padding: 0; flex: none; border-radius: 10px;
  background: var(--s1); border: 1px solid var(--border-strong); border-bottom-width: 3px; color: var(--t1);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px/20px var(--ui); cursor: pointer;
}
.keycap:active { background: var(--s2); }
.keycap:focus-visible { border-radius: 10px; }
.demo-keys { margin: 0 0 0 var(--sp2); font: 400 16px/22px var(--ui); color: var(--t2); }
.demo-status { margin: 0 0 0 auto; font: 400 16px/22px var(--ui); color: var(--t3); }
.demo-status strong { font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
/* Yazarın `display` kuralı tarayıcının [hidden] kuralını ezer; JS yokken tuşlar gerçekten gizli kalsın. */
.keycap[hidden], .demo-keys[hidden] { display: none; }
@media (max-width: 599px) {
  .demo-controls { padding: var(--sp3) var(--sp4) var(--sp4); }
  .demo-keys { display: none; }
  .demo-status { flex-basis: 100%; margin-left: 0; font-size: 15px; }
}


/* /tv — the television's pairing code, large enough to compare with the screen across the room. */
/* One column at every width: the 12-column rule above is for pages whose cards sit in .del-say/.del-ways;
   here the cards are the grid's own children and would each get a single column. */
.tv .del-grid, .nf .del-grid { max-width: 680px; grid-template-columns: minmax(0, 1fr); }
.tv-code {
  margin: var(--sp3) 0 0; font: 600 clamp(40px, 9vw, 64px)/1.1 var(--display);
  letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--t1);
}

/* ---- v2: tablolar, kutucuklar, adımlar ------------------------------------------------ */

/* Ekran okuyucuya kalan metin: tablodaki ✓ / — simgelerinin sözlü karşılığı. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablo kendi kutusunda kayar; sayfa asla yana kaymaz. */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r5); background: var(--s1); }
.table-wrap:focus-visible { border-radius: var(--r5); }
.data { width: 100%; border-collapse: collapse; font: 400 var(--fs-callout)/1.45 var(--ui); color: var(--t2); }
.data caption { caption-side: top; text-align: left; padding: var(--sp4) var(--sp4) var(--sp2); font: 600 var(--fs-callout)/1.3 var(--ui); color: var(--t1); }
.data th, .data td { padding: 12px var(--sp4); text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); overflow-wrap: break-word; }
@media (min-width: 840px) { .data th, .data td { padding: 14px var(--sp5); } .data caption { padding: var(--sp5) var(--sp5) var(--sp2); } }
/* Dar ekranda uzun sözcükler (Almanca bileşikler) hecelenerek bölünür; tablo kutusu kaymaz. */
@media (max-width: 839px) { .data th, .data td { hyphens: auto; } }
@media (max-width: 399px) { .data th, .data td { padding-left: 12px; padding-right: 12px; } }
.data thead th { font: 600 var(--fs-caption)/1.3 var(--ui); color: var(--t2); vertical-align: bottom; }
.data thead th, .data thead td { border-top: 0; }
.data tbody th { font-weight: 600; color: var(--t1); }
.data strong { color: var(--t1); font-weight: 600; }
.data .mark { width: 1%; text-align: center; white-space: nowrap; }
.data thead .mark { white-space: normal; min-width: 64px; }
.data .is-hl { color: var(--accent); }
.data thead .is-hl { color: var(--accent); }
.data .ic-yes { color: var(--accent); vertical-align: -4px; }
.data .ic-no { color: var(--t-disabled); vertical-align: -4px; }
.data .note { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--t3); }
.data a { color: var(--accent); }
/* Ürün adları (iPadOS gibi) hecelenip bölünmesin. */
.data .nohy th, .data .nohy td, .data code { hyphens: manual; }
.table-foot { margin: var(--sp3) 0 0; font: 400 var(--fs-caption)/1.5 var(--ui); color: var(--t3); max-width: 70ch; }

/* <600'de dört sütunlu tablolar kartlara dönüşür: her satır bir kart, her hücrenin başlığı
   data-label'dan gelir. Rol öznitelikleri HTML'de: display değişince tablo anlamı kaybolmasın. */
@media (max-width: 599px) {
  .data.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data.stack, .data.stack tbody, .data.stack tr, .data.stack th, .data.stack td { display: block; }
  .data.stack tr { padding: 12px var(--sp4) 14px; border-top: 1px solid var(--hairline); }
  .data.stack caption + thead + tbody tr:first-child { border-top: 0; }
  .data.stack th, .data.stack td { padding: 0; border: 0; }
  .data.stack td { margin-top: var(--sp2); }
  .data.stack td::before { content: attr(data-label); display: block; font: 600 var(--fs-caption)/1.3 var(--ui); color: var(--t3); }
}

/* Özellik kutucukları: simge, başlık, tek satır. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp3); }
@media (min-width: 600px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); } }
.tile { background: var(--s1); border-radius: var(--r5); padding: var(--sp4); display: grid; grid-template-columns: 44px 1fr; gap: 4px var(--sp3); align-items: start; }
@media (min-width: 840px) { .tile { padding: 20px var(--sp5); } }
.tile-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tile h3 { margin: 0; font: 600 18px/1.35 var(--ui); color: var(--t1); align-self: end; }
.tile p { margin: 0; font: 400 var(--fs-callout)/1.45 var(--ui); color: var(--t2); }

/* Numaralı adımlar: kaynak ekle, TV bağla. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp3); counter-reset: step; }
@media (min-width: 840px) { .steps.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); } }
.steps > li { counter-increment: step; background: var(--s1); border-radius: var(--r5); padding: var(--sp4); display: grid; grid-template-columns: 36px 1fr; gap: var(--sp3); align-items: start; font: 400 var(--fs-callout)/1.5 var(--ui); color: var(--t2); }
@media (min-width: 840px) { .steps > li { padding: 20px var(--sp5); } }
.steps > li::before { content: counter(step); width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--display); }
.steps strong { color: var(--t1); font-weight: 600; }
.steps p { margin: 0; }
.steps .step-title { display: block; font: 600 17px/1.35 var(--ui); color: var(--t1); margin-bottom: 2px; }

/* Kısa madde listesi: ✓ ya da — simgesiyle. */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp2); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp3); align-items: start; font: 400 var(--fs-callout)/1.5 var(--ui); color: var(--t2); }
.checks svg { margin-top: 2px; color: var(--accent); }
.checks .is-no svg { color: var(--t3); }
.checks strong { color: var(--t1); font-weight: 600; }

/* İki sütun: solda tablo, sağda kısa notlar. */
.split { display: grid; gap: var(--sp5); }
@media (min-width: 1040px) { .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp6); align-items: start; } }
.aside-card { background: var(--s1); border-radius: var(--r5); padding: var(--sp5); }
.aside-card h3 { margin: 0 0 var(--sp3); font: 600 20px/1.3 var(--ui); }
.aside-card .checks + p, .aside-card p { margin: var(--sp3) 0 0; font-size: var(--fs-callout); color: var(--t2); }

/* Hukuki sayfalarda tablo ve kutu aralıkları. */
.legal-text .table-wrap { margin-top: var(--sp4); }
.legal-text .data td, .legal-text .data th { font: inherit; }
.legal-text .data { font: 400 16px/1.5 var(--ui); }
.legal-text .data thead th { font: 600 var(--fs-caption)/1.3 var(--ui); }
.legal-text .data tbody th { font-weight: 600; }
.legal-text .checks li { font-size: 17px; }
.legal-text .checks { margin-top: var(--sp4); padding: 0; }
.legal-text .checks li { color: var(--t2); }
.legal-text .data a { color: var(--accent); }

/* Yan yana iki kısa liste (ör. gönderilir / gönderilmez). */
.two-lists { display: grid; gap: var(--sp4); margin-top: var(--sp4); }
@media (min-width: 600px) { .two-lists { grid-template-columns: 1fr 1fr; } }
.two-lists > div { background: var(--s1); border-radius: var(--r5); padding: var(--sp4) var(--sp4) var(--sp5); }
.two-lists h3 { margin: 0 0 var(--sp3); font: 600 17px/1.35 var(--ui); color: var(--t1); }
.legal-text .two-lists .checks { margin-top: 0; }
.legal-text .two-lists .checks li { font-size: 16px; line-height: 1.5; }

/* Ana sayfa v2 yardımcıları. */
.narrow { max-width: 760px; }
.steps-title { margin: var(--sp6) 0 var(--sp4); font: 600 var(--fs-card)/1.3 var(--display); }
@media (max-width: 599px) {
  .devices-table th, .devices-table td { padding: 10px 8px; }
  .devices-table th:first-child, .devices-table td:first-child { padding-left: var(--sp3); }
  .devices-table { font-size: 14px; }
  .devices-table .note { font-size: 12px; }
}

/* Destek: iki adım kartı yan yana. */
.guide-grid { display: grid; gap: var(--sp5); }
@media (min-width: 840px) { .guide-grid { grid-template-columns: 1fr 1fr; gap: var(--col-gap); } }
.guide-grid h3 { margin: 0 0 var(--sp3); font-size: var(--fs-card); }
.report .steps { margin-top: var(--sp4); }
.report .steps > li p { margin: 0; color: var(--t2); }
.topic-qs a { color: var(--accent); text-underline-offset: 3px; }

/* ---- sürüm notları -------------------------------------------------------------------- */

/* Her yapı bir satır: ≥840'ta solda sürüm ve tarih, sağda maddeler; dar ekranda alt alta. */
.notes { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.notes-hero { max-width: 680px; }
.notes-hero h1 { margin: 0; font-size: var(--fs-title); line-height: 1.25; }
.notes-hero .lead { margin-top: var(--sp4); }
.releases { margin-top: var(--sp6); border-top: 1px solid var(--hairline); }
.release { padding-block: var(--sp5); border-bottom: 1px solid var(--hairline); display: grid; gap: var(--sp4); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 840px) {
  .release { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--sp6); }
  .release-head { grid-column: 1 / span 4; }
  .release-body { grid-column: 5 / span 8; max-width: 680px; }
}
.release h2 { font-size: var(--fs-section); line-height: 1.25; font-variant-numeric: tabular-nums; }
.release-build { color: var(--t2); }
.release-meta { margin: var(--sp2) 0 0; font: 400 var(--fs-callout)/1.45 var(--ui); color: var(--t3); }
.release .chip { margin: var(--sp3) 0 0; }
.release-body h3 { margin: 0 0 var(--sp3); font: 600 var(--fs-caption)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.release-list + h3 { margin-top: var(--sp5); }
.release-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp3); }
.release-list li { position: relative; padding-left: 20px; font: 400 var(--fs-body)/1.5 var(--ui); color: var(--t2); }
.release-list li::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); }
.release-list.is-fix li::before { background: var(--t3); }
.release-list strong { color: var(--t1); font-weight: 600; }

/* ---- açık kaynak ---------------------------------------------------------------------- */

/* Sürüm notlarının düzeni: ≥840'ta solda platform, sağda tablo; dar ekranda alt alta. */
.oss-meta { margin: var(--sp2) 0 0; font: 400 var(--fs-callout)/1.45 var(--ui); color: var(--t3); }
.notes-hero .oss-meta { margin-top: var(--sp3); }
.oss-parts { margin-top: var(--sp6); border-top: 1px solid var(--hairline); }
.oss-part { padding-block: var(--sp5); border-bottom: 1px solid var(--hairline); display: grid; gap: var(--sp4); scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 840px) {
  .oss-part { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-block: var(--sp6); }
  .oss-head { grid-column: 1 / span 4; }
  .oss-body { grid-column: 5 / span 8; }
}
.oss-body { min-width: 0; max-width: 760px; }
.oss-part h2 { font-size: var(--fs-section); line-height: 1.25; }
.oss-body h3 { margin: var(--sp6) 0 0; font: 600 var(--fs-caption)/1.3 var(--ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); }
.oss-body > p { margin: var(--sp3) 0 0; color: var(--t2); }
.oss-body > p:first-child { margin-top: 0; }
/* Kısa adlar (--enable-gpl, libffmpegJNI.so) bölünmez. Commit, SHA-256 ve dosya adı tek parça 40–64
   karakter: bölünmezlerse tablo hücresi genişler ve tablo dar ekranda kendi kutusunda kayar. */
.oss code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; white-space: nowrap; }
.oss code.long { white-space: normal; overflow-wrap: anywhere; line-break: anywhere; }
/* configure satırı olduğu gibi durur; dar ekranda kendi kutusunda yana kayar, sayfa kaymaz. */
.code-block { margin: var(--sp3) 0 0; padding: var(--sp4); overflow-x: auto; background: var(--s1); border: 1px solid var(--hairline); border-radius: var(--r5); font: 400 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--t2); }
.code-block:focus-visible { border-radius: var(--r5); }
.oss .code-block code { font-size: inherit; white-space: pre; }
/* Satır başlıkları tek sözcük: dar ekranda sütun daralıp "Bi-blio-the-ken" diye bölünmesin. */
.oss .data tbody th { white-space: nowrap; hyphens: manual; }
.oss .data a { hyphens: manual; }

/* Android download line under the beta block (owner, 2026-09-30): small print, and the checksum wraps
   anywhere so a 64-character hash never pushes a phone page sideways. */
.download-note { margin-top: var(--sp3); font-size: 0.875rem; color: var(--t3); max-width: 72ch; }
.download-note code { font-size: 0.8125rem; word-break: break-all; color: var(--t2); }