/* SpeakRun açılış sayfası. Yasal sayfalar styles.css kullanır; burası yalnız index. */

/* ---------- Fontlar (self-host, dış istek yok) ---------- */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/manrope-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: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/manrope-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: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-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: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('fonts/newsreader-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;
}

/* ---------- Tema: kağıt / mürekkep / turuncu ---------- */
:root {
  --paper: #F7F1EA;
  --ink: #141312;
  --hero-plate: #0C0D09;
  --text: #181818;
  --muted: #5E5751;
  --faint: #91877F;
  --line: rgba(24, 24, 24, 0.13);
  --line-strong: rgba(24, 24, 24, 0.22);
  --accent: #E9622C;
  --accent-press: #C94C1C;
  --accent-ink: #FFF9F4;
  --accent-soft: #F7DACA;
  --success: #3F8A62;
  --bg: var(--paper);
  --surface: #FFFCF8;
  --shadow-soft: 0 8px 20px rgba(24, 24, 24, 0.08);
  --shadow-float: 0 18px 46px rgba(24, 24, 24, 0.24);
  --shadow-pop: 0 16px 40px rgba(24, 24, 24, 0.16);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --grain: 0.038;
  --grain-blend: multiply;
  --fiber: 0.05;
  --bloom-1: rgba(233, 98, 44, 0.13);
  --bloom-2: rgba(184, 120, 30, 0.1);
  /* Temayla dönen bileşen değerleri. Bunlar token olmasaydı her biri için
     ayrı bir koyu kural yazılırdı ve tema düğmesi hepsini iki kez
     tanımlamayı gerektirirdi. */
  --tint: rgba(24, 24, 24, 0.06);
  --tint-bar: rgba(24, 24, 24, 0.11);
  --on-soft: var(--accent-press);
  --store-bg: #141312;
  --store-ink: #FAF4EF;
  --nav-glass: rgba(247, 241, 234, 0.72);
  /* Bölüm geçişi iki biçimden birini alıyor: açık temada turuncu bant,
     koyu temada eski rampa. Koyu temada zaten kağıt yok, geçecek bir
     renk sınırı da yok; bant orada anlamsız kalırdı. */
  --seam-fade: 0;
}
/* Koyu tema iki kapıdan girer: sistem tercihi (JS yokken de çalışsın diye)
   ve başlıktaki düğmenin köke bıraktığı işaret. Düz CSS'te aynı değer
   listesini iki seçiciye paylaştırmanın yolu olmadığı için blok iki kez
   yazılı; ikisini birlikte güncelle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
  --bg: #141312;
  --text: #FAF4EF;
  --muted: #C1B8B0;
  --faint: #8A817A;
  --line: rgba(250, 244, 239, 0.13);
  --line-strong: rgba(250, 244, 239, 0.24);
  --accent: #F17643;
  --accent-press: #E9622C;
  --accent-ink: #141312;
  --accent-soft: #6B321F;
  --success: #78B58F;
  --surface: #1E1C1B;
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 46px rgba(0, 0, 0, 0.58);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --grain: 0.05;
  --grain-blend: soft-light;
  --fiber: 0.07;
  --bloom-1: rgba(241, 118, 67, 0.15);
  --bloom-2: rgba(217, 163, 75, 0.09);
  --tint: rgba(250, 244, 239, 0.07);
  --tint-bar: rgba(250, 244, 239, 0.12);
  --on-soft: #FFD9C4;
  --store-bg: #FAF4EF;
  --store-ink: #141312;
  --nav-glass: rgba(20, 19, 18, 0.72);
  --seam-fade: 1;
  }
}
:root[data-theme='dark'] {
  --bg: #141312;
  --text: #FAF4EF;
  --muted: #C1B8B0;
  --faint: #8A817A;
  --line: rgba(250, 244, 239, 0.13);
  --line-strong: rgba(250, 244, 239, 0.24);
  --accent: #F17643;
  --accent-press: #E9622C;
  --accent-ink: #141312;
  --accent-soft: #6B321F;
  --success: #78B58F;
  --surface: #1E1C1B;
  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 18px 46px rgba(0, 0, 0, 0.58);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --grain: 0.05;
  --grain-blend: soft-light;
  --fiber: 0.07;
  --bloom-1: rgba(241, 118, 67, 0.15);
  --bloom-2: rgba(217, 163, 75, 0.09);
  --tint: rgba(250, 244, 239, 0.07);
  --tint-bar: rgba(250, 244, 239, 0.12);
  --on-soft: #FFD9C4;
  --store-bg: #FAF4EF;
  --store-ink: #141312;
  --nav-glass: rgba(20, 19, 18, 0.72);
  --seam-fade: 1;
}

/* Deste yüzeyleri: uygulamadaki gibi marka sabiti, temayla değişmez. */
.deck-paper { background: #F7F1EA; color: #181818; --card-muted: #5E5751; --card-chip-bg: #F7DACA; --card-chip-ink: #C94C1C; }
.deck-ink { background: #232120; color: #FAF4EF; --card-muted: #C1B8B0; --card-chip-bg: #6B321F; --card-chip-ink: #FFD9C4; }
.deck-orange { background: #E9622C; color: #FFF9F4; --card-muted: rgba(255, 249, 244, 0.9); --card-chip-bg: rgba(24, 24, 24, 0.18); --card-chip-ink: #FFF9F4; }

/* ---------- Zemin ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', 'Avenir Next', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El yapımı kağıt hissi, iki katman.
   Tek bir kaba gürültü filmi fotokopi gibi durur; ince tanecik artı çok
   geniş ölçekli elyaf dalgalanması malzemeye benzer. İkisi de sabit,
   kaydırmayla kaymaz, çünkü kağıt sayfayla birlikte hareket etmez. */
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 91;
  opacity: var(--grain);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  z-index: 90;
  opacity: var(--fiber);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.05' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23f)'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }

h1, h2, h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.08;
  text-wrap: balance;
}

.js .sweepline { color: var(--faint); transition: color 0.6s var(--ease-out); }
.js .sweepline.lit { color: inherit; }

/* ---------- Mağaza rozetleri ---------- */
.store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 17px; border-radius: 14px;
  text-decoration: none;
  background: var(--store-bg); color: var(--store-ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.store .mark { width: 24px; height: 24px; flex: none; }
.store .mark-apple { color: var(--store-ink); margin-top: -2px; }
.store span { display: grid; text-align: left; line-height: 1.18; }
.store em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; opacity: 0.72; }
.store b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.store:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(24, 24, 24, 0.2); }
/* Hero rozetleri koyu kalır ama zeminden ayrılsın diye ince bir kenarı
   ve kendi gölgesi var; boyutu da bir tık küçük. */
.hero .store {
  background: #171813; color: #FAF4EF;
  border: 1px solid rgba(250, 244, 239, 0.17);
  padding: 9px 17px 9px 14px; border-radius: 13px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.hero .store .mark { width: 21px; height: 21px; }
.hero .store .mark-apple { color: #FAF4EF; }
.hero .store em { font-size: 9.5px; }
.hero .store b { font-size: 14px; }
.hero .store:hover { border-color: rgba(250, 244, 239, 0.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Başlık: eskiz çizgileriyle bölünmüş sayfa ---------- */
/* Bütün kalem izleri `currentColor` çizer. Başlık koyu açılıştan kağıt
   zemine geçerken tek bir `color` yumuşaması hepsini birden mürekkepler;
   ayrı ayrı renk geçişi kurmaya gerek kalmıyor. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  --nav-h: 68px;
  --sk: var(--accent);
  color: var(--text);
  transition: color 0.45s var(--ease-out);
}
/* Açılışın koyu tabağı üstündeyken kalem kreme döner. */
.nav.on-dark { color: #F6EFE8; --sk: #F5895C; --nav-glass: rgba(10, 11, 8, 0.5); }

/* Cam yalnız yapışınca gelir: tepede başlığın zemini yok. */
.nav-sheet {
  position: absolute; inset: 0; z-index: -1;
  background-color: transparent;
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  transition: background-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out), -webkit-backdrop-filter 0.4s var(--ease-out);
}
.nav.scrolled .nav-sheet {
  background-color: var(--nav-glass);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.nav-row {
  height: var(--nav-h);
  max-width: 1420px; margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 30px);
  display: flex; align-items: center; gap: clamp(6px, 1.3vw, 18px);
}

/* Hücreleri ayıran yatık kalem izleri. Yükseklik satırdan gelir, o yüzden
   çizim oranı serbest bırakıldı: kısalınca dikleşir, uzayınca yatar. */
.vrule { flex: none; align-self: stretch; width: 14px; }
.vrule svg { width: 100%; height: 100%; display: block; }
/* Sıradaki her ikinci iz aynalanır: üçü de aynı kalem darbesi olmasın. */
.vrule:nth-of-type(2n) svg { transform: scaleX(-1); }
.vrule-push { margin-left: auto; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.emblem { display: block; width: 28px; height: 28px; }
.emblem svg { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
@media (hover: hover) and (pointer: fine) {
  .emblem { transition: transform 0.55s var(--ease-out); }
  .brand:hover .emblem { transform: rotate(72deg); }
}

/* Bağlantının altı çizgi değil, çizilen bir iz: soldan sağa doğru akar. */
.audience { display: flex; align-items: center; gap: clamp(2px, 0.9vw, 12px); }
.audience a {
  position: relative; text-decoration: none; color: inherit;
  font-size: 13.5px; font-weight: 600;
  padding: 9px 5px 12px; opacity: 0.6;
  transition: opacity 0.22s;
}
.audience a.is-active, .audience a:hover { opacity: 1; }
/* Çizilme `clip-path` ile. Kesik-çizgi (`stroke-dasharray`) yolun uzunluğunu
   tarayıcıya hesaplatır; `preserveAspectRatio="none"` ile gerilmiş bir yolda
   Chrome ile diğerleri farklı uzunluk buluyor ve turuncu yanlış yerden
   başlıyordu. Kırpma kutuyu ölçer, yolu değil: her tarayıcıda ve her
   genişlikte aynı yerde. */
.audience .ul {
  position: absolute; left: 3px; right: 3px; bottom: 3px; height: 6px;
  color: var(--sk); overflow: visible;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.42s var(--ease-out);
}
.audience a.is-active .ul { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) { .audience a:hover .ul { clip-path: inset(0 0 0 0); } }

/* Okuma çizgisi: taban iz sabit, turuncu iz sayfa ilerledikçe açılıyor. */
.rl { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 8px; overflow: visible; pointer-events: none; }
.rl-base { opacity: 0.38; }
.rl-fill { color: var(--sk); clip-path: inset(0 calc(100% - var(--read, 0) * 100%) 0 0); }

/* ---------- Açılır menüler ---------- */
.pop { position: relative; }
.pop-trigger { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; }
.pop .chev { width: 11px; height: 8px; flex: none; transition: transform 0.28s var(--ease-out); opacity: 0.65; }
.pop.is-open .chev { transform: rotate(180deg); }

.nav-tools { display: flex; align-items: center; gap: 2px; }
/* Simge hedefi gösterir, mevcut durumu değil: açıkken ay, koyudayken güneş. */
.theme-toggle { display: inline-flex; padding: 9px 7px; color: inherit; opacity: 0.72; transition: opacity 0.2s; }
.theme-toggle:hover { opacity: 1; }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .ic-moon { display: block; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .ic-sun { display: block; }
:root[data-theme='dark'] .theme-toggle .ic-moon { display: none; }
/* JS kapalıyken kökte işaret olmaz; simge yine sisteme uysun. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .ic-moon { display: none; }
}
.lang-trigger { padding: 9px 4px 9px 2px; color: inherit; opacity: 0.72; transition: opacity 0.2s; }
.lang-trigger:hover, .pop.is-open .lang-trigger { opacity: 1; }
.flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.lang-code { font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; }

/* İndirme düğmesi: iki kez çizilmiş kalem çerçevesi. İkinci iz işaretçi
   üstüne gelince belirir ve ilkine göre kayar, kalem tekrar geçmiş gibi. */
.sk-btn {
  position: relative; color: var(--sk);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 17px 13px 18px; border-radius: 0;
  font-size: 13.5px; font-weight: 700; white-space: nowrap;
  transition: transform 0.22s var(--ease-out);
}
.sk-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sk-ink-b { opacity: 0; transform: translate(1.6px, 1.4px) rotate(-0.35deg); transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
.sk-chev { width: 13px; height: 9px; flex: none; transition: transform 0.28s var(--ease-out); }
.pop.is-open .sk-ink-b { opacity: 0.75; transform: translate(-1.6px, -1.2px) rotate(0.4deg); }
.pop.is-open .sk-chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .sk-btn:hover { transform: translateY(-1px); }
  .pop-hover:hover .sk-ink-b { opacity: 0.75; transform: translate(-1.6px, -1.2px) rotate(0.4deg); }
  .pop-hover:hover .sk-chev { transform: rotate(180deg); }
}
.cta-short { display: none; }

/* Panel kapalı başlar. Görünürlüğü `visibility` taşır, böylece kapalıyken
   klavyeyle içine sekilemez. */
.pop-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20;
  min-width: 210px;
  display: grid; gap: 2px;
  padding: 7px;
  border-radius: 18px;
  background: var(--surface);
  /* Başlığın kalemi koyu zeminde kreme dönüyor; kart onu miras alırsa kendi
     kağıdının üstünde kayboluyor. Menü her zaman sayfanın mürekkebiyle yazar. */
  color: var(--text);
  box-shadow: var(--shadow-pop), var(--edge-light);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}
.pop.is-open .pop-panel { opacity: 1; visibility: visible; transform: none; }
/* Menünün kenarı da düğmeyle aynı kalemden: 1px'lik kenarlık yerine iz. */
.sk-edge { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--line-strong); pointer-events: none; overflow: visible; }
/* İndirme menüsü işaretçiyle de açılır; dil menüsü yalnız tıklamayla. */
@media (hover: hover) and (pointer: fine) {
  .pop-hover:hover .pop-panel { opacity: 1; visibility: visible; transform: none; }
  .pop-hover:hover .chev { transform: rotate(180deg); }
}
/* Tetikleyiciyle panel arası boşlukta işaretçi kaybolmasın. */
.pop-hover::after { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 12px; }

.lang-panel button {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  text-align: left; width: 100%;
  transition: background 0.18s, color 0.18s;
}
.lang-panel button:hover { background: var(--tint); color: var(--text); }
.lang-panel button.is-active { color: var(--on-soft); background: var(--accent-soft); }

.dl-panel { min-width: 232px; }
.store-mini {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 13px; text-decoration: none;
  transition: background 0.18s;
}
.store-mini:hover { background: var(--tint); }
.store-mini .mark { width: 23px; height: 23px; flex: none; }
.store-mini .mark-apple { color: var(--text); margin-top: -2px; }
.store-mini span { display: grid; line-height: 1.2; }
.store-mini em { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; color: var(--faint); }
.store-mini b { font-size: 14.5px; font-weight: 700; }

/* ---------- Açılış ---------- */
.hero {
  position: relative; min-height: 100svh;
  padding: clamp(116px, 15vh, 172px) 0 0;
  isolation: isolate;
  /* Yalnız yatay kırpma: üçlü telefon sırası büyürken dar pencerede kadrajı
     aşıyordu. `clip` + `visible` çifti kaydırma kutusu YARATMAZ, o yüzden
     telefon dikeyde bölüm sınırını aşıp sonraki bölümün üstünde kalmayı
     sürdürür. (`hidden` olsaydı dikey de kırpılırdı.) */
  overflow-x: clip; overflow-y: visible;
  z-index: 3;
  /* Videonun kendi zemininin tam rengi. Kadraj sayfadan dar olduğunda
     yanlarda hero devam eder ve ek yeri görünmez. */
  background: var(--hero-plate); color: #FAF4EF;
}
/* Kadraj sayfa genişliğine kadar büyümez: çok geniş ekranda figürler
   devleşiyordu. 16:9 kutuda `cover` hiç kırpmaz. */
/* Sahne telefon bloğunun içinde ve ona göre konumlu. Dikey kaydırma öğenin
   kendi boyunun yüzdesi, yani genişlikle birlikte ölçekleniyor; figürlerin
   üstü telefonların hemen üstünde başlıyor, gövdeleri köşelerin arkasına
   giriyor. */
.hero-art {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -33%);
  width: min(100vw, 1460px); aspect-ratio: 16 / 9;
  z-index: -1; overflow: clip;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%);
  pointer-events: none;
}
.art-half {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; will-change: transform, opacity;
  /* İç kenar erir. Videonun zemini figürlerin çevresinde #0C0D09'dan
     #12120D'ye kadar açıldığı için düz renk eşitlemek yetmiyor; kesim
     çizgisi ancak yumuşayarak kaybolur. */
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
}
/* `cover` kadrajı ortadan kırptığı için her yarım kendi dış kenarına
   sabitlenir, yoksa kenardaki figürler kırpılıp gider. Kesim çizgileri
   kadrajın boş ortasına denk gelir: içerik %1.6–23 ve %75–98.6 arasında.

   Figür boyutunun tek kaldıracı `--art-zoom`. Ölçek merkezi her yarımın
   kendi DIŞ kenarında olduğu için küçülme onları ortaya çekmez, kenarda
   tutar. Küçültmek için sayıyı düşürmek yeter. */
/* Üç kaldıraç: `--art-zoom` figürün boyu, iki `--art-push` her yanın içeri
   çekilmesi. Kırpma penceresi öğenin kendi koordinatında olduğu için
   ötelemede içerikle birlikte kayıyor; figür sığmadan yer değiştiriyor.
   İki pay ayrı, çünkü figürler kendi yarımlarında simetrik durmuyor. */
/* Üst kat iki sütuna açılınca figürler yazının altına düştü; sahne
   aşağı iniyor ve telefonların hizasında duruyor. */
.hero-art { --art-zoom: 0.72; --art-push-l: 5%; --art-push-r: 3%; }
.art-l { clip-path: inset(0 70% 0 0); object-position: left center; transform-origin: left center;
  --edge-fade: linear-gradient(to right, #000 17%, transparent 30%); }
.art-r { clip-path: inset(0 0 0 70%); object-position: right center; transform-origin: right center;
  --edge-fade: linear-gradient(to right, transparent 70%, #000 83%); }
.art-l { transform: translateX(var(--art-push-l)) scale(var(--art-zoom)); }
.art-r { transform: translateX(calc(-1 * var(--art-push-r))) scale(var(--art-zoom)); }
/* Koyudan kağıda geçiş dört katman.
   Alttaki ikisi videoyu karartıp metni okunur tutuyor, üstteki ikisi kağıdı
   getiriyor. Kağıt tek durakta değil yumuşayan bir rampayla ve ortadan
   yükselerek geliyor; düz bir şerit olarak kesildiğinde ek yeri okunuyordu.
   Hepsi açılışın kendi yüksekliğinin içinde: kimse fazladan kaydırmıyor. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 42% at 50% 34%, rgba(12, 13, 9, 0.9) 0%, rgba(12, 13, 9, 0.5) 52%, rgba(12, 13, 9, 0) 80%),
    linear-gradient(to bottom, rgba(12, 13, 9, 0.4) 0%, rgba(12, 13, 9, 0) 22%, rgba(12, 13, 9, 0) 56%, rgba(12, 13, 9, 0.5) 78%, rgba(12, 13, 9, 0.86) 92%, rgba(12, 13, 9, 0.94) 100%);
}
/* Kağıdı getiren iki kat ayrı duruyor: açık temada bu iş turuncu banda
   geçtiği için buradan çekiliyor, karartma katları yerinde kalıyor. */
.hero-scrim::after {
  content: ''; position: absolute; inset: 0; opacity: var(--seam-fade);
  background:
    radial-gradient(128% 34% at 50% 101%,
      color-mix(in srgb, var(--bg) 66%, transparent) 0%,
      color-mix(in srgb, var(--bg) 20%, transparent) 46%,
      transparent 78%),
    linear-gradient(to bottom,
      transparent 58%,
      color-mix(in srgb, var(--bg) 4%, transparent) 68%,
      color-mix(in srgb, var(--bg) 13%, transparent) 77%,
      color-mix(in srgb, var(--bg) 31%, transparent) 85%,
      color-mix(in srgb, var(--bg) 59%, transparent) 91.5%,
      color-mix(in srgb, var(--bg) 86%, transparent) 96.5%,
      var(--bg) 100%);
}

/* Yatay pay hero'nun kendisinde: sayfa payından geniş, iki yanda hem
   nefes hem de arayüz parçalarına yer bırakıyor. */
.hero-inner { position: relative; max-width: 1460px; padding-left: clamp(22px, 5vw, 96px); padding-right: clamp(22px, 5vw, 96px); }

/* Üst kat iki sütun: sol söz, sağ indirme, arada çizilen ayraç. Telefonlar
   bu ızgaranın dışında, boyları ve yerleri değişmiyor. */
.hero-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(20px, 3vw, 46px); align-items: center;
  padding-top: clamp(8px, 2vh, 30px);
  /* Telefon bloğu z-index taşıdığı için kendi yığın bağlamını kuruyor ve
     içindeki sahnenin negatif z-index'i o bağlamın dışına çıkamıyor;
     söz katmanı bu yüzden bloğun tamamının üstünde duruyor. */
  position: relative; z-index: 5;
}
/* İki sütun da kendi payıyla içeri çekiliyor: söz soldan, indirme
   bloğu ayraçtan. Yoksa kompozisyon sola yığılıp sağda geniş bir
   ölü kenar bırakıyordu. */
.hero-say { position: relative; padding-left: clamp(0px, 4vw, 68px); }
/* İndirme bloğu ayraçtan sonra bir tık daha sağa açılıyor. */
.hero-act { position: relative; display: grid; justify-items: start; gap: 18px; padding-left: clamp(0px, 6vw, 100px); }

/* Ayraç yüklenişte yukarıdan aşağı çiziliyor; amblem onun üstünde oturuyor. */
.hero-split { position: relative; align-self: stretch; width: 26px; min-height: 210px; }
.split-line { position: absolute; inset: 0; width: 100%; height: 100%; color: #FAF4EF; opacity: 0.3; }
.split-mark { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); color: #FAF4EF; }
.js .split-line { clip-path: inset(0 0 100% 0); animation: split-draw 1s var(--ease-out) 0.25s forwards; }
.js .split-mark { opacity: 0; transform: translate(-50%, -50%) scale(0.4); animation: mark-set 0.5s var(--ease-out) 1.05s forwards; }
@keyframes split-draw { to { clip-path: inset(0 0 0 0); } }
@keyframes mark-set { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }


/* Parçalar ortadaki ayracın hemen solunda: dağınık yerleşim, hafif eğik ve
   silik. Dönüş açısı değişkende tutuluyor; salınım karesi de onu taşıyor,
   yoksa hareket açıyı sıfırlıyordu. */
.say-props { display: none; }
@media (min-width: 1100px) {
  .say-props {
    display: block; position: absolute; right: clamp(-24px, -1.7vw, -10px); top: 50%;
    width: clamp(104px, 9.7vw, 142px); height: clamp(168px, 19vw, 236px);
    transform: translateY(-50%); pointer-events: none;
  }
}
.prop, .say-ticks { position: absolute; transform: rotate(var(--rot, 0deg)); }
.prop { opacity: 0.42; }
.prop-wave { --rot: -11deg; top: 16%; left: 62%; }
.prop-chip { --rot: 7deg; top: 48%; left: 5%; }
.prop-ring { --rot: -5deg; top: 80%; left: 57%; }
.js .prop { opacity: 0; animation: prop-in 0.8s var(--ease-out) both, prop-float 5.4s ease-in-out infinite alternate; }
.js .prop:nth-child(1) { animation-delay: 0.6s, 1.4s; }
.js .prop:nth-child(2) { animation-delay: 0.75s, 1.9s; }
.js .prop:nth-child(3) { animation-delay: 0.9s, 2.3s; }
@keyframes prop-in { to { opacity: 0.42; } }
@keyframes prop-float { to { transform: translateY(-10px) rotate(var(--rot, 0deg)); } }

.prop-wave { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.prop-wave i { width: 3px; border-radius: 999px; background: var(--accent); }
.prop-wave i:nth-child(1) { height: 30%; } .prop-wave i:nth-child(2) { height: 62%; }
.prop-wave i:nth-child(3) { height: 100%; } .prop-wave i:nth-child(4) { height: 46%; }
.prop-wave i:nth-child(5) { height: 78%; } .prop-wave i:nth-child(6) { height: 38%; }
.prop-wave i:nth-child(7) { height: 58%; }
.js .prop-wave i { transform-origin: bottom; animation: wave-beat 1.35s ease-in-out infinite alternate; }
.js .prop-wave i:nth-child(2n) { animation-duration: 1.05s; }
.js .prop-wave i:nth-child(3n) { animation-duration: 1.65s; }
@keyframes wave-beat { from { transform: scaleY(0.42); } to { transform: scaleY(1); } }

.prop-chip {
  padding: 6px 12px; border-radius: 8px; white-space: nowrap;
  background: rgba(243, 236, 227, 0.85); color: #23201C;
  font-family: 'Manrope', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
}
.prop-ring svg { width: 32px; height: 32px; fill: none; stroke-linecap: round; display: block; }
.prop-ring circle { stroke: rgba(250, 244, 239, 0.2); stroke-width: 3; }
.prop-ring path { stroke: var(--accent); stroke-width: 3.4; }
.js .prop-ring path { transform-origin: 50% 50%; animation: ring-turn 7s linear infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }

/* Başlığın yanındaki kısa çentikler: eskizdeki kalem izleri. */
.say-ticks { --rot: 9deg; top: 0; left: 2%; width: clamp(28px, 3vw, 42px); height: auto; color: var(--accent); opacity: 0.5; }
.js .say-ticks { opacity: 0; animation: tick-in 0.5s var(--ease-out) 0.85s forwards; }
@keyframes tick-in { to { opacity: 0.5; } }

/* Dil rozetleri kesik çizgili bir çerçevenin içinde, başında dünya. */
.lang-frame { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; }
.lang-edge { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); opacity: 0.45; stroke-dasharray: 6 8; pointer-events: none; }
/* Metin kadrajın boş orta koridorunda kalır: içerik %23'te bitip %75'te
   yeniden başlıyor, arada kalan şerit yazının yeri. */
/* İki satır: her cümle kendi satırında. Kutu geniş, punto ona göre; iddia
   defne dallarıyla birlikte kadrajın orta koridoruna sığmalı. */
.hero-title { font-size: clamp(24px, 2.75vw, 41px); line-height: 1.17; max-width: 20ch; margin: 0; }
.hero-title .l { display: block; }
.hero-title .accent { color: var(--accent); }
/* Dallar yalnız turuncu satırları kucaklıyor: kutu iddianın yüksekliğinde
   gerilir, birinci satır dışarıda kalır. */
.hero-title .laurelled { display: flex; align-items: center; justify-content: flex-start; gap: clamp(6px, 0.8vw, 14px); }
.hero-title .laurelled > .claim { display: block; width: max-content; max-width: 100%; }
/* Boy tek satırdan türüyor, genişlik çizimin oranından: kutu içinde
   boşlukta yüzmüyor ve satırın iki ucuna yapışıyor. Ayna yalnız statik
   kuralda; animasyon `transform` yazarsa yönü eziyordu, o yüzden giriş
   sadece opaklığı taşıyor. */
/* Dal, satırdan yüksek. Negatif blok payı kutuya katkısını tam bir
   satır yüksekliğine indiriyor ((1.17em - 1.35em) / 2), yoksa esnek
   satır diğerlerinden kalın durup satır aralığını bozuyordu. Dal
   taşmayı sürdürüyor, yalnız ölçüye girmiyor. */
/* Dal satırdan yüksek. Negatif blok payı kutuya katkısını tam bir satır
   yüksekliğine indiriyor, yoksa esnek satır diğerlerinden kalın durup
   satır aralığını bozuyordu. Dal taşımayı sürdürüyor, yalnız ölçüye
   girmiyor. İkisi tek yerden: boy değişince pay kendiliğinden uyuyor. */
.laurel {
  --satir: 1.17em;   /* .hero-title line-height */
  --boy: 1.16em;
  flex: none; align-self: center; color: var(--accent); opacity: 0.9;
  height: var(--boy); width: auto;
  margin-block: calc((var(--satir) - var(--boy)) / 2);
}
.laurel { transform: none; }
.laurel-r { transform: scaleX(-1); }
.js .laurel { opacity: 0; animation: laurel-in 0.7s var(--ease-out) 0.45s forwards; }
@keyframes laurel-in { to { opacity: 0.9; } }

/* İddianın altındaki çizgi metnin arkaplanı: satır içi olduğu için her
   sarılan parça kendi genişliğinde kendi çizgisini alıyor, bir bloğun
   kenarına kadar uzayıp boşluğu çizmiyor. */
/* İki yüz bir arada: birinci satır serifte kalıyor, iddia düz harflere
   geçiyor. Sans daha geniş çizdiği için punto bir tık kısılıyor. */
/* İddia serifi bırakıp düz harflere geçiyor; sans daha geniş çizdiği için
   punto bir tık kısılıyor. */
.hero-title .accent {
  font-family: 'Manrope', 'Avenir Next', system-ui, sans-serif;
  font-weight: 700; font-size: 0.93em; letter-spacing: -0.025em;
  color: var(--accent);
}
/* Çizgi yalnız son satırda: satır içi olduğu için kendi genişliğinde
   duruyor, bloğun kenarına kadar uzamıyor. */
.hero-title .laurelled .accent {
  display: inline;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='7' preserveAspectRatio='none'%3E%3Cpath d='M1.8 4.6c9.4-2 18.8.6 28.2-.7 9.1-1.3 18.6 1.2 30.2-1' fill='none' stroke='%23E9622C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 7px;
  padding-bottom: 9px;
}

.hero-body {
  position: relative;
  font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.62;
  color: rgba(250, 244, 239, 0.93);
  max-width: 40ch; margin: 0;
}
/* Cümlenin arkasında elle çekilmiş bir fosforlu şerit: iki kenarı da
   dalgalı, dalga yavaşça akıyor. Metnin kendisi değil zemini kıpırdıyor,
   okuma bozulmuyor. Şerit metnin kutusuna göre ölçülü (em), punto
   değişince birlikte küçülüp büyüyor. */
.hero-body::before {
  content: ''; position: absolute; z-index: -1;
  top: -0.36em; bottom: -0.3em; left: -0.7em; right: -0.9em;
  background: color-mix(in srgb, var(--accent) 21%, transparent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 7q15-6 30-1 16 5 30 1 14-5 30-1 15 5 30 1V14H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 7q15 6 30 1 16-5 30-1 14 5 30 1 15-5 30-1V0H0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 7q15-6 30-1 16 5 30 1 14-5 30-1 15 5 30 1V14H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 7q15 6 30 1 16-5 30-1 14 5 30 1 15-5 30-1V0H0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 14px, 100% calc(100% - 26px), 120px 14px;
  mask-size: 120px 14px, 100% calc(100% - 26px), 120px 14px;
  -webkit-mask-position: 0 top, 0 center, 0 bottom;
  mask-position: 0 top, 0 center, 0 bottom;
  -webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
  mask-repeat: repeat-x, no-repeat, repeat-x;
}
.js .hero-body::before { animation: body-sway 19s linear infinite; }
@keyframes body-sway {
  from { -webkit-mask-position: 0 top, 0 center, 0 bottom; mask-position: 0 top, 0 center, 0 bottom; }
  to { -webkit-mask-position: -120px top, 0 center, 120px bottom; mask-position: -120px top, 0 center, 120px bottom; }
}
/* Diller: cümle yerine üç bayraklı etiket. */
.hero-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-langs li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(250, 244, 239, 0.07);
  border: 1px solid rgba(250, 244, 239, 0.12);
  font-size: 12.5px; font-weight: 700; color: rgba(250, 244, 239, 0.82);
}
.hero-langs img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }

/* Giriş animasyonu dış sarmalayıcıda, kaydırmaya bağlı büyüme içteki
   çerçevede: animasyon satır içi stili ezdiği için ikisi ayrı katman. */
.hero-phone { position: relative; margin-top: clamp(96px, 14vh, 178px); display: grid; justify-items: center; }
.js .hero-phones { opacity: 0; transform: translateY(38px); animation: phone-in 0.85s var(--ease-out) 0.35s forwards; }
@keyframes phone-in { to { opacity: 1; transform: none; } }
.hero-phone { position: relative; z-index: 4; }

/* Üçlü: ortada koşu, yanlarda ona giden ve ondan dönülen ekran. Eğim ve
   bindirme yandakileri geri plana atar, kaydırmadaki büyüme üçüne birden
   uygulanır; bu yüzden ölçek dıştaki sarmalayıcıda. */
.hero-phones { display: flex; align-items: flex-start; justify-content: center; transform-origin: center top; will-change: transform; }
.phone-main { z-index: 2; }
.phone-side { --pw: clamp(154px, 16.8vw, 216px); z-index: 1; }
.phone-l { transform: rotate(-6.5deg) translateY(10%); margin-right: calc(var(--pw) * -0.14); }
.phone-r { transform: rotate(6.5deg) translateY(10%); margin-left: calc(var(--pw) * -0.14); }
/* Yandakiler geride dursun: cam koyulaşır, çerçeve keskin kalır. */
.phone-side .screen::after { content: ''; position: absolute; inset: 0; background: rgba(9, 10, 7, 0.32); }

/* Telefon: her ölçü genişlikten türer, küçülünce hapa dönmez. */
.phone {
  --pw: clamp(232px, 25vw, 318px);
  width: var(--pw);
  background: #131110;
  border-radius: calc(var(--pw) * 0.175);
  padding: calc(var(--pw) * 0.037);
  box-shadow: var(--shadow-float), inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
  position: relative;
}
.phone .screen { border-radius: calc(var(--pw) * 0.142); overflow: hidden; background: #181818; aspect-ratio: 1206 / 2622; position: relative; }
.phone .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.island-notch {
  position: absolute; top: calc(var(--pw) * 0.073); left: 50%; transform: translateX(-50%);
  width: calc(var(--pw) * 0.28); height: calc(var(--pw) * 0.08);
  border-radius: 999px; background: #050404; z-index: 5;
}

/* ---------- Bölümler ---------- */
/* Başlık sabit; çıpayla gelen bölüm onun altında kalmasın. */
section { position: relative; }
section[id] { scroll-margin-top: 96px; }
/* Yalnız yatayda kırpılır. Dikeyde de kırpılınca arka plandaki sıcak
   lekeler bölüm sınırında düz bir çizgiye dönüşüp geçişi ele veriyordu.
   `clip`, `hidden`ın aksine kaydırma kabı oluşturmaz: yapışkan telefon
   aşağıda çalışmaya devam eder. */
.band { background: var(--bg); overflow-x: clip; z-index: 1; }
/* Hero'nun telefonu bu bölümün içine taşıyor: başlığa yer aç. */
.hero + .band { padding-top: clamp(158px, 17vw, 250px); }
.section-pad { padding: clamp(78px, 10vw, 132px) 0; }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 58px); }
.section-head h2 { font-size: clamp(28px, 3.6vw, 46px); }
.section-head .lede { color: var(--muted); margin-top: 16px; max-width: 58ch; font-size: 16.5px; }

.bloom {
  position: absolute; z-index: 0;
  width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, var(--bloom-1) 0%, transparent 68%);
  filter: blur(18px);
  transition: opacity 1.4s var(--ease-out);
}
/* Hero telefon için öne alındı ve opak zemini, aşağıdan yukarı sızan bu
   lekeyi düz bir çizgi hâlinde kesiyordu. Leke artık hero sınırının
   altında başlıyor: kesilecek bir yeri kalmıyor. */
.bloom-a { top: 3%; left: -12%; }
.bloom-b { top: 22%; right: -18%; background: radial-gradient(circle at 50% 50%, var(--bloom-2) 0%, transparent 68%); }
.bloom-c { bottom: -16%; left: 4%; }
.bloom-d { top: -8%; left: 50%; transform: translateX(-50%); }
.band.in-view .bloom { opacity: 1; }
.js .band.in-view .bloom-a, .js .band.in-view .bloom-b, .js .band.in-view .bloom-c { animation: bloom-drift 26s ease-in-out infinite alternate; }
@keyframes bloom-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4%, -5%, 0) scale(1.1); } }
.band > .wrap { position: relative; z-index: 1; }

/* ---------- Yöntem karşılaştırması ---------- */
/* `.section-head`'in yanında kullanılıyor: punto ölçeği oradan gelsin,
   burada yalnız iki sütuna açılsın. Tek başına kullanıldığında başlık
   tarayıcı varsayılanına düşüyordu ve diğer bölümlerden küçük kalıyordu. */
.how-head {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-bottom: clamp(38px, 5vw, 66px);
}
.how-copy .lede { margin-top: 16px; }
.how-art { justify-self: end; width: 100%; max-width: 420px; }
.how-art img { width: 100%; }

/* ---------- Neden SpeakRun: karşılaştırma tablosu ---------- */
/* Kartlar marka sabiti krem kağıt; sayfa açık ya da koyu olsun aynı kağıt
   duruyor. Kapsayıcı bir kart yok, hepsi doğrudan sayfanın zemininde. */
.why { margin-top: clamp(40px, 5vw, 70px); text-align: center; }
.why-eyebrow { margin-bottom: 16px; }
.why-eyebrow span {
  display: inline-block; padding: 6px 16px 7px; border-radius: 4px;
  background: var(--accent-press); color: #FFF6F0;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  transform: rotate(-0.8deg);
}
.why-title { font-size: clamp(23px, 2.7vw, 38px); line-height: 1.14; max-width: 30ch; margin: 0 auto; }
.why-title em { font-style: normal; color: var(--accent); }
.why-lede { margin: 14px auto 0; max-width: 60ch; font-size: 15.5px; color: var(--muted); }
.why-note { margin-top: 18px; font-size: 12.5px; color: var(--faint); }

/* Dar ekranda tablo kadrajın tamamını kullanıp yana kayıyor; sıkıştırmak
   satırları okunmaz yapıyordu. */
.why-scroll { margin-top: clamp(26px, 3.4vw, 44px); overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 12px 0; text-align: left; }

/* Sütun başlığı bantla yapıştırılmış etiket. */
.cmp thead th { padding: 0 0 12px; vertical-align: bottom; }
.cmp .tape {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px; border-radius: 3px;
  background: rgba(24, 24, 24, 0.09); color: var(--muted);
  font-family: 'Manrope', sans-serif; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em;
  transform: rotate(-1.1deg);
}
@media (prefers-color-scheme: dark) { .cmp .tape { background: rgba(250, 244, 239, 0.1); } }
:root[data-theme='dark'] .cmp .tape { background: rgba(250, 244, 239, 0.1); }
.cmp thead th:nth-of-type(2) .tape { transform: rotate(1deg); }
/* Öne çıkan bant hep açık kalıyor: amblem ancak açık bir zeminde kendi
   renkleriyle okunuyor, koyu temada kaybolmasın. */
.cmp .c-new .tape { background: #FDE7D6; color: #B7451A; }
.cmp-mark { width: 18px; height: 18px; flex: none; color: #23201C; }

/* Satır başlıkları kutu değil, yalnız ad: sağdaki satırların başlığı
   olduklarını hizaları söylüyor. */
.cmp tbody th {
  width: clamp(132px, 13vw, 176px);
  padding: 19px 22px 19px 2px; vertical-align: middle; text-align: right;
  font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--muted); transition: color 0.2s;
}
.cmp tbody th svg { width: 19px; height: 19px; opacity: 0.55; vertical-align: -4px; margin-right: 9px; transition: opacity 0.2s; }

/* Kağıt: krem zemin, üstüne ince tanecik. Sayfanın kendi film tabakası
   sabit durduğu için karta ait doku burada, zeminle birlikte kayıyor. */
.cmp td {
  padding: 19px 18px 19px 44px; position: relative; vertical-align: top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)' opacity='.34'/%3E%3C/svg%3E");
  background-color: #EFE8DE; background-blend-mode: multiply;
  color: #4A443E; font-size: 12.8px; line-height: 1.52;
}
.cmp td b { display: block; color: #23201C; font-size: 13.4px; font-weight: 700; margin-bottom: 4px; }
.cmp td.c-new { background-color: #FFFCF7; box-shadow: inset 1.5px 0 0 var(--accent), inset -1.5px 0 0 var(--accent); }
.cmp tbody tr + tr td { border-top: 1px dashed rgba(24, 24, 24, 0.14); }

/* Yırtık kenar yalnız ilk ve son satırda: sütun bir kağıt yaprağı gibi
   üstten ve alttan koparılmış duruyor, yanları düz kalıyor. */
.cmp tbody tr:first-child td {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' preserveAspectRatio='none'%3E%3Cpath d='M0 11V4.4l4.3-1.5 4.6 2 4.4-2.6 4.5 2.9 4.6-1.9 4.3 2.4 4.7-2.7 4.4 1.8 4.6-1.5 4.3 2.6 4.7-1.9 4.4 1.6 4.6-2.3L64 4V11Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' preserveAspectRatio='none'%3E%3Cpath d='M0 11V4.4l4.3-1.5 4.6 2 4.4-2.6 4.5 2.9 4.6-1.9 4.3 2.4 4.7-2.7 4.4 1.8 4.6-1.5 4.3 2.6 4.7-1.9 4.4 1.6 4.6-2.3L64 4V11Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 64px 11px, 100% calc(100% - 10px);
  mask-size: 64px 11px, 100% calc(100% - 10px);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  padding-top: 26px;
}
.cmp tbody tr:last-child td {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6.6l4.3 1.5 4.6-2 4.4 2.6 4.5-2.9 4.6 1.9 4.3-2.4 4.7 2.7 4.4-1.8 4.6 1.5 4.3-2.6 4.7 1.9 4.4-1.6 4.6 2.3L64 7V0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='11' preserveAspectRatio='none'%3E%3Cpath d='M0 0v6.6l4.3 1.5 4.6-2 4.4 2.6 4.5-2.9 4.6 1.9 4.3-2.4 4.7 2.7 4.4-1.8 4.6 1.5 4.3-2.6 4.7 1.9 4.4-1.6 4.6 2.3L64 7V0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: 64px 11px, 100% calc(100% - 10px);
  mask-size: 64px 11px, 100% calc(100% - 10px);
  -webkit-mask-position: bottom left, top left;
  mask-position: bottom left, top left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  padding-bottom: 26px;
}
.cmp tbody tr:first-child td::after, .cmp tbody tr:last-child td::after {
  content: ''; position: absolute; left: 0; right: 0; height: 11px;
  background: rgba(24, 24, 24, 0.07); pointer-events: none;
}
.cmp tbody tr:first-child td::after { top: 0; }
.cmp tbody tr:last-child td::after { bottom: 0; }

/* İşaretler daireden çıktı: sayfanın kendi kalemiyle çizilmiş tik ve çarpı,
   daha hafif ve tabloyu sıkmıyor. */
.cmp td::before {
  content: ''; position: absolute; left: 15px; top: 20px; width: 18px; height: 18px;
  background: rgba(24, 24, 24, 0.32);
  transform-origin: center;
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.4 5.6c3 2.9 5.9 5.8 8.8 8.8M14.4 5.7c-3 2.8-5.9 5.7-8.7 8.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.4 5.6c3 2.9 5.9 5.8 8.8 8.8M14.4 5.7c-3 2.8-5.9 5.7-8.7 8.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cmp tbody tr:first-child td::before { top: 28px; }
.cmp td.c-new::before {
  background: var(--accent-press);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.6 10.4c1.5 1.2 2.9 2.6 4.2 4.1 2.5-4 5.4-7.6 8.7-10.9' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.6 10.4c1.5 1.2 2.9 2.6 4.2 4.1 2.5-4 5.4-7.6 8.7-10.9' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Satırı işaretçiyle izlemek dört sütunda gerçekten yardımcı: yer kaymadan
   kağıt aydınlanıyor, satır adı mürekkepleniyor, işaret bir tık büyüyor. */
@media (hover: hover) and (pointer: fine) {
  .cmp tbody tr:hover td { background-color: #F6F1E9; }
  .cmp tbody tr:hover td.c-new { background-color: #FFFFFC; }
  .cmp tbody tr:hover th { color: var(--text); }
  .cmp tbody tr:hover th svg { opacity: 0.85; }
  .cmp tbody tr:hover td::before { transform: scale(1.16); }
}
.cmp td { transition: background-color 0.22s var(--ease-out); }

/* Giriş: bölüm görününce işaretler yukarıdan aşağı sırayla konuyor,
   karşılaştırma o an puanlanıyormuş gibi. `backwards` seçildi ki bitince
   işaret kendi kuralına dönsün ve işaretçi büyütmesi çalışsın. */
.cmp tbody tr:nth-child(1) { --i: 0; }
.cmp tbody tr:nth-child(2) { --i: 1; }
.cmp tbody tr:nth-child(3) { --i: 2; }
.cmp tbody tr:nth-child(4) { --i: 3; }
.cmp tbody tr:nth-child(5) { --i: 4; }
.cmp tbody tr:nth-child(6) { --i: 5; }
.js .why:not(.in) .cmp td::before { opacity: 0; }
.js .why.in .cmp td::before {
  animation: mark-in 0.42s var(--ease-out) calc(0.24s + var(--i, 0) * 80ms) backwards;
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.45) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}
.cmp-corner { background: none !important; }

/* ---------- Koşu sahneleri ---------- */
.scenes { display: grid; grid-template-columns: minmax(280px, 400px) 1fr; gap: clamp(30px, 7vw, 110px); align-items: start; }
.scenes-sticky { position: sticky; top: calc(50svh - min(37svh, 320px)); display: grid; justify-items: center; padding: 10px 0; }
.scenes-sticky .phone { --pw: clamp(226px, 22vw, 284px); transition: transform 0.7s var(--ease-out); }
.scenes-sticky[data-scene='0'] .phone { transform: rotate(-1.6deg); }
.scenes-sticky[data-scene='1'] .phone { transform: rotate(1.4deg) scale(1.02); }
.scenes-sticky[data-scene='2'] .phone { transform: rotate(-1.2deg); }
.scenes-sticky[data-scene='3'] .phone { transform: rotate(1.6deg) scale(1.02); }
.scene-video { opacity: 0; transition: opacity 0.5s ease; }
.scene-video.active { opacity: 1; }
.steps { display: grid; }
.step { min-height: 74svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; opacity: 0.28; transition: opacity 0.5s var(--ease-out); max-width: 470px; }
.step.active { opacity: 1; }
.step .k {
  display: inline-flex; font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-soft); background: var(--accent-soft);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 16px;
}
.step h3 { font-size: clamp(24px, 2.7vw, 36px); margin-bottom: 14px; }
.step p { color: var(--muted); font-size: 16px; max-width: 42ch; }
.step p strong { color: var(--text); }

/* ---------- Aradaki fark (mürekkep bandı, kenarları yumuşak) ---------- */
/* Üstünde video bölümü var ve o mürekkebe eriyerek biter, o yüzden burada
   üst geçiş yok. Altta kağıt bölümü başlıyor, geçiş orada. */
.gap { background: var(--ink); color: #FAF4EF; overflow: clip; }
.gap::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: clamp(130px, 15vh, 210px);
  z-index: 2; pointer-events: none; opacity: var(--seam-fade);
  background:
    radial-gradient(120% 62% at 50% 100%, color-mix(in srgb, var(--bg) 52%, transparent) 0%, transparent 74%),
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--bg) 5%, transparent) 22%,
      color-mix(in srgb, var(--bg) 17%, transparent) 42%,
      color-mix(in srgb, var(--bg) 40%, transparent) 60%,
      color-mix(in srgb, var(--bg) 70%, transparent) 78%,
      color-mix(in srgb, var(--bg) 91%, transparent) 91%,
      var(--bg) 100%);
}
.gap .wrap { position: relative; z-index: 3; }
.gap .sweepline { color: #6E675F; }
.js .gap .sweepline.lit { color: #FAF4EF; }
.gap h2 { font-size: clamp(30px, 4.2vw, 54px); max-width: 16ch; }
.gap-body { margin-top: 20px; font-size: 17px; line-height: 1.62; color: #C1B8B0; max-width: 52ch; }

/* Kelime pisti başlığın sağındaki boşlukta duruyor ve sağ kenardan taşıyor.
   Sol ucu maskeyle eriyor: metnin bittiği yerde çizim başlamış olmuyor,
   yavaşça beliriyor. */
.gap-copy { position: relative; }
.gap-road {
  position: absolute; z-index: 0; pointer-events: none;
  /* Sağ kenarı alttaki ızgarayla aynı hizada bitiyor, sol ucu metnin
     üstüne bir parça giriyor; maske orayı erittiği için çakışma okunmuyor. */
  left: 33%; right: 0; top: 50%; transform: translateY(-50%);
  opacity: 0.34;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%, #000 88%, transparent 100%);
}
.gap-road img { width: 100%; }
.gap-copy h2, .gap-copy p { position: relative; z-index: 1; }

/* ---------- Özellik ızgarası ---------- */
.bento {
  position: relative; margin-top: clamp(34px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.bt {
  position: relative; z-index: 1; grid-column: span 2;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 22px;
  background: rgba(250, 244, 239, 0.055);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  overflow: hidden;
}
/* Kenar 1px'lik bir kenarlık değil, başlıktaki kalemin çizdiği çerçeve. */
.bt-edge { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(250, 244, 239, 0.24); pointer-events: none; overflow: visible; }
.bt-body { position: relative; z-index: 2; }
.bt-tag {
  display: inline-block; margin-bottom: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 249, 244, 0.5);
}
.bt-tag-pro { color: var(--accent); }
.bt h3 { font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 8px; }
.bt p { font-size: 14px; line-height: 1.55; color: rgba(255, 249, 244, 0.7); }
.bt-shot { position: relative; z-index: 1; }

/* Geniş kart yatay: söz solda, ekran sağda ve kartın alt kenarını aşıyor. */
.bt-wide { grid-column: span 3; flex-direction: row; align-items: center; gap: clamp(16px, 2vw, 30px); padding-bottom: 0; }
.bt-wide .bt-body { flex: 1; padding-bottom: clamp(18px, 2vw, 24px); }
/* Taşma payı kartın genişliğine değil telefonun kendi ölçüsüne bağlı:
   yüzde kullanınca metin uzadıkça karta kalan yer daralıyordu. */
.bt-wide .bt-shot { flex: none; margin-bottom: calc(var(--mw) * -0.78); }
.bt-wide .mini-phone { --mw: clamp(112px, 12vw, 146px); }
/* Dar kart dikey: söz üstte, ekran altta ve kartın alt kenarından taşıyor. */
.bt:not(.bt-wide) { padding-bottom: 0; }
.bt:not(.bt-wide) .bt-shot { display: flex; justify-content: center; margin: 4px 0 calc(var(--mw) * -0.42); }
.bt:not(.bt-wide) .mini-phone { --mw: clamp(124px, 13vw, 160px); }


/* ---------- Sesini kullandığın her gün sayılır ---------- */
/* Sahne tek bir cümle taşıyor. Söz kadranın üst üçte birinde duruyor:
   aşağıda konuşan yüz açıkta kalsın. */
.voice {
  position: relative; isolation: isolate; color: #FFF9F4;
  min-height: 92svh;
  /* Cümle sahnenin orta altında duruyor: yüz ve kelimeler üstte kalsın. */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(96px, 12vw, 150px) 0 clamp(72px, 15vh, 168px);
}
.voice-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.voice-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* Üstte mürekkepten sahneye, altta sahneden sayfaya erir. Videonun sıcak
   açık zemini metnin altında kaldığı için ortada da bir karartma var. */
.voice-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20, 19, 18, 0.6) 0%, rgba(20, 19, 18, 0.34) 22%, rgba(20, 19, 18, 0.46) 46%, rgba(20, 19, 18, 0.6) 70%, rgba(20, 19, 18, 0.92) 90%, var(--ink) 100%),
    linear-gradient(to right, rgba(20, 19, 18, 0.55) 0%, rgba(20, 19, 18, 0.12) 45%, rgba(20, 19, 18, 0.12) 55%, rgba(20, 19, 18, 0.55) 100%);
}
/* Sahnenin üst kenarını sayfaya eriten kat. Açık temada bu işi turuncu
   şerit yapıyor ve rampa çekiliyor: kalsaydı şeridin altında ikinci bir
   siyah bant gibi duruyordu. */
.voice-veil::after {
  content: ''; position: absolute; inset: 0; opacity: var(--seam-fade);
  background: linear-gradient(to bottom,
    var(--ink) 0%,
    color-mix(in srgb, var(--ink) 84%, transparent) 4%,
    color-mix(in srgb, var(--ink) 55%, transparent) 8%,
    color-mix(in srgb, var(--ink) 24%, transparent) 13%,
    color-mix(in srgb, var(--ink) 6%, transparent) 18%,
    transparent 24%);
}
.voice-inner { position: relative; z-index: 1; }
.voice .sweepline { color: rgba(255, 249, 244, 0.34); }
.js .voice .sweepline.lit { color: #FFF9F4; }
/* Punto ve kutu birlikte ayarlı: cümle her genişlikte iki satırda kalsın. */
.voice h2 { font-size: clamp(23px, 3vw, 38px); max-width: 26ch; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); }
/* Küçük telefon çerçevesi: özellik ızgarasındaki ekranları taşıyor. */
.mini-phone {
  --mw: 140px;
  width: var(--mw); position: relative; display: block;
  background: #131110;
  border-radius: calc(var(--mw) * 0.175);
  padding: calc(var(--mw) * 0.04);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transform: rotate(-3deg);
  transition: transform 0.5s var(--ease-out);
}
.bt:hover .mini-phone { transform: rotate(-1deg) translateY(-6px); }
.mini-phone img { width: 100%; border-radius: calc(var(--mw) * 0.14); display: block; }
.mini-notch {
  position: absolute; top: calc(var(--mw) * 0.075); left: 50%; transform: translateX(-50%);
  width: calc(var(--mw) * 0.3); height: calc(var(--mw) * 0.085);
  border-radius: 999px; background: #050404; z-index: 2;
}

.snaps { display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; padding-bottom: clamp(40px, 6vw, 80px); }
.snap {
  background: #FFF9F4; color: #181818;
  padding: 10px 10px 14px; border-radius: 14px;
  box-shadow: var(--shadow-soft);
  width: clamp(190px, 24vw, 290px);
  transform: rotate(var(--r, 0deg));
  transition: transform 0.4s var(--ease-out);
}
.snap:hover { transform: rotate(0deg) translateY(-6px); }
.snap:nth-child(1) { --r: -2.2deg; }
.snap:nth-child(2) { --r: 1.4deg; margin-top: 26px; }
.snap:nth-child(3) { --r: -1.2deg; }
.snap .frame { position: relative; height: clamp(200px, 21vw, 260px); border-radius: 8px; overflow: hidden; background: #F2E9E1; }
.snap .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.snap figcaption { font-family: 'Newsreader', serif; font-style: italic; font-size: 14px; color: #5E5751; text-align: center; margin-top: 10px; }

/* ---------- Diller ---------- */
/* Ara bölüm: iki büyük bölüm arasında yarım boy bir nefes. Diller cümlenin
   içinde, bayrakları adlarının hemen yanında. */
.langs-strip { padding: clamp(52px, 6.5vw, 92px) 0; text-align: center; }
.langs-strip .wrap { max-width: 960px; }
.langs-title { font-size: clamp(25px, 3.1vw, 40px); text-wrap: balance; }
.langs-strip .lede { color: var(--muted); margin: 18px auto 0; max-width: 62ch; font-size: 16px; }
/* Bayrak ile ad birlikte sarılır: satır sonunda ikisi ayrılmaz. */
.lg { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; }
.lg img {
  width: 0.86em; height: 0.86em; border-radius: 50%; object-fit: cover;
  flex: none; transform: translateY(0.04em);
  box-shadow: 0 2px 6px rgba(24, 24, 24, 0.2);
}

/* ---------- Bölüm dikişi: turuncu bant ---------- */
/* Koyu zeminden kağıda geçerken araya markanın turuncusundan bir şerit
   giriyor. Şeridin iki kenarı da dalgalı ve bütün bant hafifçe eğik.
   Rampa yok: her renk kendi kesin sınırında bitiyor, sınırın biçimini
   maske veriyor. Dalga karo olarak döşendiği için (240px, sabit boy)
   hiçbir genişlikte gerilmiyor; eğim, karoyu değil bandı çeviriyor.
   Karonun içindeki `linear-gradient(#000,#000)` görsel bir geçiş değil,
   dalganın üstünde kalan alanı dolduran düz maske katmanı. */
.seam {
  --sh: clamp(66px, 7.6vw, 108px);
  --tilt: -1.15deg;
  /* Karo dar ekranda küçülüyor: 240px sabit kalsaydı telefonda tek bir
     kabarık görünüp dalga okunmuyordu. Kayma da aynı değere bağlı. */
  --tile: 240px;
  --amp: 26px;
  --up: var(--ink);
  --down: var(--bg);
  position: absolute; left: 0; right: 0; top: calc(var(--sh) / -2);
  /* Arkaplan katmanında: bölümün kendi zemininin üstünde ama içeriğin
     (`.wrap`, z-index 1) altında. Bir üstteki bölümün üstüne çıkması
     buradan değil, bölümün kendi z-index'inden geliyor. */
  height: var(--sh); z-index: 0; pointer-events: none;
  overflow: hidden; background: var(--accent);
}
/* İki dil de kendi rengini taşıyor; ortada kalan şerit bandın turuncusu.
   Yatayda 280px taşıyorlar: dalganın bir karo boyu kayması kenarı hiçbir
   pencere genişliğinde açığa çıkarmasın. */
.seam i {
  position: absolute; left: -280px; width: calc(100% + 560px);
  transform: rotate(var(--tilt));
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: var(--tile) var(--amp), 100% calc(100% - var(--amp) + 1px);
  mask-size: var(--tile) var(--amp), 100% calc(100% - var(--amp) + 1px);
}
.seam .up {
  top: -90px; height: calc(38% + 90px); background: var(--up);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 13q26-11 60-1 32 10 60 1 28-9 60-2 34 12 60 2V0H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 13q26-11 60-1 32 10 60 1 28-9 60-2 34 12 60 2V0H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-position: 0 bottom, 0 top; mask-position: 0 bottom, 0 top;
}
.seam .down {
  top: 68%; height: calc(32% + 90px); background: var(--down);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 12q34 12 60 2 28-11 60-1 30 9 60 3 28-10 60-4V26H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 12q34 12 60 2 28-11 60-1 30 9 60 3 28-10 60-4V26H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-position: 0 top, 0 bottom; mask-position: 0 top, 0 bottom;
}
/* Dalga bir karo boyu kayıp başa dönüyor: desen sürekli, ek yeri yok. */
.js .seam .up { animation: seam-drift 26s linear infinite; }
.js .seam .down { animation: seam-drift 34s linear infinite reverse; }
@keyframes seam-drift {
  from { transform: rotate(var(--tilt)) translateX(0); }
  to { transform: rotate(var(--tilt)) translateX(calc(var(--tile) * -1)); }
}
/* Kağıttan sahneye girerken alt taraf düz bir renk değil, video. Boyanacak
   bir renk olmadığı için alt dil yerine bandın kendisi maskeleniyor:
   turuncu dalgada bitiyor, altında sahne başlıyor. Eğim de artık burada,
   çocuklarda değil. */
.seam-into-dark {
  --up: var(--bg);
  left: -40px; right: -40px; transform: rotate(var(--tilt));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 12q34 12 60 2 28-11 60-1 30 9 60 3 28-10 60-4V0H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 12q34 12 60 2 28-11 60-1 30 9 60 3 28-10 60-4V0H0Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: var(--tile) var(--amp), 100% calc(100% - var(--amp) + 1px);
  mask-size: var(--tile) var(--amp), 100% calc(100% - var(--amp) + 1px);
  -webkit-mask-position: 0 bottom, 0 top; mask-position: 0 bottom, 0 top;
  -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
}
.seam-into-dark .down { display: none; }
.seam-into-dark .up { transform: none; }
.js .seam-into-dark .up { animation-name: seam-slide; }
@keyframes seam-slide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--tile) * -1)); }
}
/* Hero'nun dikişi kendi bölümünün içinde duruyor: hero z-index 3 ile
   sonraki bölümün üstünde kaldığı için şerit dışarıdan konsaydı zemini
   üst dalgayı örtüp düz bir çizgiye çeviriyordu. Telefonlar (z-index 4)
   şeridin üstünden geçmeyi sürdürüyor. */
/* Dikiş bölümün altına asıldığında. */
.seam-low { top: auto; bottom: calc(var(--sh) / -2); }
.seam-hero { --up: var(--hero-plate); }
/* Koyu temada kağıt yok, geçilecek bir renk sınırı da yok: bant tamamen
   kalkıyor, eski rampa geri geliyor. Gizlemek yerine kaldırmak, görünmeyen
   bir öğede sonsuz animasyon döndürmemek için. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .seam { display: none; }
}
:root[data-theme='dark'] .seam { display: none; }
@media (max-width: 700px) {
  .seam { --tile: 158px; --amp: 19px; --sh: 58px; }
}

/* ---------- Kapanış ---------- */
/* Yalnız yatayda kırpılır: dikeyde de kırpılınca yukarıdan sızan sıcak leke
   bölüm sınırında düz bir çizgiye dönüşüp geçişi sertleştiriyordu. */
.closing { text-align: center; overflow-x: clip; }
/* Ortalama metne değil kutuya bağlı: flex satırı kendi ekseninde ortalanır. */
.closing .cta-row { justify-content: center; }
.closing .runner { margin: 0 auto clamp(14px, 2vw, 26px); max-width: 560px; }
.closing h2 { font-size: clamp(28px, 3.8vw, 50px); max-width: 20ch; margin: 0 auto 18px; }
.closing .lede { color: var(--muted); max-width: 48ch; margin: 0 auto 32px; font-size: 16.5px; }

/* ---------- Alt bilgi ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--bg); padding: clamp(48px, 6vw, 76px) 0 32px; }
.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)) minmax(0, 1.15fr);
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.foot-brand-col .brand { margin-right: 0; }
.foot-tagline { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 30ch; }
.foot-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.store-sm { padding: 8px 14px 8px 12px; border-radius: 12px; }
.store-sm .mark { width: 19px; height: 19px; }
.store-sm em { font-size: 9px; }
.store-sm b { font-size: 13px; }

.foot-col { display: grid; align-content: start; gap: 11px; }
.foot-col h4 { font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.foot-col a { font-size: 14.5px; color: var(--muted); text-decoration: none; transition: color 0.2s; width: fit-content; }
.foot-col a:hover { color: var(--text); }
.foot-trust p { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.foot-trust svg { width: 16px; height: 11px; flex: none; margin-top: 6px; fill: none; stroke: var(--success); stroke-width: 2.8; stroke-linecap: round; }

.foot-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; align-items: baseline; }
.foot-legal-line { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--faint); }
.foot-address { font-size: 13px; color: var(--faint); }

/* ---------- Görünürlük ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0s); }

/* ---------- Duyarlılık ---------- */
@media (max-width: 1040px) {
  .foot-top { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
  .foot-trust { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 24px; }
}
@media (max-width: 980px) {
  .voice { min-height: 74svh; }
}
/* Kullanım seçimi giderse onu ayıran çizgi de gider, yoksa boşluğu böler. */
@media (max-width: 900px) { .audience, .vrule-aud { display: none; } }
/* Ara genişlikte sütun sayısı aynı kalıyor, yalnız geniş kart satırın
   tamamına yayılıyor. Dörde düşürmek üç dar kartın birini tek başına bir
   satıra bırakıyordu. */
@media (max-width: 980px) {
  /* Bu genişlikte başlık kadrajın neredeyse tamamını kaplıyor; figürler
     içeri çekilirse yazının üstüne biniyor, kenara dönüyorlar. */
  .hero-art { --art-zoom: 0.46; --art-push-l: 4%; --art-push-r: 2%; }
  .bt-wide { grid-column: span 6; justify-content: space-between; }
  .bt-wide .bt-body { max-width: 46ch; }
  .bt-wide .mini-phone { --mw: clamp(132px, 15vw, 172px); }
}
@media (max-width: 760px) {
  /* Tablo sayfa payını aşıp kadrajın tamamına yayılıyor; kaydırma alanı
     dar kalırsa kartlar iğne ucu gibi görünüyordu. */
  .why-scroll { margin-left: calc(-1 * clamp(20px, 4vw, 40px)); margin-right: calc(-1 * clamp(20px, 4vw, 40px)); padding: 0 clamp(20px, 4vw, 40px) 4px; }
  .gap-road { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bt, .bt-wide { grid-column: span 1; }
  .bt-wide { flex-direction: column; align-items: stretch; padding-bottom: 0; gap: 0; }
  .bt-wide .bt-body { padding-bottom: 16px; }
  .bt-wide .bt-shot { display: flex; justify-content: center; margin: 0 0 calc(var(--mw) * -0.5); }
  .bt-wide .mini-phone { --mw: 150px; }
  .how-head { grid-template-columns: 1fr; gap: 22px; }
  .how-art { justify-self: center; order: -1; max-width: 300px; }
}
@media (max-width: 860px) {
  /* Dar ekranda iki sütun yan yana sığmıyor; onaylanmış tek sütun ortalı
     düzene dönüyor ve ayraçla uçak sahneden çekiliyor. */
  .hero-inner { text-align: center; }
  .hero-top { grid-template-columns: 1fr; gap: 22px; }
  .hero-split, .say-props, .say-ticks { display: none; }
  .hero-say { padding-left: 0; }
  /* Şerit dar ekranda cümlenin neredeyse tamamını kaplayıp bloğa
     dönüşüyor. Zaten burada cümle başlığın altında ortada ve tek
     başına duruyor: vurgulayacak bir şey yok. */
  .hero-body::before { display: none; }
  .hero-act { justify-items: center; padding-left: 0; }
  .hero-title { max-width: 30ch; margin-left: auto; margin-right: auto; }
  .hero-title .laurelled { justify-content: center; }
  .hero-body { margin-left: auto; margin-right: auto; }
  .cta-row, .hero-langs { justify-content: center; }
  .hero { padding-top: 100px; min-height: auto; padding-bottom: 20px; }
  /* Punto ve kutu birlikte: iddianın ilk satırı dar ekranda da tek satır
     kalsın, son satırda yalnız “en iyi yolu” dursun. */
  .hero-title { font-size: clamp(22.5px, 6vw, 36px); max-width: 30ch; }
  .art-l { clip-path: inset(0 74% 0 0); }
  .art-r { clip-path: inset(0 0 0 74%); }
  .step { min-height: 66svh; text-align: center; align-items: center; margin: 0 auto; justify-content: flex-end; padding-bottom: 26px; }
}
/* Dar ekranda üçlü sıra kadraja sığmıyor; koşu ekranı tek başına kalır. */
@media (max-width: 720px) {
  .phone-side { display: none; }
}
/* Telefonda kadraj başlığa yer bırakmıyor: figürler yazının iki yanından
   üstüne biniyordu. Sahne kalkıyor, açılışın koyu tabağı ve alttaki
   yumuşak geçiş yerinde kalıyor. */
@media (max-width: 700px) {
  .hero-art { display: none; }
}
@media (max-width: 680px) {
  .nav { --nav-h: 58px; }
  .nav-row { gap: 8px; padding: 0 15px; }
  .vrule { width: 13px; }
  .brand-name { display: none; }
  .foot-brand-col .brand-name { display: inline; }
  .emblem { width: 26px; height: 26px; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .sk-btn { padding: 11px 14px 12px 15px; font-size: 13px; gap: 6px; }
  .lang-code { display: none; }
  .lang-trigger { padding: 8px 2px; }
}
/* Dar telefonda iki rozet tek satırda kalsın diye ölçüler bir tık kısılıyor;
   sarmaları serbest bırakmak alt alta düşürüyordu. */
@media (max-width: 400px) {
  .cta-row { gap: 10px; }
  .hero .store { padding: 8px 13px 8px 11px; gap: 9px; }
  .hero .store .mark { width: 19px; height: 19px; }
  .hero .store em { font-size: 9px; }
  .hero .store b { font-size: 13px; }
}
@media (max-width: 640px) {
  .snap:nth-child(2) { margin-top: 0; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand-col { grid-column: 1 / -1; }
  .foot-bottom { flex-direction: column; }
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .why .cmp td::before { opacity: 1; animation: none; transform: none; }
  .js .split-line { clip-path: none; animation: none; }
  .js .split-mark { opacity: 1; transform: translate(-50%, -50%); animation: none; }
  .js .say-ticks { opacity: 0.5; transform: rotate(var(--rot)); animation: none; }
  .js .prop { opacity: 0.42; transform: rotate(var(--rot, 0deg)); animation: none; }
  .js .prop-wave i, .js .prop-ring path { animation: none; }
  .js .seam i { animation: none; }
  .js .hero-body::before { animation: none; }
  .js .reveal, .js .hero-phone { opacity: 1; transform: none; animation: none; }
  .js .sweepline { color: inherit; transition: none; }
  .js .gap .sweepline { color: #FAF4EF; }
  .js .band.in-view .bloom-a, .js .band.in-view .bloom-b, .js .band.in-view .bloom-c { animation: none; }
  .bloom { transition: opacity 0.4s linear; }
  .snap, .store, .scenes-sticky .phone, .emblem, .pop-panel, .pop .chev,
  .sk-btn, .sk-ink-b, .sk-chev, .audience .ul { transition: none; }
}