/* ─── Pilotish tanıtım sitesi — uygulamayla aynı tasarım dili ─────────────
   Marka: antrasit #231F20 + sarı #FDDD10 (anayasa v1.2, Karar #12).
   Kural: sarı zeminde metin DAİMA siyah; koyu temada siyahın rolünü beyaz
   üstlenir, sarı hiçbir temada değişmez. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk Variable";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  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;
}

/* ─── Tasarım tokenları (apps/web/src/styles/theme.css ile birebir) ─── */
:root {
  --brand-yellow: #fddd10;
  --brand-ink: #231f20;

  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f3f1ee;
  --ink: #231f20;
  --ink-soft: #5c5657;
  --ink-muted: #8a8384;
  --line: rgba(35, 31, 32, 0.1);
  --line-strong: rgba(35, 31, 32, 0.2);
  --logo-ink: #231f20;
  --accent-bg: #fddd10;
  --accent-ink: #171314;
  --shadow: 0 1px 2px rgba(35, 31, 32, 0.05), 0 4px 16px rgba(35, 31, 32, 0.06);
  --shadow-lg: 0 2px 6px rgba(35, 31, 32, 0.07), 0 18px 48px rgba(35, 31, 32, 0.12);
  --focus-ring: 0 0 0 3px rgba(35, 31, 32, 0.25);
  color-scheme: light;

  /* Cam katman (Tur 4) — açık temada AÇIK cam */
  --p2-glass-bg: rgba(255, 255, 255, 0.8);
  --p2-glass-on: rgba(35, 31, 32, 0.08);
  --p2-glass-hair: rgba(255, 255, 255, 0.7);
  --p2-glass-edge: rgba(35, 31, 32, 0.12);
  --p2-glass-flat: #f6f4f1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1718;
    --surface: #231f20;
    --surface-2: #2c2728;
    --ink: #f5f2f0;
    --ink-soft: #c2bbbc;
    --ink-muted: #948d8e;
    --line: rgba(245, 242, 240, 0.09);
    --line-strong: rgba(245, 242, 240, 0.2);
    --logo-ink: #ffffff;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.45);
    --focus-ring: 0 0 0 3px rgba(253, 221, 16, 0.35);
    color-scheme: dark;

    /* Cam katman (Tur 4) — koyu temada KOYU cam */
    --p2-glass-bg: rgba(48, 43, 44, 0.84);
    --p2-glass-on: rgba(255, 255, 255, 0.1);
    --p2-glass-hair: rgba(255, 255, 255, 0.08);
    --p2-glass-edge: rgba(245, 242, 240, 0.14);
    --p2-glass-flat: #231f20;
  }
}
:root[data-theme="dark"] {
  --bg: #1a1718;
  --surface: #231f20;
  --surface-2: #2c2728;
  --ink: #f5f2f0;
  --ink-soft: #c2bbbc;
  --ink-muted: #948d8e;
  --line: rgba(245, 242, 240, 0.09);
  --line-strong: rgba(245, 242, 240, 0.2);
  --logo-ink: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 18px 48px rgba(0, 0, 0, 0.45);
  --focus-ring: 0 0 0 3px rgba(253, 221, 16, 0.35);
  color-scheme: dark;

  /* Cam katman (Tur 4) — koyu temada KOYU cam */
  --p2-glass-bg: rgba(48, 43, 44, 0.84);
  --p2-glass-on: rgba(255, 255, 255, 0.1);
  --p2-glass-hair: rgba(255, 255, 255, 0.08);
  --p2-glass-edge: rgba(245, 242, 240, 0.14);
  --p2-glass-flat: #231f20;
}

/* ─── Cam katman: ölçüler ve geri düşüş (Tur 4 / İş 5) ────────────────────
   apps/web/src/styles/theme.css ile BİREBİR aynı sözleşme.
   Sitede saydam olan TEK yüzey: yapışkan site başlığı (.topbar). İçerik
   katmanı (kartlar, galeri, SSS, fiyat kartı, footer) DÜZ kalır. */
:root {
  --p2-glass-blur: 12px;
  --p2-glass-sat: 165%;
  --p2-glass-filter: blur(var(--p2-glass-blur)) saturate(var(--p2-glass-sat));
}
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --p2-glass-bg: var(--p2-glass-flat);
    --p2-glass-hair: transparent;
    --p2-glass-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --p2-glass-bg: var(--p2-glass-flat);
    --p2-glass-hair: transparent;
    --p2-glass-filter: none;
  }
}

/* ─── Taban ─── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter Variable", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: "Space Grotesk Variable", "Inter Variable", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

.skip-link {
  position: absolute; left: -9999px; top: 0.6rem; z-index: 100;
  background: var(--accent-bg); color: var(--accent-ink);
  padding: 0.5rem 1rem; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { left: 0.6rem; }

/* ─── Üst çubuk (Tur 4: CAM — sitedeki TEK saydam yüzey) ───
   Yapışkan; altından hero, kartlar, KREM kağıt kartı ve SARI kartlar geçer.
   Kontrast en kötü durumda ölçülür: tools/visual/saydam-kontrast.mjs */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--p2-glass-bg);
  -webkit-backdrop-filter: var(--p2-glass-filter);
  backdrop-filter: var(--p2-glass-filter);
  border-bottom: 1px solid var(--p2-glass-edge);
}
.topbar-in {
  display: flex; align-items: center; gap: 1rem;
  padding-top: 0.7rem; padding-bottom: 0.7rem;
}
.topbar .logo { color: var(--logo-ink); display: block; }
.topbar .logo svg { height: 40px; width: auto; display: block; }
@media (max-width: 720px) { .topbar .logo svg { height: 32px; } }
.topnav { display: flex; gap: 0.15rem; margin-left: auto; }
.topnav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.9rem;
  padding: 0.4rem 0.7rem; border-radius: 10px; white-space: nowrap;
}
/* Cam üstünde vurgu/seçim: --surface-2 koyu temada camla eş parlaklıkta
   kalıyordu (kaybolurdu) → cam-üstü seçim tokeni */
.topnav a:hover { background: var(--p2-glass-on); color: var(--ink); }
@media (max-width: 980px) { .topnav { display: none; } }
/* 921-1080: sıkışık ara aralıkta kompakt nav (cerrahi denetim bulgusu) */
@media (max-width: 1080px) {
  .topnav { gap: 0.15rem; }
  .topnav a { padding: 0.4rem 0.5rem; font-size: 0.86rem; }
}

.hdr-controls { display: flex; align-items: center; gap: 0.5rem; }
.topnav + .hdr-controls { margin-left: 0.5rem; }
.topnav:not(:has(a)) + .hdr-controls, .topbar-in > .hdr-controls:first-of-type { margin-left: auto; }
@media (max-width: 820px) { .hdr-controls { margin-left: auto; } }
.lang-switch { display: flex; border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.lang-switch a {
  padding: 0.3rem 0.55rem; text-decoration: none;
  color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.lang-switch a.on { background: var(--p2-glass-on); color: var(--ink); }
.lang-switch a:hover { color: var(--ink); }
.lang-switch button {
  font: inherit; cursor: pointer; border: 0; background: transparent;
  padding: 0.3rem 0.55rem;
  color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.lang-switch button.on { background: var(--p2-glass-on); color: var(--ink); }
.lang-switch button:hover { color: var(--ink); }
.theme-switch button {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-weight: 600; letter-spacing: 0;
}
.theme-switch button { padding: 0.3rem 0.55rem; font-size: 0.85rem; }
/* svg ikon glif satır kutusundan kısa — düğme yüksekliği ESKİ glif kutusuna
   sabitlenir (32px): topbar yüksekliği değişirse tüm sayfa kayar (regresyon) */
.theme-switch button { height: 32px; box-sizing: border-box; }
.theme-switch button svg { display: block; }
.topbar .btn-app { white-space: nowrap; }
.topbar .btn-app { margin-left: 0.15rem; }
@media (max-width: 480px) { .topbar .btn-app { display: none; } }

/* ─── Butonlar ─── */
.btn {
  font: inherit; font-weight: 600; cursor: pointer; border: none;
  border-radius: 12px; padding: 0.7rem 1.3rem; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
}
.btn-primary { background: var(--accent-bg); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(0.96); }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-app { padding: 0.42rem 0.85rem; font-size: 0.88rem; border-radius: 10px; }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.05rem; border-radius: 14px; }

/* ─── Hero ─── */
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); text-align: center; }
.hero h1 {
  font-size: clamp(1.9rem, 5.4vw, 3.3rem);
  line-height: 1.12; letter-spacing: -0.02em; font-weight: 700;
  max-width: 21ch; margin: 0 auto;
}
.hero h1 .hl { color: inherit; box-shadow: inset 0 -0.34em 0 0 color-mix(in srgb, var(--brand-yellow) 55%, transparent); border-radius: 2px; }
.hero .lede {
  font-size: clamp(1.02rem, 2.2vw, 1.25rem); color: var(--ink-soft);
  max-width: 44ch; margin: 1.2rem auto 0; text-wrap: balance;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.8rem; }
.hero .devices { margin-top: 1rem; font-size: 0.92rem; color: var(--ink-muted); }
.hero-shot { margin-top: clamp(2rem, 5vw, 3.2rem); }

/* Tarayıcı çerçevesi (sade) */
.browser-frame {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lg);
}
.browser-frame .bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.browser-frame .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.browser-frame .addr {
  margin: 0 auto; font-size: 0.72rem; color: var(--ink-muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
  padding: 0.12rem 0.9rem; letter-spacing: 0.01em;
}
.browser-frame img { width: 100%; }

/* Telefon çerçevesi (sade) */
.phone-frame {
  border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-lg); padding: 8px;
}
.phone-frame img { width: 100%; border-radius: 19px; }

/* ─── Bölümler ─── */
.section { padding: clamp(2.6rem, 6.5vw, 4.5rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 0.7rem;
}
.section h2 { font-size: clamp(1.45rem, 3.4vw, 2.1rem); letter-spacing: -0.015em; max-width: 26ch; }
.section .sub { color: var(--ink-soft); max-width: 58ch; margin-top: 0.8rem; font-size: 1.02rem; }
.center { text-align: center; }
.center h2, .center .sub { margin-left: auto; margin-right: auto; }

/* ─── Amiral gemisi: kağıt → dijital ─── */
.flagship-visual {
  display: grid; grid-template-columns: 1fr auto 1.35fr; align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem); margin-top: 2.2rem;
}
@media (max-width: 720px) {
  .flagship-visual { grid-template-columns: 1fr; }
  .flagship-visual .arrow { transform: rotate(90deg); justify-self: center; }
}
.paper-card {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow); background: #fbf7ee;
}
.paper-card svg { display: block; width: 100%; height: auto; }
.flagship-visual .arrow { color: var(--ink-muted); flex-shrink: 0; }
.flagship-visual .shot { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.flagship-visual .shot img { width: 100%; }
.visual-caption { font-size: 0.85rem; color: var(--ink-muted); text-align: center; margin-top: 0.9rem; }
.flagship-points { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 2rem; }
.flagship-points .point {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.1rem; box-shadow: var(--shadow); font-size: 0.95rem;
}
.flagship-points .point strong { display: block; margin-bottom: 0.25rem; font-weight: 650; }
.flagship-points .point span { color: var(--ink-soft); }

/* ─── Özellik ızgarası ─── */
.features { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 2.2rem; }
.feature {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.35rem 1.4rem; box-shadow: var(--shadow);
}
.feature .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent-ink); margin-bottom: 0.9rem;
}
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.04rem; font-weight: 650; }
.feature p { color: var(--ink-soft); font-size: 0.94rem; margin-top: 0.4rem; }

/* ─── Ekran görüntüleri galerisi ─── */
.gallery {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: start; margin-top: 2.2rem;
}
.gallery .g-wide { grid-column: span 8; }
.gallery .g-tall { grid-column: span 4; max-width: 300px; justify-self: center; }
.gallery .g-half { grid-column: span 6; }
@media (max-width: 820px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .g-wide, .gallery .g-half { grid-column: auto; }
  .gallery .g-tall { grid-column: auto; max-width: 280px; }
}
.gallery figure { margin: 0; }
.gallery figcaption { font-size: 0.85rem; color: var(--ink-muted); text-align: center; margin-top: 0.6rem; }

/* ─── Neden Pilotish ─── */
.why {
  display: grid; gap: 2rem; grid-template-columns: 1.2fr 1fr; align-items: start; margin-top: 2rem;
}
@media (max-width: 720px) { .why { grid-template-columns: 1fr; } }
.why .story { font-size: 1.02rem; color: var(--ink-soft); display: grid; gap: 0.9rem; }
.why .story .sig { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.why .story .sig span { display: block; color: var(--ink-muted); font-weight: 400; font-size: 0.85rem; }
.own-card {
  background: var(--accent-bg); color: var(--accent-ink);
  border-radius: 18px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow);
}
.own-card h3 { font-size: 1.08rem; font-weight: 700; color: var(--accent-ink); }
.own-card p { margin-top: 0.5rem; font-size: 0.96rem; }

/* ─── Yol haritası ─── */
.roadmap { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 2rem; }
.roadmap .item {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.05rem 1.15rem; box-shadow: var(--shadow); font-size: 0.95rem;
}
.roadmap .item .tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 999px; padding: 0.14rem 0.6rem; margin-bottom: 0.5rem;
  background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line);
}
.roadmap .item .tag.now { background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; }
.roadmap .item p { color: var(--ink-soft); margin-top: 0.2rem; }
.roadmap .item strong { font-weight: 650; }

/* ─── SSS ─── */
.faq { max-width: 720px; margin: 2rem auto 0; display: grid; gap: 0.7rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.2rem; font-weight: 600; font-size: 0.98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { color: var(--ink-muted); transition: transform 0.2s; flex-shrink: 0; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .a { padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: 0.95rem; }

/* ─── Kapanış CTA ─── */
.closing { text-align: center; }
.closing .btn-lg { margin-top: 1.6rem; }

/* ─── Footer ─── */
.footer { border-top: 1px solid var(--line); padding: 2.2rem 0 2.6rem; margin-top: 1rem; }
.footer-in { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-start; justify-content: space-between; }
.footer .logo { color: var(--logo-ink); }
.footer .logo svg { height: 24px; width: auto; display: block; }
.footer .col { font-size: 0.88rem; color: var(--ink-muted); display: grid; gap: 0.3rem; }
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer .legal { margin-top: 1.6rem; font-size: 0.82rem; color: var(--ink-muted); }

/* ═══ Uçuş hissi (Sprint 7 Faz D) ═══ */

/* Hero arka planı: canlı rota ağı — koyu temada sarı, açık temada antrasit */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; }
/* Canlı rota deseni (düzeltme: canvas kalktı → keskin SVG; kuyruk/bulanıklık yok).
   İnce büyük daire yayları usulca çizilir, bekler, söner — sakin döngü.
   Koyu temada ince sarı, açık temada ince antrasit; opaklık hero metnini bozmaz.
   prefers-reduced-motion: animasyonsuz, statik zarif desen. */
.hero-routes {
  position: absolute; inset: 0 0 auto 0; width: 100%; height: min(62%, 560px);
  pointer-events: none; --route-color: #57504f; opacity: 0.4;
  /* Okunurluk garantisi: başlık bandında desen radyal maskeyle SOLUKLAŞIR
     (~%35 güç — tamamen silinmez ki yaylar kopuk görünmesin), kenarlara doğru
     tam görünür. Metin katmanı daima üstte ve rahat okunur. */
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(0, 0, 0, 0.35) 0 30%, #000 65%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(0, 0, 0, 0.35) 0 30%, #000 65%);
}
:root[data-theme="dark"] .hero-routes { --route-color: var(--brand-yellow); opacity: 0.36; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-routes { --route-color: var(--brand-yellow); opacity: 0.36; }
}
.hero-routes .arcs path {
  stroke: var(--route-color); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: arc-cycle 30s linear infinite;
}
.hero-routes .dots circle { fill: var(--route-color); }
@keyframes arc-cycle {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  3%   { opacity: 1; }
  26%  { stroke-dashoffset: 0; }         /* yavaş, sakin çizim (~7 sn) */
  58%  { stroke-dashoffset: 0; opacity: 1; }
  72%  { stroke-dashoffset: 0; opacity: 0; }  /* usulca söner */
  73%  { stroke-dashoffset: 1; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
/* Mobil (kurucu bulgusu — Sprint 9): dar ekranda radyal maske deseni yutuyordu.
   Maske hafifler (%60 güç), opaklık artar, çizgi bir tık kalınlaşır — animasyon
   aynı (15 ince yay CSS dash animasyonu mobil bütçede sorunsuz). */
@media (max-width: 820px) {
  .hero-routes,
  :root[data-theme="dark"] .hero-routes,
  :root[data-theme="light"] .hero-routes {
    opacity: 0.55;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(0, 0, 0, 0.6) 0 35%, #000 70%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(0, 0, 0, 0.6) 0 35%, #000 70%);
  }
  .hero-routes .arcs path { stroke-width: 1.5; }
  .hero-routes .dots circle { r: 2.6; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-routes .arcs path { animation: none; stroke-dashoffset: 0; }
}

/* Pist merkez hattı bölüm ayracı (kesikli sarı) */
.section + .section { border-top: 0; }
.section + .section::before {
  content: ""; display: block; height: 3px; width: min(260px, 46%);
  margin: 0 auto clamp(2rem, 5vw, 3.4rem);
  background: repeating-linear-gradient(90deg, var(--brand-yellow) 0 26px, transparent 26px 44px);
  border-radius: 2px;
}

/* PAPI kaydırma göstergesi — kurucu tasarımı.
   TEK boyama yolu vardır: --lamp değişkeni (JS günceller). Doğrudan background
   basan ikinci bir kural OLMAZ — eski nth-child kuralı --lamp'ı ezip PAPI'yi
   "takılı" bırakıyordu (kurucu tespiti). JS yokken varsayılan 4 BEYAZ'dır
   (sayfa üstü durumu). */
.papi {
  position: fixed; top: 50%; transform: translateY(-50%);
  display: flex; gap: 9px; z-index: 5; pointer-events: none;
  /* Tur 2 (kurucu kararı — ESKİ "yuva gövdesi + parlama yok" kuralları KALKTI):
     kapsül/gövde yok; ışık algısını merceklerin kendisi + IŞIMASI taşır. */
}
.papi i {
  width: 11px; height: 11px; border-radius: 50%;
  --lamp: #ffffff;
  background: var(--lamp);
  border: 1px solid var(--papi-rim, rgba(31, 26, 20, 0.35));
  /* Açık temada beyaz ışık, kağıt zeminde SICAK (akkor) haleyle okunur —
     beyaz-üstü-beyaz ışıma görünmez (kurucu tespiti). Koyu temada halo
     kapalı; ışıma lambanın kendi renginden. */
  box-shadow:
    0 0 8px 2px var(--lamp),
    0 0 20px 6px color-mix(in srgb, var(--lamp) 55%, transparent),
    0 0 18px 7px var(--papi-halo, rgba(196, 138, 12, 0.32));
}
/* Koyu temada ince çerçeve açık renkte; halo gereksiz (zemin zaten koyu) */
:root[data-theme="dark"] .papi i { --papi-rim: rgba(255, 255, 255, 0.22); --papi-halo: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .papi i { --papi-rim: rgba(255, 255, 255, 0.22); --papi-halo: transparent; }
}
.papi-l { left: max(10px, calc(50% - 650px)); }
.papi-r { right: max(10px, calc(50% - 650px)); }
@media (max-width: 980px) {
  .papi-r { display: none; }                 /* mobilde yalnız solda */
  .papi-l { left: 6px; }
}

/* Kağıt satırı → dijital satır mikro-animasyonu (satırlar sırayla "okunur") */
@keyframes rowGlow { 0%, 100% { opacity: 0.5; } 9% { opacity: 1; } 18% { opacity: 0.5; } }
.paper-card g[transform] > g { animation: rowGlow 8s infinite; }
.paper-card g[transform] > g:nth-child(1) { animation-delay: 0s; }
.paper-card g[transform] > g:nth-child(2) { animation-delay: 1s; }
.paper-card g[transform] > g:nth-child(3) { animation-delay: 2s; }
.paper-card g[transform] > g:nth-child(4) { animation-delay: 3s; }
.paper-card g[transform] > g:nth-child(5) { animation-delay: 4s; }
.paper-card g[transform] > g:nth-child(6) { animation-delay: 5s; }
.paper-card g[transform] > g:nth-child(7) { animation-delay: 6s; }
.paper-card g[transform] > g:nth-child(8) { animation-delay: 7s; }
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.65; }
  50% { transform: translateX(6px); opacity: 1; }
}
.flagship-visual .arrow { animation: arrowPulse 2.6s ease-in-out infinite; }
@media (max-width: 720px) { .flagship-visual .arrow { animation: none; } }

/* ─── Fiyatlandırma (Faz C — rakamlar maskeli) ─── */
.pricing-card {
  max-width: 580px; margin: 2.2rem auto 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-lg); padding: 1.9rem 2rem; text-align: center;
}
.pricing-card .plan {
  font-family: "Space Grotesk Variable", "Inter Variable", sans-serif;
  font-weight: 700; font-size: 1.3rem;
}
.pricing-card .price-free { font-size: 2.1rem; font-weight: 700; margin-top: 0.55rem; letter-spacing: -0.01em; }
.pricing-card .price-free small { display: block; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); margin-top: 0.2rem; }
.price-masked { display: flex; justify-content: center; gap: 2rem; margin-top: 1.2rem; }
.price-masked span { color: var(--ink-muted); font-size: 0.85rem; }
.price-masked b { display: block; font-size: 1.3rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pricing-points { display: grid; gap: 0.5rem; margin-top: 1.3rem; text-align: left; font-size: 0.94rem; color: var(--ink-soft); }
.pricing-points li { list-style: none; padding-left: 1.3rem; position: relative; }
.pricing-points li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-ink); background: var(--accent-bg); border-radius: 50%; width: 0.95rem; height: 0.95rem; font-size: 0.62rem; display: grid; place-items: center; top: 0.28rem; }
.pricing-points { margin-left: 0; margin-right: 0; padding: 0; }
.pricing-note { font-size: 0.85rem; color: var(--ink-muted); margin-top: 1.1rem; }
.pricing-card .btn { margin-top: 1.2rem; }
.gallery .g-center { grid-column: 4 / span 6; }
@media (max-width: 820px) { .gallery .g-center { grid-column: auto; } }
/* Footer dengesi (Faz D): eşit sütunlar + ortalanmış yasal satır */
.footer-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.6rem; }
.footer .col strong { color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.footer .legal { text-align: center; }
/* Dokunma hedefi ≥24px (cerrahi denetim bulgusu: 23px satırlar) */
.footer .col a { display: inline-block; padding-block: 0.3rem; }

/* ─── Regülasyon motoru yıldız kartı + otorite çipleri (düzeltme turu 2) ─── */
.feature-star { grid-column: 1 / -1; }
.feature-star .ico { background: var(--brand-yellow); }
.authority-chips {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin: 0.9rem 0 0; padding: 0;
}
.authority-chips li {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft);
  white-space: nowrap;
}
.authority-chips li.more { background: var(--brand-yellow); color: #171314; border-color: transparent; }

/* ─── PAPI boyutları: büyük mercekler masaüstü, küçük mobil ─── */
.papi { gap: 13px; }
.papi i { width: 17px; height: 17px; }
/* JS yokken tüm üniteler beyaz kalır — sayfa üstü (4B) durumu doğrudur */
@media (max-width: 980px) {
  .papi-l { gap: 7px; }
  .papi-l i {
    width: 8px; height: 8px;
    box-shadow:
      0 0 5px 1.5px var(--lamp),
      0 0 12px 4px color-mix(in srgb, var(--lamp) 55%, transparent),
      0 0 10px 3px var(--papi-halo, rgba(31, 26, 20, 0.1));
  }
}