/* AUTO-BUNDLED from site.imports.css — edit imports + publish; do not edit by hand */

/* --- theme.css --- */
/* =============================================================
   theme.css — Tek noktadan 6 RENK
   OTOMATİK ÜRETİLDİ — elle düzenlemeyin. Kaynak: content/theme.json
   Üretim: 2026-07-12T21:47:07+00:00 · Mod: dark
   Düzenleme: /operasyon → Tema & Renk
   ============================================================= */

/* Katman sırası: sonra gelen katman önceki katmanı ezer.
   mobile en sonda → mobil düzen masaüstünü ezebilir. */
@layer base, components, mobile;

:root {
  color-scheme: dark;

  /* --- 5 ANA RENK --- */
  --c-brand: #460dc1;   /* 1) Ana marka (CTA, vurgu, gradyan başı) */
  --c-accent: #0091fc;  /* 2) İkincil vurgu (rozet, gradyan sonu) */
  --c-bg: #0b0b12;      /* 3) Arka plan (zemin) */
  --c-surface: #15151f; /* 4) Yüzey (kartlar, paneller) */
  --c-text: #ededf2;    /* 5) Metin */
  --c-icon: #460dc1;    /* 6) Dekoratif ikonlar (site geneli) */

  /* --- TÜRETİLMİŞ TONLAR (5 renkten otomatik) --- */
  --c-brand-700: color-mix(in srgb, var(--c-brand) 70%, black);
  --c-brand-600: color-mix(in srgb, var(--c-brand) 85%, black);
  --c-brand-300: color-mix(in srgb, var(--c-brand) 60%, white);
  --c-brand-soft: color-mix(in srgb, var(--c-brand) 16%, transparent);

  --c-accent-600: color-mix(in srgb, var(--c-accent) 85%, black);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 16%, transparent);

  /* Yüzey katmanları (kart üstüne kart) */
  --c-surface-2: color-mix(in srgb, var(--c-surface) 78%, var(--c-text) 4%);
  --c-surface-3: color-mix(in srgb, var(--c-surface) 60%, var(--c-text) 8%);
  --c-elevated: color-mix(in srgb, var(--c-surface) 70%, white 6%);

  /* Metin tonları */
  --c-text-muted: color-mix(in srgb, var(--c-text) 66%, transparent);
  --c-text-dim: color-mix(in srgb, var(--c-text) 44%, transparent);

  /* Kenarlık / ayraç */
  --c-border: color-mix(in srgb, var(--c-text) 12%, transparent);
  --c-border-strong: color-mix(in srgb, var(--c-text) 22%, transparent);

  /* Gradyanlar */
  --grad-brand: linear-gradient(135deg, var(--c-brand), var(--c-accent));
  --grad-brand-soft: linear-gradient(
    135deg,
    var(--c-brand-soft),
    var(--c-accent-soft)
  );
  --grad-text: linear-gradient(
    100deg,
    var(--c-text),
    color-mix(in srgb, var(--c-brand) 55%, var(--c-text))
  );

  /* Halo / ışıma */
  --halo-brand: color-mix(in srgb, var(--c-brand) 40%, transparent);
  --halo-accent: color-mix(in srgb, var(--c-accent) 36%, transparent);
}

/* --- theme-visitor.css --- */
/* theme-visitor.css — ziyaretçi açık/koyu (admin theme.css marka renkleri korunur)
   Katmansız: theme.css @layer base üzerine yazar. */

:root[data-color-mode="light"] {
  color-scheme: light;
  --c-bg: #f4f4f8;
  --c-surface: #ffffff;
  --c-surface-2: #ececf2;
  --c-surface-3: #e2e2ea;
  --c-elevated: #f8f8fc;
  --c-text: #12121a;
  --c-text-muted: #5c5c6e;
  --c-text-dim: #88889a;
  --c-border: color-mix(in srgb, var(--c-text) 12%, transparent);
  --c-border-strong: color-mix(in srgb, var(--c-text) 22%, transparent);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 40px color-mix(in srgb, var(--c-brand) 22%, transparent);
  --halo-brand: color-mix(in srgb, var(--c-brand) 28%, transparent);
  --halo-accent: color-mix(in srgb, var(--c-accent) 24%, transparent);
}

:root[data-color-mode="light"] .tag {
  color: #6d5ef6;
}

@media (prefers-color-scheme: light) {
  :root[data-color-mode="system"] {
    color-scheme: light;
    --c-bg: #f4f4f8;
    --c-surface: #ffffff;
    --c-surface-2: #ececf2;
    --c-surface-3: #e2e2ea;
    --c-elevated: #f8f8fc;
    --c-text: #12121a;
    --c-text-muted: #5c5c6e;
    --c-text-dim: #88889a;
    --c-border: color-mix(in srgb, var(--c-text) 12%, transparent);
    --c-border-strong: color-mix(in srgb, var(--c-text) 22%, transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 40px color-mix(in srgb, var(--c-brand) 22%, transparent);
    --halo-brand: color-mix(in srgb, var(--c-brand) 28%, transparent);
    --halo-accent: color-mix(in srgb, var(--c-accent) 24%, transparent);
  }

  :root[data-color-mode="system"] .tag {
    color: #6d5ef6;
  }
}

:root[data-color-mode="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-color-mode="system"] {
    color-scheme: dark;
  }
}

html[data-color-mode] body {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* --- fonts.css --- */
/* =============================================================
   fonts.css — Onest (self-host, offline/file:// çalışır)
   Ağırlıklar: 400, 500, 600, 700, 800 · Altküme: latin + latin-ext (TR)
   ============================================================= */

/* Türkçe karakter aralığı (ğ ş ı İ vb.) latin-ext içinde */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/onest/onest-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20CF, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- tokens.css --- */
/* =============================================================
   tokens.css — Tipografi, boşluk, yarıçap, gölge, z-index
   Renk YOK (renkler theme.css'te). Akışkan ölçek = clamp().
   ============================================================= */

:root {
  /* --- Tipografi aileleri (Onest, self-host) --- */
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-display: "Onest", system-ui, sans-serif;

  /* --- Akışkan tip ölçeği (breakpoint kırılması yok) --- */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm: clamp(0.86rem, 0.82rem + 0.2vw, 0.95rem);
  --fs-base: clamp(0.98rem, 0.93rem + 0.28vw, 1.08rem);
  --fs-lg: clamp(1.12rem, 1.02rem + 0.5vw, 1.32rem);
  --fs-xl: clamp(1.35rem, 1.15rem + 1vw, 1.85rem);
  --fs-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
  --fs-3xl: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --fs-4xl: clamp(2.6rem, 1.7rem + 4.4vw, 4.8rem);

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-normal: 1.6;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;

  /* --- Boşluk skalası (4px tabanlı) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Yarıçap --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-2xl: 2.25rem;
  --radius-pill: 999px;

  /* --- Gölge --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 20px 60px -18px var(--halo-brand);

  /* --- Düzen --- */
  --container: 1240px;
  --container-narrow: 920px;
  --header-h: 72px;

  /* --- Hareket --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
  --dur-xslow: 1.2s;

  /* --- z-index --- */
  --z-header: 100;
  --z-sheet: 200;
  --z-modal: 300;
  --z-brand-stories: 400;

  /* --- Glass / aurora yardımcı token'ları --- */
  --surface-glass: color-mix(in srgb, var(--c-surface) 55%, transparent);
  --surface-glass-strong: color-mix(in srgb, var(--c-surface) 78%, transparent);
  --border-glass: color-mix(in srgb, var(--c-text) 8%, transparent);
  --blur-glass: 18px;
  --grad-aurora: conic-gradient(
    from 140deg at 50% 50%,
    var(--halo-brand),
    var(--halo-accent),
    transparent 60%
  );
  --shadow-glass: 0 30px 80px -40px var(--halo-brand),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

/* --- base.css --- */
/* =============================================================
   base.css — Reset, temel elementler, .container, yardımcılar
   ============================================================= */

/* i18n FOUC: defer çeviriler gelene kadar fallback metni gizle */
html[data-i18n-pending] [data-i18n] {
  visibility: hidden;
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    overflow-x: clip;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100dvh;
  }

  /* Sayfa geneli arka plan dokusu (hafif, görselsiz) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(
        60% 50% at 50% -10%,
        var(--c-brand-soft),
        transparent 70%
      ),
      radial-gradient(
        40% 40% at 100% 0%,
        var(--c-accent-soft),
        transparent 60%
      );
    pointer-events: none;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
      var(--c-border) 1px,
      transparent 1px
    );
    background-size: 42px 42px;
    opacity: 0.35;
    mask-image: radial-gradient(75% 70% at 50% 30%, #000, transparent 78%);
    pointer-events: none;
  }

  img,
  picture,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

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

  a,
  button,
  summary,
  [role="button"] {
    touch-action: manipulation;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: none;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }

  ::selection {
    background: var(--c-brand);
    color: #fff;
  }

  :focus-visible {
    outline: 2px solid var(--c-brand-300);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* --- Düzen yardımcıları --- */
  .container {
    width: min(100% - 2 * var(--space-5), var(--container));
    margin-inline: auto;
  }

  .container-narrow {
    width: min(100% - 2 * var(--space-5), var(--container-narrow));
    margin-inline: auto;
  }

  .section {
    padding-block: clamp(var(--space-16), 8vw, var(--space-32));
  }

  .section-head {
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--space-12);
    text-align: center;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--c-brand-300);
    margin-bottom: var(--space-4);
  }

  .h-sec {
    font-size: var(--fs-3xl);
  }

  .lead {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    margin-top: var(--space-4);
  }

  .text-grad {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .brand-grad {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* --- Glass / aurora yardımcı sınıflar --- */
  .glass {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(var(--blur-glass)) saturate(140%);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
    box-shadow: var(--shadow-glass);
  }
  .gradient-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .section--aurora {
    position: relative;
    isolation: isolate;
  }
  .section--aurora::before {
    content: "";
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 120%;
    z-index: -1;
    background: var(--grad-aurora);
    filter: blur(80px);
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(60% 50% at 50% 30%, #000 30%, transparent 80%);
    mask-image: radial-gradient(60% 50% at 50% 30%, #000 30%, transparent 80%);
    pointer-events: none;
    animation: auroraDrift 18s var(--ease-out) infinite alternate;
  }
  @keyframes auroraDrift {
    0% { transform: translate3d(-2%, 0, 0) rotate(0deg); }
    100% { transform: translate3d(2%, 1%, 0) rotate(8deg); }
  }

  /* Üst scroll progress bar (home-fx.js --scroll-progress set eder) */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: var(--scroll-progress, 0%);
    background: var(--grad-brand);
    z-index: 999;
    pointer-events: none;
    box-shadow: 0 0 10px var(--halo-brand);
    transition: width 80ms linear;
  }

  /* Spotlight yüzeyi (kart hover'da imleci takip eden parıltı) */
  .spotlight {
    position: relative;
    isolation: isolate;
  }
  .spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
      260px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--c-brand) 22%, transparent),
      transparent 60%
    );
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
    pointer-events: none;
    z-index: 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .spotlight:hover::before {
      opacity: 1;
    }
  }
  .spotlight > * {
    position: relative;
    z-index: 1;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* --- Scroll-reveal başlangıç durumu (JS .is-in ekler) --- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
  }

  /* ROI Modal'ın stiller yüklenmeden önce anlık görünmesini (FOUC) engeller */
  .roi-modal:not(.is-open) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* İlk tıklama yutma sorununu önlemek için opacity 0 iken etkileşime kapatılır */
  [data-reveal]:not(.is-in) {
    pointer-events: none;
  }

  /* Belirli öğelerin anında gösterilmesi ve etkileşiminin açık kalması için istisna sınıfı */
  [data-reveal="instant"] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  [data-reveal].is-in {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    [data-reveal] {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .section--aurora::before {
      animation: none;
    }
  }
}

/* --- components/buttons.css --- */
@layer components {
  .btn {
    --btn-bg: var(--c-surface-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7em 1.25em;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    color: var(--c-text);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: var(--btn-bg);
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out),
      opacity var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover {
      transform: translateY(-2px);
    }
    .btn:active {
      transform: translateY(0);
    }
    .btn--primary:hover {
      box-shadow:
        0 18px 44px -12px var(--halo-brand),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .btn--ghost:hover {
      border-color: var(--c-border-strong);
      background: var(--c-surface-2);
    }
    .btn:hover .btn__arrow {
      transform: translateX(3px);
    }
  }

  @media (hover: none) {
    .btn:active {
      transform: scale(0.98);
      opacity: 0.92;
    }
  }

  .btn--lg {
    padding: 0.95em 1.6em;
    font-size: var(--fs-base);
  }

  .btn--block {
    display: flex;
    width: 100%;
  }

  .btn--primary {
    color: #fff;
    border-color: transparent;
    background: var(--grad-brand);
    box-shadow:
      0 10px 30px -10px var(--halo-brand),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .btn--ghost {
    background: color-mix(in srgb, var(--c-surface) 60%, transparent);
    backdrop-filter: blur(8px);
  }

  .btn__arrow {
    transition: transform var(--dur) var(--ease-out);
  }

  /* Erişilebilirlik: içeriğe atla */
  .skip-link {
    position: fixed;
    top: -100px;
    left: var(--space-4);
    z-index: 999;
    padding: var(--space-3) var(--space-4);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-md);
    transition: top var(--dur) var(--ease-out);
  }
  .skip-link:focus {
    top: var(--space-4);
  }

  .tag {
    display: inline-block;
    padding: 0.35em 0.8em;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--c-brand-300);
    background: var(--c-brand-soft);
    border: 1px solid color-mix(in srgb, var(--c-brand) 30%, transparent);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
  }

  .eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
  }
}

/* --- components/nav.css --- */
@layer components {
  body {
    padding-top: var(--header-h);
  }

  .site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    width: 100%;
    z-index: var(--z-header);
    transition:
      transform var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      backdrop-filter var(--dur) var(--ease-out);
    border-bottom: 1px solid transparent;
  }
  .site-header.is-header-hidden {
    transform: translateY(-100%);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header.is-header-hidden {
      transform: none;
      opacity: 0;
      visibility: hidden;
    }
  }
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--c-bg) 72%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom-color: var(--c-border);
  }

  .site-header--skeleton .nav__actions--skeleton {
    flex: 1;
    max-width: 12rem;
    min-height: 2rem;
  }

  .nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--header-h);
  }

  /* Marka */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    letter-spacing: var(--tracking-tight);
  }
  .brand__logo {
    display: block;
    height: 28px;
    width: auto;
    max-width: min(160px, 42vw);
    object-fit: contain;
    filter: drop-shadow(0 6px 14px var(--halo-brand));
  }

  /* Masaüstü menü */
  .nav__desktop {
    margin-inline-start: var(--space-4);
  }
  .nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
  }
  .nav__links a {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__links a:hover {
      color: var(--c-text);
      background: var(--c-surface-2);
    }
  }

  .nav__actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .nav__theme {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 4px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
      0 1px 2px color-mix(in srgb, var(--c-bg) 60%, transparent);
  }
  .nav__theme-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    inset-inline-start: 4px;
    inset-inline-end: auto;
    width: calc((100% - 8px) / 3);
    border-radius: var(--radius-pill);
    background: var(--grad-brand);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--c-brand) 35%, transparent);
    transition:
      inset-inline-start var(--dur) var(--ease-spring),
      inset-inline-end var(--dur) var(--ease-spring);
    pointer-events: none;
    z-index: 0;
  }
  .nav__theme[data-active="light"] .nav__theme-thumb {
    inset-inline-start: calc(4px + (100% - 8px) / 3);
    inset-inline-end: auto;
  }
  .nav__theme[data-active="dark"] .nav__theme-thumb {
    inset-inline-start: auto;
    inset-inline-end: 4px;
  }
  .nav__theme-btn {
    position: relative;
    z-index: 1;
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--c-text-muted);
    background: transparent;
    transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  .nav__theme-btn svg {
    width: 16px;
    height: 16px;
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__theme-btn:hover {
      color: var(--c-text);
    }
  }
  .nav__theme-btn.is-active {
    color: #fff;
  }
  .nav__theme-btn.is-active svg {
    filter: drop-shadow(0 0 6px color-mix(in srgb, #fff 50%, transparent));
  }

  /* Hamburger (mobilde görünür) */
  .nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
  }
  .nav__burger span {
    width: 20px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
  }

  html.nav-sheet-open,
  body.nav-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Mobil bottom-sheet */
  .nav__sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
  }
  .nav__sheet[hidden] {
    display: none !important;
  }
  .nav__sheet-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #000 55%, transparent);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
    touch-action: none;
  }
  .nav__sheet.is-open .nav__sheet-backdrop {
    opacity: 1;
  }
  .nav__sheet-panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: var(--c-surface);
    border-top: 1px solid var(--c-border-strong);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--space-4) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: var(--shadow-lg);
    max-height: min(92vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__sheet.is-open .nav__sheet-panel {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav__sheet-backdrop,
    .nav__sheet-panel {
      transition: none;
    }
  }
  .nav__sheet-head {
    position: relative;
    padding-top: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .nav__sheet-close {
    position: absolute;
    top: var(--space-2);
    inset-inline-end: 0;
    display: inline-flex;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--radius-pill);
    color: var(--c-text-muted);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    transition:
      color var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__sheet-close:hover {
      color: var(--c-text);
      border-color: var(--c-border-strong);
      background: var(--c-surface-3);
    }
  }
  .nav__sheet-grip {
    width: 42px;
    height: 4px;
    border-radius: 2px;
    background: var(--c-border-strong);
    margin: 0 auto var(--space-3);
    pointer-events: none;
  }
  .nav__sheet-links {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-1);
  }
  .nav__sheet-links a {
    display: block;
    padding: var(--space-4) var(--space-3);
    font-size: var(--fs-lg);
    font-weight: 600;
    border-radius: var(--radius-md);
  }
  @media (hover: hover) and (pointer: fine) {
    .nav__sheet-links a:hover {
      background: var(--c-surface-2);
    }
  }
  .nav__sheet-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
}

/* --- components/footer.css --- */
@layer components {
  .site-footer {
    margin-top: var(--space-24);
    border-top: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 50%, transparent);
  }

  .footer__inner {
    display: grid;
    grid-template-columns: 1.3fr 2fr;
    gap: var(--space-12);
    padding-block: var(--space-16) var(--space-10);
  }

  .footer__tagline {
    margin-top: var(--space-4);
    max-width: 34ch;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
  }

  .footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
    background: color-mix(in srgb, var(--c-surface) 60%, transparent);
    transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .footer__social-link:hover {
      color: var(--c-text);
      border-color: var(--brand, currentColor);
      transform: translateY(-2px);
    }
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }

  .footer__title {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--c-text-dim);
    margin-bottom: var(--space-4);
  }
  .footer__col ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
  }
  .footer__col a {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    transition: color var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .footer__col a:hover {
      color: var(--c-text);
    }
  }

  .footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
  }

  .footer__address {
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
    max-width: 60ch;
    text-align: end;
    white-space: pre-line;
  }
}

/* --- components/mockup.css --- */
@layer components {
  /* Genel mock kart kabuğu */
  .mock {
    background: linear-gradient(
      180deg,
      var(--c-elevated),
      var(--c-surface)
    );
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 70%, black 6%);
  }
  .mock__traffic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .mock__light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
  }
  .mock__light--close {
    background: #ff5f57;
  }
  .mock__light--minimize {
    background: #febc2e;
  }
  .mock__light--maximize {
    background: #28c840;
  }
  .mock__url {
    margin-inline-start: var(--space-3);
    font-size: var(--fs-xs);
    color: var(--c-text-dim);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
  }
  .mock--browser .mock__bar {
    justify-content: stretch;
  }
  .mock--browser .mock__url {
    flex: 1;
    margin-inline-start: 0;
    text-align: center;
    font-size: var(--fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hero: teklif kartı */
  .mock--proposal {
    width: 320px;
  }
  .mock__body {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
  }
  .mock__avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    background: var(--grad-brand);
  }
  .mock__lines {
    min-height: 2.75em;
  }
  .mock__lines strong {
    display: block;
    font-size: var(--fs-sm);
  }
  .mock__lines small {
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
  }

  /* Hero teklif kartı — sektör rotasyonu crossfade */
  [data-hero-proposal-cycle] .mock__avatar,
  [data-hero-proposal-cycle] .mock__lines,
  [data-hero-proposal-cycle] .mock__amount {
    transition:
      opacity var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }
  [data-hero-proposal-cycle].is-transitioning .mock__avatar,
  [data-hero-proposal-cycle].is-transitioning .mock__lines,
  [data-hero-proposal-cycle].is-transitioning .mock__amount {
    opacity: 0;
    transform: translateY(2px);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-hero-proposal-cycle] .mock__avatar,
    [data-hero-proposal-cycle] .mock__lines,
    [data-hero-proposal-cycle] .mock__amount {
      transition: none;
    }
    [data-hero-proposal-cycle].is-transitioning .mock__avatar,
    [data-hero-proposal-cycle].is-transitioning .mock__lines,
    [data-hero-proposal-cycle].is-transitioning .mock__amount {
      opacity: 1;
      transform: none;
    }
  }

  /* Rotasyonda kart yüksekliği: JS ölçümü (--hero-proposal-body-h) ile kilitlenir */
  [data-hero-proposal-cycle].mock--proposal .mock__body {
    height: var(--hero-proposal-body-h, auto);
    min-height: var(--hero-proposal-body-h, 7.25rem);
    align-content: start;
  }
  [data-hero-proposal-cycle] .mock__lines strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
  }

  .mock__amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-lg);
    color: var(--c-accent);
    grid-column: 3;
  }
  .mock__status {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }
  .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 0 var(--halo-accent);
    animation: pulse 2s var(--ease-out) infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 var(--halo-accent); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  /* Hero: analitik kartı */
  .mock--analytics {
    width: 230px;
    padding: var(--space-5);
  }
  .mock__cap {
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .mock__chart {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 78px;
    margin: var(--space-4) 0;
  }
  .mock__chart span {
    flex: 1;
    height: 0;
    border-radius: 4px;
    background: var(--grad-brand);
    opacity: 0.85;
    will-change: height;
    animation-duration: 7s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    animation-iteration-count: infinite;
  }
  .mock__chart span:nth-child(1) {
    animation-name: barGrow1;
  }
  .mock__chart span:nth-child(2) {
    animation-name: barGrow2;
  }
  .mock__chart span:nth-child(3) {
    animation-name: barGrow3;
  }
  .mock__chart span:nth-child(4) {
    animation-name: barGrow4;
  }
  .mock__chart span:nth-child(5) {
    animation-name: barGrow5;
  }
  .mock__chart span:nth-child(6) {
    animation-name: barGrow6;
  }

  @keyframes barGrow1 {
    0% {
      height: 0;
    }
    11.905%,
    100% {
      height: var(--h);
    }
  }
  @keyframes barGrow2 {
    0%,
    11.905% {
      height: 0;
    }
    23.81%,
    100% {
      height: var(--h);
    }
  }
  @keyframes barGrow3 {
    0%,
    23.81% {
      height: 0;
    }
    35.715%,
    100% {
      height: var(--h);
    }
  }
  @keyframes barGrow4 {
    0%,
    35.715% {
      height: 0;
    }
    47.62%,
    100% {
      height: var(--h);
    }
  }
  @keyframes barGrow5 {
    0%,
    47.62% {
      height: 0;
    }
    59.525%,
    100% {
      height: var(--h);
    }
  }
  @keyframes barGrow6 {
    0%,
    59.525% {
      height: 0;
    }
    71.43%,
    100% {
      height: var(--h);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mock__chart span {
      animation: none;
      height: var(--h);
    }
  }
  .mock__stats {
    display: flex;
    gap: var(--space-5);
  }
  .mock__stats b {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
  }
  .mock__stats small {
    display: block;
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
  }

  /* Hero: ödeme kartı */
  .mock--pay {
    width: 250px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
  }
  .mock--pay .mock__lines small {
    white-space: nowrap;
  }
  .mock__check {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--c-accent-600);
  }

  /* Derin: tarayıcı sayfası */
  .mock__page {
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
  }
  .mock__hero {
    height: 92px;
    border-radius: var(--radius-md);
    background: var(--grad-brand-soft);
    border: 1px solid var(--c-border);
  }
  .mock__row {
    display: flex;
    gap: var(--space-3);
  }
  .mock__row span {
    height: 46px;
    flex: 1;
    border-radius: var(--radius-sm);
    background: var(--c-surface-3);
  }

  /* Derin: ses kartı (otomatik dalga animasyonu) */
  .mock--audio-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    width: 100%;
    min-width: 0;
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
    border-radius: var(--radius-lg);
  }
  .mock__audio-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    padding: 0.35em 0.65em;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c-brand) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-brand) 28%, transparent);
  }
  .mock__audio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    animation: audioPulse 1.4s ease-in-out infinite;
  }
  @keyframes audioPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1); }
  }
  .mock__audio-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-brand-300);
    white-space: nowrap;
  }
  .mock__audio-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: end;
  }
  .mock__audio-quality {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    white-space: nowrap;
  }
  .mock__audio-time {
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
  }
  .mock__wave {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    flex: 1;
  }
  .mock__wave span {
    flex: 1;
    border-radius: 3px;
    background: var(--c-brand-300);
    height: 30%;
    animation: wave 1.3s var(--ease-out) infinite;
  }
  .mock__wave span:nth-child(odd) { animation-delay: 0.15s; }
  .mock__wave span:nth-child(3n) { animation-delay: 0.3s; }
  .mock__wave span:nth-child(4n) { animation-delay: 0.45s; }
  @keyframes wave {
    0%, 100% { height: 25%; opacity: 0.5; }
    50% { height: 90%; opacity: 1; }
  }

  /* Derin: ödeme formu */
  .mock--checkout {
    padding: var(--space-6);
    display: grid;
    gap: var(--space-4);
  }
  .mock__field span {
    display: block;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--c-surface-3);
    border: 1px solid var(--c-border);
  }
  .mock__field--row {
    display: flex;
    gap: var(--space-3);
  }
  .mock__field--row span {
    flex: 1;
  }
  .mock__paybtn {
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    background: var(--grad-brand);
  }

  .mock__page--proposal {
    gap: var(--space-4);
  }
  .mock__proposal-head strong {
    display: block;
    font-size: var(--fs-sm);
  }
  .mock__proposal-head small {
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
  }
  .mock__line-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }
  .mock__line-items li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--fs-xs);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--c-border);
  }
  .mock__line-items em {
    font-style: normal;
    font-weight: 600;
    color: var(--c-text);
  }
  .mock__totals {
    display: grid;
    gap: var(--space-1);
    font-size: var(--fs-xs);
  }
  .mock__totals div {
    display: flex;
    justify-content: space-between;
    color: var(--c-text-muted);
  }
  .mock__totals-grand {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-weight: 700;
    color: var(--c-text) !important;
  }
  .mock__totals-grand em {
    font-style: normal;
    color: var(--c-accent);
    font-size: var(--fs-sm);
  }
  .mock__proposal-cta {
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: #fff;
    background: var(--grad-brand);
  }

  .mock--checkout-rich {
    min-width: 280px;
  }
  .mock__checkout-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .mock__checkout-head strong {
    font-size: var(--fs-md);
  }
  .mock__checkout-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: var(--fs-xs);
  }
  .mock__checkout-lines li {
    display: flex;
    justify-content: space-between;
  }
  .mock__checkout-lines em {
    font-style: normal;
    font-weight: 600;
  }
  .mock__checkout-providers {
    display: flex;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
  }
  .mock__checkout-providers span {
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-2);
  }
  .mock__checkout-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
  }
  .mock__checkout-total em {
    font-style: normal;
    color: var(--c-accent);
  }

  /* Para birimi sembolleri (₺ vb.) — Onest alt kümesi kaçarsa sistem fontu */
  .mock em,
  .mock__amount,
  .mock__totals em,
  .mock__line-items em,
  .mock__checkout-total em {
    font-family: var(--font-body), system-ui, "Segoe UI", sans-serif;
  }

}

/* --- components/hero.css --- */
@layer components {
  .hero {
    position: relative;
    padding-block: clamp(var(--space-16), 9vw, var(--space-32))
      clamp(var(--space-12), 7vw, var(--space-24));
    overflow: hidden;
    isolation: isolate;
  }

  /* --- Aurora 2.0: iki katmanlı blob + ince grid overlay --- */
  .hero__aurora {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 820px;
    z-index: -1;
    background:
      radial-gradient(36% 56% at 22% 28%, var(--halo-brand), transparent 62%),
      radial-gradient(34% 50% at 80% 18%, var(--halo-accent), transparent 60%),
      radial-gradient(22% 34% at 60% 70%, var(--halo-brand), transparent 60%);
    filter: blur(42px);
    opacity: 0.65;
    animation: auroraFloat 14s ease-in-out infinite alternate;
  }
  .hero__aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(var(--c-border) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.18;
    -webkit-mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 75%);
    mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 75%);
    filter: blur(0.3px);
    pointer-events: none;
  }
  @keyframes auroraFloat {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, 24px, 0) scale(1.06); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__aurora {
      animation: none;
    }
  }

  .hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-12);
  }

  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* --- Canlı "açıldı" rozeti --- */
  .hero__live {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
    box-sizing: border-box;
    padding: 0.45em 0.9em;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 0.01em;
  }
  .hero__live-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
  }
  .hero__live-pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    opacity: 0.7;
    animation: livePing 1.6s ease-out infinite;
  }
  @keyframes livePing {
    0%   { transform: scale(0.6); opacity: 0.9; }
    80%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  /* --- Sosyal kanıt (80+ işletme) --- */
  .hero__trust {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    align-self: flex-start;
    box-sizing: border-box;
    margin-bottom: var(--space-4);
    padding: 5px;
    border-radius: var(--radius-pill);
    background: var(--surface-glass-strong);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
  .hero__trust-avatars {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
  }
  .hero__trust-avatars img {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-bg);
    background: var(--c-surface);
  }
  .hero__trust-avatars img + img {
    margin-inline-start: -8px;
  }
  .hero__trust-text {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text);
    letter-spacing: 0.01em;
    line-height: 1.35;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .hero__trust-count {
    font-weight: 700;
    color: var(--c-trust-count, #b45309);
  }

  .hero__title {
    font-size: var(--fs-4xl);
    letter-spacing: var(--tracking-tighter);
    margin-block: var(--space-4) var(--space-5);
    min-height: 2.3em;
    text-wrap: balance;
  }
  /* Mevcut .brand-grad span'ine canlı parıltı */
  .hero__title .brand-grad {
    background-image: linear-gradient(
      100deg,
      var(--c-brand) 0%,
      var(--c-accent) 35%,
      #fff 50%,
      var(--c-accent) 65%,
      var(--c-brand) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brandShimmer 6s ease-in-out infinite;
  }
  @keyframes brandShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__title .brand-grad { animation: none; }
  }

  .hero__subtitle {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    max-width: 52ch;
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
  }
  .hero__note {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-text-dim);
  }

  /* --- Floating mockup sahnesi + parallax + perspective --- */
  .hero__stage {
    position: relative;
    min-height: 440px;
    perspective: 1200px;
    transform-style: preserve-3d;
  }
  .hero__stage .mock {
    position: absolute;
    transform: translate3d(0, var(--ty, 0px), 0);
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .hero__stage-stack {
    position: absolute;
    top: 10%;
    inset-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .hero__stage-stack .mock {
    position: static;
    transform: none;
  }
  .hero__stage-stack .mock--proposal {
    animation: float1 6s var(--ease-out) infinite alternate;
  }
  .hero__stage-stack .mock--pay {
    animation: float3 5.5s var(--ease-out) infinite alternate;
  }
  .hero__stage-scroll {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
  }
  .hero__stage-scroll .mock {
    position: static;
    transform: none;
  }
  .hero__stage-scroll .mock--analytics {
    animation: float2 7s var(--ease-out) infinite alternate;
  }
  @keyframes float1 { to { transform: translate3d(0, calc(var(--ty, 0px) - 16px), 0); } }
  @keyframes float2 { to { transform: translate3d(0, calc(var(--ty, 0px) + 18px), 0); } }
  @keyframes float3 { to { transform: translate3d(0, calc(var(--ty, 0px) - 12px), 0); } }

  /* data-tilt: JS fareyle eğer; temel 3D perspektif */
  [data-tilt] {
    transform-style: preserve-3d;
    transition: transform var(--dur) var(--ease-out);
    will-change: transform;
  }
}

.hero__live [data-live-viewers-count] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--c-text);
}

:root[data-color-mode="dark"] .hero__trust-count {
  color: #fbbf24;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-mode="light"]) .hero__trust-count {
    color: #fbbf24;
  }
}

/* {n} ham olarak görünmesin: sayı henüz basılmadıysa yer kaplamasın. */
.hero__live:not(:has([data-live-viewers-count])),
.hero__live[hidden] {
  display: none !important;
}

.page-home .hero .hero__trust {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: max-content !important;
  max-width: 100%;
  padding: 5px !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}

.page-home .hero .hero__live {
  width: max-content !important;
  max-width: 100%;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}

/* --- components/landing.css --- */
/* Landing page — reklam / try-free */
.page-landing .nav__actions .btn--primary {
  font-size: 0.9375rem;
}

.landing-free-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 1.25rem;
  font-size: clamp(1rem, 2.8vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  background: linear-gradient(90deg, rgba(var(--brand-rgb), 0.18), rgba(var(--accent-rgb, var(--brand-rgb)), 0.12));
  border-bottom: 1px solid rgba(var(--brand-rgb), 0.2);
}

.hero--landing {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
}

.hero--landing .hero__inner {
  grid-template-columns: 1fr;
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.hero--landing .hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero--landing .hero__actions {
  justify-content: center;
}

.hero--landing .hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
}

.landing-free-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 36rem;
  margin-block: 1.75rem 0;
}

.landing-free-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 1.25rem 1.35rem;
  min-height: 6.5rem;
  border-radius: var(--radius-lg, 1rem);
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  text-align: start;
}

.landing-free-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: rgba(var(--brand-rgb), 0.15);
  color: rgb(var(--brand-rgb));
  margin-bottom: 0.25rem;
}

.landing-free-card__icon .icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.landing-free-card strong {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-1);
}

.landing-free-card span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
}

.landing-bento {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}

.landing-bento .bento__item--featured {
  border-color: rgba(var(--brand-rgb), 0.45);
  background: linear-gradient(145deg, rgba(var(--brand-rgb), 0.12), rgba(var(--brand-rgb), 0.04));
  box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.15);
}

.landing-bento .bento__item--featured .landing-free-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), 0.2);
  color: rgb(var(--brand-rgb));
}

.landing-compare .section-head {
  text-align: center;
}

.landing-compare .compare {
  max-width: 56rem;
  margin-inline: auto;
}

.cta-band__subtitle--lg {
  font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
  font-weight: 500;
  color: var(--text-1);
  opacity: 1;
}

.landing-sticky-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 32px color-mix(in srgb, var(--c-bg) 30%, transparent);
}

.landing-sticky-cta p {
  margin: 0.45rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text-muted);
}

.page-landing {
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .landing-sticky-cta {
    display: block;
  }

  .page-landing {
    padding-bottom: 5.5rem;
  }

  .landing-free-cards {
    grid-template-columns: 1fr;
  }

  .landing-bento {
    grid-template-columns: 1fr;
  }
}

[dir="rtl"] .landing-free-card {
  align-items: flex-end;
  text-align: end;
}

/* --- components/page-hero.css --- */
@layer components {
  /* ---- İç sayfa hero (ana hero'dan küçük) ---- */
  .page-hero {
    position: relative;
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
    text-align: center;
    overflow: hidden;
  }
  .page-hero::before {
    content: "";
    position: absolute;
    inset: -40% 0 auto 0;
    height: 520px;
    background: radial-gradient(
      60% 60% at 50% 0%,
      var(--c-brand-soft),
      transparent 70%
    );
    pointer-events: none;
    z-index: -1;
  }
  .page-hero__inner {
    max-width: 60ch;
    margin-inline: auto;
  }
  .page-hero h1 {
    font-size: var(--fs-3xl);
    margin-top: var(--space-3);
  }
  .page-hero__lead {
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    margin-top: var(--space-5);
  }
  .page-hero__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-8);
  }

  /* Breadcrumb */
  .breadcrumb {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--c-text-dim);
  }
  .breadcrumb a {
    color: var(--c-text-muted);
  }
  @media (hover: hover) and (pointer: fine) {
    .breadcrumb a:hover {
      color: var(--c-text);
    }
  }
  .breadcrumb__sep {
    opacity: 0.5;
  }
  .breadcrumb [aria-current="page"] {
    color: var(--c-brand-300);
  }

  /* İç sayfa başlığı kaydırmadan görünsün (scroll-reveal hero’da kapalı) */
  .page-hero[data-reveal],
  .page-hero [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --- components/sections.css --- */
@layer components {
  /* ---- Sosyal kanıt ---- */
  .proof {
    padding-block: var(--space-12);
    border-block: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 40%, transparent);
  }
  .proof__title {
    text-align: center;
    color: var(--c-text);
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-8);
  }
  .proof__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-10);
  }
  .proof__stat {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition:
      transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .proof__stat:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--c-brand) 35%, var(--border-glass));
      box-shadow: 0 18px 40px -22px var(--halo-brand);
    }
  }
  .proof__stat b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 1;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .proof__stat small {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--space-2);
    display: block;
  }

  /* Marquee fade mask (kenarlarda yumuşak geçiş) */
  .proof .marquee {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 8%,
      #000 92%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 8%,
      #000 92%,
      transparent
    );
  }

  /* ---- Problem / karşılaştırma ---- */
  .compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .compare__card {
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
  }
  .compare__card--new {
    border-color: color-mix(in srgb, var(--c-brand) 40%, transparent);
    background: linear-gradient(180deg, var(--c-brand-soft), var(--c-surface));
    box-shadow: var(--shadow-glow);
  }
  .compare__card h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-5);
  }
  .compare__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
  }
  .compare__list li {
    position: relative;
    padding-inline-start: var(--space-8);
    color: var(--c-text-muted);
    line-height: 1.45;
  }
  .compare__list li::before {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
  }
  .compare__list--no li::before {
    content: "\00d7";
    color: #fff;
    background: color-mix(in srgb, #ef4444 86%, var(--c-bg));
  }
  .compare__list--yes li::before {
    content: "\2713";
    color: #fff;
    background: var(--c-accent-600);
  }

  /* Problem başlığı — "canlı" yeşil vurgu */
  .section.problem .h-sec .word-live {
    color: #22c55e;
    font-weight: inherit;
  }

  /* ---- Derin özellik blokları ---- */
  .deep__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-12);
    padding-block: var(--space-12);
  }
  .deep__row--rev .deep__copy {
    order: 2;
  }
  .deep__copy h3 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-4);
  }
  .deep__copy p {
    color: var(--c-text-muted);
    font-size: var(--fs-lg);
  }
  .ticks {
    list-style: none;
    padding: 0;
    margin-top: var(--space-6);
    display: grid;
    gap: var(--space-3);
  }
  .ticks li {
    position: relative;
    padding-inline-start: var(--space-8);
    font-weight: 500;
  }
  .ticks li::before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-brand-300);
    background: var(--c-brand-soft);
  }

  /* Deep visual: desktop'ta sticky scroll-telling + halo */
  .deep__visual {
    position: relative;
    display: grid;
    place-items: center;
  }
  .deep__visual::before {
    content: "";
    position: absolute;
    inset: -10%;
    z-index: -1;
    background: radial-gradient(
      50% 50% at 50% 50%,
      var(--halo-brand),
      transparent 70%
    );
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
  }
  @media (min-width: 961px) {
    .deep__visual {
      position: sticky;
      top: calc(var(--header-h) + 24px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .deep__visual {
      position: relative !important;
      top: auto !important;
    }
  }

  /* ---- Entegrasyonlar ---- */
  .integ__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  .integ__tile {
    display: grid;
    place-items: center;
    padding: var(--space-8) var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--surface-glass);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    transition:
      transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      color var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .integ__tile:hover {
      transform: translateY(-4px);
      color: var(--c-text);
      border-color: color-mix(in srgb, var(--c-brand) 35%, var(--border-glass));
    }
  }

  /* ---- Çoklu dil ---- */
  .lang__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-12);
  }
  /* ---- Nasıl çalışır ---- */
  .how__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  .how__step {
    position: relative;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    background: var(--surface-glass);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition:
      transform var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .how__step:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px -22px var(--halo-brand);
    }
  }
  .how__num {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 800;
    color: #fff;
    background: var(--grad-brand);
    box-shadow:
      0 10px 24px -10px var(--halo-brand),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    margin-bottom: var(--space-5);
  }
  .how__step h3 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-2);
  }
  .how__step p {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
  }

  /* ---- Kapanış CTA bandı ---- */
  .cta-band {
    padding-block: var(--space-16);
  }
  .cta-band__inner {
    position: relative;
    text-align: center;
    padding: clamp(var(--space-12), 6vw, var(--space-24)) var(--space-6);
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--c-brand) 35%, transparent);
    background: linear-gradient(180deg, var(--c-brand-soft), var(--c-surface));
    overflow: hidden;
    isolation: isolate;
  }
  .cta-band__glow {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(40% 50% at 30% 80%, var(--halo-brand), transparent 65%),
      radial-gradient(35% 45% at 70% 20%, var(--halo-accent), transparent 65%);
    filter: blur(40px);
    opacity: 0.7;
    pointer-events: none;
    z-index: -1;
    animation: auroraSpin 24s linear infinite;
  }
  @keyframes auroraSpin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .cta-band__glow {
      animation: none;
    }
  }
  .cta-band__inner h2 {
    position: relative;
    font-size: var(--fs-3xl);
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .cta-band__inner p {
    position: relative;
    color: var(--c-text-muted);
    margin-top: var(--space-3);
    font-size: var(--fs-lg);
  }
  .cta-band__actions {
    position: relative;
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-8);
    flex-wrap: wrap;
  }

  /* ---- Section divider (peş peşe .section'lar arasında ince gradient çizgi) ---- */
  .section + .section {
    position: relative;
  }
  .section + .section::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 2 * var(--space-5), var(--container));
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--c-border) 80%, transparent),
      transparent
    );
    pointer-events: none;
  }
}

/* --- components/feature.css --- */
@layer components {
  /* ---- Genel-bakış grid (özellik / çözüm / hikaye kartları) ---- */
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
  }
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    transition:
      transform var(--dur) var(--ease-out),
      border-color var(--dur) var(--ease-out),
      background var(--dur) var(--ease-out);
  }
  .info-card:is(a) {
    color: inherit;
  }
  @media (hover: hover) and (pointer: fine) {
    .info-card:hover {
      transform: translateY(-4px);
      border-color: var(--c-border-strong);
      background: var(--c-surface-2);
    }
  }
  .info-card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-icon, var(--c-brand)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-icon, var(--c-brand)) 22%, transparent);
    color: var(--c-icon, var(--c-brand));
    font-size: 1.25rem;
  }
  .info-card__icon.icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }
  .info-card h3 {
    font-size: var(--fs-lg);
  }
  .info-card p {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
  }
  .info-card__more {
    margin-top: auto;
    color: var(--c-brand-300);
    font-weight: 600;
    font-size: var(--fs-sm);
  }
  @media (hover: hover) and (pointer: fine) {
    .info-card:hover .info-card__more {
      text-decoration: underline;
    }
  }

  /* ---- Alternating özellik blokları (mockup + metin) ---- */
  .feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(var(--space-8), 5vw, var(--space-20));
    align-items: center;
    padding-block: var(--space-12);
  }
  .feature-row--single {
    grid-template-columns: 1fr;
  }
  .feature-row:nth-child(even) .feature-row__media {
    order: -1;
  }
  .feature-row__text h2 {
    font-size: var(--fs-2xl);
    margin-top: var(--space-3);
  }
  .feature-row__text p {
    color: var(--c-text-muted);
    margin-top: var(--space-4);
    font-size: var(--fs-base);
  }
  .feature-list {
    margin-top: var(--space-6);
    display: grid;
    gap: var(--space-3);
  }
  .feature-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    color: var(--c-text-muted);
  }
  .feature-list li::before {
    content: "";
    width: 0.45rem;
    height: 0.75rem;
    flex: none;
    margin-top: 0.2rem;
    border: solid var(--c-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .feature-row__media {
    position: relative;
    padding: var(--space-5);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    min-height: 260px;
    display: grid;
  }
  .feature-row__media::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: var(--grad-brand-soft);
    opacity: 0.4;
    z-index: -1;
    filter: blur(14px);
  }

  /* Kendine yeten basit görsel (feature media içinde) */
  .feat-visual {
    align-self: center;
    display: grid;
    gap: var(--space-4);
    width: 100%;
  }
  .feat-visual__glyph {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--grad-brand);
    color: #fff;
    font-size: 1.5rem;
  }
  .feat-visual strong {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
  }
  .feat-visual small {
    display: block;
    color: var(--c-text-dim);
    font-size: var(--fs-xs);
    margin-top: 2px;
  }
  .feat-bars {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    height: 90px;
  }
  .feat-bars span {
    flex: 1;
    border-radius: 4px;
    background: var(--grad-brand);
    opacity: 0.85;
  }
  .feat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .feat-chip {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    border: 1px solid var(--c-border);
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
  }

  .info-card .brand-logo {
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    margin-bottom: var(--space-3);
    display: block;
  }
  .info-card .brand-logo--mono {
    color: var(--c-text-muted);
  }

  .brand-logo-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
    margin-bottom: var(--space-3);
  }
  .brand-logo-zoom .brand-logo {
    margin-bottom: 0;
  }
  .brand-logo-zoom--stripe,
  .brand-logo-zoom--paytr {
    width: 5.5rem;
    height: 1.75rem;
  }
  .brand-logo-zoom--stripe .brand-logo {
    height: 2.5rem;
    width: auto;
    min-width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform: scale(1.35);
    transform-origin: center center;
  }
  .info-card__icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
  }

  .info-card .brand-logo--paytr {
    height: 28px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
  }
  .brand-logo-zoom--notify {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
  }
  .brand-logo-zoom--notify .brand-logo {
    height: 2.75rem;
    width: 2.75rem;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transform-origin: center center;
  }
  .brand-logo-zoom--telegram .brand-logo {
    transform: scale(1.12);
  }
  .brand-logo-zoom--whatsapp .brand-logo {
    transform: scale(1.42);
  }
}

/* --- components/marquee.css --- */
@layer components {
  .marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    cursor: grab;
    user-select: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 12%,
      #000 88%,
      transparent
    );
  }
  .marquee::-webkit-scrollbar {
    display: none;
  }
  .marquee.is-dragging {
    cursor: grabbing;
  }
  .marquee img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
  }
  .marquee__track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation: marquee 28s linear infinite;
  }
  .marquee--interactive .marquee__track {
    animation: none;
  }
  @media (hover: hover) and (pointer: fine) {
    .marquee:hover .marquee__track:not([data-enhanced]) {
      animation-play-state: paused;
    }
  }
  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }

  .logo-pill {
    display: grid;
    place-items: center;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-base);
    color: var(--c-text-dim);
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee__track {
      animation: none;
    }
  }

  .logo-pill .brand-logo {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
  }
  .logo-pill:has(.brand-logo) {
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
  }
  .logo-pill:has(img) {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5);
    min-height: 44px;
  }
  .logo-pill > img {
    height: 24px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
  }

  .logo-pill--brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 88px;
    padding: var(--space-2) var(--space-5);
  }
  .logo-pill--brand > img {
    height: 28px;
    max-width: 96px;
    object-fit: contain;
  }
}

/* --- components/icons.css --- */
/* Lucide-style inline icons */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  color: inherit;
  flex-shrink: 0;
}

.icon svg {
  width: 1.25em;
  height: 1.25em;
}

.icon--sm svg {
  width: 1.1em;
  height: 1.1em;
}

.icon--lg svg {
  width: 1.5em;
  height: 1.5em;
}

/* Ortak ikon rozeti — site geneli (entegrasyon bölümü referans) */
.icon-badge {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-icon, var(--c-brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-icon, var(--c-brand)) 22%, transparent);
  color: var(--c-icon, var(--c-brand));
}

.icon-badge svg {
  width: 1.35rem;
  height: 1.35rem;
}

.bento__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-icon, var(--c-brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-icon, var(--c-brand)) 22%, transparent);
  color: var(--c-icon, var(--c-brand));
  margin-bottom: var(--space-4);
}

.bento__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.feat-visual__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--c-icon, var(--c-brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-icon, var(--c-brand)) 22%, transparent);
  color: var(--c-icon, var(--c-brand));
  margin: 0 auto var(--space-5);
}

.feat-visual__glyph svg {
  width: 2rem;
  height: 2rem;
}

.info-card__metric {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--c-brand);
  margin-bottom: var(--space-3);
}

.info-card__metric svg {
  width: 1.25rem;
  height: 1.25rem;
}

.tst__stars {
  display: flex;
  gap: 0.15rem;
  color: var(--c-accent);
  margin-bottom: var(--space-3);
}

.tst__stars svg {
  width: 1rem;
  height: 1rem;
}

.integ__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}

.integ__tile [data-icon] {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--c-icon, var(--c-brand)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-icon, var(--c-brand)) 22%, transparent);
  color: var(--c-icon, var(--c-brand));
}

.integ__tile svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c-icon, var(--c-brand));
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.logo-pill svg {
  width: 1rem;
  height: 1rem;
  opacity: 0.85;
  color: var(--c-icon, var(--c-brand));
}

/* --- components/scroll-dots.css --- */
@layer components {
  .scroll-dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-block: var(--space-3);
    pointer-events: none;
  }

  .scroll-dots--above {
    margin-bottom: var(--space-2);
  }

  @media (max-width: 1024px) {
    .scroll-dots {
      display: flex;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-dots {
      display: none !important;
    }
  }

  .scroll-dots__dot {
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c-text-muted) 35%, transparent);
    transition:
      width var(--dur) var(--ease-out),
      background-color var(--dur) var(--ease-out);
  }

  .scroll-dots__dot.is-active {
    width: 1.25rem;
    background: var(--c-brand);
  }
}

/* --- components/lang-switcher.css --- */
/* lang-switcher.css — şık pill + dropdown */
.lang-switcher {
  position: relative;
  display: inline-flex;
}
.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  background: var(--surface-2, rgba(255, 255, 255, 0.04));
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switcher__btn:hover {
    border-color: var(--brand, #6d5ef6);
    background: rgba(109, 94, 246, 0.08);
  }
}
.lang-switcher__btn[aria-expanded="true"] {
  border-color: var(--brand, #6d5ef6);
  background: rgba(109, 94, 246, 0.12);
}
.lang-switcher__flag {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-switcher__code {
  letter-spacing: 0.04em;
}
.lang-switcher__chev {
  width: 0;
  height: 0;
  margin-inline-start: 0.1rem;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.lang-switcher__btn[aria-expanded="true"] .lang-switcher__chev {
  transform: rotate(180deg);
}

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  min-width: 200px;
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--c-surface, #15151f);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  animation: lang-switcher-pop 0.14s ease-out;
}
[dir="rtl"] .lang-switcher__menu {
  right: auto;
  left: 0;
}
@keyframes lang-switcher-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-switcher__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: start;
  cursor: pointer;
  transition: background 0.12s ease;
}
.lang-switcher__opt img {
  width: 20px;
  height: 14px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}
.lang-switcher__opt > span:not(.lang-switcher__check) {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
  .lang-switcher__opt:hover {
    background: rgba(109, 94, 246, 0.12);
  }
}
.lang-switcher__opt.is-active {
  background: rgba(109, 94, 246, 0.18);
  color: var(--brand, #6d5ef6);
  font-weight: 600;
}
.lang-switcher__check {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.lang-switcher__opt.is-active .lang-switcher__check {
  opacity: 1;
}
.lang-switcher__check::before {
  content: "";
  width: 6px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Mobil panel içi */
.nav__sheet .lang-switcher {
  display: block;
  margin: 1rem 1rem 0;
}
.nav__sheet .lang-switcher__btn {
  width: 100%;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}
.nav__sheet .lang-switcher__menu {
  position: static;
  margin-top: 0.5rem;
  max-height: none;
  box-shadow: none;
  animation: none;
}
.nav__sheet .lang-switcher__menu-title {
  display: block;
  padding: 0.4rem 0.6rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  font-weight: 700;
}
.lang-switcher__menu-title {
  display: none;
}

/* Açık tema */
:root[data-color-mode="light"] .lang-switcher__btn {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
}
:root[data-color-mode="light"] .lang-switcher__menu {
  background: #15151f;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}
:root[data-color-mode="light"] .lang-switcher__menu,
:root[data-color-mode="light"] .lang-switcher__opt {
  color: #fff;
}
:root[data-color-mode="light"] .lang-switcher__opt.is-active {
  color: var(--c-brand-300, #a89bff);
}
:root[data-color-mode="light"] .lang-switcher__menu-title {
  color: #fff;
  opacity: 0.7;
}

@media (prefers-color-scheme: light) {
  :root[data-color-mode="system"] .lang-switcher__btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
  }
  :root[data-color-mode="system"] .lang-switcher__menu {
    background: #15151f;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  }
  :root[data-color-mode="system"] .lang-switcher__menu,
  :root[data-color-mode="system"] .lang-switcher__opt {
    color: #fff;
  }
  :root[data-color-mode="system"] .lang-switcher__opt.is-active {
    color: var(--c-brand-300, #a89bff);
  }
  :root[data-color-mode="system"] .lang-switcher__menu-title {
    color: #fff;
    opacity: 0.7;
  }
}

/* --- components/rtl.css --- */
@layer components {
  [dir="rtl"] .breadcrumb {
    direction: rtl;
  }

  [dir="rtl"] .breadcrumb__sep {
    transform: scaleX(-1);
  }

  [dir="rtl"] .nav__sheet-panel {
    inset-inline: 0 0;
  }

  [dir="rtl"] .plan__price {
    direction: rtl;
    flex-direction: row-reverse;
  }

  [dir="rtl"] .info-card__more {
    text-align: left;
  }

  [dir="rtl"] .mock__row {
    direction: rtl;
  }

  [dir="rtl"] .acc__icon {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  [dir="rtl"] .page-hero__actions {
    direction: rtl;
  }

  [dir="rtl"] .nav__links a,
  [dir="rtl"] .nav__sheet-links a {
    text-align: right;
  }

  /* Marquee kaydırıcılar: scroll/animasyon LTR, chip metni RTL */
  [dir="rtl"] .marquee,
  [dir="rtl"] .lang-panel__marquee,
  [dir="rtl"] .currencies-panel__marquee {
    direction: ltr;
  }

  [dir="rtl"] .logo-pill,
  [dir="rtl"] .lang-panel__chip,
  [dir="rtl"] .currencies-panel__marquee-chip {
    direction: rtl;
  }

  /* Yatay snap şeritleri — RTL boş alan / scrollLeft sorununu önler */
  [dir="rtl"] .how__steps,
  [dir="rtl"] .tst__grid,
  [dir="rtl"] .pricing__grid {
    direction: ltr;
  }

  [dir="rtl"] .how__step,
  [dir="rtl"] .tst__card,
  [dir="rtl"] .pricing__grid > .plan {
    direction: rtl;
  }

  /* Scroll progress — okuma yönüne uygun kenardan büyür */
  [dir="rtl"] .scroll-progress {
    left: auto;
    right: 0;
  }

  /* CTA ok hover */
  @media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .btn:hover .btn__arrow {
      transform: translateX(-3px);
    }
  }

  /* ROI modal */
  [dir="rtl"] .roi-modal__close {
    right: auto;
    inset-inline-end: var(--space-5);
  }

  [dir="rtl"] .roi-modal__head {
    padding-right: 0;
    padding-inline-end: 2.5rem;
  }

  /* Yasal sayfa TOC ve listeler */
  [dir="rtl"] .toc ul {
    border-left: none;
    border-inline-start: 1px solid var(--c-border);
  }

  [dir="rtl"] .toc a {
    padding: 2px var(--space-4) 2px 0;
    margin-left: 0;
    margin-inline-start: -1px;
    border-left: none;
    border-inline-start: 2px solid transparent;
  }

  @media (hover: hover) and (pointer: fine) {
    [dir="rtl"] .toc a:hover {
      border-left-color: transparent;
      border-inline-start-color: var(--c-brand);
    }
  }

  [dir="rtl"] .prose ul,
  [dir="rtl"] .prose ol {
    padding-left: 0;
    padding-inline-start: var(--space-6);
  }

  /* Özellik sayfası zigzag layout */
  [dir="rtl"] .feature-row:nth-child(even) .feature-row__media {
    order: 0;
  }

  [dir="rtl"] .feature-row:nth-child(odd) .feature-row__media {
    order: -1;
  }
}

/* --- components/home-select.css --- */
@layer components {
  .page-home .plan,
  .page-home .mock,
  .page-home .bento__item,
  .page-home .bento-callback-mock,
  .page-home .proof__item,
  .page-home .integ__tile,
  .page-home .how__step,
  .page-home .tst__card,
  .page-home .currencies-panel__item,
  .page-home .currencies-panel__marquee-chip,
  .page-home .lang-panel__chip,
  .page-home .hero__visual,
  .page-home .deep__visual {
    user-select: none;
    -webkit-user-select: none;
  }

  .page-home .btn,
  .page-home input,
  .page-home textarea,
  .page-home select,
  .page-home a {
    user-select: auto;
    -webkit-user-select: auto;
  }
}

/* --- components/consent.css --- */
@layer components {
  .cookie-banner {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: calc(var(--z-header, 100) + 1);
    padding: var(--space-4);
    min-height: var(--cookie-banner-min-h, 4.5rem);
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    border-top: 1px solid var(--c-border);
    backdrop-filter: blur(12px);
  }

  .cookie-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .cookie-banner__visual {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cookie-banner__cookie {
    display: block;
    width: 3rem;
    height: 3rem;
    overflow: visible;
  }

  .cookie-banner__cookie .cookie-piece {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: cookieAssemble 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .cookie-banner__cookie .cookie-piece--left {
    --cookie-tx: -14px;
    --cookie-ty: -6px;
    --cookie-rot: -28deg;
    animation-delay: 0ms;
  }

  .cookie-banner__cookie .cookie-piece--right {
    --cookie-tx: 14px;
    --cookie-ty: 6px;
    --cookie-rot: 22deg;
    animation-delay: 80ms;
  }

  .cookie-banner__cookie .cookie-piece--crumb1 {
    --cookie-tx: -10px;
    --cookie-ty: 12px;
    --cookie-rot: 45deg;
    animation-delay: 120ms;
  }

  .cookie-banner__cookie .cookie-piece--crumb2 {
    --cookie-tx: 12px;
    --cookie-ty: -10px;
    --cookie-rot: -40deg;
    animation-delay: 160ms;
  }

  @keyframes cookieAssemble {
    from {
      opacity: 0;
      transform: translate(var(--cookie-tx, 0), var(--cookie-ty, 0)) rotate(var(--cookie-rot, 0deg)) scale(0.85);
    }
    to {
      opacity: 1;
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cookie-banner__cookie .cookie-piece {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .cookie-banner__content {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .cookie-banner__inner p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    max-width: 52ch;
  }

  .cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cookie-banner a {
    color: var(--c-brand-300);
  }

  /* Ters tema: sayfa gündüz → banner gece; sayfa gece → banner gündüz */
  :root[data-color-mode="light"] .cookie-banner {
    color-scheme: dark;
    --c-bg: #0b0b12;
    --c-surface: #15151f;
    --c-surface-2: #1c1c28;
    --c-surface-3: #232330;
    --c-elevated: #1a1a26;
    --c-text: #ededf2;
    --c-text-muted: #9b9bab;
    --c-text-dim: #6e6e7e;
    --c-border: color-mix(in srgb, #ededf2 12%, transparent);
    --c-border-strong: color-mix(in srgb, #ededf2 22%, transparent);
    --c-brand-300: color-mix(in srgb, #6d5ef6 60%, white);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
    box-shadow: var(--shadow-lg);
  }

  :root[data-color-mode="dark"] .cookie-banner {
    color-scheme: light;
    --c-bg: #f4f4f8;
    --c-surface: #ffffff;
    --c-surface-2: #ececf2;
    --c-surface-3: #e2e2ea;
    --c-elevated: #f8f8fc;
    --c-text: #12121a;
    --c-text-muted: #5c5c6e;
    --c-text-dim: #88889a;
    --c-border: color-mix(in srgb, #12121a 12%, transparent);
    --c-border-strong: color-mix(in srgb, #12121a 22%, transparent);
    --c-brand-300: #6d5ef6;
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.16);
    box-shadow: var(--shadow-lg);
  }

  @media (prefers-color-scheme: light) {
    :root[data-color-mode="system"] .cookie-banner {
      color-scheme: dark;
      --c-bg: #0b0b12;
      --c-surface: #15151f;
      --c-surface-2: #1c1c28;
      --c-surface-3: #232330;
      --c-elevated: #1a1a26;
      --c-text: #ededf2;
      --c-text-muted: #9b9bab;
      --c-text-dim: #6e6e7e;
      --c-border: color-mix(in srgb, #ededf2 12%, transparent);
      --c-border-strong: color-mix(in srgb, #ededf2 22%, transparent);
      --c-brand-300: color-mix(in srgb, #6d5ef6 60%, white);
      --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
      box-shadow: var(--shadow-lg);
    }
  }

  @media (prefers-color-scheme: dark) {
    :root[data-color-mode="system"] .cookie-banner {
      color-scheme: light;
      --c-bg: #f4f4f8;
      --c-surface: #ffffff;
      --c-surface-2: #ececf2;
      --c-surface-3: #e2e2ea;
      --c-elevated: #f8f8fc;
      --c-text: #12121a;
      --c-text-muted: #5c5c6e;
      --c-text-dim: #88889a;
      --c-border: color-mix(in srgb, #12121a 12%, transparent);
      --c-border-strong: color-mix(in srgb, #12121a 22%, transparent);
      --c-brand-300: #6d5ef6;
      --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.16);
      box-shadow: var(--shadow-lg);
    }
  }
}

/* --- components/brand-stories.css --- */
/* brand-stories.css — Swiper IG stories + premium glass cards */
@layer components {
  html.is-brand-stories-open,
  html.is-brand-stories-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.is-brand-stories-open body {
    position: fixed;
    width: 100%;
    top: var(--bs-scroll-y, 0);
  }

  .brand-stories {
    --bs-chrome-h: 72px;
    --bs-stage-offset: 10px;
    position: fixed;
    inset: 0;
    z-index: var(--z-brand-stories);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding:
      max(5vh, env(safe-area-inset-top))
      max(env(safe-area-inset-right), var(--space-3))
      max(4vh, env(safe-area-inset-bottom))
      max(env(safe-area-inset-left), var(--space-3));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
  }

  .brand-stories.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .brand-stories__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 40%, color-mix(in srgb, var(--c-brand) 12%, transparent), transparent 70%),
      color-mix(in srgb, var(--c-bg) 48%, black);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0;
    cursor: pointer;
  }

  .brand-stories__chrome {
    position: absolute;
    z-index: 20;
    top: max(5vh, env(safe-area-inset-top));
    inset-inline: max(env(safe-area-inset-left), var(--space-3)) max(env(safe-area-inset-right), var(--space-3));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    pointer-events: none;
  }

  .brand-stories__panel-title {
    margin: 0;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.3;
    color: var(--c-text);
    background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    flex-shrink: 0;
  }

  .brand-stories__card-inner > .brand-stories__panel-title {
    margin-bottom: var(--space-1);
  }

  @supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-stories__panel-title {
      color: var(--c-brand);
    }
  }

  .brand-stories__progress {
    display: flex;
    gap: 4px;
    width: min(92vw, 400px);
    padding: 0 2px;
  }

  .brand-stories__progress-seg {
    flex: 1;
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c-text) 18%, transparent);
    overflow: hidden;
    position: relative;
  }

  .brand-stories__progress-seg::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--c-brand), #22c55e);
    transition: width 0.35s var(--ease-out);
  }

  .brand-stories__progress-seg.is-done::after {
    width: 100%;
  }

  .brand-stories__progress-seg.is-active::after {
    width: 100%;
    opacity: 0.85;
  }

  .brand-stories__counter {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--c-surface) 82%, transparent);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
  }

  .brand-stories__stage-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    width: min(92vw, 400px);
    max-width: 100%;
    margin-inline: auto;
    margin-top: var(--bs-stage-offset);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
  }

  .brand-stories__close {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 90%, transparent);
    color: var(--c-text);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    pointer-events: auto;
  }

  .brand-stories__close:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
  }

  .brand-stories__stage.swiper {
    flex: 0 0 auto;
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: auto;
    margin-top: 0;
    height: min(78dvh, 720px);
    min-height: 420px;
    overflow: hidden;
    touch-action: pan-x;
    overscroll-behavior: contain;
  }

  .brand-stories__stage .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  .brand-stories__stage.is-dragging .swiper-wrapper {
    transition-timing-function: ease-out;
  }

  .brand-stories .swiper-slide.brand-stories__card {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .brand-stories .swiper-slide-prev.brand-stories__card,
  .brand-stories .swiper-slide-next.brand-stories__card {
    opacity: 0.42;
  }

  .brand-stories .swiper-slide-active.brand-stories__card {
    opacity: 1;
  }

  .brand-stories__stage:not(.is-dragging) .swiper-slide.brand-stories__card {
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .brand-stories__stage.is-dragging .swiper-slide.brand-stories__card,
  .brand-stories__stage.is-transitioning .swiper-slide.brand-stories__card {
    transition: none;
  }

  @media (max-width: 768px) {
    .brand-stories {
      justify-content: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-top: calc(max(4vh, env(safe-area-inset-top)) + var(--bs-chrome-h));
    }

    .brand-stories__stage-wrap {
      margin-top: calc(var(--bs-stage-offset) + var(--space-1));
    }

    .brand-stories__stage.swiper {
      height: min(62dvh, 560px);
      min-height: 300px;
      flex-shrink: 0;
    }

    .brand-stories__card {
      max-height: min(62dvh, 560px);
    }

    .brand-stories__disclaimer {
      flex-shrink: 0;
      padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }

    .brand-stories .swiper-slide-prev.brand-stories__card,
    .brand-stories .swiper-slide-next.brand-stories__card {
      opacity: 1;
    }

    .brand-stories__stage:not(.is-dragging):not(.is-transitioning) .swiper-slide.brand-stories__card {
      transition: none;
    }

    .brand-stories__stage .swiper-wrapper {
      transition-duration: 320ms;
    }

    .brand-stories__card.is-metrics-done .brand-stories__metric-bar-fill::after {
      animation: none;
    }
  }

  .brand-stories__nav-pool {
    display: none;
  }

  .brand-stories__nav {
    flex-shrink: 0;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 90%, transparent);
    color: var(--c-text);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    transition: transform 0.2s var(--ease-out), opacity 0.2s ease;
  }

  .brand-stories__nav:hover:not(:disabled) {
    transform: scale(1.05);
  }

  .brand-stories__nav:disabled,
  .brand-stories__nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  @media (max-width: 768px) {
    .brand-stories__nav,
    .brand-stories__hero-nav-host {
      display: none;
    }
  }

  @media (min-width: 769px) {
    .brand-stories > .brand-stories__nav {
      display: none;
    }

    .brand-stories__hero-nav-host .brand-stories__nav {
      display: inline-flex;
    }
  }

  .brand-stories__card {
    --bs-accent: var(--c-brand);
    position: relative;
    width: 100% !important;
    aspect-ratio: 9 / 16;
    max-height: min(78dvh, 720px);
    height: auto !important;
    user-select: none;
  }

  .brand-stories__card-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    box-shadow: 0 16px 40px color-mix(in srgb, black 28%, transparent);
    isolation: isolate;
    transform: translateZ(0);
  }

  .brand-stories__card[data-tier="premium"] {
    --bs-accent: #f59e0b;
  }

  .brand-stories__card[data-tier="high"] {
    --bs-accent: var(--c-brand);
  }

  .brand-stories__card[data-tier="mid"],
  .brand-stories__card[data-tier="low"] {
    --bs-accent: #3b82f6;
  }

  .brand-stories__card-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--bs-accent) 35%, transparent), transparent 62%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.45s ease;
    filter: blur(20px);
  }

  .brand-stories__card.swiper-slide-active .brand-stories__card-glow {
    opacity: 0.95;
  }

  .brand-stories__card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .brand-stories__card-hero {
    position: relative;
    flex-shrink: 0;
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .brand-stories__card-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--bs-accent) 55%, black) 0%,
      color-mix(in srgb, var(--bs-accent) 22%, transparent) 55%,
      transparent 100%
    );
    pointer-events: none;
  }

  .brand-stories__card-top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
  }

  .brand-stories__sector-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, white 18%, transparent);
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 16px color-mix(in srgb, black 25%, transparent);
  }

  .brand-stories__sector-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  .brand-stories__flag {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, white 30%, transparent);
    flex-shrink: 0;
  }

  .brand-stories__title {
    position: relative;
    font-size: clamp(var(--fs-sm), 3.6vw, var(--fs-md));
    font-weight: 800;
    line-height: var(--lh-snug);
    margin: 0 0 1px;
    color: white;
    text-shadow: 0 2px 12px color-mix(in srgb, black 45%, transparent);
  }

  .brand-stories__region {
    position: relative;
    font-size: var(--fs-xs);
    color: color-mix(in srgb, white 82%, transparent);
    margin: 0 0 var(--space-1);
  }

  .brand-stories__pill {
    position: relative;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, white 35%, transparent);
    background: color-mix(in srgb, white 12%, transparent);
    color: white;
  }

  .brand-stories__hero-stat {
    flex-shrink: 0;
    text-align: center;
    padding: var(--space-1) 0;
  }

  .brand-stories__hero-stat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 36px;
  }

  .brand-stories__hero-nav-host {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
  }

  .brand-stories__hero-stat-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-text-muted);
    margin-bottom: 2px;
  }

  .brand-stories__hero-stat-value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(2rem, 9vw, 2.75rem);
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: #22c55e;
    text-shadow: 0 0 24px color-mix(in srgb, #22c55e 45%, transparent);
    unicode-bidi: isolate;
  }

  .brand-stories__hero-stat-sub {
    display: block;
    font-size: 10px;
    color: var(--c-text-muted);
    margin-top: 2px;
  }

  .brand-stories__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  @media (max-width: 360px) {
    .brand-stories__metrics {
      grid-template-columns: 1fr;
    }
  }

  .brand-stories__metric-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-surface-2) 75%, transparent);
    border: 1px solid var(--c-border);
    min-height: 52px;
  }

  .brand-stories__metric-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
  }

  .brand-stories__metric-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-text-muted);
  }

  .brand-stories__metric-values {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(10px, 2.8vw, 12px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    unicode-bidi: isolate;
  }

  .brand-stories__arrow {
    color: var(--c-text-muted);
    opacity: 0.55;
    font-size: 0.8em;
  }

  .brand-stories__before {
    color: var(--c-text-muted);
    text-decoration: line-through;
    opacity: 0.75;
  }

  .brand-stories__after {
    color: var(--c-brand);
    font-weight: 700;
  }

  .brand-stories__metric-bar {
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--c-border);
    overflow: hidden;
  }

  .brand-stories__metric-bar-fill {
    display: block;
    height: 100%;
    width: var(--fill, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    position: relative;
    overflow: hidden;
  }

  .brand-stories__metric-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, white 35%, transparent), transparent);
    animation: none;
  }

  .brand-stories__card.is-metrics-done .brand-stories__metric-bar-fill::after {
    animation: bs-shimmer 2.2s ease-in-out infinite;
  }

  @keyframes bs-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .brand-stories__info-btn {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
  }

  .brand-stories__opt-in {
    flex-shrink: 0;
    margin: 0;
    padding: var(--space-2) 0 0;
    border-top: 1px solid var(--c-border);
    font-size: clamp(9px, 2.5vw, 11px);
    line-height: 1.4;
    color: var(--c-text-muted);
  }

  .brand-stories__highlight {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border-inline-start: 3px solid var(--bs-accent);
    background: color-mix(in srgb, var(--bs-accent) 10%, var(--c-surface));
  }

  .brand-stories__highlight-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, #22c55e 20%, transparent);
    color: #22c55e;
    font-size: 12px;
    font-weight: 700;
  }

  .brand-stories__highlight p {
    margin: 0;
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .brand-stories__disclaimer {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 42rem;
    margin: var(--space-3) 0 0;
    padding: 0 var(--space-4);
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.4;
    text-align: center;
    color: color-mix(in srgb, var(--c-text) 72%, transparent);
  }

  .brand-stories__infobox {
    position: fixed;
    z-index: calc(var(--z-brand-stories) + 2);
    max-width: 260px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--c-text);
  }

  .page-home .hero__trust {
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: inherit;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .page-home .hero__trust.is-brand-stories-off {
    cursor: default;
    pointer-events: none;
  }

  .page-home .hero__trust:focus {
    outline: none;
  }

  .page-home .hero__trust:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
  }

  .page-home .hero__trust:active {
    opacity: 0.88;
    transform: scale(0.985);
  }

  .page-home .hero__trust * {
    pointer-events: none;
  }

  .brand-stories.is-reduced-motion .brand-stories__metric-bar-fill::after,
  .brand-stories.is-reduced-motion .brand-stories__card.is-metrics-done .brand-stories__metric-bar-fill::after {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .brand-stories__metric-bar-fill::after,
    .brand-stories__card.is-metrics-done .brand-stories__metric-bar-fill::after {
      animation: none;
    }
  }

  [dir="rtl"] .brand-stories__nav svg {
    transform: scaleX(-1);
  }

  [dir="rtl"] .brand-stories__progress {
    flex-direction: row-reverse;
  }
}

/* --- components/partner.css --- */
@layer components {
  .page-partner .section {
    padding-block: clamp(var(--space-10), 5vw, var(--space-20));
  }

  .page-partner .section-head {
    margin-bottom: var(--space-8);
  }

  .page-partner .page-hero {
    padding-bottom: var(--space-8);
  }

  .page-partner .page-hero__inner {
    max-width: min(100%, 48rem);
  }

  .page-partner #basvur {
    scroll-margin-top: 5.5rem;
  }

  .page-partner .page-hero .breadcrumb {
    margin-bottom: var(--space-5);
  }

  .partner-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-brand-300);
    background: color-mix(in srgb, var(--c-brand-soft) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-brand) 40%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset,
      0 8px 24px -12px var(--halo-brand, rgba(124, 92, 255, 0.45));
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
    position: relative;
  }

  .partner-hero__badge-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--c-brand);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand) 50%, transparent);
    animation: partnerBadgePulse 2s ease-out infinite;
  }

  @keyframes partnerBadgePulse {
    0% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-brand) 55%, transparent);
    }
    70% {
      box-shadow: 0 0 0 8px transparent;
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }

  .partner-quick-math {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-8);
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
  }

  .partner-quick-math__chip {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 6.5rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    text-align: center;
  }

  .partner-quick-math__count {
    display: block;
    flex: 1;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--c-text);
  }

  .partner-quick-math__income {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25em;
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    text-align: center;
  }

  .partner-quick-math__income strong {
    display: inline;
    font-size: var(--fs-base);
    color: var(--c-brand);
    margin-top: 0;
    font-weight: 700;
    white-space: nowrap;
    text-align: inherit;
  }

  .partner-audience-wrap {
    position: relative;
  }

  .partner-audience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .partner-audience__card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
  }

  .partner-audience__card--wide {
    grid-column: 1 / -1;
  }

  .partner-audience__icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--c-brand-soft) 80%, transparent),
      color-mix(in srgb, var(--c-brand) 12%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--c-brand) 28%, transparent);
    box-shadow: 0 10px 24px -16px var(--halo-brand, rgba(124, 92, 255, 0.5));
    margin-bottom: var(--space-3);
    color: var(--c-brand);
  }

  .partner-audience__icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .partner-trust-timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .partner-trust-step {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    position: relative;
  }

  .partner-trust-step__num {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .partner-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .partner-step {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
  }

  .partner-step__n {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    margin-bottom: var(--space-3);
  }

  .partner-problems {
    display: grid;
    gap: var(--space-3);
  }

  .partner-problem-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    align-items: stretch;
  }

  .partner-problem-row__pain,
  .partner-problem-row__fix {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .partner-problem-row__pain {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-border);
    color: var(--c-text-muted);
  }

  .partner-problem-row__fix {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(56, 189, 248, 0.08));
    border: 1px solid rgba(124, 92, 255, 0.25);
  }

  .partner-outcomes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .partner-outcome {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
  }

  .partner-outcome h3 {
    font-size: var(--fs-base);
    margin-bottom: var(--space-2);
  }

  .partner-outcome p {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    margin: 0;
  }

  .partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    opacity: 0.85;
  }

  .partner-logos img {
    height: 28px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
  }

  .partner-automation {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .partner-automation__card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
  }

  .partner-automation__card .icon,
  .partner-automation__card img {
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-3);
  }

  .partner-automation__card .icon[data-icon="mail"] {
    width: 35px;
    height: 35px;
  }

  .partner-pitch {
    max-width: 52ch;
    margin-inline: auto;
    text-align: center;
    font-size: var(--fs-lg);
    color: var(--c-text-muted);
    line-height: 1.6;
  }

  .partner-kit {
    display: grid;
    gap: var(--space-4);
  }

  .partner-kit__item {
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    overflow: hidden;
  }

  .partner-kit__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    background: rgba(255, 255, 255, 0.02);
  }

  .partner-kit__head h3 {
    font-size: var(--fs-sm);
    margin: 0;
  }

  .partner-kit__body {
    padding: var(--space-4);
    font-size: var(--fs-sm);
    line-height: 1.55;
    color: var(--c-text-muted);
    white-space: pre-wrap;
    margin: 0;
    font-family: inherit;
  }

  .partner-calc {
    border-radius: var(--radius-xl);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    padding: var(--space-6);
  }

  .partner-calc__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .partner-calc__field label {
    display: block;
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
  }

  .partner-calc__field input[type="range"] {
    width: 100%;
  }

  .partner-calc__field input[type="number"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font: inherit;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
    -moz-appearance: textfield;
  }

  .partner-calc__field input[type="number"]::-webkit-outer-spin-button,
  .partner-calc__field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .partner-calc__field input[type="number"]:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-brand-soft);
  }

  .partner-calc__modes {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
  }

  .partner-calc__modes button {
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    cursor: pointer;
  }

  .partner-calc__modes button.is-active {
    border-color: var(--c-brand);
    color: var(--c-brand);
    background: var(--c-brand-soft);
  }

  .partner-calc__dist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .partner-calc__dist[hidden] {
    display: none !important;
  }

  .partner-calc__results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .partner-calc__result {
    text-align: center;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: rgba(124, 92, 255, 0.08);
    border: 1px solid rgba(124, 92, 255, 0.2);
  }

  .partner-calc__result strong {
    display: block;
    font-size: var(--fs-xl);
    color: var(--c-brand);
    margin-top: var(--space-1);
  }

  .partner-calc__chart {
    margin-top: var(--space-6);
    height: 140px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
  }

  .partner-calc__bar {
    flex: 1;
    min-width: 0;
    background: linear-gradient(180deg, var(--c-brand), rgba(124, 92, 255, 0.35));
    border-radius: 4px 4px 0 0;
    transition: height 0.35s ease;
  }

  .partner-calc__note {
    font-size: var(--fs-xs);
    color: var(--c-text-dim);
    margin-top: var(--space-4);
  }

  .partner-panel-mock {
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in srgb, var(--c-brand) 22%, var(--c-border));
    background: linear-gradient(
      165deg,
      color-mix(in srgb, var(--c-surface) 92%, var(--c-brand-soft)),
      color-mix(in srgb, var(--c-bg) 88%, transparent)
    );
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow:
      0 24px 48px -28px rgba(0, 0, 0, 0.55),
      0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
    padding: 0;
    max-width: 42rem;
    margin-inline: auto;
    overflow: hidden;
  }

  .partner-panel-mock__chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  }

  .partner-panel-mock__dots {
    display: inline-flex;
    gap: 0.35rem;
  }

  .partner-panel-mock__dots i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c-text-muted) 45%, transparent);
    font-style: normal;
  }

  .partner-panel-mock__dots i:first-child {
    background: #ff6b6b;
  }

  .partner-panel-mock__dots i:nth-child(2) {
    background: #fbbf24;
  }

  .partner-panel-mock__dots i:nth-child(3) {
    background: #34d399;
  }

  .partner-panel-mock__tab {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-brand);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--c-brand-soft);
    border: 1px solid color-mix(in srgb, var(--c-brand) 30%, transparent);
  }

  .partner-panel-mock__link {
    padding: var(--space-5) var(--space-5) var(--space-4);
  }

  .partner-panel-mock__link-label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    margin-bottom: var(--space-2);
  }

  .partner-panel-mock__link code {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-brand-soft) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-brand) 20%, var(--c-border));
    font-size: var(--fs-sm);
    color: var(--c-text);
    word-break: break-all;
  }

  .partner-panel-mock__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding: 0 var(--space-5) var(--space-4);
  }

  .partner-panel-mock__stat {
    text-align: center;
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
    border: 1px solid var(--c-border);
    font-size: var(--fs-sm);
    transition:
      transform var(--dur) var(--ease-out),
      box-shadow var(--dur) var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .partner-panel-mock__stat:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -18px var(--halo-brand, rgba(124, 92, 255, 0.45));
    }
  }

  .partner-panel-mock__stat-icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0 auto var(--space-2);
    color: var(--c-brand);
  }

  .partner-panel-mock__stat-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .partner-panel-mock__stat strong {
    display: block;
    font-size: var(--fs-xl);
    color: var(--c-brand);
    margin-top: var(--space-1);
  }

  .partner-panel-mock__balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0 var(--space-5) var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--c-brand-soft) 80%, transparent),
      color-mix(in srgb, var(--c-brand) 14%, transparent)
    );
    border: 1px solid color-mix(in srgb, var(--c-brand) 35%, transparent);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  .partner-panel-mock__balance strong {
    font-size: var(--fs-2xl);
    color: var(--c-brand);
    font-weight: 800;
  }

  .partner-sticky-cta {
    position: fixed;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .partner-sticky-cta.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .partner-sticky-cta .btn {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    touch-action: manipulation;
  }

  @media (min-width: 640px) {
    .page-partner .page-hero__inner {
      max-width: min(100%, calc(48rem + 20px));
    }

    .partner-quick-math {
      grid-template-columns: repeat(4, 1fr);
      max-width: calc(48rem + 20px);
    }

    .partner-audience {
      grid-template-columns: repeat(2, 1fr);
    }

    .partner-audience__card--wide {
      grid-column: span 1;
    }

    .partner-audience--3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .partner-audience--3 .partner-audience__card--wide {
      grid-column: auto;
    }

    .partner-trust-timeline {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 1023px) {
    .partner-audience[data-partner-audience] {
      display: flex;
      gap: var(--space-4);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      padding-bottom: var(--space-2);
      scrollbar-width: none;
    }

    .partner-audience[data-partner-audience]::-webkit-scrollbar {
      display: none;
    }

    .partner-audience[data-partner-audience] .partner-audience__card {
      flex: 0 0 68%;
      scroll-snap-align: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .partner-calc__bar,
    .partner-sticky-cta,
    .partner-hero__badge-dot {
      transition: none;
      animation: none;
    }
  }
}

@layer mobile {
  .page-partner .partner-calc__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-partner .partner-calc__dist {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- mobile.css --- */
/* =============================================================
   mobile.css — MOBİL'E ÖZEL kompozisyon (en son yüklenir).
   İlke: "Otomatik tek kolona düşme YOK." Yan yana yoğunluk korunur;
   gerektiğinde yatay scroll-snap şeritlerle PC hissi verilir.
   ============================================================= */
@layer mobile {
  /* ================= TABLET (<= 1024px) ================= */
  @media (max-width: 1024px) {
    .site-header {
      padding-right: max(12px, env(safe-area-inset-right));
    }
    .nav__desktop,
    .nav__login,
    .nav__actions .btn--primary,
    .nav__actions [data-lang-switcher],
    .nav__sheet-actions .btn--primary {
      display: none;
    }
    .nav__burger {
      display: inline-flex;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
    }
    .nav-inner {
      min-width: 0;
      gap: var(--space-3);
      padding-inline: var(--space-3);
    }
    .brand {
      min-width: 0;
      flex-shrink: 1;
      max-width: min(180px, 50vw);
    }
    .nav__actions {
      gap: var(--space-2);
      flex-shrink: 0;
    }
    .hero__inner {
      grid-template-columns: 1fr;
      gap: var(--space-10);
    }
    .footer__inner {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
    .bento {
      grid-template-columns: repeat(3, 1fr);
    }
    .bento__item--lg,
    .bento__item--wide {
      grid-column: span 2;
    }
  }

  /* ================= TELEFON (<= 640px) ================= */
  @media (max-width: 640px) {
    :root {
      --header-h: 60px;
    }

    /* Header: masaüstü menü gizli, hamburger görünür */
    .nav__desktop,
    .nav__login {
      display: none;
    }
    .nav__theme-btn {
      width: 1.85rem;
      height: 1.85rem;
    }
    .nav__theme-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Yatay taşma: zoom sonrası sayfa kaymasın */
    .hero,
    .section.how,
    .section.deep,
    .proof,
    .tst {
      overflow-x: clip;
    }

    html.has-cookie-banner body {
      padding-bottom: calc(var(--cookie-banner-h, 7.5rem) + env(safe-area-inset-bottom));
    }

    /* ---- HERO: teklif + ödeme dikey, analytics altta yatay şerit ---- */
    .hero__stage {
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
      overflow: visible;
      padding-bottom: var(--space-4);
      margin-inline: 0;
      padding-inline: 0;
    }
    .hero__stage-stack {
      position: static;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-4);
      width: 100%;
    }
    .hero__stage-stack .mock {
      position: static;
      flex: 0 0 auto;
      animation: none;
    }
    .hero__stage-stack .mock--proposal,
    .hero__stage-stack .mock--pay {
      width: min(78vw, 320px);
      max-width: 320px;
    }
    .hero__stage-scroll {
      position: static;
      align-self: stretch;
      display: flex;
      justify-content: center;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      padding-bottom: var(--space-2);
      -webkit-overflow-scrolling: touch;
    }
    .hero__stage-scroll::-webkit-scrollbar {
      display: none;
    }
    .hero__stage-scroll .mock {
      position: static;
      flex: 0 0 auto;
      scroll-snap-align: center;
      animation: none;
      width: min(64vw, 250px);
      max-width: 250px;
    }

    /* ---- Sosyal kanıt: 4 mini kart YAN YANA (alt alta değil) ---- */
    .proof__stats {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-3);
    }
    .proof__stat {
      padding: var(--space-3) var(--space-2);
      border-radius: var(--radius-md);
      border: 1px solid var(--c-border);
      background: var(--c-surface);
    }
    .proof__stat b {
      font-size: var(--fs-xl);
    }
    .proof__stat small {
      font-size: var(--fs-xs);
    }

    /* ---- Problem: iki kart YAN YANA kalır (kompakt) ---- */
    .compare {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-2);
      width: 100%;
      margin-inline: calc(-1 * var(--space-2));
    }
    .compare__card {
      padding: var(--space-4) var(--space-3);
      min-width: 0;
    }
    .compare__card h3 {
      font-size: var(--fs-base);
    }
    .compare__list li {
      font-size: var(--fs-xs);
      padding-inline-start: var(--space-6);
      line-height: 1.4;
    }
    .compare__list li::before {
      top: 0.1em;
    }
    .compare__list li::before {
      width: 18px;
      height: 18px;
      font-size: 11px;
    }

    /* ---- Bento: 2 kolon kompakt grid ---- */
    .bento {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }
    .bento__item {
      padding: var(--space-4);
    }
    .bento__item--lg,
    .bento__item--wide,
    .bento__item--tall {
      grid-column: auto;
      grid-row: auto;
    }
    .bento__item h3 {
      font-size: var(--fs-base);
    }
    .bento__item p {
      font-size: var(--fs-xs);
    }
    .bento__icon {
      width: 38px;
      height: 38px;
      margin-bottom: var(--space-3);
    }

    /* ---- Derin bloklar: tarayıcı yan yana; ses/ödeme mobilde tek sütun ---- */
    .deep__row,
    .deep__row--rev {
      grid-template-columns: 1.05fr 0.95fr;
      gap: var(--space-5);
      padding-block: var(--space-8);
    }
    .deep__row--rev,
    .deep__row:has(.mock--checkout-rich) {
      grid-template-columns: 1fr;
      gap: var(--space-6);
    }
    .deep__row--rev .deep__copy,
    .deep__row:has(.mock--checkout-rich) .deep__copy {
      order: 0;
    }
    .deep__row--rev .deep__visual,
    .deep__row:has(.mock--checkout-rich) .deep__visual {
      order: 1;
      width: 100%;
      max-width: 100%;
    }
    .deep__copy h3 {
      font-size: var(--fs-lg);
    }
    .deep__copy p {
      font-size: var(--fs-sm);
    }
    .ticks li {
      font-size: var(--fs-sm);
    }
    .mock--browser,
    .mock--audio-card,
    .mock--checkout {
      width: 100%;
    }

    /* Ses kaydı kartı — mobil özel düzen */
    .mock--audio-card {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4);
      overflow: visible;
      min-width: 0;
    }
    .mock--audio-card .mock__audio-badge {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
    }
    .mock--audio-card .mock__audio-meta {
      grid-column: 2;
      grid-row: 1;
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
      text-align: end;
    }
    .mock--audio-card .mock__wave {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100%;
      height: 44px;
      flex: none;
      gap: 3px;
    }
    .mock--audio-card .mock__wave span {
      min-width: 2px;
    }

    /* Güvenli ödeme kartı — dar ve kompakt */
    .mock--checkout-rich {
      min-width: 0;
      max-width: min(100%, 248px);
      margin-inline: auto;
      padding: var(--space-4);
      gap: var(--space-3);
    }
    .mock--checkout-rich .mock__checkout-lines {
      font-size: var(--fs-xs);
    }
    .mock--checkout-rich .mock__checkout-providers {
      flex-wrap: wrap;
      gap: var(--space-1);
      font-size: 0.625rem;
    }
    .mock--checkout-rich .mock__checkout-providers span {
      padding: 0.15rem 0.45rem;
    }
    .mock--checkout-rich .mock__checkout-total {
      font-size: var(--fs-xs);
    }
    .mock--checkout-rich .mock__paybtn {
      height: 40px;
      font-size: var(--fs-xs);
    }

    /* ---- Entegrasyonlar: 2 kolon ---- */
    .integ__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3);
    }
    .integ__tile {
      padding: var(--space-5) var(--space-3);
      font-size: var(--fs-base);
    }

    /* ---- Çoklu dil: metin üstte, rozetler altında yan yana ---- */
    .lang__inner {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
    /* ---- Nasıl çalışır: YATAY snap (3 adım yan yana, kaydırmalı) ---- */
    .how__steps {
      grid-template-columns: none;
      display: flex;
      gap: var(--space-4);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      padding-bottom: var(--space-3);
    }
    .how__steps::-webkit-scrollbar {
      display: none;
    }
    .how__step {
      flex: 0 0 78%;
      scroll-snap-align: center;
    }

    /* ---- Testimonials: YATAY snap şerit ---- */
    .tst__grid {
      grid-template-columns: none;
      display: flex;
      gap: var(--space-4);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      margin-inline: calc(-1 * var(--space-5));
      padding-inline: var(--space-5);
      padding-bottom: var(--space-3);
    }
    .tst__grid::-webkit-scrollbar {
      display: none;
    }
    .tst__card {
      flex: 0 0 84%;
      scroll-snap-align: center;
      padding: var(--space-6);
    }
    .tst__card blockquote {
      font-size: var(--fs-base);
    }

    /* ---- Fiyatlandırma toggle: tam genişlik ---- */
    .pricing__toggle {
      width: 100%;
      max-width: 22rem;
    }

    /* ---- İç sayfa hero ---- */
    .page-hero {
      padding-top: var(--space-10);
    }

    /* ---- Kart gridleri: 2 kolon kompakt (alt alta değil) ---- */
    .card-grid,
    .card-grid--3,
    .card-grid--2 {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }
    .info-card {
      padding: var(--space-4);
    }
    .info-card h3 {
      font-size: var(--fs-base);
    }
    .info-card p {
      font-size: var(--fs-xs);
    }

    /* ---- Özellik blokları: görsel + metin yan yana kompakt ---- */
    .feature-row,
    .feature-row:nth-child(even) {
      grid-template-columns: 1fr;
      gap: var(--space-6);
      padding-block: var(--space-8);
    }
    .feature-row:nth-child(even) .feature-row__media {
      order: 0;
    }
    .feature-row__media {
      min-height: 200px;
    }

    /* ---- Form: 2 sütun (masaüstü ile aynı düzen) ---- */
    .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-3);
    }
    .form-card {
      padding: var(--space-5);
      overflow-x: clip;
    }
    @media (max-width: 360px) {
      .form-grid {
        gap: var(--space-2);
      }
      .form-card {
        padding: var(--space-4);
      }
    }
    .form-grid .field input,
    .form-grid .field select,
    .form-grid .field textarea {
      font-size: 16px;
    }

    /* ---- Prose: içindekiler üstte, metin altında ---- */
    .prose-layout {
      grid-template-columns: 1fr;
      gap: var(--space-8);
    }
    .toc {
      position: static;
    }

    /* ---- Footer: sütunlar 2'li ---- */
    .footer__cols {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
    .footer__bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-2);
    }

    /* Bölüm aralıkları biraz daralsın */
    .section {
      padding-block: var(--space-16);
    }
  }

  /* ================= KÜÇÜK TELEFON (<= 380px) ================= */
  @media (max-width: 380px) {
    .proof__stats {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  /* ============================================================
     aurora cila mobil ezme — perf + sade hareket
     ============================================================ */
  @media (max-width: 960px) {
    :root {
      --blur-glass: 8px;
    }
    .section--aurora::before { opacity: 0.14; filter: blur(50px); }
    .hero__stage .mock { transform: none !important; }
    .deep__visual { position: relative !important; top: auto !important; }
    .scroll-progress { height: 1.5px; }
  }
}