/*
 * Tasarım token'ları — "Grafit" (CLAUDE.md bölüm 14). Herkese açık site, yasal ve hata sayfaları, yönetim paneli
 * (resources/admin/admin.css) ve giriş kodu e-postası (değerleri satır içi) bu dili kullanır. Mobil uygulama da aynı
 * Grafit renklerini kullanır (client lib/core/theme/tokens.dart).
 *
 * Siyah-beyaz TONLARI: neredeyse siyah zeminden grafit yüzeylere, oradan yumuşak açık grilere. Saf siyah ve saf beyaz
 * yok; düğmeden / haptan büyük hiçbir alan açık renk değildir (açık ton sadece yazı, ikon, ince çizgi, küçük kontrol ve
 * ilerleme dolgusu). Düz: gradient, gölge, parıltı, bulanıklık yok; derinlik yüzey basamakları + 1 px çizgiyle. Renk
 * sadece içerikte (video, anime stil kareleri).
 * site.css'teki her renk, uzunluk, süre ve satır ölçüsü buradan gelir. Orada sayı olarak kalanlar: medya sorgularındaki
 * kırılımlar (CSS gereği), oranlar, birimsiz satır aralıkları, SVG çizgi kalınlıkları, dönüş açıları ve giriş
 * animasyonunun kademe gecikmeleri. Sayfalarda sabit değer yazılmaz: yeni bir değer gerekiyorsa önce buraya eklenir.
 */
:root {
  /* Gri ölçek: sayfa → şerit → yüzeyler → çizgiler → yazı. */
  --c-bg: #0A0A0A;
  --c-band: #111111;     /* dönüşümlü bölüm tonu; şerit üstündeki kutular bir yüzey basamağı yukarı çıkar (.band) */
  --c-s1: #111111;
  --c-s2: #171717;
  --c-s3: #1E1E1E;
  --c-s4: #282828;
  --c-s5: #363636;
  --c-line: #232323;
  --c-line-2: #2F2F2F;
  --c-line-3: #444444;
  --c-line-4: #5E5E5E;
  --c-text: #EDEDED;
  --c-text-2: #A8A8A8;   /* açıklama (zeminde ~8:1) */
  --c-text-3: #8C8C8C;   /* küçük etiket, altbilgi (zeminde ~5,9:1) */
  --c-title-muted: #787878; /* iki tonlu başlıkların gri satırı (sadece büyük yazı, ~4,3:1) */
  --c-light: #E5E5E5;    /* açık düğme (sayfadaki gerçek indirme bağlantıları) */
  --c-light-hover: #F2F2F2;
  --c-on-light: #0B0B0B;
  --c-scrim: rgb(9 9 9 / 0.74);  /* görsel üstündeki etiketler, açık menünün arkası */
  --c-selected: var(--c-s5);      /* çizimlerde seçili durum: bu dolgu + 1 px --c-text çerçeve (açık dolgu sadece eylemde) */
  --c-track: rgb(237 237 237 / 0.22);
  --c-ink: #050505;      /* çizimlerde en koyu katman (kamera çentiği, editör sahnesi) */
  --c-notch: var(--c-bg); /* ücret fişindeki yırtma çentikleri: bulunduğu bölümün tonu */
  /* Sayfanın kaydırma çubuğu: zeminle aynı iz, grafit tutamak; üstüne gelince / sürüklerken bir ton açılır */
  --c-scroll-track: var(--c-bg);
  --c-scroll-thumb: var(--c-s5);
  --c-scroll-thumb-hover: var(--c-line-4);
  --scroll-size: 12px;       /* Chrome/Edge/Safari'de çubuğun genişliği */
  --scroll-inset: 3px;       /* tutamağın çevresindeki boşluk: ince, hap şeklinde görünür */

  /* Yazı */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --fs-3xs: 0.625rem;   /* 10 — sadece çizilen uygulama ekranlarında */
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-ui: 0.875rem;    /* 14 */
  --fs-body-sm: 0.9375rem; /* 15 */
  --fs-body: 1rem;      /* 16 */
  --fs-h4: 1.0625rem;   /* 17 */
  --fs-h3: 1.25rem;     /* 20 */
  --fs-lead: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --fs-stat: clamp(2.25rem, 1.9rem + 1.4vw, 3.25rem);
  --fs-step: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);  /* "Nasıl çalışır" adım numaraları */
  --fs-total: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --fs-h1: clamp(2.25rem, 1.286rem + 4.286vw, 4.5rem);
  --fs-cta: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem);
  --fs-legal: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);   /* yasal sayfa başlığı */
  --fs-error: clamp(5.5rem, 4rem + 7vw, 10rem);       /* hata sayfasındaki dev kod (404) */
  --fs-unit: 0.45em;    /* büyük sayının yanındaki birim ("2 MP") */
  --fs-op: 0.6em;       /* fişteki toplamın önündeki "=" */
  --unit-gap: 0.12em;
  --lh-tight: 1.03;
  --lh-title: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --lh-prose: 1.7;
  --tr-tight: -0.04em;
  --tr-title: -0.032em;
  --tr-snug: -0.015em;
  --tr-mono: 0.02em;
  --marker-scale: 0.8;  /* yasal metinlerdeki numaralı listenin sıra numarası: yazının bu katı, satırın tam yüksekliğinde */
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Boşluk (4'ün katları). Yarım basamaklar (2 / 6 / 10) sadece çizilen ekranlar ve küçük çizimler için. */
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-2-5: 10px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --gutter: var(--sp-5);
  /* Ekranın güvenli alanıyla kenar boşlukları (yataydaki çentikler). Fiziksel yönler bilerek: güvenli alan payları
     fizikseldir; sonuç simetrik olduğu için sağdan sola dilde de doğru. */
  --gutter-l: max(var(--gutter), env(safe-area-inset-left));
  --gutter-r: max(var(--gutter), env(safe-area-inset-right));
  --section-pad: var(--sp-14);
  --head-gap: var(--sp-8);
  --head-aside: 400px;
  --wrap: 1200px;
  /* Okunur satır uzunlukları (yazının kendi boyuyla ölçeklenir) */
  --measure-xs: 34ch;     /* kapanış cümlesi, altbilgideki tanıtım */
  --measure-sm: 36ch;     /* hata sayfası açıklaması */
  --measure-md: 40ch;     /* hero vurgusu */
  --measure: 44ch;        /* bölüm açıklaması */
  --measure-lg: 46ch;     /* hero alt satırı */
  --measure-xl: 52ch;     /* yasal sayfa girişi */
  --measure-faq: 64ch;    /* SSS cevabı */
  --prose-max: 68ch;      /* yasal metinlerin okunur satır uzunluğu */
  --legal-aside: 300px;   /* yasal sayfalarda yan sütun (diğer yasal sayfalar + destek; destek adresi tek satırda) */

  /* Köşe. Bir satırda tek köşe: bölümün her kartı --r-xl, kartın içindeki kuyu --r-lg, karolar / haplar / çizim
     parçaları --r-md ve altı. */
  --r-3xs: 3px;
  --r-2xs: 4px;
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Çizgiler ve kaymalar */
  --bw: 1px;
  --bw-1-5: 1.5px;
  --bw-2: 2px;
  --focus-offset: 3px;
  --ring-offset: 2px;   /* seçili küçük resmin çevresindeki boşluk */
  --underline-offset: 4px;
  --rise: 24px;         /* giriş animasyonunun yolu */

  /* Kontrol ölçüleri: sayfanın kontrolleri ve çizilen ekranlardaki kontroller */
  --ctl-3xs: 16px;
  --ctl-2xs: 20px;
  --ctl-xs: 24px;
  --ctl-sm: 28px;
  --ctl-md: 32px;
  --ctl-lg: 36px;
  --btn-h-sm: 40px;
  --tap: 44px;
  --btn-h: 48px;
  --tap-lg: 52px;
  --header-h: 64px;
  --scrim-h: 100vh;      /* açık menünün / dil listesinin altındaki karartma: üst barın altından ekranın sonuna */
  --dock-h: 69px;       /* 12 + 44 (dokunma alanı) + 12 + 1 px çizgi */
  --dock-from: 360px;    /* alt çubuk bu kaydırma aralığında içeri kayar (her sayfada). Başlangıç, ana sayfada hero'nun Play
  --dock-to: 600px;         rozeti telefonlarda kaydırılıp gittikten sonra (alt kenarı 320–375 px): iki indirme düğmesi aynı anda görünmez. */
  --faq-h: 56px;
  --menu-min-w: 184px;
  --icon-2xs: 10px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon: 20px;
  --icon-lg: 24px;
  --chip-icon: 40px;
  --badge-h: 62px;       /* resmî Play rozeti, kendi saydam payıyla */
  --dot: 6px;
  --track-h: 4px;        /* ilerleme çubukları, ince kaydırıcılar */
  --rail-h: 6px;         /* 03. adımdaki süre kaydırıcısı */
  --knob: 18px;
  --knob-sm: 12px;
  --slider-knob: 12px;

  /* Çizilen telefon */
  --phone-w: 248px;
  --phone-w-sm: 224px;   /* telefonlarda editör telefonu */
  --phone-w-lg: 320px;   /* masaüstünde çerçevesiz editör telefonu */
  --phone-r: 44px;
  --phone-bezel: 8px;
  --phone-key: 3px;
  --island-top: 9px;
  --island-h: 22px;
  --status-h: 40px;
  --status-glyph: 10px;
  --signal-bar: 3px;
  --battery-w: 20px;
  --float-pull: 96px;
  --float-thumb: 40px;
  --float-wave: 84px;

  /* Bölüm çizimleri */
  --frame-rail-w: 136px;
  --mode-rail-w: min(84%, 340px);
  --step-num-w: 2.25rem;  /* telefonlar: adım numarası ve dikey çizgisinin sütunu */
  --step-viz-h: 120px;   /* telefonlar (taban; çoğu çizim daha uzun); 720'den 176, 1000'den 204 */
  --step-viz-max: 420px; /* geniş adım kartlarında çizimler telefon yoğunluğunda kalır */
  --viz-h: 150px;
  --viz-h-lg: 260px;
  --viz-h-side: 232px;
  --tile: 88px;
  --fact-col: 4.5rem;
  --ref: 40px;
  --ref-tag: 16px;
  --script-card: 168px;
  --out-h: 128px;
  --cont-h: 88px;
  --up-small: 40px;
  --up-big-h: 116px;
  --msheet-w: 220px;      /* sıfırdan görsel: karakter sayfası (16:9) */
  --corner: 14px;
  --sr-h: 96px;          /* hızlı büyüt: uzun kare; geniş ve kare olanlar bunun kesirleri */
  --lang-cell: 30px;
  --lang-cell-h: 22px;
  --fps-frame: 32px;
  --fps-ghost: 24px;
  --sk-h: 6px;
  --wave-bar-min: 2px;
  --wave-bar-max: 4px;
  --rc: 15px;            /* 03. adımdaki oran çiplerinin ikonları */
  --job-th: 34px;
  --act-label-h: 2.4em;  /* 1,2 satır aralıklı etiketin iki satırı */
  --meter-bar: 9px;
  --ends-pic: 22px;
  --ends-line: 14px;
  --cand: 18px;
  --cand-on: 22px;
  --ratio-u: 24px;       /* oran kutuları: her biri bu birim × kendi --rw / --rh */
  --sliders-w: 200px;
  --spec-viz-h: 52px;
  --list-dash: var(--sp-2-5);                    /* kısa özellik listesinde her maddenin önündeki çizgi */
  --list-dash-y: calc(var(--lh-snug) * 0.5em);   /* ...ilk satıra ortalı (maddenin kendi yazı boyunda çözülür) */
  --spec-wave: 160px;
  --ed-dot: 4px;
  --ed-tick: 8px;
  --ed-lane-h: 44px;
  --ed-lane-h-sm: 38px;  /* küçük editör telefonu (1000 altı) */
  --ed-frame: 24px;
  --ed-handle: 6px;
  --ed-audio-h: 22px;
  --tier-solo: 64px;
  --tiers-w: 368px;      /* ≥720 kalite sütunu: üç karo, en uzun ad ("Equilibrada") sayısıyla tek satırda */
  --notch: 24px;
  --reel-gap: var(--sp-2);
  --error-frame: 112px;  /* hata sayfasındaki film şeridinin kare genişliği */

  /* Hareket */
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-reveal: 800ms;
  --dur-reel: 26s;
  --dur-fill: 2.4s;      /* ilerleme çizgisinin açılışta dolması */
  --dur-blink: 1.8s;     /* vitrindeki kayıt noktası */
  --dur-caret: 1.1s;     /* senaryo çizimindeki imleç */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Telefonlar */
@media (max-width: 639px) {
  :root {
    --section-pad: var(--sp-12); --head-gap: var(--sp-6); --tile: 76px; --error-frame: 88px;
    /* Stil şeritleri: her telefon genişliğinde iki tam kare ve üçüncünün ~%55'i görünür, kesik kare "kaydırılacak
       daha çok var" der (%100 = şeridin içerik kutusu, yani ekran eksi iki kenar boşluğu). */
    --frame-rail-w: calc((100% + var(--gutter) - 2 * var(--sp-3)) / 2.55);
  }
}
@media (max-width: 399px) {
  :root { --badge-h: 60px; }
}
/* 320 sınıfı telefonlar: rozet ve "Nasıl çalışır" yine tek satırda. */
@media (max-width: 359px) {
  :root { --tile: 56px; --phone-w: 236px; --fps-frame: 28px; --fps-ghost: 20px; --badge-h: 52px; --error-frame: 76px; }
}
/* Büyük telefonlar / küçük tabletler: mod ve adım kartları büyür, sonraki kart yine görünür (~%60). */
@media (min-width: 560px) and (max-width: 719px) {
  :root { --mode-rail-w: max(min(84%, 340px), calc((100% + var(--gutter) - var(--sp-3)) / 1.6)); }
}
@media (min-width: 640px) {
  :root { --meter-bar: 14px; --ends-pic: 30px; --ends-line: 64px; --cand: 30px; --cand-on: 30px; --ratio-u: 28px; --slider-knob: 14px; }
}
/* İnce ayar hücresinin en dar olduğu iki aralık (2 sütunun başı, 3 sütunun başı): sekiz oran kutusu yine tek satırda. */
@media (min-width: 640px) and (max-width: 719px), (min-width: 1000px) and (max-width: 1099px) {
  :root { --ratio-u: 24px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  :root { --frame-rail-w: calc((100% + var(--gutter) - 4 * var(--sp-3)) / 4.55); }
}
@media (min-width: 720px) {
  :root {
    --gutter: var(--sp-8);
    --section-pad: var(--sp-20);
    --head-gap: var(--sp-12);
    --phone-w: 280px;
    --step-viz-h: 176px;
    --viz-h: 200px;
    --ref: 56px;
    --ref-tag: 18px;
    --out-h: 176px;
    --up-small: 44px;
    --up-big-h: 160px;
    --msheet-w: 300px;
    --sr-h: 118px;
    --fps-frame: 36px;
    --fps-ghost: 28px;
  }
}
@media (min-width: 900px) {
  :root { --reel-gap: var(--sp-3); }
}
@media (min-width: 1000px) {
  :root { --step-viz-h: 204px; --float-wave: 92px; --faq-h: 64px; }
}
@media (min-width: 1100px) {
  :root {
    --section-pad: var(--sp-24);
    --phone-w: 296px;
    --viz-h: 220px;
    --ref: 64px;
    --out-h: 220px;
    --script-card: 188px;
    --cont-h: 128px;
    --fps-frame: 38px;
    --fps-ghost: 28px;
    --error-frame: 144px;
  }
}
@media (min-width: 1280px) {
  :root { --sr-h: 104px; }
}
/* 1100–1279: dört küçük mod, dar çizim kuyulu yatay kartlar. */
@media (min-width: 1100px) and (max-width: 1279px) {
  :root { --up-big-h: 150px; --sr-h: 84px; --lang-cell: 28px; --fps-frame: 28px; --fps-ghost: 20px; }
}

/* Latin harf biçimi olmayan yazılar: eksi harf aralığı yok, satırlar daha açık. */
:root:lang(ar), :root:lang(hi), :root:lang(zh) {
  --tr-tight: 0;
  --tr-title: 0;
  --tr-snug: 0;
  --tr-mono: 0;
  --lh-tight: 1.2;
  --lh-title: 1.25;
}
/* Uzun çeviriler dar telefonda: dev başlıklar bir basamak küçülür. */
@media (max-width: 399px) {
  :root:lang(es), :root:lang(hi), :root:lang(en) { --fs-h1: 2rem; --fs-cta: 2.25rem; }
  /* Çince kapanış başlığı (6 karakter) 40 px'te sütunu tam doldurup "第一"yi bölüyordu. */
  :root:lang(zh) { --fs-cta: 2.25rem; }
}
/* 320 sınıfında İspanyolca / Hintçe kapanış başlığının orta satırı ("Crea tu primer episodio") tek kelimeyi alta
   bırakıyordu: bir basamak daha küçük (--fs-h1 ile aynı). */
@media (max-width: 359px) {
  :root:lang(es), :root:lang(hi) { --fs-cta: 2rem; }
}