/*
 * Site stilleri — "Grafit" (CLAUDE.md bölüm 14). Bütün değerler tokens.css'ten (sitenin --c-*, --sp-*, --r-*, --fs-*…
 * token'ları); burada sabit renk / boşluk / köşe / ölçü yazılmaz. Sabit kalanlar sadece küçük hareket ve çizgi
 * değerleri (SVG çizgi kalınlığı, dönüş açısı, animasyon gecikmeleri), oranlar ve birimsiz satır aralıkları.
 * Düz tasarım: gradient, gölge, parıltı, bulanıklık yok; renk sadece içerikte (video, anime stil kareleri).
 * Sağdan sola: mantıksal özellikler (inline / block); zaman çizelgesi gibi çizimler her dilde dir="ltr".
 * JavaScript yok: menüler <details>, şeritler scroll-snap, beliren bölümler ve alt çubuk CSS kaydırma zaman çizelgesi.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.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;
}

/* Türkçe ğ, ş, İ vb. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.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;
}

/* ───────────────────────── Temel ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: dark;
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip: yatay taşmayı keser ama kaydırma kabı oluşturmaz (yapışkan üst bar çalışmaya devam eder) */
  overflow-x: clip;
}
img, video, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: var(--bw-2) solid var(--c-text); outline-offset: var(--focus-offset); border-radius: var(--r-xs); }
section[id] { scroll-margin-top: var(--sp-2); }
::selection { background: var(--c-s5); color: var(--c-text); }

.icon {
  inline-size: var(--icon); block-size: var(--icon); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon-xs { inline-size: var(--icon-xs); block-size: var(--icon-xs); }
[dir="rtl"] .icon-directional { transform: scaleX(-1); }

.wrap {
  inline-size: 100%; max-inline-size: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
}
.section { padding-block: var(--section-pad); }
/* Dönüşümlü şerit tonu, sayfadan bir yüzey basamağı yukarıda: uzun sayfayı gradient olmadan bölümlere ayırır.
   Doğrudan şeridin üstünde duran kutular da bir basamak çıkar (s1 → s2), şeritle aralarındaki fark korunur. */
.band { --c-notch: var(--c-band); background: var(--c-band); border-block: var(--bw) solid var(--c-line); }
.band .eyebrow-no { background: var(--c-s2); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Kaydırmalı şeritler (stil kareleri; telefonlarda modlar): ekran kenarına taşar, kenar boşluğuna oturur. Her şerit
   kendi kırılımında yeniden düz ızgara olur. */
.rail {
  display: grid; grid-auto-flow: column; gap: var(--sp-3);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-left: calc(-1 * var(--gutter-l)); margin-right: calc(-1 * var(--gutter-r));
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  scroll-padding-left: var(--gutter-l); scroll-padding-right: var(--gutter-r);
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* ───────────────────────── Düğmeler, haplar, etiketler ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--btn-h); padding-inline: var(--sp-6);
  border-radius: var(--r-pill); border: var(--bw) solid transparent;
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary { background: var(--c-light); color: var(--c-on-light); }
.btn-primary:hover { background: var(--c-light-hover); }
.btn-secondary { background: var(--c-s2); border-color: var(--c-line-2); color: var(--c-text); }
.btn-secondary:hover { background: var(--c-s3); border-color: var(--c-line-3); }
.btn-compact { min-block-size: var(--btn-h-sm); padding-inline: var(--sp-4); font-size: var(--fs-ui); }
/* Ana eylemin yanındaki ikincil eylem: yazı + ok, kutusuz (yine de 44 px dokunma alanı). */
.link-quiet {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap); padding-inline: var(--sp-2);
  border-radius: var(--r-xs); color: var(--c-text-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1;
  transition: color var(--dur) var(--ease);
}
.link-quiet:hover { color: var(--c-text); }

/* Google'ın resmî rozeti: görsel değiştirilmez, sadece yüksekliği verilir. */
.play-badge { display: inline-flex; border-radius: var(--r-sm); flex: none; }
.play-badge img { block-size: var(--badge-h); inline-size: auto; }

.pill-label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-block-size: var(--ctl-md); padding-inline: var(--sp-3) var(--sp-4);
  border: var(--bw) solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-s1);
  color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.pill-dot { inline-size: var(--dot); block-size: var(--dot); border-radius: var(--r-pill); background: var(--c-text); flex: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.eyebrow-no {
  display: inline-grid; place-items: center; min-inline-size: var(--ctl-md); block-size: var(--ctl-xs); padding-inline: var(--sp-2);
  border: var(--bw) solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-s1);
  color: var(--c-text); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--tr-mono);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Uzun bir çeviri yuvarlak bir kutunun içinde ikinci satıra geçer (asla üç nokta değil); tek satırken köşe yüksekliğin
   yarısından büyük olduğu için yine hap gibi görünür. */
.chip {
  display: flex; align-items: center; min-inline-size: 0; max-inline-size: 100%;
  min-block-size: calc(var(--ctl-sm) + 2 * var(--bw)); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md); border: var(--bw) solid var(--c-line-2); background: var(--c-s2);
  color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: var(--lh-snug);
}

.icon-chip {
  display: inline-grid; place-items: center; flex: none;
  inline-size: var(--chip-icon); block-size: var(--chip-icon);
  border-radius: var(--r-sm); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); color: var(--c-text);
}

/* Sadece ekran okuyucular için metin (görünmez, yer kaplamaz) */
.visually-hidden {
  position: absolute; inline-size: var(--bw); block-size: var(--bw); padding: 0; margin: calc(-1 * var(--bw)); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Bölüm başı: etiket + iki tonlu başlık + açıklama */
.section-head { display: grid; gap: var(--sp-4); margin-block-end: var(--head-gap); }
.section-title {
  font-size: var(--fs-h2); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: var(--fw-semibold);
  text-wrap: balance;
}
.section-title > span { display: block; }
.section-title .muted { color: var(--c-title-muted); }
.section-body { color: var(--c-text-2); font-size: var(--fs-body); max-inline-size: var(--measure); text-wrap: pretty; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 1fr) minmax(0, var(--head-aside)); align-items: end; column-gap: var(--sp-12); }
  .section-head .eyebrow { grid-column: 1 / -1; }
  .section-body { font-size: var(--fs-h4); }
}

/* Kareler (çizimlerin içindeki stil görselleri) */
.pic { display: block; overflow: hidden; background: var(--c-s3); }
.pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 24%; }

/* Ses dalgası çubukları (süs; yükseklikler sıradan, satır içi stil yok) */
.wave { display: flex; align-items: center; gap: var(--sp-0-5); block-size: 100%; color: var(--c-text-3); }
.wave > span { flex: 1 1 0; min-inline-size: var(--wave-bar-min); max-inline-size: var(--wave-bar-max); block-size: 42%; border-radius: var(--r-pill); background: currentColor; }
.wave > span:nth-child(3n) { block-size: 72%; }
.wave > span:nth-child(4n+1) { block-size: 28%; }
.wave > span:nth-child(5n+2) { block-size: 92%; }
.wave > span:nth-child(7n) { block-size: 56%; }
.wave > span:nth-child(6n+5) { block-size: 18%; }
.wave > span:nth-child(11n+3) { block-size: 64%; }

/* İlerleme çizgisi (hero telefonu, iş kartı) */
.track { block-size: var(--track-h); border-radius: var(--r-pill); background: var(--c-track); overflow: hidden; }
.track-fill { display: block; block-size: 100%; inline-size: 72%; border-radius: inherit; background: var(--c-text); }

/* ───────────────────────── Üst bar ───────────────────────── */
/* Telefon / tablet: akışın içinde (JavaScript'siz açık menü bir bölüme atlayınca yukarıda kalır). Masaüstü: yapışkan. */
.site-header {
  position: relative; z-index: 50;
  background: var(--c-bg); border-block-end: var(--bw) solid var(--c-line);
}
.header-inner { display: flex; align-items: center; gap: var(--sp-4); block-size: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); min-block-size: var(--tap); }
/* Logo (saydam PNG, gümüş): zemin yok; kare kutuya sığar */
.mark { display: block; inline-size: var(--ctl-lg); block-size: var(--ctl-lg); object-fit: contain; flex: none; }
.site-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; }
.header-cta { display: none; }
/* Web uygulamasına giriş: her genişlikte; telefonda dokunma alanı kadar yüksek */
.header-login { min-block-size: var(--tap); white-space: nowrap; }
/* Telefonda sadece ikon (yuvarlak, dokunma alanı kadar); ad ekran okuyucuya kalır */
@media (max-width: 479px) {
  .header-login { inline-size: var(--tap); padding: 0; }
  .header-login-text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.hero-web { min-block-size: var(--tap); }

.lang-menu { position: relative; }
.lang-trigger, .menu-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-block-size: var(--tap); min-inline-size: var(--tap); padding-inline: var(--sp-3);
  border-radius: var(--r-pill); border: var(--bw) solid var(--c-line-2); background: var(--c-s1);
  color: var(--c-text); font-size: var(--fs-ui); font-weight: var(--fw-semibold);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-trigger:hover, .menu-trigger:hover, details[open] > .lang-trigger, details[open] > .menu-trigger { background: var(--c-s3); border-color: var(--c-line-3); }
.lang-list {
  position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline-end: 0; z-index: 3;
  min-inline-size: var(--menu-min-w); padding: var(--sp-2);
  background: var(--c-s2); border: var(--bw) solid var(--c-line-2); border-radius: var(--r-md);
}
.lang-list a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-block-size: var(--tap); padding-inline: var(--sp-3); border-radius: var(--r-sm);
  color: var(--c-text-2); font-size: var(--fs-body-sm);
}
.lang-list a:hover { background: var(--c-s4); color: var(--c-text); }
.lang-list a[aria-current] { color: var(--c-text); }
.lang-list a .icon { opacity: 0; }
.lang-list a[aria-current] .icon { opacity: 1; }
/* Açık dil listesi: <summary>'ye ait saydam bir katman; her yere dokunmak onu kapatır (JavaScript'siz). */
.lang-menu[open] > .lang-trigger::after { content: ""; position: fixed; inset: 0; z-index: 2; cursor: default; }

.menu-trigger { padding-inline: 0; }
.menu-trigger .icon-close { display: none; }
.menu[open] .menu-trigger .icon-open { display: none; }
.menu[open] .menu-trigger .icon-close { display: block; }
/* Açık menü: üst barın altındaki sayfanın üstüne düz bir karartma. <summary>'ye aittir, dokununca menü JavaScript'siz
   kapanır. Sabit (fixed) değil: sayfayı kilitlemek yerine üst barla birlikte yukarı kayar. */
.menu[open] > .menu-trigger::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 2;
  block-size: var(--scrim-h); background: var(--c-scrim); cursor: default;
}
.menu-panel {
  position: absolute; inset-block-start: calc(100% + var(--sp-2)); inset-inline: var(--sp-3); z-index: 3;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-2); background: var(--c-s2); border: var(--bw) solid var(--c-line-2); border-radius: var(--r-lg);
}
.menu-panel nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.menu-panel nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-block-size: var(--tap-lg); padding-inline: var(--sp-4); border-radius: var(--r-md);
  background: var(--c-s3); border: var(--bw) solid var(--c-line-2);
  font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-snug);
}
.menu-panel nav a:hover { background: var(--c-s4); }
.menu-panel nav a .icon { color: var(--c-text-3); }
.menu-panel .btn { inline-size: 100%; min-block-size: var(--tap-lg); }
@media (max-width: 359px) { .menu-panel nav { grid-template-columns: minmax(0, 1fr); } }

/* Telefonlar: dil listesi de bölüm menüsü gibi üst bardan, aynı karartmanın üstüne açılır. */
@media (max-width: 639px) {
  .lang-menu { position: static; }
  .lang-list { inset-inline-end: var(--sp-3); }
  .lang-menu[open] > .lang-trigger::after {
    position: absolute; inset-inline: 0; inset-block: 100% auto; block-size: var(--scrim-h); background: var(--c-scrim);
  }
}
@media (min-width: 640px) {
  .header-cta { display: inline-flex; }
}
/* Dokunmatik tabletler (menü henüz yokken): düğme en az dokunma alanı kadar yüksek */
@media (min-width: 640px) and (max-width: 1039px) {
  .header-cta { min-block-size: var(--tap); }
}
@media (min-width: 1040px) {
  .site-header { position: sticky; inset-block-start: 0; }
  section[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
  .site-nav { display: flex; gap: var(--sp-1); margin-inline-start: var(--sp-8); }
  .site-nav a {
    display: inline-flex; align-items: center; min-block-size: var(--btn-h-sm); padding-inline: var(--sp-3);
    border-radius: var(--r-pill); color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-medium);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .site-nav a:hover { color: var(--c-text); background: var(--c-s2); }
  .menu { display: none; }
  .lang-trigger { min-block-size: var(--btn-h-sm); }
}

/* ───────────────────────── Hero ───────────────────────── */
.hero { padding-block: var(--sp-6) var(--sp-10); }
.hero-grid { display: grid; gap: var(--sp-8); }
.hero-copy { display: grid; justify-items: start; gap: var(--sp-5); align-content: center; }
.hero-title {
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold);
  margin-block-start: var(--sp-1); text-wrap: balance;
}
.hero-title span { display: block; }
.hero-title .muted { color: var(--c-title-muted); }
.hero-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); font-weight: var(--fw-medium); letter-spacing: var(--tr-snug); max-inline-size: var(--measure-md); text-wrap: pretty; }
.hero-sub { color: var(--c-text-2); max-inline-size: var(--measure-lg); text-wrap: pretty; }
/* Çince: satır cümle içinde değil noktalamada kırılır ("一部手机就 / 够了。" olmasın); sığmayan cümle yine kırılır. */
:root:lang(zh) .hero-lead { word-break: keep-all; overflow-wrap: anywhere; }
/* Güvence maddelerinde de, ama sadece geniş satırda: telefonda keep-all sadece noktalamada böldüğü için kısa bir
   parça ("剪辑、") satırda tek başına kalıyordu. */
@media (min-width: 480px) {
  :root:lang(zh) .point { word-break: keep-all; overflow-wrap: anywhere; }
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-block-start: var(--sp-1); }
.hero-note { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text-3); font-size: var(--fs-sm); }
@media (max-width: 399px) {
  .hero-actions { column-gap: var(--sp-2); }
}
/* Telefonlar: metnin parçaları hero ızgarasına katılır; telefon (ürünün kendisi) ilk ekrana çıkar, uzun alt satır onu
   izler: etiket → başlık → vurgu → eylemler → not → telefon → alt satır. */
@media (max-width: 639px) {
  .hero { padding-block: var(--sp-4) var(--sp-8); }
  .hero-grid { gap: var(--sp-4); justify-items: start; }
  .hero-copy { display: contents; }
  .hero-copy > .pill-label { order: 1; }
  .hero-title { order: 2; }
  .hero-lead { order: 3; }
  .hero-actions { order: 4; margin-block-start: 0; }
  .hero-note { order: 5; }
  .hero-stage { order: 6; justify-self: stretch; margin-block-start: var(--sp-1); }
  .hero-sub { order: 7; }
}
@media (max-width: 399px) {
  .hero { padding-block-start: var(--sp-3); }
  .hero-grid { row-gap: var(--sp-3); }
}

/* 640'tan itibaren sayfanın tek çerçeveli sahnesi: halkalı kutunun içinde hero telefonu. Telefonlarda telefon doğrudan
   sayfada durur (aşağıdaki editör telefonu gibi); kutu ona sadece ince bir pay bırakırdı. */
.hero-stage { position: relative; display: grid; place-items: center; overflow: clip; }
@media (min-width: 640px) {
  .hero-stage { padding-block: var(--sp-6); border-radius: var(--r-2xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
}
.hero-stage > * { grid-area: 1 / 1; }
/* Halkalar süstür: eşit eksi blok payları yüksekliklerini sıfırlar, sahnenin boyunu sadece telefon belirler. */
.ring { display: none; inline-size: 132%; aspect-ratio: 1; margin-block: -66%; border-radius: 50%; border: var(--bw) solid var(--c-line); }
.ring-2 { inline-size: 98%; margin-block: -49%; border-color: var(--c-line-2); }
.ring-3 { inline-size: 64%; margin-block: -32%; border-color: var(--c-line-2); }
@media (min-width: 640px) { .ring { display: block; } }

.float-card {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--sp-3);
  max-inline-size: 62%; padding: var(--sp-2); padding-inline-end: var(--sp-4);
  background: var(--c-s2); border: var(--bw) solid var(--c-line-3); border-radius: var(--r-md);
}
.float-style { inset-block-start: 76%; inset-inline-start: max(var(--sp-3), calc(50% - var(--phone-w) / 2 - var(--float-pull))); }
.float-style .pic { inline-size: var(--float-thumb); aspect-ratio: 5 / 7; flex: none; border-radius: var(--r-xs); outline: var(--bw-2) solid var(--c-text); outline-offset: var(--ring-offset); }
.float-text { display: grid; min-inline-size: 0; line-height: var(--lh-snug); }
.float-text strong { font-size: var(--fs-ui); font-weight: var(--fw-semibold); }
.float-text span { font-size: var(--fs-xs); color: var(--c-text-2); }
.float-audio { inset-block-start: 88%; inset-inline-end: max(var(--sp-3), calc(50% - var(--phone-w) / 2 - var(--float-pull))); padding-inline-start: var(--sp-2); gap: var(--sp-3); }
/* Telefonlar: tek etiket, ekran görüntüsünün alt kısmında (mod adlarını örtmez). */
@media (max-width: 639px) {
  .float-audio { display: none; }
  .float-style { inset-block-start: 80%; }
}
.float-audio .icon-chip { inline-size: var(--ctl-lg); block-size: var(--ctl-lg); border-radius: var(--r-sm); background: var(--c-selected); color: var(--c-text); border-color: var(--c-line-4); }
.float-audio .wave { inline-size: var(--float-wave); block-size: var(--ctl-xs); color: var(--c-text-2); }
.float-audio .wave > span:nth-child(-n+8) { background: var(--c-text); }
.float-audio .mono { font-size: var(--fs-xs); color: var(--c-text-2); }

/* ≥1000 (diğer bölümler gibi): yazı ve sahne yan yana; 1024 × 768 tablette telefon ilk ekranda. */
@media (min-width: 1000px) {
  .hero { padding-block: var(--sp-12) var(--sp-16); }
  .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: var(--sp-12); }
  .hero-copy { gap: var(--sp-6); }
  .hero-stage { padding-block: var(--sp-12); }
  /* Ekran görüntüsünün alt yarısında: başlığı ve ilk iki modun adını örtmez. */
  .float-style { inset-block-start: 72%; }
  .float-audio { inset-block-start: 84%; }
}

/* ───────────────────────── Telefon (CSS ile çizilen uygulama) — tek parça, iki ekran ───────────────────────── */
.phone {
  position: relative; z-index: 1;
  inline-size: var(--phone-w); aspect-ratio: 9 / 19.2; padding: var(--phone-bezel);
  border-radius: var(--phone-r); background: var(--c-s2); border: var(--bw) solid var(--c-line-3);
}
.phone::before, .phone::after {
  content: ""; position: absolute; inset-inline-end: calc(-1 * var(--phone-key)); inline-size: var(--phone-key); border-radius: var(--r-2xs); background: var(--c-line-3);
}
.phone::before { inset-block-start: 22%; block-size: 9%; }
.phone::after { inset-block-start: 34%; block-size: 6%; }
.screen {
  position: relative; display: flex; flex-direction: column; block-size: 100%; overflow: hidden;
  border-radius: calc(var(--phone-r) - var(--phone-bezel)); background: var(--c-bg);
  font-size: var(--fs-xs); line-height: var(--lh-snug);
}
.island { position: absolute; inset-block-start: var(--island-top); inset-inline: 0; margin-inline: auto; inline-size: 30%; block-size: var(--island-h); border-radius: var(--r-pill); background: var(--c-ink); z-index: 3; }
.statusbar { display: flex; align-items: center; justify-content: space-between; block-size: var(--status-h); padding-inline: var(--sp-6); flex: none; font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.status-icons { display: flex; align-items: center; gap: var(--sp-1-5); }
.signal { display: flex; align-items: flex-end; gap: var(--sp-0-5); block-size: var(--status-glyph); }
.signal span { inline-size: var(--signal-bar); border-radius: var(--r-pill); background: var(--c-text); }
.signal span:nth-child(1) { block-size: 35%; }
.signal span:nth-child(2) { block-size: 60%; }
.signal span:nth-child(3) { block-size: 80%; }
.signal span:nth-child(4) { block-size: 100%; }
.battery { inline-size: var(--battery-w); block-size: var(--status-glyph); border-radius: var(--r-3xs); border: var(--bw) solid var(--c-text-3); padding: var(--bw); }
.battery::before { content: ""; display: block; inline-size: 72%; block-size: 100%; border-radius: calc(var(--r-3xs) / 2); background: var(--c-text); }

.app-round { display: grid; place-items: center; inline-size: var(--ctl-sm); block-size: var(--ctl-sm); border-radius: var(--r-pill); background: var(--c-s2); border: var(--bw) solid var(--c-line-2); }
/* Hero: uygulamanın gerçek ekran görüntüsü ekranı doldurur (kendi durum çubuğuyla; çerçeveyle aynı oran, üstten hizalı). */
.screen-shot { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }

/* ───────────────────────── Vitrin + kısa özet ───────────────────────── */
.showcase { padding-block-end: var(--section-pad); }
.showcase-grid { display: grid; gap: var(--sp-3); }
.video-card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
.video-card video, .video-still { inline-size: 100%; block-size: auto; aspect-ratio: 960 / 544; object-fit: cover; }
/* Durağan kare: sadece hareket azaltılmışsa videonun yerine geçer (aşağıdaki "Hareket" bölümü). */
.video-still { display: none; }
.video-tag {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl-sm); padding-inline: var(--sp-3);
  border-radius: var(--r-pill); background: var(--c-scrim); color: var(--c-text); font-size: var(--fs-xs); font-weight: var(--fw-medium);
}
.rec-dot { inline-size: var(--dot); block-size: var(--dot); border-radius: var(--r-pill); background: var(--c-text); }
/* Telefonlar: sayfadaki tek gerçek üretim daha büyük görünsün diye daha uzun bir kırpım. */
@media (max-width: 559px) {
  .video-card video, .video-still { aspect-ratio: 4 / 3; }
}
@media (max-width: 359px) {
  .video-tag { inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); gap: var(--sp-1-5); padding-inline: var(--sp-2); }
}

/* Telefonlar ve ≥960: çizgili satırlı tek bir özellik kartı (değer | etiket + ayrıntı); her etiket aynı hizada başlar. */
.facts { display: grid; border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
.fact {
  display: grid; grid-template-columns: var(--fact-col) minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; align-content: center;
  padding: var(--sp-4) var(--sp-5);
}
.fact + .fact { border-block-start: var(--bw) solid var(--c-line); }
.fact dt { grid-column: 2; font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.fact-value { grid-column: 1; grid-row: 1 / span 2; font-size: var(--fs-stat); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.fact-unit { font-size: var(--fs-unit); letter-spacing: 0; margin-inline-start: var(--unit-gap); color: var(--c-text-2); }
.fact-detail { grid-column: 2; font-size: var(--fs-ui); color: var(--c-text-2); line-height: var(--lh-snug); text-wrap: pretty; }
/* 560–959: videonun altında 2 × 2 kart (videonun köşesiyle). */
@media (min-width: 560px) and (max-width: 959px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); background: none; border: 0; border-radius: 0; }
  .fact {
    display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; justify-content: flex-start;
    padding: var(--sp-5); border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line);
  }
  .fact + .fact { border-block-start: var(--bw) solid var(--c-line); }
  .fact-value { order: -1; margin-block-end: var(--sp-3); }
  .fact-detail { text-wrap: balance; }
}
/* ≥960: videonun yanında, dört satır videonun yüksekliğini paylaşır. */
@media (min-width: 960px) {
  .showcase-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .video-card video, .video-still { block-size: 100%; }
  .facts { grid-template-rows: repeat(4, minmax(0, 1fr)); }
  .fact { padding: var(--sp-4) var(--sp-6); }
}

/* ───────────────────────── 01 Stiller: temas kâğıdı ───────────────────────── */
.sheet { display: grid; gap: var(--sp-8); }
.sheet-panel { display: grid; gap: var(--sp-8); }
.sheet-cat { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); }
.sheet-group { display: grid; gap: var(--sp-4); }
/* Kategori seçici (uygulamadaki segmentli seçici gibi): sadece :has() bilen tarayıcıda. Seçili radyonun sırası, aynı
   sıradaki paneli açar; diğer paneller gizlenir ve panel başlıkları sadece ekran okuyucuya kalır. Uzun çeviride
   seçenekler alt satıra geçer (asla üç nokta yok). */
.sheet-tabs { display: none; }
@supports selector(:has(*)) {
  .sheet-tabs {
    display: flex; flex-wrap: wrap; justify-self: start; gap: var(--sp-0-5); min-inline-size: 0; max-inline-size: 100%;
    margin: 0; padding: var(--sp-0-5); border-radius: var(--r-lg); background: var(--c-s2); border: var(--bw) solid var(--c-line-2);
  }
  .sheet-tab {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1-5);
    min-block-size: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill); border: var(--bw) solid transparent;
    color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-semibold); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  }
  .sheet-tab:hover { color: var(--c-text); }
  /* Telefonda eşit iki sütunlu ızgara (uzun çeviride düzensiz kırılmasın) */
  @media (max-width: 559px) {
    .sheet-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
    .sheet-tab { padding-inline: var(--sp-2); text-align: center; }
  }
  .sheet-tab-count { color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
  .sheet-tab:has(input:checked) { background: var(--c-selected); color: var(--c-text); border-color: var(--c-text); }
  .sheet-tab:has(input:checked) .sheet-tab-count { color: var(--c-text-2); }
  .sheet-tab:has(input:focus-visible) { outline: var(--bw-2) solid var(--c-text); outline-offset: var(--focus-offset); }
  .sheet-cat {
    position: absolute; inline-size: var(--bw); block-size: var(--bw); padding: 0; margin: calc(-1 * var(--bw)); overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .sheet:has(.sheet-tab:nth-of-type(1) input:checked) .sheet-panel:not(:nth-of-type(1)),
  .sheet:has(.sheet-tab:nth-of-type(2) input:checked) .sheet-panel:not(:nth-of-type(2)),
  .sheet:has(.sheet-tab:nth-of-type(3) input:checked) .sheet-panel:not(:nth-of-type(3)),
  .sheet:has(.sheet-tab:nth-of-type(4) input:checked) .sheet-panel:not(:nth-of-type(4)),
  .sheet:has(.sheet-tab:nth-of-type(5) input:checked) .sheet-panel:not(:nth-of-type(5)),
  .sheet:has(.sheet-tab:nth-of-type(6) input:checked) .sheet-panel:not(:nth-of-type(6)) { display: none; }
}
.sheet-label { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.sheet-label::after { content: ""; flex: 1; block-size: var(--bw); background: var(--c-line-2); }
.sheet-count { order: 2; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.sheet-grid { grid-auto-columns: var(--frame-rail-w); }
.frame { display: grid; gap: var(--sp-3); align-content: start; }
.frame .pic { position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-md); border: var(--bw) solid var(--c-line); }
/* Telefon / tablet (şerit): sadece ad + ayrıntı. Masaüstü ızgarası: adın önünde küçük bir sıra numarası. */
/* relative: ekran okuyucu metni (.visually-hidden) kaydırılan şeridin içinde kalsın, sayfayı yana taşırmasın */
.frame-meta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-0-5); }
.frame-no { display: none; color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.frame-name { font-size: var(--fs-ui); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.frame-detail { font-size: var(--fs-ui); color: var(--c-text-2); line-height: var(--lh-snug); }
.frame.is-default .pic { outline: var(--bw-2) solid var(--c-text); outline-offset: var(--focus-offset); }
.frame-check {
  position: absolute; inset-block-start: var(--sp-2); inset-inline-end: var(--sp-2);
  display: grid; place-items: center; inline-size: var(--ctl-xs); block-size: var(--ctl-xs); border-radius: var(--r-pill);
  background: var(--c-selected); color: var(--c-text); outline: var(--bw) solid var(--c-text); outline-offset: calc(-1 * var(--bw));
}
.frame-check .icon { stroke-width: 2.6; }
/* ≥900: kutusuz, kareler doğrudan şeridin üstünde (sayfanın tek çerçeveli sahnesi hero'dur). */
@media (min-width: 900px) {
  .sheet, .sheet-panel { gap: var(--sp-10); }
  .sheet-grid {
    grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto;
    overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; row-gap: var(--sp-8); column-gap: var(--sp-4);
  }
  .frame-meta { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; }
  .frame-no { display: block; }
  .frame-detail { grid-column: 2; }
}

/* ───────────────────────── Kart tabanı (bento) ───────────────────────── */
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); overflow: hidden; }
.viz {
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-4);
  block-size: var(--viz-h); margin: var(--sp-2); border-radius: var(--r-lg); background: var(--c-s2); border: var(--bw) solid var(--c-line);
  overflow: hidden; flex: none;
}
.card-body { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) var(--sp-6); align-content: start; flex: 1; }
.card-head { display: flex; align-items: center; gap: var(--sp-3); }
.card-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.card-no { margin-inline-start: auto; color: var(--c-text-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-text { color: var(--c-text-2); font-size: var(--fs-body-sm); text-wrap: pretty; }
.card .chips { margin-block-start: var(--sp-1); }
@media (min-width: 720px) {
  .card-body { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
  /* "01/06" sayacı sadece telefon şeridi için; orada altı kartın beşi ekran dışındadır. */
  .card-no { display: none; }
}

/* Numaralı etiket hapları: uygulamanın @ etiketleri (referanslar, karakterler, çekimler) */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-1); block-size: var(--ctl-xs); padding-inline: var(--sp-1) var(--sp-2); flex: none;
  border-radius: var(--r-pill); background: var(--c-s4); border: var(--bw) solid var(--c-line-3);
  color: var(--c-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1;
}
.tag .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); color: var(--c-text-2); margin-inline-start: var(--sp-0-5); }
.tag img { inline-size: var(--ctl-3xs); block-size: var(--ctl-3xs); border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.sk { display: block; block-size: var(--sk-h); border-radius: var(--r-pill); background: var(--c-s5); }
.w20 { inline-size: 20%; }
.w28 { inline-size: 28%; }
.w34 { inline-size: 34%; }
.w44 { inline-size: 44%; }
.w56 { inline-size: 56%; }
.at {
  display: grid; place-items: center; inline-size: var(--ctl-xs); block-size: var(--ctl-xs); border-radius: 50%; flex: none;
  background: var(--c-selected); color: var(--c-text); outline: var(--bw) solid var(--c-text); outline-offset: calc(-1 * var(--bw));
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: 1;
}
.caret { inline-size: var(--bw-2); block-size: var(--ctl-3xs); border-radius: var(--r-pill); background: var(--c-text); flex: none; }

/* ───────────────────────── 02 Modlar: bento (telefonlarda kaydırmalı şerit) ───────────────────────── */
.modes-bento { grid-auto-columns: var(--mode-rail-w); }
/* Telefonlar (ekranda tek kart): haplar metni izler. ≥720 (yan yana kartlar): her kartın alt kenarına oturur, bir
   kart sırası metin uzunluğu ne olursa olsun tek çizgide biter. */
.modes-bento .card-body { grid-template-rows: auto auto 1fr; }
@media (max-width: 719px) {
  .modes-bento .card-body { padding-inline: var(--sp-4); }
  .modes-bento .card-head { gap: var(--sp-2); }
}
/* 320 sınıfı telefonlar: sayaç başlıkla aynı satırda iki kelimelik mod adlarını ikiye bölüyordu; yandaki kartın görünen
   kenarı zaten "daha var" der. */
@media (max-width: 359px) {
  .card-no { display: none; }
}
/* Şerit (telefon / tablet) klavyeyle de kaydırılır: odak çerçevesi ekran kenarında kesilmesin diye içeride. */
.rail:focus-visible { outline-offset: calc(-1 * var(--bw-2)); }
@media (min-width: 720px) {
  .modes-bento .chips { align-self: end; }
  .modes-bento {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none;
  }
  .mode-normal, .mode-continue { grid-column: 1 / -1; }
}
/* 720–1279: küçük kartlar ikişer; tek sayıda küçük kart varsa sonuncusu satırı tek başına doldurur. */
@media (min-width: 720px) and (max-width: 1279px) {
  .mode-sm:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .modes-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
  .mode-normal { grid-column: span 7; }
  .mode-continue { grid-column: span 5; }
  .mode-normal .viz, .mode-continue .viz { block-size: var(--viz-h-lg); }
}
/* 1100–1279: dört küçük mod 2 × 2 yatay kart (çizim başta, metin sonda). */
@media (min-width: 1100px) and (max-width: 1279px) {
  .mode-sm { grid-column: span 6; flex-direction: row; }
  .mode-sm .viz { flex: 0 0 44%; block-size: auto; min-block-size: var(--viz-h-side); }
  .mode-sm .card-body { align-content: center; padding-block: var(--sp-5); padding-inline: var(--sp-3) var(--sp-6); }
  .modes-bento .sr-row { gap: var(--sp-2); }
  .modes-bento .voice { padding-inline: var(--sp-3); }
}
@media (min-width: 1280px) {
  /* Sarılan satırlar: üstte 7 + 5 oranı, altta küçük kartlar tek satırda eşit (dört ya da beş kart; sayıya göre). */
  .modes-bento { display: flex; flex-wrap: wrap; }
  .mode-normal { flex: 0 0 calc((100% - var(--sp-4)) * 7 / 12); }
  .mode-continue { flex: 0 0 calc((100% - var(--sp-4)) * 5 / 12); }
  .mode-sm { flex: 1 1 0; min-inline-size: calc((100% - 4 * var(--sp-4)) / 5 - var(--bw)); }
  .mode-sm .card-body { padding-inline: var(--sp-5); }
  /* Dört dar kart: özellikler hap yerine kısa bir liste (her satırda bir tane, önünde ince çizgi); iki ya da üç satır
     bilerek alt alta. */
  .mode-sm .chips { display: grid; gap: var(--sp-1-5); }
  .mode-sm .chip {
    align-items: flex-start; gap: var(--sp-2); min-block-size: 0; padding: 0;
    border: 0; border-radius: 0; background: none; font-size: var(--fs-sm);
  }
  .mode-sm .chip::before {
    content: ""; flex: none; inline-size: var(--list-dash); block-size: var(--bw);
    margin-block-start: var(--list-dash-y); background: var(--c-line-4);
  }
}

/* Sıfırdan video: referanslar → sahne → video */
.flow { display: flex; align-items: center; gap: var(--sp-3); }
.refs { display: grid; gap: var(--sp-2); }
.ref { position: relative; display: grid; place-items: center; inline-size: var(--ref); block-size: var(--ref); border-radius: var(--r-sm); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); overflow: hidden; }
.ref .pic { position: absolute; inset: 0; }
.ref-audio { padding-inline: var(--sp-1-5); }
.ref-audio .wave { block-size: 60%; color: var(--c-text-2); }
.ref-tag { position: absolute; inset-block-end: var(--sp-1); inset-inline-start: var(--sp-1); display: grid; place-items: center; inline-size: var(--ref-tag); block-size: var(--ref-tag); border-radius: var(--r-2xs); background: var(--c-scrim); color: var(--c-text); }
.ref-tag .icon { inline-size: var(--icon-2xs); block-size: var(--icon-2xs); stroke-width: 2.2; }
.flow-arrow { display: grid; place-items: center; inline-size: var(--ctl-sm); block-size: var(--ctl-sm); border-radius: var(--r-pill); border: var(--bw) solid var(--c-line-3); color: var(--c-text-2); flex: none; }
.flow-arrow .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); }
.script-card { display: none; inline-size: var(--script-card); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); gap: var(--sp-2-5); }
.sx-l { display: flex; align-items: center; gap: var(--sp-1-5); }
.out { position: relative; block-size: var(--out-h); aspect-ratio: 9 / 16; border-radius: var(--r-md); border: var(--bw) solid var(--c-line-3); }
.out-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; inline-size: var(--ctl-lg); block-size: var(--ctl-lg); border-radius: var(--r-pill); background: var(--c-scrim); color: var(--c-text); }
.flow-arrow-b { display: none; }
@media (min-width: 560px) { .script-card, .flow-arrow-b { display: grid; } }

/* Devam ettir: zaman çizelgesinde klip + yeni bölüm */
.cont { display: grid; gap: var(--sp-3); inline-size: 100%; padding-inline: var(--sp-5); }
.cont-track { display: flex; align-items: stretch; gap: var(--sp-0-5); block-size: var(--cont-h); }
.cont-track .pic { flex: 1; border-radius: var(--r-xs); }
.cont-track .pic img { object-position: 50% 30%; transform-origin: 50% 28%; }
.cont-track .pic:nth-child(2) img { transform: scale(1.18); }
.cont-track .pic:nth-child(3) img { transform: scale(1.4); }
.cont-track .pic:nth-child(4) img { transform: scale(1.66); }
.cont-join { position: relative; inline-size: var(--bw-2); margin-inline: var(--sp-1); background: var(--c-text); border-radius: var(--r-pill); flex: none; }
.cont-join::before {
  content: ""; position: absolute; inset-block-start: calc(var(--knob-sm) / -2); inset-inline-start: calc((var(--bw-2) - var(--knob-sm)) / 2);
  inline-size: var(--knob-sm); block-size: var(--knob-sm); border-radius: var(--r-pill); background: var(--c-text);
}
.cont-new { flex: 1.6; display: grid; place-items: center; border-radius: var(--r-xs); border: var(--bw-1-5) dashed var(--c-line-3); color: var(--c-text-2); }
.cont-ruler { display: flex; justify-content: space-between; color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--fs-2xs); }
.cont-ruler span:last-child { color: var(--c-text); }
@media (min-width: 1100px) { .cont { padding-inline: var(--sp-8); } }

/* Büyüt: küçükten büyüğe, kırpma işaretleriyle */
.up { display: flex; align-items: center; gap: var(--sp-4); }
.up-small { inline-size: var(--up-small); aspect-ratio: 9 / 16; border-radius: var(--r-xs); border: var(--bw) solid var(--c-line-2); }
.up-big { position: relative; block-size: var(--up-big-h); aspect-ratio: 9 / 16; }
.up-big .pic { block-size: 100%; border-radius: var(--r-sm); }
.corner { position: absolute; inline-size: var(--corner); block-size: var(--corner); border: 0 solid var(--c-text); }
.corner-a { inset-block-start: calc(-1 * var(--sp-1-5)); inset-inline-start: calc(-1 * var(--sp-1-5)); border-block-start-width: var(--bw-2); border-inline-start-width: var(--bw-2); border-start-start-radius: var(--r-2xs); }
.corner-b { inset-block-start: calc(-1 * var(--sp-1-5)); inset-inline-end: calc(-1 * var(--sp-1-5)); border-block-start-width: var(--bw-2); border-inline-end-width: var(--bw-2); border-start-end-radius: var(--r-2xs); }
.corner-c { inset-block-end: calc(-1 * var(--sp-1-5)); inset-inline-start: calc(-1 * var(--sp-1-5)); border-block-end-width: var(--bw-2); border-inline-start-width: var(--bw-2); border-end-start-radius: var(--r-2xs); }
.corner-d { inset-block-end: calc(-1 * var(--sp-1-5)); inset-inline-end: calc(-1 * var(--sp-1-5)); border-block-end-width: var(--bw-2); border-inline-end-width: var(--bw-2); border-end-end-radius: var(--r-2xs); }
.up-chip { position: absolute; inset-block-end: var(--sp-2); inset-inline: 0; margin-inline: auto; inline-size: max-content; padding: var(--sp-0-5) var(--sp-2); border-radius: var(--r-pill); background: var(--c-scrim); font-family: var(--font-mono); font-size: var(--fs-2xs); }

/* Sıfırdan görsel: karakter sayfası — 2 × 3 pano, aynı karakter; üstte tam boy (ön, aynalı yan, arka), altta yüz
   yakın planları (ortadaki aynalı). Kâğıt sayfa tonunda (büyük açık alan yok). */
.msheet-viz { display: grid; justify-items: center; gap: var(--sp-2); inline-size: 100%; padding-inline: var(--sp-5); }
.msheet {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 3fr 2fr; gap: var(--sp-0-5);
  inline-size: min(100%, var(--msheet-w)); aspect-ratio: 16 / 9; padding: var(--sp-1);
  border-radius: var(--r-sm); background: var(--c-s1); border: var(--bw) solid var(--c-line-3);
}
.msheet .pic { border-radius: var(--r-2xs); }
.msheet .pic img { object-position: 50% 62%; }
.msheet .pic:nth-child(2) img { transform: scaleX(-1); }
.msheet .pic:nth-child(3) img { object-position: 50% 80%; }
.msheet .pic:nth-child(n+4) img { object-position: 52% 30%; transform: scale(2.2); transform-origin: 54% 31%; }
.msheet .pic:nth-child(5) img { transform: scale(2.2) scaleX(-1); }
.msheet-chip { position: static; }

/* Hızlı büyüt: her biçimde video, saniyeler içinde */
.sr { display: grid; justify-items: center; gap: var(--sp-3); }
.sr-pill { display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: var(--ctl-xs); padding-inline: var(--sp-2) var(--sp-2-5); border-radius: var(--r-pill); background: var(--c-selected); color: var(--c-text); border: var(--bw) solid var(--c-text); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.sr-pill .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); fill: currentColor; stroke-width: 1.4; }
.sr-row { display: flex; align-items: flex-end; gap: var(--sp-2-5); }
.sr-row .pic { border-radius: var(--r-xs); border: var(--bw) solid var(--c-line-3); }
.sr-wide { block-size: calc(var(--sr-h) * 0.52); aspect-ratio: 16 / 9; }
.sr-wide img { object-position: 50% 40%; }
.sr-square { block-size: calc(var(--sr-h) * 0.7); aspect-ratio: 1; }
.sr-tall { block-size: var(--sr-h); aspect-ratio: 9 / 16; }

/* Ses oluştur: mikrofon + dalga + dil kodları */
.voice { display: grid; gap: var(--sp-4); inline-size: 100%; padding-inline: var(--sp-5); }
.voice-row { display: flex; align-items: center; gap: var(--sp-3); block-size: var(--tap-lg); }
.voice-mic { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: var(--r-pill); background: var(--c-selected); color: var(--c-text); border: var(--bw) solid var(--c-text); flex: none; }
.voice .wave { color: var(--c-text-2); }
.voice .wave > span:nth-child(-n+12) { background: var(--c-text); }
/* Dil kodları: ortalı en fazla altılı satırlar (11 kod = 6 + 5), boş hücreli kısa satır yok. */
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1-5); max-inline-size: calc(6 * var(--lang-cell) + 5 * var(--sp-1-5)); margin-inline: auto; }
.langs span { display: grid; place-items: center; inline-size: var(--lang-cell); block-size: var(--lang-cell-h); border-radius: var(--r-2xs); border: var(--bw) solid var(--c-line-2); color: var(--c-text-3); font-family: var(--font-mono); font-size: var(--fs-3xs); }
.langs span:first-child { color: var(--c-text); background: var(--c-selected); border-color: var(--c-text); }

/* Akıcılaştır: üstte boşluklu kaynak kareler, altta ara kareleri doldurulmuş aynı kareler. İki satır aynı 7 sütunlu
   ızgarayı paylaşır; her kaynak kare ikizinin tam üstündedir. */
.fps { display: grid; gap: var(--sp-2); justify-items: center; }
.fps-row {
  display: grid; grid-template-columns: repeat(3, var(--fps-frame) var(--fps-ghost)) var(--fps-frame);
  align-items: center; column-gap: var(--sp-1);
}
.fps-row .pic { aspect-ratio: 9 / 16; border-radius: var(--r-xs); border: var(--bw) solid var(--c-line-3); }
.fps-row .ghost { opacity: 0.38; border-style: dashed; }
.fps-src > :nth-child(2) { grid-column: 3; }
.fps-src > :nth-child(3) { grid-column: 5; }
.fps-src > :nth-child(4) { grid-column: 7; }
.fps-src > :nth-child(1) img, .fps-full > :nth-child(1) img { object-position: 30% 30%; }
.fps-full > :nth-child(2) img { object-position: 37% 30%; }
.fps-src > :nth-child(2) img, .fps-full > :nth-child(3) img { object-position: 45% 30%; }
.fps-full > :nth-child(4) img { object-position: 52% 30%; }
.fps-src > :nth-child(3) img, .fps-full > :nth-child(5) img { object-position: 60% 30%; }
.fps-full > :nth-child(6) img { object-position: 67% 30%; }
.fps-src > :nth-child(4) img, .fps-full > :nth-child(7) img { object-position: 75% 30%; }
.fps-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--c-text-2); }
.fps-label b { color: var(--c-text); font-weight: var(--fw-semibold); }

/* ───────────────────────── 03 Nasıl çalışır: zaman çizelgesi ───────────────────────── */
/* Adım başına kart yok (yukarıdaki modlar kart): ince çizgi üstünde büyük adım numarası, sonra adımın uygulama çizimi
   bir kuyuda ve metni, doğrudan şeridin üstünde.
   Telefonlar: dikey liste. Numara başlangıç tarafındaki dar sütunun başında, başlık onun taban çizgisinde; numaradan
   sonrakine dikey bir çizgi iner; kuyu kalan genişliği alır.
   ≥720: numara, sonraki numaraya uzanan yatay çizginin başında (1100 altında 2 × 2, üstünde dörtlü tek satır). */
.step {
  position: relative; display: grid; grid-template-columns: var(--step-num-w) minmax(0, 1fr);
  grid-template-areas: "node copy" ". viz"; column-gap: var(--sp-4); row-gap: var(--sp-4); align-items: start;
  padding-block-end: var(--sp-8);
}
.step:last-child { padding-block-end: 0; }
.step::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--step-num-w) / 2 - var(--bw) / 2); inline-size: var(--bw);
  inset-block: calc(var(--fs-step) + var(--sp-3)) var(--sp-3); background: var(--c-line-2);
}
.step:last-child::before { inset-block-end: 0; }
.step-node {
  grid-area: node; align-self: baseline; justify-self: center;
  color: var(--c-title-muted); font-size: var(--fs-step); line-height: 1; font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-title); font-variant-numeric: tabular-nums;
}
.step-copy { grid-area: copy; align-self: baseline; display: grid; gap: var(--sp-1-5); }
.step-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.step-text { color: var(--c-text-2); font-size: var(--fs-body-sm); text-wrap: pretty; }
.step .viz {
  grid-area: viz; margin: 0; flex-direction: column; justify-content: center;
  block-size: auto; min-block-size: var(--step-viz-h); padding: var(--sp-3);
}
.step .viz > * { inline-size: 100%; max-inline-size: var(--step-viz-max); margin-inline: auto; }
@media (min-width: 720px) {
  .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12) var(--sp-4); }
  /* Her adım listenin üç satırını (numara, çizim, metin) alt ızgara olarak alır; çizimin yüksekliği ne olursa olsun
     çizimler ve başlıklar sütunlar arasında hizalı. */
  .step {
    grid-row: span 3; grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "node" "viz" "copy";
    row-gap: var(--sp-5); align-content: start; padding-block-end: 0;
  }
  .step::before { display: none; }
  .step-node { display: flex; align-items: center; gap: var(--sp-4); align-self: start; justify-self: stretch; }
  /* Çizgi sütunun kalanını doldurur; sütun boşluğu onu sonraki numaradan ayırır. */
  .step-node::after { content: ""; flex: 1; block-size: var(--bw); background: var(--c-line-2); }
  .step:nth-child(2n) .step-node::after { display: none; }
  .step-copy { align-self: start; }
}

/* 1: referans tepsisi + sayaçlar */
.rgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-1-5); }
.rt {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--r-xs); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); color: var(--c-text-2);
}
.rt img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 18%; }
.rt-n, .rt-tc {
  position: absolute; display: grid; place-items: center; block-size: var(--ctl-3xs); min-inline-size: var(--ctl-3xs); padding-inline: var(--sp-1);
  border-radius: var(--r-pill); background: var(--c-scrim); color: var(--c-text);
  font-size: var(--fs-3xs); font-weight: var(--fw-semibold); font-style: normal; font-variant-numeric: tabular-nums; line-height: 1;
}
.rt-n { inset-block-start: var(--sp-1); inset-inline-start: var(--sp-1); }
.rt-tc { inset-block-end: var(--sp-1); inset-inline-end: var(--sp-1); }
.rt-a .rt-tc { background: var(--c-s5); }
.rt-play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; inline-size: var(--ctl-2xs); block-size: var(--ctl-2xs); border-radius: 50%; background: var(--c-scrim); color: var(--c-text); }
.rt-play .icon { inline-size: var(--icon-2xs); block-size: var(--icon-2xs); }
.rt-add { border-style: dashed; border-color: var(--c-line-3); background: transparent; }
/* Çok dar telefonlar: dört büyük karo ("+" karosu yok); zaman kodları içlerine sığar. */
@media (max-width: 359px) {
  .rgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rt-add { display: none; }
}
.rcount { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-3); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.rcount > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rcount b { color: var(--c-text); font-weight: var(--fw-semibold); }

/* 2: etiket hapları, @ ve imleçle senaryo */
.sx { display: grid; gap: var(--sp-2-5); padding: var(--sp-3); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); border-radius: var(--r-sm); }
.sx .sx-l { flex-wrap: wrap; }
.sug { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5); margin-block-start: var(--sp-3); }

/* 3: kalite + süre + oran */
/* Bölümler etiketlerine göre boyutlanır (uzun çeviri daha çok yer alır) ve kalanı paylaşır; asla üç nokta yok. */
.seg { display: flex; gap: var(--sp-0-5); padding: var(--sp-0-5); border-radius: var(--r-pill); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); }
.seg span {
  flex: 1 0 auto; padding-inline: var(--sp-2); border-radius: var(--r-pill); border: var(--bw) solid transparent;
  color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; line-height: var(--ctl-sm);
  white-space: nowrap;
}
.seg .is-on { background: var(--c-selected); color: var(--c-text); border-color: var(--c-text); }
.sl { display: flex; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.sl-t { position: relative; flex: 1; block-size: var(--rail-h); border-radius: var(--r-pill); background: var(--c-track); }
.sl-f { display: block; inline-size: 24%; block-size: 100%; border-radius: inherit; background: var(--c-text); }
.sl-k { position: absolute; inset-block-start: calc((var(--rail-h) - var(--knob)) / 2); inset-inline-start: calc(24% - var(--knob) / 2); inline-size: var(--knob); block-size: var(--knob); border-radius: 50%; background: var(--c-text); }
.sl-v { font-size: var(--fs-ui); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rchips { display: flex; flex-wrap: wrap; gap: var(--sp-1-5); margin-block-start: var(--sp-4); }
.rchip {
  --rw: 0.9; --rh: 0.9;
  display: inline-flex; align-items: center; gap: var(--sp-1-5); block-size: var(--ctl-sm); padding-inline: var(--sp-2-5);
  border-radius: var(--r-pill); border: var(--bw) solid var(--c-line-2); background: var(--c-s1);
  color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
/* Çipin oran kutusu: 04'teki oran çizimiyle aynı .r-<oran> sınıfları (--rw / --rh), birimi --rc. */
.rchip i { display: block; inline-size: calc(var(--rc) * var(--rw)); block-size: calc(var(--rc) * var(--rh)); border: var(--bw-1-5) solid currentColor; border-radius: var(--r-3xs); }
.rchip.is-on { border-color: var(--c-text); color: var(--c-text); }

/* 4: iş kartı + eylemler (adımları modlara bağlar) */
.job {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2-5); row-gap: var(--sp-2); align-items: center;
  padding: var(--sp-2-5); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); border-radius: var(--r-md);
}
.job-th { grid-row: span 2; inline-size: var(--job-th); aspect-ratio: 3 / 4; border-radius: var(--r-xs); }
.job-th img { object-position: 50% 20%; }
.job-row { display: flex; align-items: baseline; justify-content: space-between; column-gap: var(--sp-2); min-inline-size: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
/* Uzun bir çevrilmiş başlık tek kelimeden sonra kesilmek yerine iki satıra geçer (sonra üç nokta). */
.job-row span:first-child { min-inline-size: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.job-row span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1-5); margin-block-start: var(--sp-3); }
.act {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); padding: var(--sp-2-5) var(--sp-1);
  border-radius: var(--r-sm); background: var(--c-s1); border: var(--bw) solid var(--c-line-2);
  color: var(--c-text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; line-height: 1.2;
}
.act .icon { inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--c-text); }
/* Her etikete aynı iki satırlık kutu: tek ve iki satırlık etiketler aynı hizada. */
.act span { display: grid; place-items: center; min-block-size: var(--act-label-h); text-wrap: balance; }
@media (max-width: 359px) {
  .act { padding-inline: var(--sp-0-5); font-size: var(--fs-3xs); }
}

/* Dörtlü tek satır 1100'den: 1000–1099'da kartlar ~225 px kalıyor, oran çipleri ve iş başlığı ikinci satıra düşüyordu
   (o aralık 720–1099 gibi 2 × 2). */
@media (min-width: 1100px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .step:nth-child(2n) .step-node::after { display: block; }
  .step:last-child .step-node::after { display: none; }
  .step .viz { padding: var(--sp-4); }
}
@media (min-width: 1100px) and (max-width: 1199px) {
  .step .viz { padding-inline: var(--sp-3); }
  .seg span { padding-inline: var(--sp-1-5); font-size: var(--fs-2xs); }
  .rchips { gap: var(--sp-1); }
  .rchip { padding-inline: var(--sp-2); gap: var(--sp-1); }
  .job { column-gap: var(--sp-2); padding: var(--sp-2); }
}

/* ───────────────────────── 04 İnce ayar: özellik kâğıdı ───────────────────────── */
/* Telefonlar: çizim metnin yanında küçük kare bir kuyuda. ≥640: çizgili ızgara, çizim metnin altında. */
.spec-grid { display: grid; gap: var(--bw); border-radius: var(--r-xl); overflow: hidden; background: var(--c-line); border: var(--bw) solid var(--c-line); }
.spec-cell {
  display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); grid-template-areas: "viz top" "viz text";
  grid-template-rows: auto 1fr; column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start;
  padding: var(--sp-4); background: var(--c-s1);
}
.spec-top { grid-area: top; display: flex; align-items: center; gap: var(--sp-3); }
.spec-top .icon-chip { display: none; }
.spec-cell h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.spec-cell p { grid-area: text; color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: 1.5; }
.spec-viz {
  grid-area: viz; display: flex; align-items: center; justify-content: center; gap: var(--sp-1-5);
  inline-size: var(--tile); block-size: var(--tile); overflow: hidden;
  border-radius: var(--r-md); background: var(--c-s2); border: var(--bw) solid var(--c-line);
}
/* 320 sınıfı telefonlar: karo sadece başlığın yanında, metin hücrenin tam genişliğini alır. */
@media (max-width: 359px) {
  .spec-cell { grid-template-areas: "viz top" "text text"; grid-template-rows: auto auto; column-gap: var(--sp-3); row-gap: var(--sp-3); }
  .spec-top { align-self: center; }
}

.meter { display: flex; align-items: flex-end; gap: var(--sp-1); block-size: 46%; }
.meter span { inline-size: var(--meter-bar); border-radius: var(--r-3xs); background: var(--c-s4); }
.meter span:nth-child(1) { block-size: 100%; background: var(--c-text); }
.meter span:nth-child(2) { block-size: 76%; background: var(--c-text-2); }
.meter span:nth-child(3) { block-size: 52%; }
.meter span:nth-child(4) { block-size: 28%; }
.ends { display: flex; align-items: center; gap: var(--sp-1); block-size: 52%; }
.ends .pic { inline-size: var(--ends-pic); block-size: 100%; border-radius: var(--r-2xs); border: var(--bw) solid var(--c-line-3); }
.ends-line { position: relative; inline-size: var(--ends-line); block-size: var(--bw); background: var(--c-line-3); }
.ends-line::before, .ends-line::after { content: ""; position: absolute; inset-block-start: calc((var(--bw) - var(--dot)) / 2); inline-size: var(--dot); block-size: var(--dot); border-radius: var(--r-pill); background: var(--c-text-3); }
.ends-line::before { inset-inline-start: 0; }
.ends-line::after { inset-inline-end: 0; }
.spec-viz .wave { inline-size: 64%; block-size: 46%; color: var(--c-text-3); }
.spec-viz .wave > span:nth-child(-n+9) { background: var(--c-text); }
.spec-viz .wave > span:nth-child(n+15) { display: none; }
.cands { display: flex; align-items: center; gap: var(--sp-1); block-size: 50%; }
.cands .pic { position: relative; inline-size: var(--cand); block-size: 84%; border-radius: var(--r-2xs); border: var(--bw) solid var(--c-line-2); }
.cands .pic:nth-child(1) img { object-position: 20% 20%; }
.cands .pic:nth-child(3) img { object-position: 80% 20%; }
.cands .is-on { block-size: 100%; inline-size: var(--cand-on); outline: var(--bw-2) solid var(--c-text); outline-offset: var(--ring-offset); }
.ratios { display: grid; grid-template-columns: repeat(2, auto); align-items: end; justify-items: center; gap: var(--sp-1-5) var(--sp-2); }
.ratio { display: grid; justify-items: center; gap: var(--sp-1); }
.ratio:nth-child(n+5), .ratio b { display: none; }
.ratio i { display: block; inline-size: calc(var(--ratio-u) * var(--rw)); block-size: calc(var(--ratio-u) * var(--rh)); border: var(--bw-1-5) solid var(--c-text-3); border-radius: var(--r-3xs); }
.ratio:first-child i { border-color: var(--c-text); background: var(--c-s4); }
.ratio b { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--c-text-3); }
.ratio:first-child b { color: var(--c-text); }
/* Oran kutuları: genişlik / yükseklik birim cinsinden (bilinmeyen oran kare çizilir) */
.ratio { --rw: 0.9; --rh: 0.9; }
.r-9x16 { --rw: 0.58; --rh: 1; }
.r-1x1 { --rw: 0.9; --rh: 0.9; }
.r-2x3 { --rw: 0.67; --rh: 1; }
.r-3x2 { --rw: 1; --rh: 0.67; }
.r-3x4 { --rw: 0.75; --rh: 1; }
.r-4x3 { --rw: 1.06; --rh: 0.8; }
.r-16x9 { --rw: 1.2; --rh: 0.68; }
.r-21x9 { --rw: 1.3; --rh: 0.56; }
.sliders { display: grid; gap: var(--sp-3); inline-size: 62%; }
.slider { position: relative; block-size: var(--track-h); border-radius: var(--r-pill); background: var(--c-s4); }
.slider::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--v, 50%); border-radius: inherit; background: var(--c-text-2); }
.slider::after {
  content: ""; position: absolute; inset-block-start: calc((var(--track-h) - var(--slider-knob)) / 2); inset-inline-start: calc(var(--v, 50%) - var(--slider-knob) / 2);
  inline-size: var(--slider-knob); block-size: var(--slider-knob); border-radius: var(--r-pill); background: var(--c-text);
}
.slider-a { --v: 38%; }
.slider-b { --v: 72%; }
.slider-c { --v: 56%; }

@media (min-width: 640px) {
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-cell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "text" "viz"; grid-template-rows: auto 1fr auto; row-gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
  .spec-top .icon-chip { display: inline-grid; }
  .spec-viz {
    inline-size: auto; block-size: var(--spec-viz-h); margin-block-start: var(--sp-2); justify-content: flex-start; align-items: flex-end;
    overflow: visible; border: 0; border-radius: 0; background: none;
  }
  .meter, .ends, .cands { block-size: 100%; }
  .ends { gap: var(--sp-1-5); }
  .ends-line::before { inset-inline-start: 30%; }
  .ends-line::after { inset-inline-end: 30%; }
  .spec-viz .wave { inline-size: var(--spec-wave); block-size: 100%; }
  .spec-viz .wave > span:nth-child(n+15) { display: block; }
  .cands { align-items: flex-end; gap: var(--sp-1-5); }
  .cands .pic, .cands .is-on { block-size: 100%; }
  .ratios { display: flex; flex-wrap: wrap; gap: var(--sp-2-5) var(--sp-2); }
  .ratio:nth-child(n+5) { display: grid; }
  .ratio b { display: block; }
  .spec-ratios .spec-viz { block-size: auto; min-block-size: var(--spec-viz-h); }
  .sliders { inline-size: min(var(--sliders-w), 100%); align-self: center; }
}
@media (min-width: 1000px) {
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-cell { padding: var(--sp-8) var(--sp-7); }
}

/* ───────────────────────── 05 Stüdyo ───────────────────────── */
/* 1000 altında, diğer bölümler gibi önce başlık, sonra çizim, sonra özellikler.
   ≥1000: iki sütun, çizim başta. Editör telefonu şeridin üstünde çerçevesiz durur (sayfanın tek çerçeveli sahnesi
   hero'dur). */
.studio-grid { display: grid; gap: var(--sp-6); }
.studio-stage { display: grid; place-items: center; }
.studio-copy { display: contents; }
.studio-copy .section-head { order: 0; margin-block-end: calc(var(--head-gap) - var(--sp-6)); }
.studio-stage { order: 1; }
.feature-list { order: 2; display: grid; border-block-start: var(--bw) solid var(--c-line); }
.feature { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: var(--bw) solid var(--c-line); }
.feature h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); margin-block-end: var(--sp-1); }
.feature p { color: var(--c-text-2); font-size: var(--fs-body-sm); }
/* 1000 altında editör telefonu daha küçük: daha kısa önizleme, zaman çizelgesine klip şeridi ve iki ses şeridi için
   yer bırakır (8 + 8 + 6 + 38 + 6 + 22 + 6 + 22 + 8 px). */
@media (max-width: 999px) {
  .studio-stage { --phone-w: var(--phone-w-sm); --ed-lane-h: var(--ed-lane-h-sm); }
  .studio-stage .ed-stage { block-size: 30%; }
}
@media (min-width: 720px) {
  .studio-grid { gap: var(--sp-8); }
  .studio-copy .section-head { margin-block-end: calc(var(--head-gap) - var(--sp-8)); }
}
/* 720–999: başlık üstte boydan boya, altında telefon özellik listesinin yanında. */
@media (min-width: 720px) and (max-width: 999px) {
  .studio-grid { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .studio-copy .section-head { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .studio-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-16); align-items: center; }
  .studio-stage { order: 0; --phone-w: var(--phone-w-lg); }
  .studio-copy { display: grid; align-content: center; }
  .studio-copy .section-head { grid-template-columns: minmax(0, 1fr); margin-block-end: var(--sp-8); }
  .studio-copy .section-head .section-body { font-size: var(--fs-body); }
  .feature { padding-block: var(--sp-5); }
}

/* Editör ekranı */
.ed-top { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-2); flex: none; }
.ed-more { display: flex; gap: var(--sp-0-5); margin-inline-start: auto; padding-inline: var(--sp-2); }
.ed-more i { inline-size: var(--ed-dot); block-size: var(--ed-dot); border-radius: var(--r-pill); background: var(--c-text-2); }
.ed-export { display: inline-flex; align-items: center; block-size: var(--ctl-sm); padding-inline: var(--sp-3); border-radius: var(--r-pill); background: var(--c-light); color: var(--c-on-light); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.ed-stage { display: grid; place-items: center; block-size: 40%; padding-block: var(--sp-2); background: var(--c-ink); flex: none; }
.ed-stage .pic { block-size: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-xs); }
.ed-transport { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--c-text); flex: none; }
.ed-transport em { font-style: normal; color: var(--c-text-3); }
.ed-play { display: grid; place-items: center; inline-size: var(--ctl-sm); block-size: var(--ctl-sm); border-radius: var(--r-pill); background: var(--c-s3); }
.ed-play .icon { inline-size: var(--icon-2xs); block-size: var(--icon-2xs); }
/* Zaman çizelgesi bir zaman eksenidir: her dilde soldan sağa (dir="ltr" ile sarılı). */
.ed-timeline { position: relative; display: grid; gap: var(--sp-1-5); padding-block: var(--sp-2); padding-inline: var(--sp-3) 0; border-block: var(--bw) solid var(--c-line); flex: 1; align-content: start; overflow: hidden; }
.ed-ruler { display: flex; justify-content: space-between; padding-inline-end: var(--sp-3); block-size: var(--ed-tick); align-items: flex-end; }
.ed-ruler i { inline-size: var(--bw); block-size: calc(var(--ed-tick) / 2); background: var(--c-line-3); }
.ed-ruler i:nth-child(4n+1) { block-size: var(--ed-tick); background: var(--c-text-3); }
.ed-lane { display: flex; gap: var(--sp-0-5); block-size: var(--ed-lane-h); }
.ed-clip { position: relative; display: flex; border-radius: var(--r-2xs); overflow: hidden; border: var(--bw) solid var(--c-line-3); flex: none; }
.ed-clip .pic { inline-size: var(--ed-frame); block-size: 100%; }
.ed-clip-sel { border: var(--bw-2) solid var(--c-text); }
.ed-clip-sel::before, .ed-clip-sel::after { content: ""; position: absolute; inset-block: 0; inline-size: var(--ed-handle); background: var(--c-text); z-index: 1; }
.ed-clip-sel::before { inset-inline-start: 0; }
.ed-clip-sel::after { inset-inline-end: 0; }
.ed-audio { display: flex; align-items: center; block-size: var(--ed-audio-h); padding-inline: var(--sp-1); border-radius: var(--r-2xs); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); color: var(--c-text-3); }
.ed-audio .wave { block-size: 70%; gap: var(--sp-0-5); }
.ed-audio-a { inline-size: 80%; }
.ed-audio-b { inline-size: 38%; margin-inline-start: 24%; background: var(--c-s4); color: var(--c-text-2); }
.ed-playhead { position: absolute; inset-block: var(--sp-0-5); inset-inline-start: 46%; inline-size: var(--bw-2); border-radius: var(--r-pill); background: var(--c-text); }
.ed-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-4); flex: none; }
.ed-tool { display: grid; justify-items: center; align-content: start; gap: var(--sp-1); min-inline-size: 0; padding: var(--sp-1-5) var(--sp-0-5); border-radius: var(--r-xs); color: var(--c-text-2); font-size: var(--fs-3xs); line-height: 1.2; text-align: center; }
.ed-tool .icon { inline-size: var(--icon-md); block-size: var(--icon-md); color: var(--c-text); }
.ed-tool:first-child { background: var(--c-s3); }

/* ───────────────────────── 06 Kredi ───────────────────────── */
/* 1200 altında: başlık → fiş (çizim başlığın hemen altında) → güvenceler.
   ≥1200: başlangıç tarafında başlık + güvenceler (yapışkan), bitiş tarafında fiş. */
.credits-grid { display: grid; gap: var(--sp-4); }
.credits-copy { display: contents; }
.credits-copy .section-head { order: 0; margin-block-end: calc(var(--head-gap) - var(--sp-4)); }
.receipt { order: 1; }
/* Güvenceler kutu yığını değil, çizgili satırlı tek bir kâğıt (fişin köşesiyle). */
.points { order: 2; display: grid; align-content: start; border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
.point { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); font-size: var(--fs-body-sm); line-height: var(--lh-snug); }
.point + .point { border-block-start: var(--bw) solid var(--c-line); }
@media (min-width: 720px) { .point { padding-block: var(--sp-4); } }
.point-icon { display: grid; place-items: center; inline-size: var(--ctl-xs); block-size: var(--ctl-xs); border-radius: var(--r-pill); background: var(--c-s4); color: var(--c-text); flex: none; }
.point-icon .icon { inline-size: var(--icon-xs); block-size: var(--icon-xs); stroke-width: 2.4; }
.point span:last-child { padding-block-start: var(--sp-0-5); text-wrap: pretty; }

.receipt { border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line-2); overflow: hidden; }
.receipt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-6) var(--sp-5) var(--sp-4); }
.receipt-head h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); }
.receipt-unit { color: var(--c-text-2); font-size: var(--fs-ui); }
.rate-list { padding-inline: var(--sp-5); padding-block-end: var(--sp-5); }
.rate-row { display: grid; gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-3); border-block-start: var(--bw) solid var(--c-line); }
.rate-row dt { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.rate-row dt .icon { color: var(--c-text-2); }
.rate-mode { display: grid; line-height: var(--lh-snug); text-wrap: balance; }
.rate-min { color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
/* Kaliteler: ad başta, sayı sonda (tek satır). */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-1-5); }
.tier {
  display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: space-between; column-gap: var(--sp-1-5);
  min-inline-size: 0; min-block-size: var(--btn-h-sm); padding-inline: var(--sp-2-5); border-radius: var(--r-sm); background: var(--c-s2); border: var(--bw) solid var(--c-line);
}
/* break-word: ad sığabildiği sürece kelimenin ortasından bölünmez. */
.tier-name { min-inline-size: 0; color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: break-word; }
/* Ad uzunsa sayı alt satıra geçse de karonun sonunda kalır (komşu karolarla aynı yerde). */
.tier-value { margin-inline-start: auto; font-size: var(--fs-h4); line-height: 1.2; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--tr-snug); }
.rate-row-solo { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.rate-row-solo .tiers { grid-template-columns: auto; }
.tier-solo { justify-content: center; min-inline-size: var(--tier-solo); }
/* Tek değer (adsız karo) karonun ortasında: yukarıdaki "sonda kal" kuralı burada geçerli değil. */
.tier-solo .tier-value { margin-inline: auto; }
.tier-free { justify-content: center; padding-inline: var(--sp-3); color: var(--c-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); align-items: center; }
/* Telefonlar: her kalite karosu aynı düzende, sayının üstünde küçük bir etiket (uzun adlar iki düzeni karıştırmaz). */
@media (max-width: 479px) {
  .tier { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; row-gap: var(--sp-0-5); padding-block: var(--sp-1-5); padding-inline: var(--sp-2); min-block-size: var(--btn-h); }
  .tier-value { margin-inline-start: 0; }
  .tier-solo, .tier-free { align-items: center; min-block-size: var(--tap); }
}
/* 320 sınıfı telefonlar: üç karo yan yana ~57 px'lik yer bırakıp "Balanced", "Equilibrada" gibi adları bölüyordu.
   Kaliteler alt alta satır olur: ad başta, sayı sonda. */
@media (max-width: 359px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .rate-row:not(.rate-row-solo) .tier {
    flex-direction: row; align-items: center; justify-content: space-between; column-gap: var(--sp-3);
    min-block-size: var(--tap); padding-block: var(--sp-1); padding-inline: var(--sp-3);
  }
}

/* Yırtma yeri: kesik çizgi + bölümün tonunda iki çentik */
.receipt-total { position: relative; display: grid; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); background: var(--c-s2); }
.receipt-total::before, .receipt-total::after {
  content: ""; position: absolute; inset-block-start: calc(var(--notch) / -2); inline-size: var(--notch); block-size: var(--notch); border-radius: var(--r-pill);
  background: var(--c-notch); border: var(--bw) solid var(--c-line-2);
}
.receipt-total::before { inset-inline-start: calc(var(--notch) / -2 - var(--bw)); }
.receipt-total::after { inset-inline-end: calc(var(--notch) / -2 - var(--bw)); }
.tear { position: absolute; inset-block-start: calc(-1 * var(--bw)); inset-inline: var(--sp-5); border-block-start: var(--bw-2) dashed var(--c-line-4); }

.stub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5); padding-block-end: var(--sp-4); border-block-end: var(--bw) solid var(--c-line-2); font-variant-numeric: tabular-nums; }
.stub-term { display: inline-flex; align-items: center; gap: var(--sp-1-5); min-block-size: var(--ctl-md); padding-inline: var(--sp-2-5); border-radius: var(--r-pill); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); font-size: var(--fs-ui); font-weight: var(--fw-semibold); }
.stub-term .icon { color: var(--c-text-2); }
.stub-tag { color: var(--c-text-2); font-weight: var(--fw-medium); }
.stub-op { color: var(--c-text-3); font-size: var(--fs-body); }
.stub-total { display: inline-flex; align-items: center; gap: var(--sp-1-5); margin-inline-start: auto; font-size: var(--fs-total); line-height: 1; font-weight: var(--fw-semibold); letter-spacing: var(--tr-title); }
.stub-total .stub-op { font-size: var(--fs-op); }
.stub-total .icon { inline-size: var(--icon-md); block-size: var(--icon-md); align-self: center; color: var(--c-text-2); }
.rate-example { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-snug); text-wrap: pretty; }
/* Uygulamanın alt çubuğu, sayfa düğmesi değil uygulama yüzeyi olarak çizilir: bir başlık nerede durduğunu söyler,
   "Üret" kontrolü koyu dolgu üstünde çizgili. Açık dolgu sayfanın gerçek indirme bağlantılarına ayrılmıştır. */
.costbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2); padding-inline-start: var(--sp-4); border-radius: var(--r-lg); background: var(--c-bg); border: var(--bw) solid var(--c-line-2);
}
.costbar-balance { display: grid; color: var(--c-text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); white-space: nowrap; }
.costbar-cap { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.costbar-btn {
  display: inline-flex; align-items: center; flex: none; margin-inline-start: auto;
  min-block-size: var(--btn-h-sm); padding-inline: var(--sp-4); border-radius: var(--r-sm);
  background: var(--c-s4); border: var(--bw) solid var(--c-line-4); color: var(--c-text);
  font-size: var(--fs-ui); font-weight: var(--fw-semibold); white-space: nowrap;
}
.rate-note { color: var(--c-text-3); font-size: var(--fs-ui); }
/* Dar telefonlar: alt çubuk bilerek alt alta (bakiye, sonra tam genişlik düğme); toplam, fişin toplam satırı gibi ince
   bir çizginin altında kendi satırına geçer. */
@media (max-width: 399px) {
  .costbar { padding: var(--sp-3); row-gap: var(--sp-3); }
  .costbar-balance { padding-inline: var(--sp-1); }
  .costbar-btn { inline-size: 100%; justify-content: center; margin-inline-start: 0; }
}
@media (max-width: 359px) {
  .stub-total { flex-basis: 100%; justify-content: flex-end; margin-block-start: var(--sp-1-5); padding-block-start: var(--sp-3); border-block-start: var(--bw) solid var(--c-line-2); }
}
@media (min-width: 720px) {
  .rate-row, .rate-row-solo { grid-template-columns: minmax(0, 1fr) minmax(0, var(--tiers-w)); align-items: center; }
  .rate-row-solo .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rate-row-solo .tier-solo, .rate-row-solo .tier-free { grid-column: 3; }
  .tier { min-block-size: var(--tap); padding-inline: var(--sp-3); }
  .tier-value { font-size: var(--fs-h3); }
  .receipt-head, .rate-list, .receipt-total { padding-inline: var(--sp-8); }
  .tear { inset-inline: var(--sp-8); }
  .receipt-head { padding-block-start: var(--sp-8); }
  .receipt-total { padding-block: var(--sp-7) var(--sp-8); }
}
@media (min-width: 1200px) {
  .credits-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sp-12); align-items: start; }
  .credits-copy { display: grid; gap: var(--sp-8); position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-8)); }
  .credits-copy .section-head { grid-template-columns: minmax(0, 1fr); margin-block-end: 0; }
  .credits-copy .section-head .section-body { font-size: var(--fs-body); }
}

/* ───────────────────────── Güvence ───────────────────────── */
/* Kutusuz: iki ince çizgi arasında bir şerit, maddeler arasında çizgi (madde başına kart yok).
   Telefonlar: alt alta satırlar, ikon başta. 640–1099: 2 × 2. ≥1100: dörtlü tek satır. */
.trust-wrap { padding-block-end: var(--section-pad); }
.trust { display: grid; border-block: var(--bw) solid var(--c-line-2); }
.trust-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); align-items: start; padding-block: var(--sp-5); }
.trust-item + .trust-item { border-block-start: var(--bw) solid var(--c-line); }
.trust-icon { grid-row: span 2; inline-size: var(--icon-lg); block-size: var(--icon-lg); color: var(--c-text); }
.trust-item h3 { font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.trust-item p { color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: 1.5; }
@media (min-width: 640px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); padding: var(--sp-6); align-content: start; }
  .trust-icon { grid-row: auto; margin-block-end: var(--sp-2); }
  .trust-item + .trust-item { border-block-start: 0; }
  .trust-item:nth-child(n+3) { border-block-start: var(--bw) solid var(--c-line); }
  .trust-item:nth-child(even) { border-inline-start: var(--bw) solid var(--c-line); padding-inline-end: 0; }
  .trust-item:nth-child(odd) { padding-inline-start: 0; }
  .trust-item h3 { font-size: var(--fs-h4); }
}
@media (min-width: 1100px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-item, .trust-item:nth-child(n) { padding-block: var(--sp-8); padding-inline: var(--sp-6); border-block-start: 0; }
  .trust-item + .trust-item { border-inline-start: var(--bw) solid var(--c-line); }
  .trust-item:first-child { padding-inline-start: 0; }
  .trust-item:last-child { padding-inline-end: 0; }
}

/* ───────────────────────── 07 SSS ───────────────────────── */
.faq-grid { display: grid; gap: var(--sp-2); }
.faq-head .section-head { grid-template-columns: minmax(0, 1fr); margin-block-end: var(--sp-8); }
.faq-contact { color: var(--c-text-2); font-size: var(--fs-body-sm); }
.mail-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; max-inline-size: 100%;
  min-block-size: var(--tap); padding-inline: var(--sp-4); border-radius: var(--r-pill);
  background: var(--c-s2); border: var(--bw) solid var(--c-line-2); color: var(--c-text);
  font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mail-pill:hover { background: var(--c-s3); border-color: var(--c-line-3); }
.mail-pill .icon { color: var(--c-text-2); }
.inline-link { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-line-3); text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--bw); overflow-wrap: anywhere; }
.inline-link:hover { text-decoration-color: var(--c-text); }
.faq-list { display: grid; gap: var(--sp-2); }
.faq-item { border-radius: var(--r-lg); background: var(--c-s1); border: var(--bw) solid var(--c-line); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.faq-item:hover { border-color: var(--c-line-2); }
.faq-item[open] { background: var(--c-s2); border-color: var(--c-line-2); }
.band .faq-item { background: var(--c-s2); }
.band .faq-item[open] { background: var(--c-s3); border-color: var(--c-line-3); }
.band .faq-item[open] .faq-icon { background: var(--c-s5); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-block-size: var(--faq-h); padding-block: var(--sp-3); padding-inline: var(--sp-5) var(--sp-4); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.faq-item summary > span:first-child { text-wrap: pretty; }
.faq-icon { display: grid; place-items: center; inline-size: var(--ctl-md); block-size: var(--ctl-md); border-radius: var(--r-pill); background: var(--c-s3); border: var(--bw) solid var(--c-line-2); flex: none; transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(45deg); background: var(--c-s4); }
.faq-item p { padding-inline: var(--sp-5); padding-block-end: var(--sp-5); color: var(--c-text-2); font-size: var(--fs-body-sm); max-inline-size: var(--measure-faq); }
@media (min-width: 1000px) {
  .faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-16); align-items: start; }
  .faq-head { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-8)); }
  .faq-item summary { padding-inline: var(--sp-6) var(--sp-5); }
  .faq-item p { padding-inline: var(--sp-6); padding-block-end: var(--sp-6); }
}

/* ───────────────────────── Kapanış ───────────────────────── */
.final { padding-block: var(--section-pad); }
.final-card { display: grid; gap: var(--sp-6); padding: var(--sp-3) var(--sp-3) var(--sp-8); border-radius: var(--r-2xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); overflow: clip; }
.final-copy { display: grid; justify-items: start; gap: var(--sp-5); padding-inline: var(--sp-2); }
.final-title { font-size: var(--fs-cta); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--fw-semibold); text-wrap: balance; }
.final-title span { display: block; }
.final-title .muted { color: var(--c-title-muted); }
/* 320 sınıfında İspanyolca: ikinci satır ve vurgu aynı paragrafta akar, balance "Crea tu primer / episodio hoy." diye
   eşler (ayrı bloklarken "episodio" tek başına bir satırda kalıyordu). Hintçede "एपिसोड आज बनाएं।" bu genişliğe sığmaz. */
@media (max-width: 359px) {
  :root:lang(es) .final-title span + span { display: inline; }
}
.final-body { color: var(--c-text-2); font-size: var(--fs-lead); line-height: var(--lh-snug); max-inline-size: var(--measure-xs); }
.final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
/* Film makarası: kırpılmış bir pencerede yavaşça kayan üç sütun 2:3 kare. Pencere makaranın kendi genişliğinden
   (kap birimleri) ölçülür, hep bütün kareler tutar: 900 altında bir satır, üstünde iki.
   3 sütun, boşluk g ve genişlik W ile: kare + boşluk = tam W / 2; bir satır = 50cqi − g, iki satır = 100cqi − g. */
.reel-wrap { order: -1; container-type: inline-size; }
.reel {
  --reel-rows: 1;
  --reel-shift: -100cqi;   /* her sütun son karesi pencereye girene kadar kayar */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--reel-gap);
  block-size: calc(var(--reel-rows) * 50cqi - var(--reel-gap)); overflow: clip; border-radius: var(--r-xl);
}
.reel-col { display: grid; gap: var(--reel-gap); }
/* Durağan hâl: orta sütun yolunun yarısında. 900 altında orta karesini bütün gösterir; üstünde ilk karesinin alt
   yarısını, orta karesini ve son karesinin üst yarısını (kaydırılmış bir temas kâğıdı); kareler görünen yarılarına göre
   seçildi. */
.reel-col:nth-child(2) { translate: 0 calc(var(--reel-shift) / 2); }
.reel .pic { aspect-ratio: 2 / 3; border-radius: var(--r-md); border: var(--bw) solid var(--c-line-2); }
.reel .pic-low img { object-position: 50% 0%; transform: scale(1.25); transform-origin: 50% 0%; }
@media (min-width: 900px) {
  .final-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; padding: var(--sp-6); padding-inline-start: var(--sp-12); gap: var(--sp-12); }
  .final-copy { padding-inline: 0; }
  .reel-wrap { order: 0; }
  .reel { --reel-rows: 2; --reel-shift: -50cqi; }
}

/* ───────────────────────── Yasal sayfalar ───────────────────────── */
/* Başlık kartı (geri bağlantısı, etiket, başlık, giriş, son güncelleme hapı, taslak uyarısı), altında okunur
   genişlikte metin kartı. ≥1000: yanda yapışkan bir sütun (diğer yasal sayfalar + destek). Telefonlarda yasal
   sayfalar metnin üstünde haplar, destek kartı metnin altında. */
.legal { padding-block: var(--sp-6) var(--section-pad); }
.legal-head {
  display: grid; justify-items: start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-6); border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line);
}
.back-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap); padding-inline: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-2); border-radius: var(--r-pill); background: var(--c-s2); border: var(--bw) solid var(--c-line-2);
  color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-semibold);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.back-link:hover { color: var(--c-text); background: var(--c-s3); border-color: var(--c-line-3); }
.legal-title { font-size: var(--fs-legal); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: var(--fw-semibold); text-wrap: balance; }
.legal-intro { color: var(--c-text-2); font-size: var(--fs-lead); line-height: var(--lh-snug); max-inline-size: var(--measure-xl); text-wrap: pretty; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-1); }
.meta-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--ctl-md); padding-inline: var(--sp-3);
  border-radius: var(--r-pill); background: var(--c-s2); border: var(--bw) solid var(--c-line-2);
  color: var(--c-text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.meta-chip .icon { color: var(--c-text-3); }
/* Taslak uyarısı: sadece renkle değil, ikon + metinle; kesik çizgili kenar "henüz son hâli değil" der. */
.notice {
  display: flex; align-items: flex-start; gap: var(--sp-3); inline-size: 100%;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--c-s2); border: var(--bw) dashed var(--c-line-3);
  color: var(--c-text-2); font-size: var(--fs-body-sm); line-height: var(--lh-snug);
}
.notice .icon { color: var(--c-text); }
.notice span { padding-block-start: var(--sp-0-5); }

.legal-grid { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-4); }
.legal-doc { order: 1; padding: var(--sp-6) var(--sp-5) var(--sp-8); border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
.legal-aside { display: contents; }
.legal-nav { order: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.legal-nav a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-block-size: var(--tap); padding-inline: var(--sp-4);
  border-radius: var(--r-pill); background: var(--c-s1); border: var(--bw) solid var(--c-line-2);
  color: var(--c-text-2); font-size: var(--fs-ui); font-weight: var(--fw-medium);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-nav a:hover { color: var(--c-text); background: var(--c-s2); border-color: var(--c-line-3); }
.legal-nav a[aria-current] { color: var(--c-text); background: var(--c-selected); border-color: var(--c-text); }
.legal-nav .icon { display: none; }
.legal-nav-title { display: none; }
.legal-help {
  order: 2; display: grid; justify-items: start; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line);
}
.legal-help h2 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug); }
.legal-help p { color: var(--c-text-2); font-size: var(--fs-body-sm); }
/* Dar yan sütunda adres tek satıra sığsın diye daha sıkı hap; yine de sığmazsa @'den sonra kırılır (<wbr>). */
.legal-help .mail-pill { padding-inline: var(--sp-3); font-size: var(--fs-ui); }

/* Metin: numaralı başlıklar (bölüm etiketleriyle aynı hap), gri gövde, beyaz vurgular, çizgili madde işaretleri. */
.prose {
  counter-reset: legal; display: grid; gap: var(--sp-4); max-inline-size: var(--prose-max);
  color: var(--c-text-2); font-size: var(--fs-body); line-height: var(--lh-prose); overflow-wrap: break-word;
}
.prose h2 {
  counter-increment: legal; display: flex; align-items: center; gap: var(--sp-3);
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-8); border-block-start: var(--bw) solid var(--c-line);
  color: var(--c-text); font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); line-height: var(--lh-snug);
}
.prose h2:first-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.prose h2::before {
  content: counter(legal, decimal-leading-zero);
  display: inline-grid; place-items: center; flex: none; min-inline-size: var(--ctl-md); block-size: var(--ctl-xs); padding-inline: var(--sp-2);
  border: var(--bw) solid var(--c-line-2); border-radius: var(--r-pill); background: var(--c-s2);
  color: var(--c-text); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: var(--tr-mono);
}
.prose ul, .prose ol { display: grid; gap: var(--sp-2); }
.prose li { position: relative; padding-inline-start: var(--sp-6); }
.prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: var(--sp-1); inset-block-start: calc(var(--lh-prose) * 0.5em);
  inline-size: var(--list-dash); block-size: var(--bw); background: var(--c-line-4);
}
.prose ol { counter-reset: item; }
.prose ol > li { counter-increment: item; }
/* Sıra numarası biraz küçük ama satırın tam yüksekliğinde: ilk satıra ortalı durur (üst simge gibi yukarıda değil). */
.prose ol > li::before {
  content: counter(item); position: absolute; inset-inline-start: 0;
  color: var(--c-text-3); font-size: calc(var(--marker-scale) * 1em); line-height: calc(var(--lh-prose) / var(--marker-scale));
  font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.prose strong { color: var(--c-text); font-weight: var(--fw-semibold); }
.prose a { color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-line-3); text-underline-offset: var(--underline-offset); text-decoration-thickness: var(--bw); overflow-wrap: anywhere; }
.prose a:hover { text-decoration-color: var(--c-text); }

@media (min-width: 720px) {
  .legal { padding-block-start: var(--sp-10); }
  .legal-head { padding: var(--sp-8) var(--sp-10) var(--sp-10); }
  .legal-doc { padding: var(--sp-10); }
}
@media (min-width: 1000px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr) var(--legal-aside); align-items: start; gap: var(--sp-6); margin-block-start: var(--sp-6); }
  .legal-doc { order: 0; padding: var(--sp-12); }
  /* Geniş ekranda okuma sayfası: gövde bir basamak büyük, satır uzunluğu yine --prose-max (ch yazıyla büyür). */
  .prose { font-size: var(--fs-h4); }
  .legal-aside { display: grid; gap: var(--sp-4); position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-6)); }
  .legal-nav { display: grid; gap: 0; padding: var(--sp-2); border-radius: var(--r-xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); }
  .legal-nav-title { display: block; padding: var(--sp-3) var(--sp-3) var(--sp-2); color: var(--c-text-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
  .legal-nav a { justify-content: space-between; border-radius: var(--r-md); padding-inline: var(--sp-3); background: none; border-color: transparent; }
  .legal-nav a:hover { background: var(--c-s2); border-color: transparent; }
  .legal-nav a[aria-current] { background: var(--c-s3); border-color: var(--c-line-2); }
  .legal-nav .icon { display: block; color: var(--c-text-3); }
  .legal-help { padding: var(--sp-6); }
}

/* ───────────────────────── Hata sayfaları ───────────────────────── */
/* Tek kart: gri dev kod, başlık, açıklama, ana + ikincil eylem; yanında ortasında bir kare eksik bir film şeridi
   ("burada sahne yok"). Telefonlarda şerit üstte. */
.error-page { padding-block: var(--sp-6) var(--section-pad); }
.error-card {
  display: grid; gap: var(--sp-8); padding: var(--sp-6) var(--sp-5) var(--sp-8);
  border-radius: var(--r-2xl); background: var(--c-s1); border: var(--bw) solid var(--c-line); overflow: clip;
}
.error-copy { display: grid; justify-items: start; gap: var(--sp-4); }
.error-code {
  color: var(--c-title-muted); font-size: var(--fs-error); line-height: 0.9; font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums;
}
.error-title { font-size: var(--fs-h2); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: var(--fw-semibold); text-wrap: balance; }
.error-body { color: var(--c-text-2); font-size: var(--fs-lead); line-height: var(--lh-snug); max-inline-size: var(--measure-sm); }
.error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block-start: var(--sp-2); }
.error-strip { order: -1; display: flex; justify-content: center; align-items: center; gap: var(--sp-3); }
.error-strip .pic { inline-size: var(--error-frame); aspect-ratio: 2 / 3; border-radius: var(--r-md); border: var(--bw) solid var(--c-line-2); }
.error-strip .pic:first-child, .error-strip .pic:last-child { opacity: 0.5; }
.error-gap {
  display: grid; place-items: center; inline-size: var(--error-frame); aspect-ratio: 2 / 3;
  border-radius: var(--r-md); border: var(--bw-1-5) dashed var(--c-line-4); color: var(--c-text-3);
}
.error-gap .icon { inline-size: var(--icon-lg); block-size: var(--icon-lg); }
@media (min-width: 900px) {
  .error-page { padding-block-start: var(--sp-12); }
  .error-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); padding: var(--sp-12); }
  .error-strip { order: 0; }
}

/* ───────────────────────── Altbilgi ───────────────────────── */
.site-footer { border-block-start: var(--bw) solid var(--c-line); padding-block: var(--sp-12) var(--sp-8); background: var(--c-bg); }
.footer-top { display: grid; gap: var(--sp-10); }
.footer-brand { display: grid; gap: var(--sp-3); justify-items: start; align-content: start; max-inline-size: var(--measure-xs); }
.footer-brand p { color: var(--c-text-2); font-size: var(--fs-body-sm); }
.footer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
.footer-col { display: grid; align-content: start; }
.footer-heading { color: var(--c-text-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); margin-block-end: var(--sp-2); }
.footer-col a { display: flex; align-items: center; min-block-size: var(--tap); color: var(--c-text-2); font-size: var(--fs-body-sm); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--c-text); }
.footer-support { grid-column: 1 / -1; }
.footer-bottom { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-10); padding-block-start: var(--sp-6); border-block-start: var(--bw) solid var(--c-line); color: var(--c-text-3); font-size: var(--fs-sm); }
/* Telefonlar: ürün bağlantıları (menünün aynısı) tam genişlikte sıkı 3 sütunlu ızgara; sonra Yasal, sonra kendi
   satırında Destek (adres tek satırda kalır). */
@media (max-width: 639px) {
  .site-footer { padding-block-start: var(--sp-10); }
  .footer-top { gap: var(--sp-8); }
  .footer-columns { row-gap: var(--sp-6); }
  .footer-product { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-4); }
  .footer-product .footer-heading { grid-column: 1 / -1; }
  .footer-support { grid-column: 1 / -1; }
  .footer-bottom { margin-block-start: var(--sp-8); }
}
@media (max-width: 359px) {
  .footer-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Uzun bölüm adları (es "Cómo funciona", hi "कैसे काम करता है") 3 sütunda bölünüp tek kelime bırakıyordu. */
@media (max-width: 419px) {
  :root:lang(es) .footer-product, :root:lang(hi) .footer-product { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  /* Destek sütunu adresin boyunda (en fazla yarı genişlik): 1000–1159'da dar üçte birde "support@ / episodream.com"
     diye bölünüyordu. Çok uzun bir adres yine @'den sonra kırılır (<wbr>). */
  .footer-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) fit-content(50%); }
  .footer-support { grid-column: auto; }
  .footer-bottom { grid-template-columns: auto 1fr; gap: var(--sp-8); }
  .footer-bottom p { text-align: end; }
}
@media (min-width: 1000px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ───────────────────────── Telefon alt çubuğu (indir) ───────────────────────── */
/* Varsayılan gizli: aşağıda açılır (telefonlar, kaydırma zaman çizelgesini destekleyen tarayıcılar); orada hero geçene
   kadar bekleyebilir. Kaydırma zaman çizelgesi olmayan tarayıcıda (ör. Android için Firefox) alt çubuk hiç yok;
   ilk ekranda ikinci bir indirme düğmesi olmasın. */
.dock {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: none; align-items: center; gap: var(--sp-3);
  min-block-size: var(--dock-h); padding-block: var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  background: var(--c-s1); border-block-start: var(--bw) solid var(--c-line-2);
}
/* Bölüm menüsü ve dil seçicinin olduğu en üste dön: sayfanın her yerinden tek dokunuş. */
.dock-top {
  display: grid; place-items: center; flex: none; inline-size: var(--tap); block-size: var(--tap);
  border-radius: var(--r-pill); background: var(--c-s2); border: var(--bw) solid var(--c-line-2); color: var(--c-text);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dock-top:hover { background: var(--c-s3); border-color: var(--c-line-3); }
.dock-top .icon { rotate: 180deg; }
/* Yazı, düğmenin bıraktığı yeri alır; uzun bir çeviri çok az yer bırakırsa marka adı "Episo…" diye kesilmek yerine
   gizlenir. */
.dock-txt { flex: 1 1 0; display: grid; min-inline-size: 0; line-height: 1.25; container-type: inline-size; }
@container (max-width: 100px) { .dock-txt b { display: none; } }
.dock-txt b, .dock-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-txt b { font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--tr-snug); }
.dock-txt span { color: var(--c-text-3); font-size: var(--fs-xs); }
.dock .btn { flex: none; min-block-size: var(--tap); margin-inline-start: auto; }
/* Alt satır sadece düğmenin yanında tek satıra sığdığı yerde (asla kesik değil). */
@media (max-width: 449px) { .dock-txt span { display: none; } }
@media (max-width: 359px) { .dock-txt { display: none; } .dock .btn { flex: 1; } }

/* ───────────────────────── Hareket ───────────────────────── */
@keyframes rise { from { opacity: 0; translate: 0 var(--rise); } to { opacity: 1; translate: 0 0; } }
@keyframes fill { from { inline-size: 46%; } to { inline-size: 72%; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes drift-up { from { translate: 0 0; } to { translate: 0 var(--reel-shift); } }
@keyframes drift-down { from { translate: 0 var(--reel-shift); } to { translate: 0 0; } }
/* visibility kesikli değişir: sadece tamamen dışarıdayken gizli (odaklanamaz, okunmaz). */
@keyframes dock-in { from { translate: 0 110%; visibility: hidden; } to { translate: 0 0; visibility: visible; } }
@keyframes dock-show { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .rise > * { animation: rise var(--dur-reveal) var(--ease) both; }
  .hero-copy > :nth-child(2), .rise > :nth-child(2) { animation-delay: 80ms; }
  .hero-copy > :nth-child(3), .rise > :nth-child(3) { animation-delay: 160ms; }
  .hero-copy > :nth-child(4), .rise > :nth-child(4) { animation-delay: 220ms; }
  .hero-copy > :nth-child(5), .rise > :nth-child(5) { animation-delay: 280ms; }
  .hero-copy > :nth-child(6), .rise > :nth-child(6) { animation-delay: 340ms; }
  .hero-stage { animation: rise var(--dur-reveal) var(--ease) 200ms both; }
  .track-fill { animation: fill var(--dur-fill) var(--ease) 600ms both; }
  .rec-dot { animation: blink var(--dur-blink) ease-in-out infinite; }
  .caret { animation: caret var(--dur-caret) steps(1) infinite; }
  .reel-col { animation: drift-up var(--dur-reel) ease-in-out infinite alternate; }
  .reel-col:nth-child(2) { animation-name: drift-down; animation-duration: calc(var(--dur-reel) * 1.15); }
  .reel-col:nth-child(3) { animation-duration: calc(var(--dur-reel) * 0.85); }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
/* Alt çubuk her sayfada, hareket azaltılmış olsun olmasın --dock-from kadar kaydırınca gelir (ana sayfada hero'nun Play
   rozeti gittikten sonra: ilk ekranda ikinci indirme düğmesi yok). Hareket azaltılmışsa yukarı kaymak yerine yerinde belirir. */
@supports (animation-timeline: scroll()) {
  @media (max-width: 639px) {
    .dock { display: flex; animation: dock-in linear both; animation-timeline: scroll(root); animation-range: var(--dock-from) var(--dock-to); }
    body { padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  }
}
/* ---------- Sayfanın kaydırma çubuğu: grafit, ince, hap şeklinde ---------- */

/* Firefox ve yeni Chrome: standart özellikler */
html { scrollbar-color: var(--c-scroll-thumb) var(--c-scroll-track); }

/* Chrome / Edge / Safari: tutamak, çevresindeki şeffaf kenarla zeminden ayrılır (background-clip) */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; }
  ::-webkit-scrollbar { width: var(--scroll-size); height: var(--scroll-size); }
  ::-webkit-scrollbar-track { background: var(--c-scroll-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--c-scroll-thumb);
    border: var(--scroll-inset) solid transparent;
    border-radius: var(--r-pill);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--c-scroll-thumb-hover); }
  ::-webkit-scrollbar-corner { background: var(--c-scroll-track); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.dock), *::before, *::after { animation: none !important; transition: none !important; }
  .dock { animation-name: dock-show; }
  /* Sayfadaki tek gerçek video da durur: yerine aynı karenin durağan hâli. Videonun kaynakları da bu durumda seçilmez
     (<source media>), dosya hiç inmez. */
  .video-card video { display: none; }
  .video-card .video-still { display: block; }
}