/*
 * Tanıtım sitesi. Uygulamanın `src/styles.css` dosyasından ayrı ve bilerek
 * küçük: tek CSS dosyası, dışarıdan tek varlık gövde fontu — o da kendi
 * sunucumuzdan (`/fonts/`, bkz. aşağıdaki "Yazı tipleri"). İki betik var —
 * `snap.js` kaydırmayı, `demo.js` "on araç" demosunu sürüyor; görünen her
 * şey buradan.
 *
 * # Neden tek şema
 *
 * Uygulama koyu, site açık. Renkler kopyalanmadı ve `prefers-color-scheme` de
 * yok: hero'daki ürün mock'u (sahte pencere, gölge, cam şerit) iki şemada iki
 * ayrı ayar isterdi ve ikisi birden bakımsız kalırdı. `color-scheme: light`
 * tarayıcıya bunu açıkça söylüyor, yoksa koyu kipteki tarayıcı form denetimlerini
 * ve kaydırma çubuğunu ters renkte çizerdi.
 */

/*
 * # Yazı tipleri: gövde Montserrat, başlıklar sistem fontu
 *
 * Gövde metni Montserrat; başlıklar (h1/h2/h3) bilerek dışarıda kaldı —
 * onlar `--font-head` ile işletim sisteminin arayüz fontunu kullanıyor.
 *
 * Font **kendi sunucumuzdan** geliyor, Google Fonts bağlantısıyla değil:
 * üçüncü taraf bir kökene istek atmak hem fazladan DNS + TLS turu (ilk
 * boyanın önüne giren bir gecikme) hem de ziyaretçinin IP'sini başka bir
 * şirkete göndermek demekti. Dosyalar `site/fonts/`te durur, `build.mjs`
 * onları `dist/fonts/`e kopyalar (SIL OFL, yeniden dağıtımı serbest).
 *
 * Üç alt küme, üç dosya: sekiz dilin yedisi latin + latin-ext, Rusça ise
 * kiril istiyor. `unicode-range` sayesinde tarayıcı yalnızca sayfada geçen
 * karakterlerin dosyasını indiriyor — Türkçe sayfa kirili hiç çekmiyor.
 *
 * Tek dosyada 400–700 arası **değişken** ağırlık var; gövdedeki 400/550/600
 * /650 kalınlıkları bundan türüyor, ayrı ayrı dosya inmiyor. `swap`: font
 * inene kadar metin yedek fontla görünür, görünmez bir aralık beklemez.
 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-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;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * # Ölçek: tek birim, `--u`
 *
 * Bütün yazı boyları ve boşluklar bundan türüyor. `min(vw, vh)` olması şart:
 * bölümler ekran yüksekliğini kapladığı için ölçek yalnızca genişliğe
 * bağlansaydı 1920×800 gibi basık bir ekranda masaüstü boyunda yazı 800px'lik
 * kutuya sığmaz, bölüm taşardı. Yüksekliği de hesaba katınca ölçek ekranın
 * *dar* olan eksenini izliyor.
 *
 * Taban 15px: dar telefonda `1.05vw` 4px'e düşüyor, okunaklı bir alt sınır
 * gerekiyor. Tavan 19px: 4K'da yazı sayfayı ele geçirmesin.
 */
:root {
  --u: clamp(15px, min(1.25vw, 1.95vh), 22px);

  /*
   * Animasyon süresi çarpanı — `snap.js`'teki GLIDE/GLIDE_CALM ile aynı politika.
   *
   * Hareketi azaltılmış kipte animasyonlar **kaldırılmıyor, kısaltılıyor**.
   * Windows'ta "Animasyon efektleri"ni kapatmak yaygın ve çoğunlukla
   * erişilebilirlik gerekçesiyle değil; o kullanıcılara bomboş bir hero
   * göstermek yerine çizimi hızlı oynatıyoruz. Süreyi tek yerden ölçeklemek,
   * her kuralı ayrı ayrı `@media` içine kopyalamaktan hem kısa hem tutarlı.
   */
  --motion: 1;

  /*
   * Gövde ile başlığın fontu ayrı; ikisi de tek yerde tanımlı, yoksa aynı
   * yığın onlarca kuralda tekrarlanırdı. Montserrat inmezse yedek yığın
   * başlıklarınkiyle aynı — sayfa tek fonta düşer, karışık görünmez.
   */
  --font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f6f7f9;
  --fg: #1d1d1f;
  /* Sayfadaki bütün yazı tek renk: gövde metni de başlıklarla aynı. Ayrım
     puntoyla ve kalınlıkla kuruluyor, renkle değil. */
  --fg-dim: #1d1d1f;
  --line: #e4e7ec;
  --accent: #1f6feb;
  --accent-dark: #1a5fd0;
  --ink: #ff3b30; /* mock'taki çizim rengi; uygulamanın varsayılan kalemi */

  /*
   * Serbest izlerin renkleri — uygulamanın paletinden (`src/state.ts / COLORS`).
   * Tek tanım: hem izler (`.ink-*`) hem bölüm parıltıları (`.glow-*`) buradan
   * okuyor, yoksa aynı sekiz değer iki yerde ayrı ayrı sürdürülürdü. Kırmızı
   * listede yok; o `--ink`, metnin üstündeki izlerin rengi.
   */
  --iz-indigo: #5856d6;
  --iz-orange: #ff9500;
  --iz-green: #34c759;
  --iz-teal: #00c7be;
  --iz-blue: #0a84ff;
  --iz-purple: #af52de;
  --iz-rose: #ff6482;
  --iz-sky: #5ac8fa;
  /*
   * Şeritteki öğelerin hover zemini — iletişim bağlantısı ve dil düğmesi
   * **aynı** olmak zorunda: yan yana duruyorlar ve iki farklı gri, birini
   * pasif gösteriyor. `--bg-soft`tan (#f6f7f9) koyu, çünkü o değer çerçevesiz
   * bağlantıda beyazdan neredeyse ayrışmıyordu.
   */
  --hover: #e9edf3;

  /*
   * Zemin deseninin nokta rengi. İki yerde kullanılıyor (bölüm zemini ve
   * altbilgi); ayrı ayrı yazıldığında biri koyulaştırılıp öteki unutulmuştu.
   */
  --nokta: #d5dbe6;

  --radius: 12px;
  --card-shadow: 0 1px 2px rgba(16, 19, 26, 0.06), 0 4px 14px rgba(16, 19, 26, 0.05);
  --lift-shadow: 0 2px 4px rgba(16, 19, 26, 0.07), 0 12px 34px rgba(16, 19, 26, 0.1);
}

* {
  box-sizing: border-box;
}

/*
 * # Kaydırma yapışması
 *
 * Amaç: tek bir kaydırma hareketi bir bölüm ilerletsin, arada yarım yerde
 * kalmasın. Bunu iki özellik birlikte yapıyor —
 *
 *   `mandatory`             kaydırma her zaman bir bölüme oturur,
 *   `scroll-snap-stop: always`  **hiçbir bölüm atlanamaz**; hızlı bir savurma
 *                           bile bir sonrakinde durur.
 *
 * ## Buradaki kurallar `snap.js`'in de girdisi
 *
 * CSS tek başına arada bir miktar serbest kaydırma bırakıyor: tarayıcı önce
 * tekerleğin verdiği kadar kaydırıp sonra çekiyor. Tekerlekte o kaymayı
 * tümüyle kaldıran `snap.js`, hangi öğenin bölüm sayıldığını **buradan**
 * okuyor — `scroll-snap-align`i "none" olmayan her öğe onun için bir durak.
 * Yani aşağıdaki hizalamalar yalnızca tarayıcının yapışması değil, betiğin de
 * bölüm listesi; birini kaldırmak ikisini birden değiştirir. Dokunmatik ve
 * klavye betiğe uğramıyor, onlar için geçerli olan yalnızca bu bölüm.
 *
 * ## Neden `min-height: 701px` koşuluna bağlı
 *
 * `mandatory`nin bilinen tuzağı: bir bölüm ekrandan uzunsa tarayıcı sürekli
 * bölümün başına ya da sonuna çekiyor ve **aradaki içeriğe ulaşılamıyor**.
 * Ölçümde 360×640'ta (dar *ve* basık, en uzun dil Rusça) üç bölüm ekranı
 * aşıyor. O yüzden zorlama yalnızca içeriğin sığdığı doğrulanmış yüksekliklerde
 * açık; altında `proximity`ye düşüyor — yapışma yumuşar ama hiçbir yer
 * erişilemez olmaz.
 *
 * ## `scroll-padding-top` yok ve olmamalı
 *
 * Bölümler `min-height: 100svh` ve içeriği kendi üst dolgusunun (≥3u) altından
 * başlıyor; yarı saydam başlık o dolgunun üstünde duruyor. Buraya başlık boyu
 * yazmak bölümü aşağı iter ve altından o kadarını ekran dışına taşırırdı.
 */
html {
  scroll-snap-type: y proximity;
}

@media (min-height: 701px) {
  html {
    scroll-snap-type: y mandatory;
  }

  .screen,
  .row {
    scroll-snap-stop: always;
  }
}

/* `#download` bağlantısı da yumuşak gitsin; hareketi kapatan kullanıcıya
   anında atlasın. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--u) / 1.6 var(--font);
  /*
   * Yazı yumuşatma — ikisi de **yalnızca macOS'ta** iş görüyor.
   *
   * Bu iki özellik yumuşatmayı "açmıyor": yazı her platformda zaten
   * yumuşatılıyor. Yaptıkları, macOS'ta alt piksel yumuşatması yerine gri
   * tonlamalı yumuşatmaya geçmek — koyu yazı açık zeminde bir tık ince ve
   * temiz görünüyor. Windows'ta (DirectWrite) ve Linux'ta tarayıcı ikisini de
   * yok sayıyor, dolayısıyla oradaki görünümü değiştirmezler.
   *
   * `-moz-osx-…` satırı WebKit'inkinin Firefox karşılığı; ikisi birlikte
   * yazılmazsa macOS'taki Firefox eski davranışta kalıp Chrome/Safari'den
   * farklı bir ağırlıkta görünüyor.
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ortak genişlik kabı. Metin bölümleri `.narrow` ile daralır: 60ch üstünde
   satır gözle takip edilemiyor. */
.wrap {
  width: 100%;
  max-width: min(1760px, 92vw);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow {
  max-width: min(880px, 92vw);
}

/* ------------------------------------------------ Başlık */

/*
 * Başlık **fixed**, sticky değil.
 *
 * Sticky'ken belgenin ilk ~55px'ini akışta kaplıyordu, yani hero o kadar
 * aşağıdan başlıyor ve hero'nun yapışma noktası 0 değil "başlık boyu" oluyordu.
 * Üstteki o bant hiçbir noktaya ait değil: en üste kaydıran kullanıcı önce
 * oraya serbestçe kayıyor (hero aşağı iniyor, ortalanmış gibi duruyor), sonra
 * `mandatory` yapışma onu geri çekiyordu — "kaydı, sonra kendiliğinden yukarı
 * gitti" diye görünen şey buydu.
 *
 * `fixed` ile hero belgenin 0'ından başlıyor: yapışma noktası 0, üstünde ölü
 * bant yok, ilk açılışta görülen kare hero'nun oturduğu karenin aynısı.
 * Görünüm değişmiyor — başlık zaten *her* bölümün üst dolgusunun üstünde
 * duruyordu (bölümlerin yapışma noktası kendi üst kenarı), hero da artık
 * ötekilerle aynı davranıyor.
 *
 * `inset-inline: 0` şart: fixed öğe içeriği kadar daralır, tam genişlik
 * kendiliğinden gelmez.
 */
header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(10px);
}

header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 14px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-size: calc(var(--u) * 1.05);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.mark svg {
  color: var(--accent);
}

/*
 * Dil seçici: açılır liste.
 *
 * Sekiz dilin adı bir zamanlar başlıkta yan yana duruyordu ve iki seçenek de
 * kötüydü: sarınca 430px'te üç satıra çıkıp yapışkan başlığı 116px yapıyordu —
 * ekranı kaplayan bölümlerin üstünü örtecek kadar; sarmayı kapatıp yatay
 * kaydırınca da adların çoğu görünmeden kalıyordu. Açılır listede başlık her
 * genişlikte tek satır (~55px) ve markanın karşısında tek bir düğme var.
 *
 * Liste **mutlak konumlu**: açılıp kapanması başlığın yüksekliğini
 * değiştirmiyor. Değiştirseydi altındaki bütün bölümler kayardı ve yapışma
 * noktaları oynardı.
 */
.langs {
  position: relative;
  font-size: calc(var(--u) * 0.82);
}

.langs summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-dim);
  cursor: pointer;
  /* Varsayılan açılır üçgen iki ayrı yolla kalkıyor: `list-style` modern
     tarayıcılarda, `::-webkit-details-marker` Safari'de. */
  list-style: none;
  /* Düğmeye üst üste tıklayınca yazısı seçili kalmasın. */
  user-select: none;
  white-space: nowrap;
}

.langs summary::-webkit-details-marker {
  display: none;
}

.langs summary svg {
  flex: none;
}

.langs summary:hover,
.langs[open] summary {
  background: var(--hover);
  color: var(--fg);
}

/* Ok listenin açık olduğunu gösteriyor. Süre `--motion` ile ölçekli:
   hareketi azaltılmış kipte kaldırılmıyor, kısalıyor (bkz. `:root`). */
.langs .chev {
  transition: transform calc(0.18s * var(--motion));
}

.langs[open] .chev {
  transform: rotate(180deg);
}

.langs ul {
  position: absolute;
  /* Başlığın sağ ucundaki düğmeye dayanıyor; sola doğru açılıyor ki dar
     ekranda sayfa dışına taşmasın. */
  inset-inline-end: 0;
  top: calc(100% + 8px);
  min-width: 100%;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--lift-shadow);
  list-style: none;
}

.langs li a,
.langs li span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border-radius: 8px;
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
}

/*
 * Bayraklar 3:2 ve ölçüleri `em` — yani `--u` ile birlikte büyüyorlar, sabit
 * piksel yok. Halka (`box-shadow`) beyaz bantlı bayraklar için: Rusya, Fransa
 * ve İtalya beyaz zeminde kenarını yitiriyordu.
 */
.flag {
  flex: none;
  width: 1.35em;
  height: 0.9em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 19, 26, 0.16);
}

.langs li a:hover {
  background: var(--bg-soft);
}

.langs [aria-current] {
  background: var(--bg-soft);
  font-weight: 600;
}

/* ------------------------------------------------ Üst şerit bağlantıları */

/*
 * Nav'daki üç öğe **üç ayrı ağırlıkta**, üçü de aynı hap biçiminde: dolu
 * (İndir — sayfanın asıl eylemi), hayalet (İletişim — yalnızca hoverda zemin
 * alıyor) ve çerçeveli (dil seçici). Üçünü birden çerçeveli düğme yapmak
 * şeridi bir araç çubuğuna çeviriyor; üçünü birden düz metin yapmak — ilk hâli
 * — indirmeyi öteki bağlantılardan ayırt edilemez bırakıyordu.
 *
 * Ölçüler dil düğmesiyle (`.langs summary`) birebir aynı: üç öğe tek satırda
 * yan yana duruyor, biri farklı dolgu alsa şerit basamaklanır.
 */
header nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  /* Saydam kenarlık: dil düğmesinde 1px çerçeve var, burada yok — ama yer
     ayrılmazsa iki öğe 1px kayıyor ve satır hizası bozuluyor. */
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--fg);
  font-size: calc(var(--u) * 0.82);
  font-weight: 550;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

/* Dil düğmesiyle aynı zemin (bkz. `--hover`): ikisi şeritte yan yana. */
.top-link:hover {
  background: var(--hover);
}

/* Asıl eylem dolu hap: hero'daki büyük düğmeyle aynı renk, aynı biçim. */
.top-link.go {
  background: var(--accent);
  color: #fff;
}

.top-link.go:hover {
  background: var(--accent-dark);
}

/* İkon metinle birlikte küçülmesin. */
.top-link svg {
  flex: none;
}

.top-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------ Ortak tipografi */

/*
 * # Ekranı kaplayan bölümler
 *
 * `.screen` (tek ekranlık bölüm) ve `.row` (zikzak sıra) ekran yüksekliğini
 * kaplar ve içeriğini dikey ortalar.
 *
 * **`height` değil `min-height`.** Sabit yükseklik, içerik sığmadığında onu
 * kırpardı — basık bir dizüstü ekranında ya da devasa yazı boyu seçen bir
 * kullanıcıda bölümün yarısı görünmez olurdu. `min-height` ile bölüm en az bir
 * ekran, gerekirse daha uzun: söz "ekranı kaplar", "tam olarak ekran kadardır"
 * değil.
 *
 * **`svh`, `vh` değil.** Mobil tarayıcıda `100vh` adres çubuğu dahil ölçülüyor,
 * yani gerçek görünür alandan yüksek çıkıyor ve her bölümün altı taşıyor.
 * `svh` (small viewport height) adres çubuğu açıkken geçerli olan yüksekliği
 * veriyor. Önce `vh` yazılı: tanımayan tarayıcı onda kalır.
 *
 * Üstteki dolgu yapışkan başlığın altına düşmemek için: başlığın boyu dile
 * göre değişiyor (sekiz dil dar ekranda iki satıra sarıyor), o yüzden sabit
 * bir sayı yerine cömert bir dolgu bırakıldı.
 */
section {
  padding: 0;
}

.screen,
.row {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--u) * 4) calc(var(--u) * 2.4);
  scroll-snap-align: start;
}

/* Tek ekranlık bir bölümün *içindeki* sıra kendi başına ekran olmamalı,
   yoksa başlıkla içeriği iki ekrana bölünür — yapışma noktası da olmamalı,
   yoksa kaydırma bölümün ortasına takılır. */
.screen .row {
  min-height: 0;
  padding-block: 0;
  scroll-snap-align: none;
}

/*
 * # Bölüm zemini: parıltı + nokta deseni
 *
 * Her yapışma noktasının (hero, her zikzak sıra, fiyat, indirme) kendi rengi
 * var. Renk `--glow`la geliyor: varsayılan vurgu mavisi, `.glow-*` sınıfları
 * onu serbest izlerin paletiyle değiştiriyor (`--iz-*`). Böylece kural tek,
 * değişen yalnızca bir değişken — sekiz bölüm için sekiz ayrı zemin kuralı
 * yazmak ilk düzeltmede ayrışırdı.
 *
 * `color-mix` alfa'yı tek yerde tutuyor: palet **hex**, parıltı ise saydam
 * olmak zorunda; her rengi bir de `rgba(...)` biçiminde yazmak aynı sekiz
 * değerin ikinci kopyası demekti.
 *
 * Yoğunluk (%38) ve maske eşiği birlikte ayarlanır: yalnızca yüzdeyi büyütmek
 * rengi koyultuyor ama bandı kısa bırakıyor, ortaya yumuşak bir geçiş yerine
 * keskin bir şerit çıkıyor. İkisi de artınca renk hem belirginleşiyor hem
 * beyaza yayılarak bitiyor.
 *
 * Maske ikisini de alta doğru söndürüyor, yani bölümler birbirine renk
 * taşımıyor: her biri kendi renginde başlayıp beyaza dönerek bitiyor.
 */
/* `.sheet` de burada: iletişim sayfası da aynı zemini alıyor (parıltı + nokta
   deseni), yalnızca rengi `glow-*` sınıfıyla geliyor. */
.screen,
.row,
.sheet {
  position: relative;
  --glow: var(--accent);
}

.screen::before,
.row::before,
.sheet::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(72% 64% at 50% 0%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 76%),
    radial-gradient(circle, var(--nokta) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px;
  content: "";
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}

/*
 * Sıralar `.wrap`ın **içinde**: kutuları içerik sütunu kadar, yani zemin de
 * öyleydi — parıltı ve noktalar ekranın ortasında bir şeride sıkışıyor, yan
 * boşluklar bomboş kalıyordu. `50% - 50vw` kabı iki yandan görünüm alanının
 * kenarına kadar açıyor (sıra yatayda ortalı olduğu için tam oturuyor).
 *
 * `.tint`teki `overflow-x: clip` bunun ikizi: `100vw` kaydırma çubuğunu da
 * sayıyor, taşan birkaç piksel yatay kaydırma çubuğu çıkarırdı. `clip`,
 * `hidden`in aksine kaydırma kabı kurmuyor — yapışma ve sabit başlık
 * bozulmadan kalıyor.
 */
.row::before {
  inset-inline: calc(50% - 50vw);
}

/* Ekranın içindeki sıra kendi başına bölüm değil; ikinci bir zemin çizerse
   parıltı üst üste binip iki kat koyulaşır. */
.screen .row::before {
  content: none;
}

.glow-indigo {
  --glow: var(--iz-indigo);
}

.glow-orange {
  --glow: var(--iz-orange);
}

.glow-green {
  --glow: var(--iz-green);
}

.glow-teal {
  --glow: var(--iz-teal);
}

.glow-blue {
  --glow: var(--iz-blue);
}

.glow-purple {
  --glow: var(--iz-purple);
}

.glow-rose {
  --glow: var(--iz-rose);
}

.glow-sky {
  --glow: var(--iz-sky);
}

/*
 * Basık ekranlar (netbook, yatay telefon).
 *
 * `--u` zaten `vh`e bağlı ama 15px tabanı var; 640px yükseklikte taban devreye
 * girdiği için yazı daha fazla küçülmüyor — okunabilirlik uğruna doğru olan bu.
 * Kalan farkı boşluklardan kısıyoruz, yazıdan değil.
 */
@media (max-height: 700px) {
  .screen,
  .row {
    padding-block: calc(var(--u) * 3) calc(var(--u) * 1.6);
  }

  .head {
    margin-bottom: calc(var(--u) * 1.2);
  }


  .hero .note {
    margin-bottom: calc(var(--u) * 1.2);
  }
}

/* `isolation` şart: içindeki sıraların zemini `z-index: -1` ile çiziliyor ve
   negatif katman, yığma bağlamını kuran öğenin **arka planının üstünde**
   duruyor. Bağlam olmadan en yakın bağlam kök oluyordu, yani parıltılar bu
   bölümün kendi zemininin altında kalıp hiç görünmüyordu. */
section.tint {
  isolation: isolate;
  overflow-x: clip;
  border-block: 1px solid var(--line);
  background: var(--bg-soft);
}

/*
 * Yazı ölçeği — hepsi `--u` katları.
 *
 * Sabit px ya da ayrı ayrı `clamp()` yoktu artık: ölçek tek yerden geliyor,
 * dolayısıyla başlıkla gövde arasındaki oran her çözünürlükte aynı kalıyor.
 * `text-wrap: balance` başlığın satırlarını eşitler; tanımayan tarayıcı yok
 * sayar — düşüş yumuşak.
 *
 * Font da burada ayrışıyor: gövde Montserrat, başlıklar `--font-head` ile
 * sistem fontunda kalıyor (bkz. dosya başındaki "Yazı tipleri"). Kural her
 * seçiciye tek tek yazılı, çünkü ortak bir seçici eklemek ölçek bloğunun
 * okunuşunu bölerdi.
 */
h1 {
  margin: 0 0 calc(var(--u) * 0.9);
  font-family: var(--font-head);
  font-size: calc(var(--u) * 2.9);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  margin: 0 0 calc(var(--u) * 0.7);
  font-family: var(--font-head);
  font-size: calc(var(--u) * 2.25);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.15;
  text-wrap: balance;
}

/*
 * Sıra ve araç başlıkları: etiket `h2` ama ölçek bölüm başlığınınkinden
 * küçük.
 *
 * Etiketin h2 olması zorunlu — üstlerinde bölüm başlığı yok, h3 yazmak
 * taslakta seviye atlardı (bkz. build.mjs / plain). Ölçeğin küçük olması da
 * zorunlu: her sıra tek ekran ve `İndir`/`Fiyat` başlıklarının puntosuyla
 * yazıldığında başlık, anlattığı görselin önüne geçiyor. Seviyeyi yapı,
 * puntoyu tasarım belirliyor; ayrışma bilinçli.
 *
 * Sayfada başka h3 kalmadığı için o seçici de kaldırıldı — yeni bir h3
 * eklenirse biçimsiz kalır, bu bir uyarı olarak yeterli.
 */
.row-text h2 {
  margin: 0 0 calc(var(--u) * 0.6);
  font-family: var(--font-head);
  font-size: calc(var(--u) * 1.65);
  font-weight: 660;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

p {
  margin: 0 0 calc(var(--u) * 0.85);
}

.lead {
  max-width: 58ch;
  color: var(--fg-dim);
  font-size: calc(var(--u) * 1.15);
  text-wrap: pretty;
}

.note {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.85);
}

/* Bölüm başlığı + tek cümlelik girişi ortalayan kap. */
.head {
  margin: 0 auto calc(var(--u) * 2.4);
  max-width: 42em;
  text-align: center;
}

.head p {
  margin: 0;
  color: var(--fg-dim);
  font-size: calc(var(--u) * 1.15);
}

/* ------------------------------------------------ Düğmeler */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Yatay dolgu dikeyden belirgin fazla: tam yuvarlak uçta dar yatay dolgu,
     yazıyı kavise sıkıştırıp sıkışık gösteriyor. */
  padding: calc(var(--u) * 0.54) calc(var(--u) * 1.45);
  border: 1px solid transparent;
  /* Hap biçimi. Bu kural yalnızca sayfanın kendi düğmelerini (İndir, iki
     indirme bağlantısı, satın alma) etkiler — demo şeridindeki araç düğmeleri
     `.strip .tool` sınıfında ve kendi `2cqh` yuvarlaklığını koruyor, çünkü
     onlar uygulamanın gerçek araç çubuğunu taklit ediyor. */
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: calc(var(--u) * 0.95);
  font-weight: 600;
  text-decoration: none;
  /* Sınıf hem `<a>` hem `<button>` üzerinde kullanılıyor; bağlantı işaretçiyi
     kendiliğinden alıyor, düğme almıyor. İkisi aynı görünüp farklı davranınca
     tıklanabilir olan tıklanamaz gibi duruyordu (iletişim formundaki "Gönder",
     indirim kodundaki "Uygula"). */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.btn:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn.secondary {
  border-color: var(--line);
  background: #fff;
  color: var(--fg);
}

.btn.secondary:hover {
  border-color: #cfd5de;
  background: #fff;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Yan yana duran düğmeler; dar ekranda alta sarar. */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 14px;
}

.hero .actions {
  justify-content: center;
}

/* ------------------------------------------------ Hero */

/*
 * Hero zemini: nokta ızgarası + üstte yumuşak mavi ışık.
 *
 * Düz beyazda ürün mock'u boşlukta asılı duruyordu. Izgara ölçek veriyor,
 * ışık gözü ortaya çekiyor. İkisi de `background-image`, ek dosya yok; ızgara
 * aşağı doğru maskeyle sönüyor ki bir sonraki bölüme sert bir çizgiyle
 * çarpmasın.
 */
/*
 * Metin bloğu **yukarıda**, ortalanmış değil (`.screen` varsayılanı `center`).
 * Hero'da ürün mock'u varken blok onunla birlikte ortalanıyordu ve yazı üst
 * üçtebirde duruyordu; mock kalkınca aynı ortalama yazıyı ekranın tam ortasına
 * indirdi. Yukarı almak hem eski yerini geri veriyor hem de serbest izlere
 * (`.doodles`) alt yarıda gerçekten boş bir alan bırakıyor.
 */
.hero {
  position: relative;
  align-content: start;
  padding-block-start: calc(var(--u) * 10);
  text-align: center;
}

.hero .lead {
  margin-inline: auto;
}

.hero .note {
  margin-bottom: calc(var(--u) * 2.2);
}


/* ------------------------------------------------ Çizilme animasyonu
 *
 * Hero'da ve bütün mock'larda **aynı** mekanizma: `icons.mjs / drawn()` ile
 * sarmalanan her iz `pathLength="1"` taşıdığı için uzunluğunu ölçmeye gerek
 * yok, `stroke-dasharray: 1` her yol için doğru. (Önceden her yola elle
 * ölçülmüş bir `--len` yazılıyordu; göz kararı olduğu için kimi iz geç
 * başlıyordu.)
 *
 * # Görünürlüğe bağlı
 *
 * Animasyon yalnızca kapsayıcı bölüm `.in` sınıfını aldığında çalışır; onu
 * `snap.js` bir IntersectionObserver ile ekliyor. Hepsi sayfa açılışında
 * oynasaydı, aşağıdaki bölümlere varıldığında çoktan bitmiş olurlardı.
 *
 * # Betik yoksa iz görünür kalır
 *
 * Varsayılan `stroke-dashoffset: 0`: JS çalışmasa da çizimler tam görünüyor,
 * yalnızca canlanmıyorlar. Tersi (varsayılanı gizli bırakmak) betik
 * yüklenmediğinde bomboş mock'lar demekti.
 *
 * Süre ve gecikme `--motion` ile ölçekleniyor (bkz. `:root`).
 */
.draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* Süre `--sure` ile ayarlanabilir: hero'daki izler sırayla çizildiği ve toplam
   ~3.8s'de bitmesi gerektiği için orada kısa (bkz. icons.mjs / "Zaman
   çizelgesi"); mock'larda tek tek izler var, 0.9s onlara göre kalıyor. */
.in .draw {
  animation: draw calc(var(--sure, 0.9s) * var(--motion)) ease-out calc(var(--at, 0s) * var(--motion)) both;
}

/*
 * `stroke-opacity` burada süs değil, bir **artığı siliyor**.
 *
 * İzler `stroke-linecap: round` taşıyor (elle çizilmiş görünsün diye). Desen
 * tümüyle gizliyken (`stroke-dashoffset: 1`) çizilen parçanın uzunluğu sıfır
 * oluyor ama yuvarlak uç yine de boyanıyor: sayfa açılır açılmaz, daha hiçbir
 * şey çizilmeden, her izin başlangıç noktasında renkli bir nokta beliriyordu —
 * hero'da otuz bir tane. `fill-mode: both` sayesinde `0%` karesi **gecikme
 * boyunca** geçerli, yani iz sırası gelene kadar görünmez kalıyor.
 *
 * Görünürlüğe `%1`de kavuşuyor (0.26s'lik bir izde ~3ms): gözle görülmeyecek
 * kadar kısa ama noktanın basılmasına yetmeyecek kadar erken.
 */
@keyframes draw {
  0% {
    stroke-dashoffset: 1;
    stroke-opacity: 0;
  }

  1% {
    stroke-opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-opacity: 1;
  }
}

/* Mock'lardaki izler — hero'nun `.ink`/`.wash`ıyla aynı aile, ama mock 320×200
   kutuda olduğu için kalınlıklar ayrı. */
.mock .ink-red {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mock .ink-white {
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.9;
}

.mock .ink-green {
  fill: none;
  stroke: #34c759;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.mock .ink-wash {
  fill: none;
  stroke: #ffd400;
  stroke-width: 12;
  opacity: 0.8;
}

/* Sayfalar mock'undaki üç yaprağın içindeki çizimler — aynı kutuda üç kat
   küçük alana sığdıkları için daha ince. */
.mock .sheet-red,
.mock .sheet-blue,
.mock .sheet-green {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mock .sheet-red {
  stroke: var(--ink);
}

.mock .sheet-blue {
  stroke: #0a84ff;
}

.mock .sheet-green {
  stroke: #34c759;
}

.mock .sheet-wash {
  fill: none;
  stroke: #ffd400;
  stroke-width: 9;
  opacity: 0.6;
}

/* ------------------------------------------------ Gezen mercek
 *
 * Mercek `.lens` ile ötelenirken kırpma alanı ve halka onunla taşınıyor; asıl
 * incelik, içerideki büyütülmüş haritanın **dünyada sabit kalması**. Aksi
 * halde mercek kendi içeriğini taşır ve hep aynı bölgeyi gösterir — büyüteç
 * öyle çalışmaz.
 *
 * Dış öteleme `T(d)`, büyütme merkezi `c` iken içeriğe `T(d)·Z(c)` uygulanmış
 * oluyor; istediğimiz ise `Z(c+d)`. İkisi arasındaki fark tam olarak bir
 * `T(−d)`, ve o ölçeklemenin *içine* girmeli:
 *
 *     T(d)·Z(c)·T(−d) = T(d+c)·S·T(−c−d) = Z(c+d)   ✓
 *
 * `.lens-back` işte o `T(−d)`. İki animasyonun karesi kare birbirinin tersi
 * olmak zorunda: aynı süre, aynı gecikme, aynı yumuşatma — biri değişirse
 * ikisi de değişmeli, yoksa büyütülmüş görüntü haritadan kayar.
 */
.in .lens {
  animation: lens-roam calc(2.4s * var(--motion)) ease-in-out calc(0.25s * var(--motion)) both;
}

.in .lens-back {
  animation: lens-back calc(2.4s * var(--motion)) ease-in-out calc(0.25s * var(--motion)) both;
}

/* Konumlar haritanın içinde kalacak şekilde seçildi: mercek kenara taşarsa
   içi boş beyaza döner ve büyütecek bir şey kalmaz. */
@keyframes lens-roam {
  0% {
    transform: translate(-44px, 30px);
  }

  55% {
    transform: translate(6px, -14px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes lens-back {
  0% {
    transform: translate(44px, -30px);
  }

  55% {
    transform: translate(-6px, 14px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/*
 * Şerit: uygulamanın dikey araç çubuğu, cam yüzeyiyle.
 *
 * Ölçüler `cqh` — mock gövdesinin yüksekliğinin yüzdesi.
 *
 * Sabit 30px'lik araçlarla şerit 312px yüksekliğindeydi; mock ekrana sığsın
 * diye küçülünce (bkz. `.shot` üzerindeki `36svh` sınırı) gövdeye sığmayıp
 * `overflow: hidden` tarafından kırpılıyordu — 1366×768'de alttaki iki araç
 * görünmüyordu.
 *
 * Yüzde + `flex: 1` + `aspect-ratio` ile denendi ve döngüye girdi: şerit
 * mutlak konumlu olduğu için genişliği içeriğinden, içeriğin genişliği de
 * `aspect-ratio` üzerinden yüksekliğinden geliyordu. `cqh` bu düğümü kesiyor,
 * çünkü ölçü doğrudan kaptan okunuyor.
 *
 * Toplam: 10 × 8.4 + 9 × 0.7 + 2 × 1.6 = 93.5cqh — gövdeye sığıyor.
 */
.strip {
  position: absolute;
  top: 50%;
  right: 3.5%;
  display: flex;
  flex-direction: column;
  gap: 0.7cqh;
  padding: 1.6cqh;
  border-radius: 3cqh;
  background: rgba(24, 24, 30, 0.92);
  box-shadow: 0 4px 16px rgba(16, 19, 26, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  translate: 0 -50%;
}

.strip .tool {
  display: grid;
  place-items: center;
  width: 8.4cqh;
  height: 8.4cqh;
  border-radius: 2cqh;
  color: #d8d8e0;
}

.strip .tool.on {
  background: var(--accent);
  color: #fff;
}

.strip svg {
  width: 5.3cqh;
  height: 5.3cqh;
}

/* Uygulamanın ikon sözleşmesi: `.s` konturla, `.f` dolguyla çizilir.
   Marka da aynı sözleşmeyi kullanıyor — kapsam dışında kalırsa nib, SVG'nin
   varsayılan siyah dolgusuyla lekeye dönüyor. */
.mark .s,
.picker .s,
.langs .s,
.top-link .s,
.strip .s,
.icon .s {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark .f,
.platforms .f,
.strip .f,
.icon .f {
  fill: currentColor;
  stroke: none;
}

.icon .dash {
  stroke-dasharray: 2.6 2.6;
}

/* ------------------------------------------------ Zikzak sıralar
   Bir yanda başlık + metin, öbür yanda görsel; her sırada taraflar değişir.
   Kartlaştırılmadılar (çerçeve/gölge yok): altı kutu alt alta dizilince sayfa
   liste gibi okunuyordu, çerçevesiz haldeyse zikzak asıl ritmi kuruyor. */

.row {
  gap: calc(var(--u) * 3.5);
  align-items: center;
  /* Görsel metinden geniş: sıra ekranı doldursun. Mock genişlikten yükseklik
     türettiği için (320:200) sütunu büyütmek onu da büyütüyor. */
  grid-template-columns: 0.85fr 1.15fr;
}

.row + .row {
  border-top: 1px solid var(--line);
}

/* Aynalanan sıra: metin sağa, görsel sola. Sınıf `nth-of-type`'a yeğlendi —
   o, araya bir öğe eklendiğinde dizilimi sessizce ters çeviriyordu.
   `order` kullanılıyor çünkü kaynak sırası (önce başlık, sonra görsel) ekran
   okuyucu için doğru olan. */
.row.reverse .row-text {
  order: 2;
}

/* Oran da aynalanmalı. `grid-template-columns` sütunları **konuma** göre
   dağıtıyor, içeriğe göre değil: `order` ile görsel öne geçince dar sütuna,
   metin geniş sütuna düşüyordu — yani her aynalanan sırada oran tersine
   dönüyordu. */
.row.reverse {
  grid-template-columns: 1.15fr 0.85fr;
}

/* Grid çocukları varsayılan olarak `min-width: auto` — içindeki geniş bir öğe
   (numune şeridi, uzun bir kelime) sütunu şişirip satırı taşırabiliyor. */
.row-text,
.row-art {
  min-width: 0;
}

.row-text p {
  margin: 0;
  color: var(--fg-dim);
  font-size: calc(var(--u) * 1.05);
  text-wrap: pretty;
}

.mock {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0 8px 26px rgba(16, 19, 26, 0.12));
}

@media (max-width: 780px) {
  /* `.row.reverse` da yazılmalı: iki sütunlu oranı o seçici veriyor (0,2,0) ve
     yalnızca `.row` (0,1,0) yazılınca onu ezemiyor — aynalanan sıralar dar
     ekranda iki sütunda kalıyordu. */
  .row,
  .row.reverse {
    gap: calc(var(--u) * 1.6);
    grid-template-columns: 1fr;
  }

  /* Dar ekranda hep metin üstte: aynalama tek sütunda anlamsız. Bu sıfırlama
     **yükseklikten bağımsız** olmalı; bir ara `min-height: 701px` bloğunda
     duruyordu ve dar *ve* basık ekranda (360×640) hiç uygulanmıyordu. */
  .row.reverse .row-text {
    order: 0;
  }

  /* Altbilgi alt alta ve ortalı: iki uç yan yana sığmayınca kredi cümlesi
     sağa yaslı kalıp tek başına ortada duruyordu. */
  footer .wrap {
    justify-content: center;
  }

  .rights {
    text-align: center;
  }

  /* Tek sütun: 1px'lik ayraç hücresi tam genişliğe yayılıp yatay çizgi olur. */
  .offer {
    grid-template-columns: 1fr;
  }
}

/*
 * Tek sütuna inince içerik dikeyde uzuyor; dolgular kısalıyor.
 *
 * `min-height` koşulu şart: bu kural yukarıdaki `max-height: 700px` bloğundan
 * *sonra* geldiği için, koşulsuz yazılınca basık ekranlarda onun sıkıştırmasını
 * geri alıyordu. İki sorgu artık birbirini dışlıyor, kaynak sırasına bağlı
 * değil.
 */
@media (max-width: 780px) and (min-height: 701px) {
  .screen,
  .row {
    padding-block: calc(var(--u) * 3.5) calc(var(--u) * 2);
  }
}

/* ------------------------------------------------ Sıra başlığındaki ikon rozeti */

.icon {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
  margin-bottom: calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.6);
  background: rgba(31, 111, 235, 0.09);
  color: var(--accent);
}

.icon svg {
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
}

/* ------------------------------------------------ Ayrıntılar */

/* Sağdan sola dillerde onay işareti de karşı kenara geçmeli. */
/* ------------------------------------ İndirme + ücretlendirme */

/*
 * İki sütun, aralarında ince bir çizgi.
 *
 * Çizgi **ızgaranın kendi hücresi** (1px'lik orta sütun), sütuna verilmiş bir
 * kenarlık değil: kenarlık dar ekranda sütunlar alt alta inince yanlarında
 * asılı kalırdı. Hücre olunca tek sütuna inen ızgarada aynı öğe kendiliğinden
 * **yatay** ayraca dönüşüyor — ikinci bir kural gerekmiyor.
 *
 * Kap `.narrow`: tam `.wrap` genişliğinde (1760px) iki sütun ekranın iki
 * ucuna dağılıyor, aradaki boşluk içeriğin kendisinden geniş kalıyordu.
 */
.offer {
  display: grid;
  align-items: start;
  gap: calc(var(--u) * 1.8);
  grid-template-columns: 1fr 1px 1fr;
}

/*
 * `align-self` şart: ızgara `align-items: start` olduğu için çizgi de içeriği
 * kadar (yani sıfır) yüksek kalırdı. `min-block-size` ise tek sütuna inince
 * gerekiyor — orada öğe tam genişlikte ama boş, yüksekliği yoktur.
 */
.offer-rule {
  align-self: stretch;
  min-block-size: 1px;
  background: var(--line);
}

/* Sütun başlığı bölüm başlığı kadar hava istemiyor: içeriği hemen altına al. */
.offer .head {
  margin-bottom: calc(var(--u) * 1.2);
}

/* ------------------------------------------------ Fiyat */

/*
 * Fiyat sütunu **kutusuz**: yanındaki indirme kartı zaten bir kutu ve ikisi
 * yan yana dururken iki çerçeve birbiriyle yarışıyordu. Ayırma işini artık
 * aradaki çizgi yapıyor, çerçeveye gerek kalmadı.
 */
.plan {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.plan .actions {
  justify-content: center;
  margin-top: calc(var(--u) * 1.2);
}

.plan .note {
  margin: 0;
}

.plan p:not(.note) {
  color: var(--fg-dim);
}

/*
 * ------------------------------------------------ Bölgeye göre fiyat
 *
 * İki fiyat da HTML de duruyor (bkz. build.mjs / fiyat bölümü); görünecek
 * olanı ziyaretçinin ülkesi seçiyor. Ülkeyi satır içi bir betik `<html>`
 * üzerine yazıyor (`data-region`, bkz. build.mjs / bolgeScript).
 *
 * Seçiciler yalnızca **gizliyor**, hiçbir yere `display` değeri yazmıyor:
 * işaretli öğeler arasında `<p>` de var `<a class="btn">` de, ve onlara
 * blok/satır içi bir değer atamak düğmenin kendi yerleşimini bozuyordu.
 *
 * İlk seçici "öznitelik yoksa" halini de kapsıyor (`:not([data-region=intl])`):
 * betik çalışmazsa Türkiye görünümü kalır — satın alınabilen tek teklif o.
 */
html:not([data-region='intl']) [data-for='intl'],
html[data-region='intl'] [data-for='tr'] {
  display: none;
}

/*
 * Fiyat etiketi. Sütundaki öteki paragraflar sönük (`--fg-dim`); rakamın
 * okunması gereken tek şey olduğu için burada tam renge dönüyor — kural
 * yukarıdaki `:not(.note)` seçicisinden sonra gelmeli, yoksa sönük kalır.
 */
.price-tag {
  margin: 0;
  color: var(--fg);
  font-size: calc(var(--u) * 2.4);
  font-weight: 680;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* Vergi satırı rakama yapışık, gövde metninden ayrık. */
.plan .price-tax {
  margin: calc(var(--u) * 0.25) 0 calc(var(--u) * 0.9);
}

/* ------------------------------------------------ İndirme */

/*
 * Tek platform, tek kart — bu yüzden kart **ortalı ve içeriği kadar geniş**.
 * Eskiden iki kart vardı ve `auto-fit` ikisini yan yana yayıyordu; tek kart
 * kalınca aynı kural onu bölümün tamamına kadar geriyor, içinde logo ile
 * düğme arasında koca bir boşluk bırakıyordu.
 */
.platforms {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.platforms li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 34px 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

/*
 * İndirme kartının altındaki SmartScreen ipucu.
 *
 * `<details>` — dil seçicideki gibi, açma/kapamayı tarayıcı yapıyor, betik
 * gerekmiyor. Kapalıyken tek satır: indirmeye karar vermiş kullanıcıyı
 * uyarı metniyle karşılamıyor, uyarıyı görüp geri dönen kullanıcıya ise
 * aradığı cevabı veriyor.
 */
.hint {
  max-width: 46ch;
  margin-inline: auto;
  font-size: calc(var(--u) * 0.86);
  text-align: center;
}

.hint summary {
  display: inline-block;
  cursor: pointer;
  /* Varsayılan üçgen iki tarayıcıda iki ayrı yolla kalkıyor. */
  list-style: none;
  opacity: 0.72;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.hint summary::-webkit-details-marker {
  display: none;
}

.hint summary:hover,
.hint[open] summary {
  opacity: 1;
}

.hint p {
  margin-top: 10px;
}

/* Logo yazının yerine geçiyor: kartın başlığı **o**, o yüzden başlık kadar
   iri. Ölçü `--u` katı — 34px'lik ikon boyunda kalınca kart başlıksız ve
   yarım görünüyordu. Rengi metinle aynı, kart bir marka panosuna değil
   sayfanın kendi diline benzesin diye. */
.platforms .os {
  width: calc(var(--u) * 4.6);
  height: auto;
  color: var(--fg);
}

/* ------------------------------------------------ Altbilgi */

/*
 * Altbilginin **kendi yapışma noktası olmalı**, yoksa `mandatory` altında
 * erişilemiyor: son bölüm ("İndir") son snap noktasıydı ve tarayıcı aşağı her
 * kaydırmada oraya geri çekiyordu. `end` hizası altbilginin alt kenarını
 * ekranın altına oturtuyor — belgenin doğal sonu, ve altbilgi kısa olduğu için
 * "start" gibi neredeyse boş bir ekran bırakmıyor.
 */
footer {
  position: relative;
  isolation: isolate;
  padding: calc(var(--u) * 2.4) 0 calc(var(--u) * 2.8);
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.88);
  scroll-snap-align: end;
}

/*
 * Altbilgi zemini: bölümlerdekiyle **aynı mekanizma**, yönü ters (bkz. "Bölüm
 * zemini"). Orada ışık yukarıdan iniyor ve maske aşağı söndürüyor; altbilgi
 * sayfanın sonu olduğu için burada ışık **alttan** geliyor ve maske yukarı
 * sönüyor — üstündeki bölümün kendi rengiyle çakışmasın, araya beyaz bir bant
 * girsin.
 *
 * Renk `--accent`: son bölüm gül tonunda, aynı renkte devam etmek iki bölümü
 * tek bloğa çeviriyordu; markanın mavisi sayfayı başladığı yerde kapatıyor.
 *
 * `isolation` şart ve sebebi `section.tint`tekiyle aynı: zemin `z-index: -1`
 * ile çiziliyor, yığma bağlamı kurmayan bir öğede negatif katman body'nin arka
 * planının **altına** düşüp tümüyle kayboluyor.
 */
footer::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    radial-gradient(72% 115% at 50% 100%, color-mix(in srgb, var(--accent) 46%, transparent), transparent 76%),
    radial-gradient(circle, var(--nokta) 1px, transparent 1px);
  background-size: 100% 100%, 26px 26px;
  content: "";
  mask-image: linear-gradient(0deg, #000 78%, transparent);
}

/*
 * Altbilgideki Blinky logosu — cümlenin içinde, sözcüğün yerinde duruyor.
 *
 * Boy `em` ile: cümlenin punto ölçeğine bağlı kalsın (`--u` her ekranda
 * değişiyor, sabit piksel logoyu kimi ekranda yazıdan büyük gösterirdi).
 * 1.2em, harflerin çıkanı ve ineni olan bir logoyu satırdaki sözcüklerin
 * gövde yüksekliğinin biraz altında tutuyor: cümlenin içinde bir sözcük gibi
 * duruyor, yanındaki yazıyı bastırmıyor.
 *
 * `vertical-align` olmadan görsel taban çizgisine **oturuyor** ve inen "y"
 * satırın altına taşıyor; negatif değer onu yazının hizasına indiriyor.
 */
.by {
  display: inline-block;
  /* Bağlantı satırın yüksekliğini büyütmesin: görsel zaten hizalanıyor. */
  line-height: 0;
  transition: opacity 0.15s;
}

.by:hover {
  opacity: 0.72;
}

.by img {
  height: 1.2em;
  width: auto;
  /* Boyla birlikte ölçekleniyor: oran sabit, yoksa küçülen logo satırın
     üstüne çıkıyor. */
  vertical-align: -0.28em;
}

.by:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
 * İki öğe: solda marka, sağda telif + kredi. Ortada iletişim bağlantısı
 * varken `1fr auto 1fr` ızgara gerekiyordu (esnek satır ortadaki öğeyi kaba
 * göre ortalamıyor); iki uçlu bir satırda `space-between` zaten tam olanı
 * yapıyor, ızgara fazladan karmaşıklık olurdu.
 */
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/*
 * Kredi satırı altbilginin geri kalanından küçük: marka ve iletişim bağlantısı
 * birer gezinme öğesi, bu ise dipnot. Logo `em` ile ölçüldüğü için o da bu
 * satırla birlikte küçülüyor — ayrıca ayarlamak gerekmiyor.
 */
footer p {
  margin: 0;
  font-size: calc(var(--u) * 0.75);
}

/*
 * Telif ve kredi tek metin, altbilginin sağ ucunda: "© 2026 | GlassNib, [logo]
 * tarafından geliştiriliyor." İkisi ayrı öğeyken şeritte dört parça vardı ve
 * hiçbiri ötekinden önemli görünmüyordu; şimdi sol uçta marka, ortada
 * iletişim, sağ uçta bu satır duruyor.
 *
 * Ayraç sönük ama **metinde**, CSS `content`inde değil: seçilebilir ve
 * kopyalanabilir kalıyor.
 */
.rights {
  margin: 0;
  text-align: end;
}

.sep {
  margin: 0 0.15em;
  opacity: 0.4;
}

footer .mark {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.95);
}

footer .mark svg {
  color: var(--fg-dim);
}

/* ------------------------------------------------ Hareket tercihi */

/*
 * Hareketi azaltılmış kip: animasyon **kapatılmıyor, hızlandırılıyor**.
 *
 * Önceden `.draw` izleri `animation: none` ile tümüyle iptal ediliyordu ve
 * hero bitmiş çizimle, hiç hareketsiz açılıyordu. Bu kip sanıldığından yaygın
 * (Windows'ta "Animasyon efektleri" kapalı olan herkes), yani sitenin asıl
 * gösterisi ziyaretçilerin epey bir kısmında hiç oynamıyordu.
 *
 * Yalnızca imleçle tetiklenen süs hareketi (düğme kalkması) tümden kalkıyor:
 * onun anlattığı bir şey yok.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0.4;
  }

  .btn:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  section {
    padding: 56px 0;
  }

  .hero {
    padding-top: 56px;
  }

}

/* ------------------------------------------------ On araç demosu
 *
 * Numune şeridinin yerini aldı: araçlar sırayla seçiliyor, seçili olan sahneye
 * çiziyor, siliniyor, sıra ötekine geçiyor. Durum makinesi `demo.js`'te;
 * buradaki sınıflar onun tuşları.
 *
 * Çerçeve `.shot` ile aynı dili konuşuyor ama ayrı sınıflar: `.shot` hero'ya
 * özgü boyut sınırları taşıyor (36–42svh), demo ise sıranın sütununu
 * dolduruyor.
 */

.demo {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--lift-shadow);
}

.demo-bar {
  display: flex;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.demo-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d7dbe2;
}

/* `container-type: size` şeridin `cqh` ile ölçülenmesi için: piksel ölçüde
   şerit, sahne küçülünce kırpılıyordu. Yüzde + `flex` + `aspect-ratio`
   denemesi döngüye giriyor (mutlak konumlu şeridin genişliği içeriğinden,
   içeriğinki yüksekliğinden). */
.demo-body {
  position: relative;
  container-type: size;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #fbfcfd, #f2f4f7);
}

.stage {
  position: absolute;
  inset: 0;
  width: 78%;
  height: 100%;
}

/* Yalnızca seçili araç sahnede. Görünürlük `opacity` ile değil `display` ile:
   gizli bir `<g>`nin animasyonu tarayıcıya göre çalışmaya devam edebiliyor ve
   sıra ona geldiğinde iz yarısından başlıyordu. */
.slot {
  display: none;
}

.slot.on {
  display: block;
}

.stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.slot.on .stroke {
  animation: draw calc(0.85s * var(--motion)) ease-out both;
}

/* Silme: aynı yolu ters uçtan boşaltıyor, yani iz çizildiği yönde siliniyor. */
.slot.on.out .stroke {
  animation: erase calc(0.4s * var(--motion)) ease-in both;
}

@keyframes erase {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -1;
  }
}

.stage .ink-red {
  stroke: var(--ink);
  stroke-width: 3.4;
}

.stage .ink-blue {
  stroke: #0a84ff;
  stroke-width: 3.4;
}

.stage .ink-green {
  stroke: #34c759;
  stroke-width: 3.4;
}

.stage .ink-dark {
  stroke: var(--fg);
  stroke-width: 5;
  opacity: 0.75;
}

/* Şekil renkleri uygulamanın gerçek paletinden (bkz. src/state.ts / COLORS);
   üçü de yeşilken hangi aracın çizdiği ayırt edilmiyordu. */
.stage .ink-orange {
  stroke: #ff9500;
  stroke-width: 3.4;
}

.stage .ink-teal {
  stroke: #00c7be;
  stroke-width: 3.4;
}

/* Eksenin merkez işareti: uygulamada çizim renginden bağımsız, hep kırmızı. */
.stage .hub {
  stroke: var(--ink);
  stroke-width: 2.2;
}

.stage .ink-wash {
  stroke: #ffd400;
  stroke-width: 14;
  stroke-linecap: butt;
  opacity: 0.55;
}

/* Silginin sildiği yeri gösteren hayalet kutu. */
.stage .ghost {
  stroke: #c8cfd9;
  stroke-width: 2;
  stroke-dasharray: 0.04;
}

/* Şerit hero'nunkiyle aynı sınıfları kullanıyor; burada üstüne gelinebilir. */
.demo .tool {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.demo .tool:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.demo .tool.on,
.demo .tool.on:hover {
  background: var(--accent);
  color: #fff;
}

/* ------------------------------------------------ Seçili aracın metni
 *
 * On aracın metni de sayfada; yalnızca seçili olan görünür. `display` ile
 * gizleniyor, `opacity` ile değil: gizli metin de yer kaplarsa sıranın boyu
 * en uzun aracınkine göre sabitlenir ve kısa metinlerde koca bir boşluk kalır.
 *
 * `min-height` yine de gerekli — araçlar arası geçişte blok boyu değişince
 * yanındaki mock zıplıyordu. En uzun metnin yaklaşık boyu kadar.
 */
.copy-set {
  min-height: calc(var(--u) * 11);
}

.copy {
  display: none;
}

.copy.on {
  display: block;
}

/* Kullanım satırı tanıtımdan ayrılsın: aynı renkte ama daha küçük ve üstünde
   ince bir çizgi — kısayolun nerede başladığı bir bakışta belli olsun. */
.copy .use {
  margin: 0;
  padding-top: calc(var(--u) * 0.55);
  border-top: 1px solid var(--line);
  font-size: calc(var(--u) * 0.92);
}

/* ------------------------------------------------ Çalışma sayfası geçişi
 *
 * Seçim üç yaprak arasında dolaşıyor: metin "aralarında geç" dediği için
 * grafiğin de geçişi göstermesi gerekiyor, üç durağan yaprak yalnızca
 * "birden fazla var" diyordu.
 *
 * Zamanlama: tur `3 × 1.5s`, her yaprak turun üçte birinde seçili. Sıra
 * **negatif gecikmeyle** kuruluyor — pozitif gecikme, beklerken `both`
 * dolgusuyla `from` karesini (yani seçili hali) gösterir ve başlangıçta üç
 * yaprak birden mavi olurdu. `--d` (0/2/1) o negatif kaydırmanın katsayısı.
 *
 * Öznitelikteki renkler animasyon çalışmadığında geçerli; ilk yaprak seçili
 * kalır (bkz. icons.mjs / `sheet`).
 */
/* Gecikme **turdan türüyor** (`--turn / -3`), ayrı yazılmıyor: ikisi elle
   tutulurken biri değişip öteki unutulursa üç yaprak sırayla değil rastgele
   yanıp sönerdi. Turu değiştirmek için tek yer `--turn`. */
.in .sheet,
.in .tab {
  --turn: calc(6s * var(--motion));

  animation-delay: calc(var(--d) * var(--turn) / -3);
  animation-duration: var(--turn);
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.in .sheet {
  animation-name: pick-sheet;
}

.in .tab {
  animation-name: pick-tab;
}

@keyframes pick-sheet {
  0% {
    stroke: var(--accent);
    stroke-width: 2;
  }

  33.34% {
    stroke: var(--line);
    stroke-width: 1.2;
  }
}

@keyframes pick-tab {
  0% {
    fill: var(--accent);
  }

  33.34% {
    fill: #d7dbe2;
  }
}

/* ------------------------------------------------ Ekran seçme animasyonu
 *
 * Bu mock'un anlattığı şey çizim değil, ekranın seçilmesi. O yüzden izler
 * sabit; canlanan tek şey seçim: çerçeve sol üst köşeden büyüyor, karartma
 * onunla birlikte koyulaşıyor, tutamaklar en sonda beliriyor.
 *
 * Büyütme `transform: scale` ile, `width`/`height` animasyonuyla değil: kutuyu
 * büyütmek tutamakları ve karartma bantlarını da yeniden hesaplamayı
 * gerektirirdi. `transform-box: fill-box` ölçek merkezini kutunun kendi
 * kutusuna, `transform-origin: 0 0` da sol üst köşesine bağlıyor — sürükleme
 * hep oradan başlıyormuş gibi görünüyor.
 *
 * `vector-effect: non-scaling-stroke` (bkz. icons.mjs) şart: ölçekle birlikte
 * kesik çizgi de esneyip başta dev, sonda normal görünüyordu.
 */
/* Üç parçanın da süresi `--pick`ten türüyor; tutamakların gecikmesi de ona
   bağlı. Hızı değiştirmek için tek yer burası — ayrı ayrı yazılsaydı biri
   değişip öteki unutulunca tutamaklar seçim bitmeden belirirdi. */
.in .pick-box,
.in .pick-dim,
.in .pick-grip,
.in .pick-hole {
  --pick: calc(1.5s * var(--motion));
}

.in .pick-box {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: pick-grow var(--pick) cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

/* Karartma **hızlı** beliriyor: yakalama açılır açılmaz ekran kararır, sonra
   seçim onu açar. Seçimle aynı hızda solsaydı "önce aydınlık, sonra karanlık"
   gibi ters okunurdu. */
.in .pick-dim {
  animation: pick-fade calc(var(--pick) / 6) ease-out both;
}

/* Tutamaklar seçim tamamlanınca: sürüklerken değil, bırakınca çıkıyorlar. */
.in .pick-grip {
  animation: pick-fade calc(var(--pick) / 3.6) ease-out var(--pick) both;
}

/* Çerçeve büyürken **birlikte açılıyor**: tam opak başlayan bir kesik çizgi,
   daha hiçbir şey seçilmemişken ekranda duruyormuş gibi görünüyordu. */
@keyframes pick-grow {
  from {
    transform: scale(0.04);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pick-fade {
  from {
    opacity: 0;
  }
}

/*
 * Karartmanın deliği: seçim büyüdükçe aydınlanan alan.
 *
 * `.pick-box` (kesik çerçeve) ile **aynı ölçek, aynı süre, aynı yumuşatma** —
 * ikisi ayrışırsa çerçeve seçilen alanın kenarından kayar. Ortak `--pick`
 * bunu garantiliyor.
 */
.in .pick-hole {
  transform-box: fill-box;
  transform-origin: 0 0;
  animation: pick-grow var(--pick) cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

/* ------------------------------------------------ Renk seçimi
 *
 * Halka dört renk arasında dolaşıyor, tuvaldeki iz aynı anda o renge geçiyor.
 * İkisi **aynı `--turn` ve aynı adım sayısına** bağlı; ayrışırlarsa halka bir
 * renkte, iz başka renkte kalır ve grafik yalan söyler.
 *
 * Dört adım olduğu için bölen 4 (sayfalarda 3'tü). `steps(1, end)` geçişleri
 * sert yapıyor — renk seçimi kademeli değil, tıklamayla oluyor.
 */
.in .sw-ring,
.in .sw-fill,
.in .sw-knob,
.in .ink-cycle {
  --turn: calc(6s * var(--motion));

  animation-duration: var(--turn);
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
}

.in .sw-ring {
  animation-delay: calc(var(--d) * var(--turn) / -4);
  animation-name: sw-pick;
}

.in .ink-cycle {
  animation-name: ink-cycle;
}

.in .sw-fill {
  animation-name: sw-fill;
}

.in .sw-knob {
  animation-name: sw-knob;
}

@keyframes sw-pick {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }
}

/* Sıra `mockColors`taki PICKS ile aynı: kırmızı → mavi → yeşil → macenta. */
@keyframes ink-cycle {
  0% {
    stroke: #ff3b30;
    stroke-width: 5;
  }

  25% {
    stroke: #0a84ff;
    stroke-width: 3;
  }

  50% {
    stroke: #34c759;
    stroke-width: 9;
  }

  75% {
    stroke: #ff2d95;
    stroke-width: 4;
  }
}

/*
 * Kalınlık: dolu kısım, tokmak ve izin kalınlığı **tek adım listesinde**.
 *
 * Dördü de (renk dahil) aynı `--turn` ve aynı dört adım; biri ayrı yazılsaydı
 * tokmak bir yerde, iz başka kalınlıkta kalır ve panel yalan söylerdi. Oranlar
 * ile tokmak konumu elle eşleştirildi: iz 116 birim, tokmak taban konumu
 * X0+64 (oran 0.55).
 *
 *   adım  oran  tokmak  iz kalınlığı
 *     0   0.55     0        5
 *     1   0.25   -35        3
 *     2   0.80   +29        9
 *     3   0.40   -18        4
 */
@keyframes sw-fill {
  0% {
    stroke-dashoffset: 0.45;
  }

  25% {
    stroke-dashoffset: 0.75;
  }

  50% {
    stroke-dashoffset: 0.2;
  }

  75% {
    stroke-dashoffset: 0.6;
  }
}

@keyframes sw-knob {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-35px);
  }

  50% {
    transform: translateX(29px);
  }

  75% {
    transform: translateX(-18px);
  }
}

/* ------------------------------------------------ Kaybolma süresi
 *
 * Üç iz aynı döngüde, üçte bir tur kaymış: her an biri taze, biri soluyor,
 * biri henüz yok. Gecikme yine `--turn`dan türüyor — ayrı yazılsaydı üçü
 * birlikte yanıp söner, "kendiliğinden silinme" yerine "yanıp sönme" gibi
 * okunurdu.
 *
 * Anahtar kareler bilerek asimetrik: iz hızlı beliriyor (%8), uzun duruyor
 * (%60'a kadar) ve yavaşça soluyor. Uygulamadaki davranış da böyle — çizim
 * anında görünür, süre dolana kadar durur, son 600ms'de solar.
 */
.in .fading {
  --turn: calc(7.5s * var(--motion));

  animation: linger var(--turn) linear infinite;
  animation-delay: calc(var(--d) * var(--turn) / -3);
}

@keyframes linger {
  0%,
  4% {
    opacity: 0;
  }

  10%,
  60% {
    opacity: 1;
  }

  78%,
  100% {
    opacity: 0;
  }
}

/* ------------------------------------------------ Hero izleri
 *
 * Hero'da ürün mock'u yok; izler sayfanın kendi öğelerinin üstünde. Her iz
 * anlattığı öğeye **mutlak konumlanıyor**, sayfaya sabit koordinatla değil —
 * sekiz dilin farklı uzunluktaki başlıkları ve her ekran genişliği için tek
 * çalışan yol bu.
 *
 * `.marked` yalnızca konumlandırma çapası; izin kendisi `.scribble`. İz sınıfı
 * `.mark` **olamaz**: o ad marka bağlantısının ve orayı mutlak konumlamak
 * başlığı dağıtıyordu.
 */
/* Satır içi blok: metnin genişliğini alsın. Blok olsaydı kabın tamamını
   kaplar ve iz ortalanmış metnin çok ötesine taşardı. */
.marked {
  position: relative;
  display: inline-block;
}

.scribble {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

/* Hero'nun bütün izleri kısa süreli: on dokuz iz sırayla çiziliyor ve toplam
   3.8s'yi aşmamalı. Değer `icons.mjs`teki `IZ_ADIM`den biraz uzun — izler
   hafifçe bindiriyor, böylece sıra belli oluyor ama arada ölü an kalmıyor. */
.scribble,
.doodle {
  --sure: 0.26s;
}

/*
 * Fosforlu iz yazının **üstünde**, arkasında değil — uygulamadaki fosforlu
 * kalem de öyle: yarı saydam (opacity .45) olduğu için altındaki yazı okunur
 * kalıyor. `z-index: -1` ile arkaya konmuştu ve hero'nun zemin katmanının
 * altında tümüyle kayboluyordu.
 *
 * Ölçüler (`width`/`height`) **açık yazılmalı**, `inset` yetmez: `<svg>` bir
 * *replaced element*, dört yandan sınır verilse bile kendi doğal boyutuna
 * (300×150) düşüyor ve fazladan gelen `bottom` yok sayılıyor — iz kutusundan
 * taşıp satırın altına sarkıyordu.
 */
.scribble-wash {
  top: -0.1em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 0.2em);
}

/*
 * Ok düğmenin sağ üstünden ona doğru bakıyor. Konum yüzdeyle değil `--u` ile:
 * düğmenin boyu dile göre değişiyor, ok ise sabit ölçekli — yüzde verilseydi
 * kısa etiketli dillerde düğmenin üstüne biner, uzunlarda uzaklaşırdı.
 */
/*
 * Kutu büyürken `top` ve `margin-left` de değişmeli, yoksa ok düğmeden kayar:
 * ucu SVG'nin sol-alt köşesine yakın (viewBox'ta ~27,78), dolayısıyla kutu
 * büyüdükçe uç sağa ve aşağı kayıyor. Buradaki değerler **alt kenarı ve ucu
 * yerinde tutacak** biçimde geri hesaplandı — ölçüyü değiştiren üçünü birden
 * değiştirsin.
 */
.scribble-arrow {
  top: calc(var(--u) * -3.1);
  left: 100%;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 4.9);
  margin-left: calc(var(--u) * -1.2);
}

/* Ok'a düğmenin yanında yer yok; dar ekranda üstüne biniyordu. */
@media (max-width: 560px) {
  /*
   * Şerit tek satırda kalmalı: sararsa yüksekliği artıyor ve ekranı kaplayan
   * bölümlerin üstünü örtüyor (bkz. "Dil seçici"). Bu yüzden **yalnızca dolu
   * düğme** gizleniyor: indirmenin telefonda da hero'da kocaman bir karşılığı
   * var, iletişimin ise başka hiçbir yolu yok — altbilgiden de kaldırıldı.
   */
  .top-link.go {
    display: none;
  }

  .scribble-arrow {
    display: none;
  }
}

/* İzlerin kalemi ve fosforlusu. Önce bu kurallar `.annot` kapsamındaydı; hero
   mock'u kalkınca kapsam da gitti ve izler stilsiz kalıp dolgulu siyah lekeye
   dönmüştü (SVG'nin varsayılanı `fill: black`). */
.scribble .ink {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
 * ⚠️ Bu kural **`.scribble .ink`ten sonra gelmek zorunda.** İkisinin özgüllüğü
 * eşit (0,2,0), yani kazananı kaynak sırası belirliyor. Yukarıda dururken
 * `stroke-width: 3` onu eziyordu ve okun kalınlığı sessizce hiç değişmiyordu;
 * ok yalnızca SVG kutusu büyütüldüğü için kalınlaşmış görünüyordu. Bir daha
 * yukarı taşınırsa aynı sessiz hataya dönülür.
 *
 * Değer viewBox biriminde: ok kutusundan küçük çiziliyor (180 birim → ~193px),
 * yani ekranda ~1.07 katı görünüyor.
 */
.scribble-arrow .ink {
  stroke-width: 6;
}

/* ------------------------------------------------ Hero'nun serbest izleri

   Boş alanda duran, metne bağlı olmayan araç çizimleri. Kalınlık her izde ayrı
   (`--kalinlik`, bkz. icons.mjs / DOODLES): tek kalınlıkta hepsi şablondan
   çıkmış gibi duruyordu. */
.doodles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Her iz kendi eğik açısıyla duruyor (`--dondur`, bkz. icons.mjs / DOODLES).
   Dönme olmadan sekiz şekil ızgaraya dizilmiş gibi görünüyordu; eğiklik onları
   aceleyle atılmış izlere çeviriyor. Açılar bilerek düzensiz — hiçbiri ötekinin
   katı değil, yoksa göz örüntüyü yakalıyor. */
.doodle {
  position: absolute;
  overflow: visible;
  rotate: var(--dondur, 0deg);
}

.doodle .ink {
  fill: none;
  stroke-width: var(--kalinlik);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Renkler uygulamanın paletinden (`src/state.ts / COLORS`) — kırmızı burada yok,
   o metnin üstündeki izlerin rengi (`--ink`) ve ayrışması gerekiyor. */
.ink-indigo .ink {
  stroke: var(--iz-indigo);
}

.ink-orange .ink {
  stroke: var(--iz-orange);
}

.ink-green .ink {
  stroke: var(--iz-green);
}

.ink-teal .ink {
  stroke: var(--iz-teal);
}

.ink-blue .ink {
  stroke: var(--iz-blue);
}

.ink-purple .ink {
  stroke: var(--iz-purple);
}

.ink-rose .ink {
  stroke: var(--iz-rose);
}

.ink-sky .ink {
  stroke: var(--iz-sky);
}

/* Konumlar `--u` ile ölçekleniyor, yüzdeyle değil: yüzde verilince geniş
   ekranda izler kenara kaçıp boşlukta yüzüyordu. Ölçüler `.wrap`ın yan
   boşluğuna göre seçildi. */
/*
 * Yerleşim. İki kural var:
 *
 * 1. **Hiçbir iz başlık bandına girmez.** h1 satırı uzun başlıklı dillerde
 *    neredeyse `.wrap` kadar geniş oluyor; yan banda o hizada konan iz yazıya
 *    biner (ölçtüm: üçgen büyütülünce fr/ru/es/it/pt'de kırıldı). Yan izler
 *    paragrafın hizasından başlıyor, orada metin daha dar.
 * 2. **Yerleşim aynalanmıyor.** Sol ve sağ izler ne aynı yükseklikte ne aynı
 *    kenar payında; alt banttaki dördü de eşit aralıklı değil. Simetri, elle
 *    atılmış izler yerine yerleştirilmiş süsler gibi görünüyordu.
 * 3. **Orta boş bırakılmaz.** İzler kenarlara yaslanınca metnin altındaki
 *    geniş bant bomboş kalıyor ve hero iki yanı dolu, ortası delik
 *    görünüyordu. Metin bandının altında (≈%48'den sonra) orta sütun da
 *    kullanılabilir; üstünde değil, orada h1 uzun dillerde yayılıyor.
 */
.doodle-axis {
  top: 31%;
  left: 9%;
  width: calc(var(--u) * 9.6);
}

.doodle-tri {
  top: 39%;
  right: 10%;
  width: calc(var(--u) * 10.4);
}

.doodle-slash {
  top: 54%;
  left: 30%;
  width: calc(var(--u) * 8.6);
}

/* Alt bant: dördü de farklı yükseklikte, aralıklar eşit değil. */
.doodle-sun {
  top: 69%;
  left: 9%;
  width: calc(var(--u) * 9.8);
}

.doodle-wave {
  top: 58%;
  left: 47%;
  width: calc(var(--u) * 13);
}

.doodle-tick {
  top: 78%;
  left: 33%;
  width: calc(var(--u) * 9.6);
}

.doodle-star {
  top: 76%;
  right: 26%;
  width: calc(var(--u) * 9.4);
}

.doodle-sq {
  top: 65%;
  right: 8%;
  width: calc(var(--u) * 10);
}


/*
 * Serbest izler **1100px'in altında** kalkar. `.wrap` max-width'i 92vw olduğu
 * için yan boşluk ekranla birlikte daralıyor; bu genişliğin altında izler
 * başlığın ve paragrafın üstüne biniyor.
 */
@media (max-width: 1100px) {
  .doodles {
    display: none;
  }
}

.scribble .wash {
  fill: none;
  stroke: #ffd400;
  stroke-width: 15;
  stroke-linecap: butt;
  opacity: 0.45;
}

/* ------------------------------------------------ Düz sayfa (iletişim) */

/*
 * `.plain`: bölümlere ayrılmamış sayfalar. Yapışma **kapalı** — durak olmayan
 * bir belgede `mandatory` yalnızca altbilgiyi tek durak sayıp sayfayı oraya
 * çekerdi. `snap.js` de bu değeri okuyup kendini devre dışı bırakıyor, yani
 * eşik tek yerde: burada.
 */
html.plain {
  scroll-snap-type: none;
}

/*
 * Sayfa **her ölçüde** ekranı doldurur.
 *
 * İletişim formu kısa; 2K gibi uzun bir ekranda gövde ekranın yarısında
 * bitiyor, altbilgi ortada asılı kalıyor ve altında koca bir beyaz bant
 * duruyordu. Gövde artık kalan yeri kaplıyor (`flex: 1`), yani altbilgi her
 * zaman en altta.
 *
 * `body`ye flex vermek başlığı etkilemiyor: `position: fixed` öğe akıştan
 * çıktığı için esnek öğe sayılmıyor — kaplar yalnızca `<main>` ve `<footer>`.
 *
 * `min-height` iki kez yazılı: `svh` tanımayan tarayıcı `vh`de kalır. `vh`
 * mobilde adres çubuğunu da saydığı için tek başına taşırırdı (aynı gerekçe
 * `.screen`de de var).
 */
html.plain body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/*
 * `flex: 1 0 auto` + `align-content: center`: fazla yer varsa içerik dikeyde
 * ortalanıyor, içerik ekrandan uzunsa gövde büyüyüp normal akıyor.
 *
 * Ortalamanın bilinen tuzağı burada yok: kap içeriğinden küçük olamadığı için
 * (`0 auto` = küçülme yok, taban içerik boyu) ortalama hiçbir zaman içeriğin
 * üstünü ekran dışına itmiyor.
 */
html.plain main {
  display: grid;
  flex: 1 0 auto;
  align-content: center;
}

/* Altbilgi kalanı paylaşmaz, kendi boyunda kalır. */
html.plain footer {
  flex: none;
}

/* Üst dolgu sabit başlığın altından başlamak için; alt dolgu içerikle
   altbilgi arasına hava koyuyor (yükseklik yukarıdaki flex kuralından gelir). */
.sheet {
  padding-block: calc(var(--u) * 5) calc(var(--u) * 3);
}

.sheet .head {
  text-align: start;
}

/* İçerik zeminin üstünde kalsın: zemin `z-index: -1` ile çiziliyor, izler ise
   normal akışta — kap olmadan form ile izler aynı katmanda yarışırdı. */
.sheet .wrap {
  position: relative;
}

/*
 * Kök sayfa (`/`): dil seçici.
 *
 * Üst şerit yok — şerit dil başına bir adres istiyor, burada henüz dil
 * seçilmemiş. `.sheet`in başlık payı da bu yüzden geri alınıyor.
 *
 * Sayfa **her zaman** basılıyor, yalnızca betiksiz kullanıcıya değil:
 * betik varsa üstüne yönlendirme biniyor, yoksa (ve arama motorunda)
 * ekranda gerçek bir seçici kalıyor. Eskiden liste `<noscript>` içindeydi
 * ve sayfanın kendisi `noindex`ti — `x-default` etiketi tam da bu sayfayı
 * gösterdiği için arama motoruna iki zıt şey söyleniyordu.
 */
.picker {
  padding-block: calc(var(--u) * 3);
  text-align: center;
}

.picker h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin: 0 0 calc(var(--u) * 2);
  font-size: calc(var(--u) * 2.4);
}

.picker h1 svg {
  width: 1em;
  height: 1em;
  color: var(--accent);
}

/* `auto-fit` + `minmax`: sekiz dil geniş ekranda dört sütuna, telefonda tek
   sütuna düşüyor; ara kırılma noktası yazmaya gerek kalmıyor. */
.picker ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  gap: 10px;
  margin: 0 auto;
  padding: 0;
  max-width: 46em;
  list-style: none;
}

.picker a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--fg);
  font-size: calc(var(--u) * 0.95);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.picker a:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/*
 * ------------------------------------------------ Rehber sayfaları
 *
 * Üçüncü sayfa türü (bkz. build.mjs / docPage): düz akan, okunmak için
 * yazılmış metin. Ana sayfanın hiçbir kuralı burada işe yaramıyor, çünkü
 * orada her bölüm bir ekran ve metin kısa; burada tam tersi.
 *
 * Ölçüler yine `--u` katları — sabit piksel yazı boyu bu dosyada yok.
 */
.prose {
  max-width: 44em;
  text-align: start;
}

/* Gövde metni ana sayfadakinden biraz iri: orada cümleler tek satırlık, burada
   paragraf paragraf okunuyor. */
.prose p,
.prose li {
  font-size: calc(var(--u) * 1.02);
  line-height: 1.7;
}

/* Bölüm başlığı ana sayfanınkinden küçük: orada bölüm bir ekran, burada bir
   paragraf kümesi. Üst boşluk bir öncekinden ayırmak için. */
.prose h2 {
  margin: calc(var(--u) * 2.2) 0 calc(var(--u) * 0.7);
  font-size: calc(var(--u) * 1.5);
  font-weight: 660;
  letter-spacing: -0.02em;
}

.prose ul {
  margin: 0 0 calc(var(--u) * 0.85);
  padding-inline-start: 1.3em;
}

.prose li {
  margin-bottom: calc(var(--u) * 0.4);
}

.prose .actions {
  margin-top: calc(var(--u) * 2.4);
}

/* Ekmek kırıntısı: sayfanın nerede durduğunu söyleyen tek satır. Yapısal veri
   karşılığı `BreadcrumbList` (bkz. build.mjs / breadcrumbLd) — ikisi birlikte
   değişmeli, yoksa Google sonuç satırında görünenden başka bir yol gösterir. */
.crumbs {
  margin-bottom: calc(var(--u) * 0.9);
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.85);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs .sep {
  margin: 0 0.5em;
}

/* Tuş adı. `ch` genişlik tabanı: tek harfli tuşlar (P, D) ile iki kelimelik
   olanlar (Page Down) yan yana geldiğinde kutular birbirini tutuyor. */
kbd {
  display: inline-block;
  min-width: 2.2ch;
  padding: 0.15em 0.45em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: #fff;
  color: var(--fg);
  font-family: var(--font);
  font-size: 0.86em;
  font-weight: 550;
  text-align: center;
  white-space: nowrap;
}

/* Tablo dar ekranda kendi içinde kayar; sayfanın gövdesi yatay kaymaz. */
.table-scroll {
  margin-bottom: calc(var(--u) * 0.85);
  overflow-x: auto;
}

/* Sabit yerleşim + ilk sütun payı: yoksa her tablo kendi içeriğine göre
   bölünüyor ve üst üste duran iki tablonun "Shortcut" sütunu farklı yerden
   başlıyor. */
.prose table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: calc(var(--u) * 0.95);
}

.prose th:first-child {
  width: 58%;
}

.prose th {
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}

.prose td {
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.6);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

/* Genel kısayolları işaretleyen rozet — tablodaki tek renkli öğe, çünkü
   anlattığı ayrım (uygulama odakta olmasa da çalışır) sayfanın en önemli
   bilgisi. */
.tag {
  display: inline-block;
  margin-inline-start: 0.4em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-dark);
  font-size: 0.78em;
  font-weight: 600;
}

/* Rehber dizini: başlık + tek cümle, kart başına. */
.cards {
  margin: calc(var(--u) * 1.6) 0 0;
  padding: 0;
  list-style: none;
}

.cards li {
  padding: calc(var(--u) * 1.1) 0;
  border-top: 1px solid var(--line);
}

.cards h2 {
  margin: 0 0 calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 1.35);
}

.cards h2 a {
  color: var(--fg);
  text-decoration: none;
}

.cards h2 a:hover {
  color: var(--accent);
}

.cards p {
  margin: 0;
  color: var(--fg-dim);
}

/* Altbilgideki rehber bağlantısı; yalnızca İngilizce sayfalarda çıkıyor. */
.foot-link {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.95);
  text-decoration: none;
}

.foot-link:hover {
  text-decoration: underline;
}

/*
 * İletişim sayfasının izleri: aynı sekizden dördü, formun **iki yanında**.
 *
 * Konumlar hero'nunki gibi yüzdeyle değil, kenardan `--u` payıyla veriliyor:
 * form ortada sabit genişlikte (`.narrow`, 880px) durduğu için yan bant
 * ekranla birlikte büyüyor; yüzde verilseydi 2K'da izler kenara kaçıp
 * boşlukta yüzerdi, 1200px'te ise formun üstüne binerdi.
 *
 * Yerleşim **aynalanmıyor** — sol ve sağ ne aynı yükseklikte ne aynı kenar
 * payında (hero'daki kuralın aynısı: simetri, elle atılmış iz yerine
 * yerleştirilmiş süs gibi duruyor).
 */
.plain .doodle {
  /* Hero'nun `left`/`right` değerlerini sıfırla; aşağıdaki kurallarla eşit
     özgüllükte oldukları için bu blok **önce** gelmeli. */
  inset-inline: auto;
}

.plain .doodle-tri {
  top: 18%;
  left: calc(var(--u) * 2.6);
  width: calc(var(--u) * 9.4);
}

.plain .doodle-sun {
  top: 62%;
  left: calc(var(--u) * 4.4);
  width: calc(var(--u) * 8.8);
}

.plain .doodle-star {
  top: 30%;
  right: calc(var(--u) * 3.6);
  width: calc(var(--u) * 8.6);
}

.plain .doodle-wave {
  top: 72%;
  right: calc(var(--u) * 2.2);
  width: calc(var(--u) * 11.5);
}

/*
 * İzler burada **1200px'in altında** kalkıyor, hero'daki 1100 değil: form
 * `.narrow` ile 880px'te sabit, yani yan bant (genişlik − 880) / 2 kadar.
 * 1200'de bant 160px ve en dar iz oraya ancak sığıyor; altında forma biner.
 */
@media (max-width: 1200px) {
  .plain .doodles {
    display: none;
  }
}


/* ------------------------------------------------ İletişim formu */

.contact {
  display: grid;
  gap: calc(var(--u) * 0.9);
  max-width: 34em;
}

.contact label {
  display: grid;
  gap: calc(var(--u) * 0.3);
}

.contact label span {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.85);
}

.contact input,
.contact textarea {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  /* `inherit` şart: form denetimleri sayfa yazı tipini kendiliğinden almıyor,
     tarayıcının kendi (ve daha küçük) varsayılanına düşüyorlar. */
  font: inherit;
  /* Varsayılan `textarea` genişliği sütunu taşırıyor. */
  max-width: 100%;
}

.contact textarea {
  /* Yatay boyutlandırma ızgara sütununu bozar; dikey serbest. */
  resize: vertical;
}

.contact input:focus-visible,
.contact textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(31, 111, 235, 0.25);
  outline-offset: 0;
}

.contact .actions {
  margin: calc(var(--u) * 0.4) 0 0;
}

/* Gönderim sürerken düğme kapalı: çift tıklama iki mesaj demekti. */
.contact button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * Durum satırı boşken de yer kaplıyor (`min-height`): mesaj belirince form
 * aşağı kayıyor ve tıklanan düğme parmağın altından kaçıyordu.
 */
.contact .status {
  min-height: calc(var(--u) * 1.6);
  margin: 0;
  color: var(--fg);
}

/*
 * Bal küpü alanı. `display: none` değil: bazı botlar gizlenmiş alanları
 * atlıyor, ekrandan çıkarılmış olan ise onlara normal görünüyor. Ekran
 * okuyucu `aria-hidden` sayesinde zaten görmüyor, klavye de `tabindex="-1"`
 * ile uğramıyor.
 */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------ İndirim kodu */

/*
 * Fiyat sütununun içinde duruyor ve sütun ortalanmış; alan da ortalanıyor ama
 * `text-align` yetmiyor — input ve düğme blok öğeler, hizayı `justify-content`
 * veriyor.
 *
 * Genişlik dar tutuluyor (`max-width`): fiyat sütunu 460px ve buraya konan
 * tam genişlikte bir alan, sayfanın asıl eylemi olan satın alma düğmesinden
 * daha baskın görünüyordu. Kod girmek satın almanın bir adımı, rakibi değil.
 */
.discount {
  display: grid;
  gap: calc(var(--u) * 0.4);
  justify-items: center;
  max-width: 22em;
  margin: calc(var(--u) * 1.4) auto 0;
}

.discount label {
  display: grid;
  gap: calc(var(--u) * 0.3);
  justify-items: center;
  width: 100%;
}

.discount label span {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.85);
}

.discount input {
  width: 100%;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  /* `inherit` şart: form denetimleri sayfa yazı tipini kendiliğinden almıyor. */
  font: inherit;
  text-align: center;
  /* Kodlar büyük harfle saklanıyor (bkz. index.js / normalizeCode); alanın da
     öyle göstermesi, kullanıcının yazdığıyla doğrulananı aynı gösteriyor. */
  text-transform: uppercase;
}

.discount input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(31, 111, 235, 0.25);
  outline-offset: 0;
}

.discount button[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

/*
 * Durum satırı boşken de yer kaplıyor: mesaj belirince altındaki hiçbir şey
 * kaymasın (`.contact .status` ile aynı gerekçe).
 */
.discount .status {
  min-height: calc(var(--u) * 1.6);
  margin: 0;
}

/*
 * Kabul edilen kod yeşile dönüyor: "uygulandı" bilgisini metnin yanında bir de
 * renkle vermek, ekrandan hızlı geçen kullanıcıda tek işaret bırakmıyor.
 *
 * Renk doğrudan yazılı, değişken değil: palette (`:root`) bir "başarı" rengi
 * yok ve bu tek kullanım için token açmak, palette kullanılmayan bir giriş
 * bırakırdı. Site tek temalı (açık), o yüzden koyu karşılığı da gerekmiyor.
 */
.discount.ok .status {
  color: #1a7f37;
}

/*
 * 404 sayfasındaki mesaj bloğu (bkz. build.mjs / notFoundPage).
 *
 * `.picker` kabuğunun içinde, başlıkla dil listesinin arasında duruyor. Sekiz
 * dilin metni de sayfada; görünmeyenleri `hidden` özniteliği saklıyor, o yüzden
 * burada `display` ile oynanmıyor — `hidden`ı ezen bir kural bütün dilleri alt
 * alta gösterirdi.
 */
.lost {
  max-width: 34em;
  margin: calc(var(--u) * -1) auto calc(var(--u) * 2);
}

.lost h2 {
  margin: 0 0 calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 1.3);
}

.lost p {
  margin: 0;
  color: var(--fg-dim);
}

/*
 * İndirim kodu alanı `<details>` içinde: kapalı başlıyor (bkz. build.mjs /
 * discountBox). `.hint` stilini paylaşıyor ama onun `max-width: 46ch`i
 * alanı daraltıyordu — form kendi genişliğini `.discount`tan alsın.
 */
.discount-box {
  max-width: none;
  margin-top: calc(var(--u) * 1.2);
}

/*
 * Açıkken özet ile form arasına hava giriyor. Kapalıyken bu boşluk yok, yoksa
 * yalnızca bir satırlık bağlantı için fiyat sütununun altında boşluk kalırdı.
 */
.discount-box[open] summary {
  margin-bottom: calc(var(--u) * 0.6);
}

/* ------------------------------------------------ Ödeme sayfası */

/*
 * Form `.contact` ile aynı ızgara mantığını kullanıyor ama kendi kuralları var:
 * orası uzun bir mesaj formu, burası tek alanlık bir onay adımı ve tutarın
 * baskın olması gerekiyor.
 */
.checkout {
  display: grid;
  gap: calc(var(--u) * 0.9);
  max-width: 26em;
}

.checkout-total {
  margin: 0;
  font-size: calc(var(--u) * 2.2);
  font-weight: 600;
  line-height: 1.2;
}

/* İndirim uygulandığında eski fiyat üstü çizili, yanında yüzde. Kod yoksa bu
   satır `hidden` kalıyor — boş bir "indirim" alanı, indirim varmış izlenimi
   verirdi. */
.checkout-old {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--u) * 0.4);
  margin-inline-start: calc(var(--u) * 0.5);
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.8);
  font-weight: 400;
}

.checkout-off {
  color: #1a7f37;
}

.checkout label {
  display: grid;
  gap: calc(var(--u) * 0.3);
}

.checkout label > span:first-child {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.85);
}

.checkout input {
  padding: calc(var(--u) * 0.6) calc(var(--u) * 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  /* `inherit` şart: form denetimleri sayfa yazı tipini kendiliğinden almıyor. */
  font: inherit;
  max-width: 100%;
}

.checkout input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(31, 111, 235, 0.25);
  outline-offset: 0;
}

.checkout .actions {
  margin: calc(var(--u) * 0.4) 0 0;
}

/*
 * Altbilgideki yasal bağlantılar.
 *
 * Altbilgideki yasal bağlantılar — marka ve kredi satırıyla **aynı hizada**.
 *
 * İlk hâlinde dört uzun Türkçe başlık, marka ve kredi satırıyla aynı ağırlıkta
 * duruyor ve altbilginin en baskın parçası oluyordu. Çözüm satırı bölmek değil,
 * ağırlığı düşürmek: daha küçük punto, soluk renk, ince nokta ayraç. Mevzuat
 * "kolayca erişilebilir" diyor, "göze batsın" demiyor.
 *
 * Dar ekranda `footer .wrap` zaten sarıyor; ayrıca satır kırmaya gerek yok.
 */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--u) * 0.2) calc(var(--u) * 0.7);
}

.legal-links a {
  color: var(--fg-dim);
  font-size: calc(var(--u) * 0.78);
  text-decoration: none;
  /* Altını çizmek yerine renk: dört bağlantı yan yanayken çizgiler bir
     tablo satırı gibi okunuyordu. */
  transition: color 0.15s;
}

.legal-links a:hover {
  color: var(--accent);
}

/*
 * Ayraç: bağlantıların arasına ince bir nokta. Kendi öğesi olarak yazılsaydı
 * satır sonuna düşüp tek başına kalabilirdi; `::after` bağlantıya bağlı
 * olduğu için onunla birlikte kayıyor.
 */
.legal-links a:not(:last-child)::after {
  content: '·';
  margin-inline-start: calc(var(--u) * 0.7);
  /* Bağlantının kendi renginden türetiliyor: `--line` ile denendiğinde ayraç
     bağlantı yazısından da soluk kalıyor ve boşluktan ayırt edilemiyordu. */
  opacity: 0.55;
}

/* Sözleşme metinleri uzun; satır uzunluğunu okunur sınırda tutuyor. */
.legal h2 {
  margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 1.15);
}

.legal p {
  margin: 0 0 calc(var(--u) * 0.7);
}

/*
 * Cayma hakkı onay kutusu (bkz. build.mjs / checkoutPage).
 *
 * Kutu ile metin baseline'dan hizalı: `align-items: center` uzun cümlede
 * kutuyu ortaya kaydırıyor ve ilk satırla ilgisiz duruyordu.
 */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 0.5);
  align-items: start;
  font-size: calc(var(--u) * 0.85);
  line-height: 1.5;
  color: var(--fg-dim);
}

.consent input {
  margin-top: 0.2em;
  width: 1em;
  height: 1em;
  accent-color: var(--accent);
  cursor: pointer;
}

.consent a {
  color: var(--accent);
}

/*
 * `hidden` özniteliğini geri kazandırıyor.
 *
 * Tarayıcının varsayılan `[hidden] { display: none }` kuralı, yazar
 * stilindeki `display: inline-flex` tarafından eziliyordu: indirim yokken de
 * üstü çizili fiyat görünüyor ve olmayan bir indirim varmış gibi duruyordu.
 */
.checkout-old[hidden] {
  display: none;
}