/* Lexipeek sitesi: "Mürekkep" (App/Shared/Theme.swift). Yalnız bu site için yazıldı.
   Marka: kâğıt #EAF0F8 (buz mavisi; 16 Eki'ye kadar krem #F7F5EF, Ömer bej sevmiyor), lacivert mürekkep #1F2A44, vurgu #3D5A80,
   gece laciverti #121826, mercan #E4572E, yeşil #2E8B57.
   Düzen (Ömer, 14 Eki 2026): bütün sayfa gece laciverti; kâğıt rengi yalnız kart yüzeyi. Karanlık bir masada kâğıt fişler,
   uygulamanın "mürekkep ve kâğıt" fikri. Site açık ve koyu modda aynı görünür (bilerek). Yalnız Ana Ekran widget
   görüntüleri telefonun görünümüne göre açık ya da koyu gelir.
   Lacivert üstünde yazı kâğıt rengi (#EAF0F8), ikincil yazı #A9B2C3; kâğıt kartta yazı mürekkep (#1F2A44), ikincil #5D677D.
   Mercan vurgu; yeşil yalnız onay işaretleri ve "Ücretsiz". Mercan ve yeşil zeminde yazı büyük ve kalın (WCAG büyük yazı).
   Başlıklar yuvarlak sistem yazı tipi (Safari'de SF Pro Rounded). Dış yazı tipi, betik ya da iz sürücü yok.
   Satır içi stil yok: _headers'taki CSP "style-src 'self'" bunu engeller. Görseller assets/img/ altında.
   Telefon çizimleri kapsayıcı birimiyle (cqw) ölçeklenir: her şey telefonun genişliğine göre büyür, küçülür. */

:root {
  color-scheme: dark;
  --paper: #EAF0F8;
  --ink: #1F2A44;
  --night: #121826;
  --accent: #3D5A80;
  --coral: #E4572E;
  --green: #2E8B57;

  /* Lacivert sayfa */
  --bg: #121826;
  --bg-2: #161E2E;
  --bg-3: #1A2336;
  --text: #EAF0F8;
  --muted: #A9B2C3;
  --link: #8FB1DA;
  --kicker: #F08A6B;
  --line: rgba(255, 255, 255, 0.1);
  --tile: rgba(255, 255, 255, 0.045);
  --tile-line: rgba(255, 255, 255, 0.11);
  --surface: #121826;
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 30px 60px -32px rgba(0, 0, 0, 0.75);
  --device-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.8), 0 20px 40px -24px rgba(0, 0, 0, 0.6);

  --round: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-lg: 32px;
  --gutter: 16px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.6 10.4 2.9 2.9 5.9-6.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

/* Kâğıt kart: içindeki her şey mürekkep renklerine döner */
.paper {
  --text: #1F2A44;
  --muted: #5D677D;
  --link: #3D5A80;
  --line: rgba(31, 42, 68, 0.12);
  --tile: #FFFFFF;
  --tile-line: rgba(31, 42, 68, 0.1);
  --surface: #EAF0F8;
  color-scheme: light;
  background-color: var(--paper);
  color: var(--text);
}

/* Temel */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--sans);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--round);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 700; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; border-radius: 12px;
  background: var(--paper); color: var(--ink);
  font: 700 1rem/1 var(--round); text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Üst çubuk: her sayfada aynı */
.topbar {
  position: sticky; top: 0; z-index: 50;
  color: #fff;
  background: rgba(18, 24, 38, 0.9);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  color: #fff; text-decoration: none;
  font: 800 1.3rem/1 var(--round); letter-spacing: -0.015em;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav a {
  padding: 10px 10px; border-radius: 10px;
  color: rgba(247, 245, 239, 0.8); text-decoration: none; white-space: nowrap;
  font: 650 0.97rem/1 var(--round);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.1); }
.nav a.lang {
  margin-left: 6px; padding: 7px 9px;
  border: 1.5px solid rgba(255, 255, 255, 0.34); border-radius: 8px;
  color: #fff; font-weight: 750;
}
@media (max-width: 759px) { .nav .wide { display: none; } }
@media (max-width: 359px) { .nav .mid { display: none; } }
@media (max-width: 380px) {
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; }
  .nav a { padding: 9px 7px; }
}

/* Bölümler: lacivert ailesi, aralarında ince çizgi ve yumuşak ışık */
.section { position: relative; padding-block: clamp(72px, 7vw + 40px, 136px); border-top: 1px solid rgba(255, 255, 255, 0.05); }
.section-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 52px); }
.section h2, .doc-hero h1 { font-size: clamp(2.2rem, 1.45rem + 3vw, 3.7rem); }
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  color: var(--kicker); font: 700 1.02rem/1.3 var(--round);
}
.kicker::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--coral); }
.lead { margin: 18px 0 0; max-width: 34em; color: var(--muted); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem); line-height: 1.5; }
.tick-list { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font: 650 1rem/1.3 var(--round); }
.tick-list li { display: inline-flex; align-items: center; gap: 9px; }
.tick-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) var(--check) center / 14px no-repeat;
}

/* Cihaz çerçevesi (iPhone, 1179 × 2556 ekran) */
.device { position: relative; isolation: isolate; container-type: inline-size; width: 100%; }
.device-frame {
  position: relative;
  padding: 3.4cqw;
  border-radius: 16cqw;
  background: #05070B;
  box-shadow:
    inset 0 0 0 0.75cqw #4A5161,
    inset 0 0 0 1.05cqw #171A22,
    var(--device-shadow);
}
.device-frame::before {
  content: ""; position: absolute; z-index: -1;
  left: -0.8cqw; top: 38cqw; width: 1.3cqw; height: 48cqw;
  border-radius: 0.6cqw 0 0 0.6cqw;
  background: linear-gradient(to bottom, #3C4250 0 7cqw, transparent 7cqw 14cqw, #3C4250 14cqw 29cqw, transparent 29cqw 33cqw, #3C4250 33cqw 48cqw);
}
.device-frame::after {
  content: ""; position: absolute; z-index: -1;
  right: -0.8cqw; top: 58cqw; width: 1.3cqw; height: 24cqw;
  border-radius: 0 0.6cqw 0.6cqw 0;
  background: #3C4250;
}
.device-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 1179 / 2556;
  border-radius: 12.6cqw;
  background: var(--paper);
}
.device-screen > img { width: 100%; height: 100%; object-fit: cover; }
.device-island {
  position: absolute; z-index: 2; top: 2.7cqw; left: 50%;
  width: 29.5cqw; height: 8.7cqw; margin-left: -14.75cqw;
  border-radius: 99px; background: #000;
}
/* Yalnız üst kısmı görünen telefon (Plus ekranı, fiyat alanının üstü) */
.device--top .device-frame { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.device--top .device-screen { aspect-ratio: 1179 / 1950; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Giriş: kilit ekranı */
.hero {
  position: relative; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(56rem 38rem at 84% 16%, rgba(61, 90, 128, 0.62), transparent 62%),
    radial-gradient(42rem 30rem at 74% 104%, rgba(228, 87, 46, 0.3), transparent 62%),
    radial-gradient(38rem 30rem at -6% 100%, rgba(61, 90, 128, 0.3), transparent 66%),
    var(--bg);
}
.hero-in { display: grid; gap: 44px; align-items: center; padding-top: 52px; }
.hero-copy { max-width: 36rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
  color: var(--kicker); font: 700 1.05rem/1.3 var(--round);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--coral); }
.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(3.1rem, 1.7rem + 5.4vw, 5.7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 .hl { color: var(--coral); }
.hero-sub { margin: 0 0 32px; max-width: 26em; color: rgba(247, 245, 239, 0.78); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.42rem); line-height: 1.45; }
.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 30px; }
.soon p { margin: 0; }
.soon-pill {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 20px 13px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff; font: 750 1.05rem/1.2 var(--round);
}
.soon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(228, 87, 46, 0.25); }
.soon-meta { color: var(--muted); font-size: 0.98rem; }
.hero .tick-list { color: rgba(247, 245, 239, 0.92); }
.hero-note { margin: 20px 0 0; color: var(--muted); font-size: 0.95rem; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 18%; bottom: 6%;
  background: radial-gradient(closest-side, rgba(228, 87, 46, 0.42), rgba(61, 90, 128, 0.2) 60%, transparent);
  filter: blur(28px);
}
.hero .device { width: min(76vw, 320px); }
@media (max-width: 919px) {
  .hero-copy { margin-inline: auto; text-align: center; }
  .eyebrow, .soon, .hero .tick-list { justify-content: center; }
  .hero-sub { margin-inline: auto; }
  .hero-art { max-height: calc(min(76vw, 320px) * 1.5); overflow: hidden; }
}
@media (min-width: 920px) {
  .hero-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; padding-block: 64px; }
  .hero .device { width: 316px; }
}
@media (min-width: 1200px) { .hero .device { width: 330px; } }

/* Kilit ekranı çizimi (gerçek widget görüntüleriyle) */
.lock {
  height: 100%;
  color: #fff; text-align: center; font-family: var(--sans);
  background:
    radial-gradient(125% 46% at 50% 106%, rgba(228, 87, 46, 0.95) 0%, rgba(228, 87, 46, 0.5) 36%, transparent 70%),
    radial-gradient(80% 36% at 106% 58%, rgba(143, 177, 218, 0.28), transparent 72%),
    radial-gradient(110% 52% at -4% -2%, rgba(143, 177, 218, 0.8) 0%, transparent 64%),
    linear-gradient(180deg, #3D5A80 0%, #2C4268 36%, #233253 60%, #45304A 100%);
}
.lock-status { position: absolute; top: 4.7cqw; right: 7.6cqw; display: flex; align-items: center; gap: 1.5cqw; }
.lock-status svg { width: auto; height: 3.1cqw; fill: #fff; }
.lock-date { margin: 0; padding-top: 18cqw; font: 600 5cqw/1.2 var(--sans); letter-spacing: 0.01em; opacity: 0.92; }
.lock-time { margin: 0.3cqw 0 0; font: 700 23cqw/1 var(--sans); letter-spacing: -0.025em; opacity: 0.96; }
.lock-widgets { display: flex; align-items: center; justify-content: center; gap: 2.4cqw; margin-top: 3.4cqw; }
.lock-widgets .w-rect { width: 44.5cqw; }
.lock-widgets .w-circle { width: 21.7cqw; }
.lock-btn {
  position: absolute; bottom: 8.6cqw;
  display: grid; place-items: center;
  width: 12.8cqw; height: 12.8cqw; border-radius: 50%;
  background: rgba(18, 24, 38, 0.3);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lock-btn svg { width: 6cqw; height: 6cqw; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lock-btn--left { left: 10.5cqw; }
.lock-btn--right { right: 10.5cqw; }
.lock-bar {
  position: absolute; bottom: 2.3cqw; left: 50%;
  width: 36cqw; height: 1.3cqw; margin-left: -18cqw;
  border-radius: 99px; background: rgba(255, 255, 255, 0.92);
}
/* Büyüteç: kilit ekranındaki widget'ın aynısı, iki kat büyük */

/* Nasıl çalışır: adımlar kâğıt fiş */
.how {
  background:
    radial-gradient(44rem 30rem at 100% 10%, rgba(61, 90, 128, 0.34), transparent 64%),
    radial-gradient(36rem 26rem at 0% 90%, rgba(61, 90, 128, 0.18), transparent 66%),
    var(--bg-2);
}
.how-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 920px) { .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.steps { display: grid; gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 18px; align-items: start;
  padding: 20px 22px 20px 20px;
  border-radius: 22px;
  box-shadow: var(--card-shadow);
}
.step::before {
  counter-increment: step; content: counter(step);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--coral); color: #fff;
  font: 800 1.55rem/1 var(--round);
}
.step h3 { margin-top: 2px; font-size: 1.3rem; }
.step p { margin: 6px 0 0; color: var(--muted); }
.duo { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1 / 1.3; }
.duo .device { position: absolute; }
.duo .device--back { left: 0; top: 0; width: 50%; }
.duo .device--front { right: 0; bottom: 0; width: 58%; }

/* Tekrar ritmi: 1, 3, 7, 14, 30 gün */
.rhythm {
  display: grid; gap: 34px; align-items: center;
  margin-top: clamp(64px, 7vw, 104px);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border-top: 5px solid var(--coral);
}
@media (min-width: 920px) { .rhythm { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 56px; } }
.rhythm h3 { margin-bottom: 18px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.legend { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.legend li::before { content: ""; height: 14px; margin-top: 5px; border-radius: 14px 14px 0 0; border: 3px solid var(--green); border-bottom: 0; }
.legend li.again::before { height: 10px; margin-top: 9px; border-radius: 0 0 10px 10px; border: 2.5px dashed var(--coral); border-top: 0; }
.legend strong { color: var(--text); }
.track { padding: 0 8px; }
.hops { position: relative; display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.hops::before {
  content: ""; position: absolute; left: -7px; bottom: -7px; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text); box-shadow: 0 0 0 3px var(--surface);
}
.hop {
  position: relative; flex: 1.6 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  font-family: var(--round);
}
.hop-3 { flex-grow: 2.3; }
.hop-7 { flex-grow: 3.2; }
.hop-14 { flex-grow: 4.3; }
.hop-30 { flex-grow: 6; }
.hop::before {
  content: ""; position: absolute; right: -7px; bottom: -7px; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 3px var(--surface);
}
.hop::after {
  content: ""; width: 100%; aspect-ratio: 2.1;
  border: 3px solid var(--green); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.hop-n { font: 800 clamp(1.3rem, 1rem + 1.3vw, 2.1rem)/1 var(--round); letter-spacing: -0.02em; }
.hop-u { margin: 3px 0 8px; color: var(--muted); font: 650 0.82rem/1.1 var(--round); }
.loop {
  position: relative; height: 26px; margin-top: 7px;
  border: 2.5px dashed var(--coral); border-top: 0;
  border-radius: 0 0 18px 18px;
}
.loop::before {
  content: ""; position: absolute; left: -7.25px; top: -4px;
  border: 6px solid transparent; border-bottom: 9px solid var(--coral); border-top: 0;
}
.loop span {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  padding: 0 10px; background: var(--surface);
  color: var(--text); font: 700 0.92rem/1.4 var(--round); white-space: nowrap;
}

/* Widget'lar: lacivert duvar kâğıdı gibi bir pano */
.widgets {
  background:
    radial-gradient(46rem 32rem at 90% 30%, rgba(61, 90, 128, 0.3), transparent 64%),
    radial-gradient(40rem 28rem at 0% 0%, rgba(61, 90, 128, 0.16), transparent 66%),
    var(--bg);
}
.widgets .tick-list { margin-top: 30px; }
.widgets-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px) { .widgets-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 64px; } }
.panel {
  padding: clamp(20px, 3.4vw, 40px) clamp(18px, 3.4vw, 40px) clamp(16px, 2.4vw, 26px);
  border-radius: 36px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(143, 177, 218, 0.34), transparent 60%),
    radial-gradient(110% 70% at 85% 110%, rgba(228, 87, 46, 0.42), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, rgba(61, 90, 128, 0.5), transparent 70%),
    linear-gradient(160deg, #2A3B5E 0%, #1F2C48 55%, #1A2338 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.85);
}
.homescreen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 28px); align-items: start;
  max-width: 600px; width: 100%; margin-inline: auto;
}
.homescreen .w { display: block; }
.homescreen .w img { width: 100%; filter: drop-shadow(0 20px 30px rgba(6, 10, 20, 0.45)); }
.w-medium { grid-column: 1 / -1; }
.w-small { grid-column: 1 / span 2; }
.home-app {
  grid-column: 3; justify-self: center;
  display: grid; justify-items: center; gap: 8px;
  width: 76%;
  color: #fff; font: 600 clamp(0.72rem, 0.6rem + 0.4vw, 0.88rem)/1.2 var(--sans);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.home-app img { width: 100%; border-radius: 22.5%; box-shadow: 0 14px 24px -10px rgba(6, 10, 20, 0.6); }
.widgets-note { margin: 22px 0 0; color: rgba(247, 245, 239, 0.8); font-size: 0.92rem; text-align: center; }
@media (prefers-color-scheme: dark) {
  .homescreen .w img { filter: drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.6)) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.55)); }
}

/* Fiyat: sakin bir "Ücretsiz" kartı, sonra kâğıt fiş gibi ayrı bir Plus teklifi */
.pricing {
  padding-bottom: 0;
  background:
    radial-gradient(50rem 34rem at 10% 0%, rgba(61, 90, 128, 0.22), transparent 64%),
    var(--bg-2);
}
.free {
  display: grid; gap: 26px 44px;
  padding: clamp(24px, 3.6vw, 44px);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  border: 1px solid var(--tile-line);
}
@media (min-width: 880px) { .free { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; } }
.badge {
  display: inline-block;
  padding: 8px 13px 9px; border-radius: 11px;
  color: #fff; font: 800 1.17rem/1 var(--round); letter-spacing: 0.005em;
}
.badge--free { background: var(--green); }
.badge--plus { background: var(--coral); }
.free-total { margin: 16px 0 0; font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.7rem)/1 var(--round); letter-spacing: -0.03em; }
.free-total small, .plus-total small { margin-left: 4px; color: var(--muted); font-size: 0.42em; letter-spacing: -0.01em; }
.free-sub { margin: 10px 0 0; color: var(--muted); }
.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.levels li { padding: 16px 14px 14px; border-radius: 18px; background: var(--tile); border: 1px solid var(--tile-line); }
.chip {
  display: inline-block;
  padding: 4px 7px 5px; border: 1.5px solid currentColor; border-radius: 7px;
  color: var(--link); font: 800 0.92rem/1 var(--round); white-space: nowrap;
}
.lv-name { display: block; margin-top: 12px; font: 750 1.12rem/1.2 var(--round); }
.lv-hint { display: block; margin-top: 3px; color: var(--muted); font-size: 0.92rem; line-height: 1.35; }
.lv-n { display: block; margin-top: 10px; font: 750 0.98rem/1.2 var(--round); }
@media (max-width: 419px) { .levels { grid-template-columns: minmax(0, 1fr); } }
.free .tick-list { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); }

.plus {
  padding-block: clamp(20px, 3vw, 32px) clamp(72px, 7vw + 40px, 136px);
  background:
    radial-gradient(48rem 34rem at 80% 40%, rgba(228, 87, 46, 0.14), transparent 62%),
    var(--bg-2);
}
.plus-card {
  position: relative; overflow: hidden;
  display: grid;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 50px 90px -40px rgba(0, 0, 0, 0.85);
}
.plus-card::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 7px; background: var(--coral); }
@media (min-width: 960px) {
  .plus-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-areas: "head head" "body art"; }
  .plus-head { grid-area: head; }
  .plus-body { grid-area: body; }
  .plus-art { grid-area: art; }
}
.plus-head { padding: clamp(32px, 4.6vw, 64px) clamp(24px, 4.6vw, 64px) 0; }
.plus-body { padding: 8px clamp(24px, 4.6vw, 64px) clamp(28px, 4.6vw, 64px); }
.plus h2 { margin: 18px 0 0; font-size: clamp(2.2rem, 1.45rem + 3vw, 3.7rem); }
.plus-lead { margin: 14px 0 0; max-width: 34em; color: var(--muted); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; }
.plus-total { margin: 26px 0 0; font: 800 clamp(2.6rem, 2rem + 2.4vw, 3.7rem)/1 var(--round); letter-spacing: -0.03em; }
.deck {
  padding: 16px 16px 14px; border-radius: 18px;
  background: var(--tile);
  border: 1px solid var(--tile-line);
}
.deck-name { display: block; font: 750 1.1rem/1.2 var(--round); }
.deck-n { display: block; margin-top: 2px; color: var(--muted); font-size: 0.92rem; }
.deck-ico { display: block; width: 26px; height: 26px; margin-bottom: 10px; fill: none; stroke: var(--link); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plus-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.deck--level {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip n" "name name" "desc desc";
  gap: 2px 12px; align-items: center;
  padding: 18px 18px 16px;
  background: linear-gradient(120deg, #E4EBF4, #F0F3F8);
  border-color: rgba(61, 90, 128, 0.22);
}
.deck--level .chip { grid-area: chip; justify-self: start; font-size: 1.12rem; padding: 6px 9px 7px; border-radius: 10px; }
.deck--level .deck-n { grid-area: n; justify-self: end; margin: 0; color: var(--text); font: 800 1.4rem/1.05 var(--round); text-align: right; }
.deck--level .deck-n small { display: block; color: var(--muted); font: 600 0.8rem/1.3 var(--sans); }
.deck--level .deck-name { grid-area: name; margin-top: 12px; font-size: 1.3rem; }
.deck--level .deck-desc { grid-area: desc; color: var(--muted); font-size: 0.95rem; line-height: 1.35; }
.decks-group { margin: 22px 0 10px; color: var(--muted); font: 650 0.98rem/1.4 var(--round); }
.decks-group b { color: var(--text); }
.decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 599px) { .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 419px) { .plus-levels { grid-template-columns: minmax(0, 1fr); } }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 0; }
.price {
  display: grid; gap: 2px; margin: 0;
  padding: 18px 18px 16px; border-radius: 20px;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 16px 30px -20px rgba(18, 24, 38, 0.6);
}
.price-label { color: #A9B2C3; font: 700 0.95rem/1.3 var(--round); }
.price-num { font: 800 clamp(1.7rem, 1.25rem + 1.5vw, 2.35rem)/1.1 var(--round); letter-spacing: -0.02em; }
.price-note { color: #A9B2C3; font-size: 0.9rem; line-height: 1.35; }
@media (max-width: 359px) { .prices { grid-template-columns: minmax(0, 1fr); } }
.plus-fine { margin: 18px 0 0; max-width: 46em; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.plus-art { display: flex; align-items: flex-end; justify-content: center; padding: 0 24px; }
.plus-art .device { width: min(76%, 320px); margin-bottom: -8px; --device-shadow: 0 0 50px -12px rgba(18, 24, 38, 0.55); }
@media (min-width: 960px) { .plus-art { padding: 0 48px 0 0; } .plus-art .device { width: 100%; max-width: 320px; } }

/* Dürüst fiyat şeridi */
.honest { padding-block: clamp(44px, 5vw, 68px); background: var(--bg-3); border-block: 1px solid rgba(255, 255, 255, 0.07); }
.honest-in { display: grid; gap: 22px; }
@media (min-width: 1000px) { .honest-in { grid-template-columns: auto minmax(0, 1fr); gap: 20px 56px; align-items: center; } }
.honest h2 { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem); }
.honest .tick-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; font-size: 1.05rem; }
@media (min-width: 560px) { .honest .tick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .honest .tick-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.honest-note { margin: 0; color: var(--muted); font-size: 0.95rem; }
@media (min-width: 1000px) { .honest-note { grid-column: 2; } }

/* Gizlilik */
.privacy {
  padding-block: clamp(72px, 6vw + 40px, 112px);
  background:
    radial-gradient(44rem 30rem at 92% 50%, rgba(46, 139, 87, 0.16), transparent 62%),
    radial-gradient(40rem 30rem at 0% 0%, rgba(61, 90, 128, 0.26), transparent 64%),
    var(--bg);
}
.privacy-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .privacy-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 72px; } }
.privacy p.lead { margin: 18px 0 22px; }
.privacy-link { margin: 0; font-weight: 700; }
.label-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 26px;
  box-shadow: var(--card-shadow);
}
.label-card svg { grid-row: 1 / span 3; width: 60px; height: 60px; }
.label-card p { margin: 0; }
.label-card .label-kicker { color: var(--muted); font: 650 0.92rem/1.3 var(--round); }
.label-card .label-title { font: 800 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.1 var(--round); letter-spacing: -0.02em; }
.label-card .label-en { color: var(--muted); font-size: 0.95rem; }

/* Kaynaklar (kısa) */
.sources { padding-block: clamp(56px, 6vw, 92px); background: var(--bg-2); }
.sources h2 { margin-bottom: 22px; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.95rem); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.source-grid li {
  padding: 16px 18px; border-radius: 18px;
  background: var(--tile); border: 1px solid var(--tile-line);
  color: var(--muted); font-size: 0.93rem; line-height: 1.5;
}
.source-grid strong { display: block; margin-bottom: 4px; color: var(--text); font: 750 1rem/1.3 var(--round); }
.fine { margin: 0; color: var(--muted); font-size: 0.9rem; }
.nobr { white-space: nowrap; }

/* Alt bilgi */
.footer { padding-block: 52px 40px; background: #0D121C; color: var(--muted); font-size: 0.95rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-in { display: grid; gap: 28px 48px; }
@media (min-width: 860px) { .footer-in { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.footer-tag { margin: 14px 0 0; max-width: 24em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .footer-links { justify-content: flex-end; padding-top: 8px; } }
.footer-links a { color: #fff; text-decoration: none; font-weight: 600; }
.footer-links a:hover { text-decoration: underline; }
.footer-legal { grid-column: 1 / -1; margin: 0; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.86rem; }

/* Yasal ve destek sayfaları: lacivert sayfa, uzun metin kâğıt kartta */
.doc-hero {
  padding-block: clamp(44px, 6vw, 76px) clamp(84px, 9vw, 128px);
  background:
    radial-gradient(46rem 30rem at 92% 0%, rgba(61, 90, 128, 0.6), transparent 62%),
    radial-gradient(34rem 24rem at 70% 130%, rgba(228, 87, 46, 0.26), transparent 62%),
    var(--bg);
}
.doc-hero--narrow .wrap { max-width: calc(860px + 2 * var(--gutter)); }
.doc-hero .meta { margin: 16px 0 0; color: var(--muted); font-size: 1.05rem; }
.doc-hero .meta a { color: #fff; font-weight: 650; }
.doc-body { margin-top: clamp(-80px, -6vw, -48px); padding-bottom: clamp(64px, 8vw, 112px); }
.doc-grid { display: grid; gap: 24px; justify-content: center; grid-template-columns: minmax(0, 860px); }
@media (min-width: 1040px) {
  .doc-grid--toc { grid-template-columns: 290px minmax(0, 820px); gap: 32px; align-items: start; }
}
.doc {
  padding: clamp(24px, 4.6vw, 56px);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  border-top: 5px solid var(--coral);
}
.doc > :first-child { margin-top: 0; }
.doc h2 { margin: 2em 0 0.6em; font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.62rem); scroll-margin-top: 88px; }
.doc h2::before { content: ""; display: block; width: 30px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--coral); }
.doc ul, .doc ol { margin: 0 0 1em; padding-left: 1.35em; }
.doc li { margin-bottom: 0.45em; }
.doc li::marker { color: var(--link); font-weight: 700; }
.doc .intro { font-size: 1.08rem; }
.gist {
  margin: 0 0 8px; padding: 18px 20px;
  border-radius: 18px; background: #DFE7F1;
  border-left: 4px solid var(--green);
}
.gist p { margin: 0; }
.toc {
  padding: 20px 22px;
  background: var(--bg-3); border: 1px solid var(--tile-line);
  border-radius: 22px; box-shadow: var(--card-shadow);
}
@media (min-width: 1040px) { .toc { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow: auto; } }
.toc h2 { margin: 0 0 10px; font-size: 1.05rem; }
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; border-top: 1px solid var(--line); }
.toc li:first-child { border-top: 0; }
.toc a { display: block; padding: 8px 0; color: var(--text); text-decoration: none; font-size: 0.95rem; line-height: 1.35; }
.toc a:hover { color: var(--link); text-decoration: underline; }
.doc .source-list { margin: 0 0 1em; padding: 0; list-style: none; }
.source-list li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.source-list li:last-child { border-bottom: 1px solid var(--line); }
.source-list strong { display: block; font-family: var(--round); }
.source-list .cite { display: block; margin-top: 4px; color: var(--muted); font-size: 0.9rem; }
.doc .notfound-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em; padding: 0; list-style: none; }
.doc .notfound-links li { margin: 0; }
.notfound-links a {
  display: inline-block; padding: 10px 14px; border-radius: 12px;
  background: #DFE7F1; color: var(--text); text-decoration: none; font: 700 0.98rem/1 var(--round);
}
.notfound-links a:hover { background: #D3DDEA; }

/* Widget bölümü: telefon çerçevesinde gerçek Ana Ekran görüntüsü (16 Eki 2026) */
.device--widgets { max-width: 340px; margin: 0 auto; }

/* ============================================================================
   Özellik bölümleri (16 Eki 2026): alıştırma merdiveni, İlerleme, sesli tekrar, kendi kelimelerin.
   Şemalar yalnız CSS ile canlanır (keyframes); assets/site.js görünür değilken .is-paused ile durdurur.
   Hareket azaltma tercihinde (prefers-reduced-motion) her şema son karesine sabitlenir.
   Şemalar uygulamanın arayüzünü taklit etmez; gerçek ekran görüntüleri telefon çerçevesinde yanlarında durur.
   ============================================================================ */
.feat--ladder {
  background:
    radial-gradient(44rem 30rem at 0% 0%, rgba(61, 90, 128, 0.28), transparent 64%),
    radial-gradient(36rem 26rem at 100% 100%, rgba(228, 87, 46, 0.12), transparent 66%),
    var(--bg);
}
.feat--progress {
  background:
    radial-gradient(44rem 30rem at 100% 0%, rgba(61, 90, 128, 0.3), transparent 64%),
    var(--bg-2);
}
.feat--listen {
  background:
    radial-gradient(40rem 28rem at 0% 100%, rgba(228, 87, 46, 0.14), transparent 64%),
    radial-gradient(44rem 30rem at 100% 10%, rgba(61, 90, 128, 0.24), transparent 64%),
    var(--bg);
}
.feat--own {
  background:
    radial-gradient(44rem 30rem at 10% 0%, rgba(61, 90, 128, 0.28), transparent 64%),
    var(--bg-2);
}
.feat-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px) {
  .feat-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; }
  .feat-grid--flip > .feat-copy { order: 2; }
}
.feat .tick-list { display: grid; gap: 12px 24px; margin-top: 28px; }
@media (min-width: 560px) { .feat .tick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.feat .tick-list li { align-items: flex-start; }
.kicker .tag {
  display: inline-block; padding: 3px 8px 4px; border-radius: 7px;
  background: var(--coral); color: #fff; font: 800 0.8rem/1 var(--round); letter-spacing: 0.01em;
}

/* Merdiven şeması: beş kutu, üstünde kutudan kutuya geçen bir kelime, altında yeşil "bilinen" çubuğu */
.ladder { padding: clamp(16px, 3vw, 30px); border-radius: 26px; box-shadow: var(--card-shadow); border-top: 5px solid var(--coral); }
.ladder-stage {
  --lgap: 6px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 40px auto 6px;
  column-gap: var(--lgap); row-gap: 10px;
}
@media (min-width: 480px) { .ladder-stage { --lgap: 10px; } }
.ladder-stage::after { content: ""; grid-row: 3; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line); }
.rungs { display: contents; margin: 0; padding: 0; list-style: none; }
.rung {
  grid-row: 2; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 3px 10px; border-radius: 14px;
  background: var(--tile); border: 2px solid var(--tile-line);
  text-align: center;
  animation: rung-lit 10s linear infinite;
}
.rung:nth-child(2) { animation-delay: 2s; }
.rung:nth-child(3) { animation-delay: 4s; }
.rung:nth-child(4) { animation-delay: 6s; }
.rung:nth-child(5) { animation-delay: 8s; }
.rung-n {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 7px;
  background: var(--ink); color: #fff; font: 800 0.72rem/1 var(--round);
}
.rung-ico { width: 26px; height: 26px; margin: 6px 0 2px; fill: none; stroke: var(--link); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rung-t { font: 750 0.84rem/1.2 var(--round); }
.rung-s { margin-bottom: 6px; color: var(--muted); font: 600 0.68rem/1.2 var(--sans); }
.rung-d {
  margin-top: auto; padding: 2px 6px 3px; border-radius: 6px;
  background: rgba(61, 90, 128, 0.1); color: var(--link);
  font: 750 0.7rem/1.2 var(--round); white-space: nowrap;
}
@media (min-width: 480px) {
  .rung { padding: 12px 6px; }
  .rung-t { font-size: 0.95rem; }
  .rung-s { font-size: 0.76rem; }
  .rung-d { font-size: 0.78rem; }
}
.ladder-token {
  grid-row: 1; grid-column: 1; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  animation: token-move 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.token-pill {
  position: relative;
  display: inline-block; padding: 7px 10px 8px; border-radius: 10px;
  background: var(--coral); color: #fff;
  font: 800 0.86rem/1 var(--round);
  box-shadow: 0 8px 16px -8px rgba(228, 87, 46, 0.7);
  animation: token-color 10s linear infinite;
}
.token-pill::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; margin-left: -5px;
  background: inherit; transform: rotate(45deg); border-radius: 2px;
}
.ladder-bar {
  grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 1;
  height: 6px; border-radius: 3px; background: var(--green);
  transform-origin: left; transform: scaleX(0);
  animation: ladder-bar 10s linear infinite;
}
.ladder-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 18px 0 0; color: var(--muted); font: 600 0.9rem/1.4 var(--sans); }
.ladder-note .ok, .ladder-note .again { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ladder-note b { color: var(--text); font: 750 0.9rem/1.4 var(--round); }
.ladder-note .ok::before, .ladder-note .again::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.ladder-note .again::before { background: var(--coral); }
@keyframes token-move {
  0% { transform: translateX(0); opacity: 0; }
  3%, 14% { transform: translateX(0); opacity: 1; }
  20%, 34% { transform: translateX(calc(1 * (100% + var(--lgap)))); opacity: 1; }
  40%, 54% { transform: translateX(calc(2 * (100% + var(--lgap)))); opacity: 1; }
  60%, 74% { transform: translateX(calc(3 * (100% + var(--lgap)))); opacity: 1; }
  80%, 95% { transform: translateX(calc(4 * (100% + var(--lgap)))); opacity: 1; }
  98% { transform: translateX(calc(4 * (100% + var(--lgap)))); opacity: 0; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes token-color {
  0%, 84% { background-color: var(--coral); box-shadow: 0 8px 16px -8px rgba(228, 87, 46, 0.7); }
  87%, 100% { background-color: var(--green); box-shadow: 0 8px 16px -8px rgba(46, 139, 87, 0.7); }
}
@keyframes rung-lit {
  0%, 16% { border-color: var(--coral); background: #fff; box-shadow: 0 12px 24px -14px rgba(228, 87, 46, 0.6); transform: translateY(-3px); }
  20%, 100% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; transform: none; }
}
@keyframes ladder-bar {
  0%, 19% { transform: scaleX(0); }
  21%, 39% { transform: scaleX(0.2); }
  41%, 59% { transform: scaleX(0.4); }
  61%, 79% { transform: scaleX(0.6); }
  81%, 86% { transform: scaleX(0.8); }
  88%, 97% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Merdivenin basamakları: dört gerçek ekran görüntüsü, üst kısmı görünür */
.shots {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px;
  margin: clamp(44px, 5vw, 68px) 0 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }
.shot-art {
  padding: 8px 6px 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.device--shot .device-frame { padding-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.device--shot .device-screen { aspect-ratio: 1179 / 2000; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.shot-cap { margin: 10px 0 0; color: var(--muted); font-size: 0.93rem; line-height: 1.45; }
.shot-cap b { display: block; margin-bottom: 3px; color: var(--text); font: 750 1.05rem/1.3 var(--round); }

/* İlerleme: ısı haritası ve 7 günlük yük şeması + gerçek İlerleme ekranı */
.progress-art { display: grid; gap: 28px; align-items: center; }
@media (min-width: 560px) { .progress-art { grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr); } }
.device--progress, .device--listen { width: 100%; max-width: 280px; margin-inline: auto; }
.heat { padding: clamp(18px, 3vw, 28px); border-radius: 26px; box-shadow: var(--card-shadow); border-top: 5px solid var(--coral); }
.heat-title { margin: 0 0 12px; font: 750 1.05rem/1.3 var(--round); }
.heat-title--load { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.heat-grid, .heat-legend { --l0: #DCE3ED; --lvl: var(--l0); }
.heat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.heat-grid > span { display: grid; gap: 4px; }
.heat-grid > span > span {
  aspect-ratio: 1; border-radius: 4px;
  background-color: var(--l0);
  animation: heat-fill 12s ease-out infinite;
  animation-delay: calc((var(--c) * 7 + var(--r)) * 40ms);
}
.heat-grid .l0 { animation: none; }
.l1 { --lvl: #A4BEDC; }
.l2 { --lvl: #6A8FBE; }
.l3 { --lvl: #3D5A80; }
.l4 { --lvl: #1F2A44; }
.heat-grid > span:nth-child(1) { --c: 0; }
.heat-grid > span:nth-child(2) { --c: 1; }
.heat-grid > span:nth-child(3) { --c: 2; }
.heat-grid > span:nth-child(4) { --c: 3; }
.heat-grid > span:nth-child(5) { --c: 4; }
.heat-grid > span:nth-child(6) { --c: 5; }
.heat-grid > span:nth-child(7) { --c: 6; }
.heat-grid > span:nth-child(8) { --c: 7; }
.heat-grid > span:nth-child(9) { --c: 8; }
.heat-grid > span:nth-child(10) { --c: 9; }
.heat-grid > span:nth-child(11) { --c: 10; }
.heat-grid > span:nth-child(12) { --c: 11; }
.heat-grid > span > span:nth-child(1) { --r: 0; }
.heat-grid > span > span:nth-child(2) { --r: 1; }
.heat-grid > span > span:nth-child(3) { --r: 2; }
.heat-grid > span > span:nth-child(4) { --r: 3; }
.heat-grid > span > span:nth-child(5) { --r: 4; }
.heat-grid > span > span:nth-child(6) { --r: 5; }
.heat-grid > span > span:nth-child(7) { --r: 6; }
.heat-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 12px 0 0; color: var(--muted); font: 650 0.78rem/1.3 var(--round); }
.heat-legend span { margin-inline: 4px; }
.heat-legend b { width: 12px; height: 12px; border-radius: 3px; background: var(--lvl); }
.load { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: 64px; margin: 0; padding: 0; list-style: none; }
.load li { position: relative; height: 100%; border-radius: 4px; background: rgba(31, 42, 68, 0.05); }
.load li::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h);
  border-radius: 4px; background: var(--accent);
  transform-origin: bottom; transform: scaleY(0);
  animation: bar-grow 12s ease-out infinite;
  animation-delay: calc(3.3s + var(--i) * 120ms);
}
.load li:nth-child(1) { --i: 0; --h: 56%; }
.load li:nth-child(2) { --i: 1; --h: 34%; }
.load li:nth-child(3) { --i: 2; --h: 82%; }
.load li:nth-child(4) { --i: 3; --h: 46%; }
.load li:nth-child(5) { --i: 4; --h: 24%; }
.load li:nth-child(6) { --i: 5; --h: 62%; }
.load li:nth-child(7) { --i: 6; --h: 40%; }
.load-axis { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--muted); font: 650 0.74rem/1.3 var(--round); }
@keyframes heat-fill {
  0% { background-color: var(--l0); transform: scale(0.7); }
  5%, 76% { background-color: var(--lvl); transform: scale(1); }
  82%, 100% { background-color: var(--l0); transform: scale(1); }
}
@keyframes bar-grow {
  0% { transform: scaleY(0); }
  5%, 70% { transform: scaleY(1); }
  76%, 100% { transform: scaleY(0); }
}

/* Sesli tekrar: dört adım sırayla okunur, okunan adımda ses çubukları */
.listen-art { display: grid; gap: 28px; align-items: center; }
@media (min-width: 560px) { .listen-art { grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr); } }
.voice { padding: clamp(18px, 3vw, 28px); border-radius: 26px; box-shadow: var(--card-shadow); border-top: 5px solid var(--coral); }
.voice-title { margin: 0 0 12px; font: 750 1.05rem/1.3 var(--round); }
.voice-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vs {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 11px 14px; border-radius: 14px;
  background: var(--tile); border: 2px solid var(--tile-line);
  animation: 9s linear infinite;
}
.vs:nth-child(1) { animation-name: vs-1; }
.vs:nth-child(2) { animation-name: vs-2; }
.vs:nth-child(3) { animation-name: vs-3; }
.vs:nth-child(4) { animation-name: vs-4; }
.vs-lang { padding: 3px 7px 4px; border-radius: 6px; background: rgba(61, 90, 128, 0.12); color: var(--link); font: 800 0.72rem/1.2 var(--round); }
.vs-t { font: 700 1rem/1.3 var(--round); }
.vs--sentence .vs-t { font: italic 600 0.95rem/1.35 var(--sans); }
.vs-wave { display: flex; align-items: center; gap: 3px; height: 20px; opacity: 0; animation: 9s linear infinite; }
.vs:nth-child(1) .vs-wave { animation-name: vs-w1; }
.vs:nth-child(2) .vs-wave { animation-name: vs-w2; }
.vs:nth-child(3) .vs-wave { animation-name: vs-w3; }
.vs:nth-child(4) .vs-wave { animation-name: vs-w4; }
.vs-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--coral); animation: wave 0.7s ease-in-out infinite alternate; }
.vs-wave i:nth-child(2) { animation-delay: 0.12s; }
.vs-wave i:nth-child(3) { animation-delay: 0.24s; }
.vs-wave i:nth-child(4) { animation-delay: 0.06s; }
.vs-wave i:nth-child(5) { animation-delay: 0.18s; }
.voice-note { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.voice-note svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@keyframes wave { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes vs-1 {
  0%, 16% { border-color: var(--coral); background: #fff; box-shadow: 0 10px 22px -14px rgba(228, 87, 46, 0.6); }
  18%, 100% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
}
@keyframes vs-2 {
  0%, 16% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
  18%, 38% { border-color: var(--coral); background: #fff; box-shadow: 0 10px 22px -14px rgba(228, 87, 46, 0.6); }
  40%, 100% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
}
@keyframes vs-3 {
  0%, 38% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
  40%, 55% { border-color: var(--coral); background: #fff; box-shadow: 0 10px 22px -14px rgba(228, 87, 46, 0.6); }
  57%, 100% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
}
@keyframes vs-4 {
  0%, 55% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
  57%, 94% { border-color: var(--coral); background: #fff; box-shadow: 0 10px 22px -14px rgba(228, 87, 46, 0.6); }
  96%, 100% { border-color: var(--tile-line); background: var(--tile); box-shadow: none; }
}
@keyframes vs-w1 { 0%, 16% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes vs-w2 { 0%, 16% { opacity: 0; } 18%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes vs-w3 { 0%, 38% { opacity: 0; } 40%, 55% { opacity: 1; } 57%, 100% { opacity: 0; } }
@keyframes vs-w4 { 0%, 55% { opacity: 0; } 57%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Kendi kelimelerin: iki telefon (form arkada, liste önde) */
.duo--own { max-width: 480px; }

/* Görünür değilken dur (site.js) */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* Hareket azaltma: her şema son karesinde durur */
@media (prefers-reduced-motion: reduce) {
  .ladder-token { animation: none; transform: translateX(calc(4 * (100% + var(--lgap)))); opacity: 1; }
  .token-pill { animation: none; background-color: var(--green); box-shadow: 0 8px 16px -8px rgba(46, 139, 87, 0.7); }
  .rung { animation: none; }
  .ladder-bar { animation: none; transform: scaleX(1); }
  .heat-grid > span > span { animation: none; background-color: var(--lvl); }
  .load li::before { animation: none; transform: scaleY(1); }
  .vs, .vs-wave { animation: none; }
  .vs-wave { opacity: 1; }
  .vs-wave i { animation: none; transform: scaleY(0.55); }
}


/* ── Rehberler (16 Eki 2026): ana sayfadaki rehber kartları ve footer'daki ikinci bağlantı satırı ── */
.guides { background: var(--bg-2); }
.guide-grid { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 680px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-card { border-radius: 20px; box-shadow: var(--card-shadow); }
.guide-card a { position: relative; display: grid; gap: 6px; min-height: 100%; padding: 20px 44px 20px 20px; color: var(--text); text-decoration: none; }
.guide-card .guide-title { font: 700 1.12rem/1.3 var(--round); letter-spacing: -0.01em; }
.guide-card .guide-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.guide-card .guide-more { position: absolute; right: 18px; top: 18px; color: var(--coral); font: 800 1.2rem/1 var(--round); transition: transform 0.2s ease; }
.guide-card a:hover .guide-more, .guide-card a:focus-visible .guide-more { transform: translateX(4px); }
.guide-card a:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 20px; }
/* Rehber bağlantıları: her genişlikte kendi satırında, tam genişlik (ikinci sütuna alınınca marka sütunu daralıp alt alta dökülüyordu, 16 Eki). */
.footer-guides { grid-column: 1 / -1; margin-top: -6px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-guides a { font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.footer-guides-label { color: var(--muted); font-weight: 600; }
@media (min-width: 860px) { .footer-guides { justify-content: flex-start; padding-top: 18px; } }