/* html { scroll-behavior: smooth; } — kaldırıldı: Lenis artık scroll easing'i yönetiyor (script en altta) */

  /* ---- Lenis 1.3.23 (dist/lenis.css, satır içi) ---- */
  html.lenis, html.lenis body { height: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis [data-lenis-prevent],
  .lenis [data-lenis-prevent-wheel],
  .lenis [data-lenis-prevent-touch],
  .lenis [data-lenis-prevent-vertical],
  .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }
  .lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete;
  }
  body {
    font-family: -apple-system, "Inter", "Söhne", "Segoe UI", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--surface-2);
    color: var(--ink);
  }
  .serif { font-family: "Tiempos Headline", "Georgia", "Times New Roman", serif; font-weight: 400; }
  .mono  { font-family: "SF Mono", "JetBrains Mono", Monaco, "Cascadia Code", monospace; }

  /* SF AI brand: monochrome + tek aksan */
  :root {
    /* --- KOYU TEMA (varsayilan) --- */
    --fgRGB: 239,239,235;
    --bgRGB: 10,10,9;
    --accent: #c2410c;
    --surface: #141412;
    --surface-2: #1c1c19;
    --dim: #a3a39c;
    --faint: #6f6f68;
    --accent-light: #fed7aa;
    --ink: #efefeb;   /* on plan (acik) */
    --paper: #0a0a09;  /* zemin (koyu) */
    --muted: #a3a39c;
    --line: rgba(var(--fgRGB),.10);
  }

  /* --- ACIK TEMA --- */
  :root[data-theme="light"] {
    --fgRGB: 12,10,9;
    --bgRGB: 250,250,249;
    --paper: #fafaf9;
    --ink: #0c0a09;
    --surface: #ffffff;
    --surface-2: #f5f5f4;
    --dim: #57534e;
    --faint: #a8a29e;
  }

  /* ============ SEMANTIK RENK SINIFLARI (koyu tema) ============ */
  .text-fg    { color: var(--ink); }
  .text-dim   { color: var(--dim); }
  .text-faint { color: var(--faint); }
  .text-bg    { color: var(--paper); }
  .bg-fg      { background: var(--ink); }
  .bg-surface { background: var(--surface); }

  /* ============ TIPOGRAFI ============ */
  .h-display {
    font-size: clamp(3rem, 9.5vw, 9rem);
    max-width: 17ch;
    line-height: 1.02;
    letter-spacing: -.05em;
    font-weight: 800;
  }
  .h-mega {
    font-size: clamp(3rem, 7vw, 5rem);
    max-width: 12ch;
    line-height: 1.02;
    letter-spacing: -.04em;
    font-weight: 800;
  }
  .h-display .serif, .h-mega .serif { letter-spacing: -.02em; }

  /* PAFF olcusu: hero basligi cok dar bir kolonda, sag taraf sahneye kalir */
  .h-hero { max-width: 12ch; }
  .measure { max-width: 46ch; }

  /* ============ PILL BUTONLAR (katmanli golge) ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 9999px; padding: 12px 28px;
    font-size: 14px; font-weight: 600; letter-spacing: -.01em;
    white-space: nowrap; border: 0; cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn-primary {
    background: var(--ink); color: var(--paper);
    box-shadow:
      0 1px 2px 0 rgba(var(--fgRGB),.10),
      0 4px 4px 0 rgba(var(--fgRGB),.09),
      0 9px 6px 0 rgba(var(--fgRGB),.05),
      0 17px 7px 0 rgba(var(--fgRGB),.01),
      inset 0 2px 8px 0 rgba(255,255,255,.22);
  }
  .btn-primary:hover { background: var(--accent); color: #fff; }
  .btn-secondary {
    background: transparent; color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(var(--fgRGB),.22);
  }
  .btn-secondary:hover { background: rgba(var(--fgRGB),.07); }
  .btn-tertiary {
    background: rgba(var(--fgRGB),.06); color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(var(--fgRGB),.22);
  }

  /* ============ KARTLAR ============ */
  .card       { border-radius: 40px; background: var(--surface); border: 1px solid rgba(var(--fgRGB),.10); }
  .card-dark  { border-radius: 40px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--accent); }
  .card-soft  { border-radius: 28px; background: var(--surface); border: 1px solid rgba(var(--fgRGB),.10); }

  /* ============ SEKTOR MARQUEE (metin) ============ */
  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee-mask { overflow: hidden; width: 100%; }
  .marquee-track {
    display: flex; width: max-content;
    animation: marquee 34s linear infinite;
    will-change: transform;
  }
  @media (max-width: 767px) { .marquee-track { animation-duration: 18s; } }
  .marquee-item {
    display: inline-flex; align-items: center; gap: 26px;
    padding: 0 26px;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    font-weight: 800; letter-spacing: -.025em;
    color: var(--ink); white-space: nowrap;
  }
  .marquee-item::after {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex: none;
  }

  /* ============ SCROLL REVEAL ============ */
  @keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .reveal { opacity: 0; }
  .reveal.in { animation: fadeInUp .8s ease-out forwards; }

  /* ============ SABIT ALT NAV ============ */
  .bottom-nav {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 50;
  }
  .bottom-nav-inner {
    display: flex; align-items: center; gap: 16px;
    background: var(--surface); border: 1px solid rgba(var(--fgRGB),.12); border-radius: 9999px; padding: 8px 8px 8px 24px;
    box-shadow:
      0 1px 2px 0 rgba(var(--fgRGB),.10),
      0 4px 4px 0 rgba(var(--fgRGB),.09),
      0 9px 6px 0 rgba(var(--fgRGB),.05),
      0 0 0 .5px rgba(var(--fgRGB),.06);
  }

  /* ============ OpenAI partner rozeti ============ */
  .oai-badge { position: relative; overflow: hidden; transition: box-shadow .35s ease, transform .35s ease; }
  .oai-badge::after {
    content: ""; position: absolute; top: -20%; left: 0;
    width: 55%; height: 140%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%);
    transform: translateX(-300%) skewX(-18deg);
    animation: oai-sheen 6.5s ease-in-out infinite; pointer-events: none;
  }
  @keyframes oai-sheen {
    0%, 55% { transform: translateX(-300%) skewX(-18deg); }
    80%, 100% { transform: translateX(300%) skewX(-18deg); }
  }
  .oai-badge:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(194,65,12,.14); }
  @media (prefers-reduced-motion: reduce) { .oai-badge::after { animation: none; } }

  /* pulse dots */
  @keyframes pulse-dot {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
  }
  .pulse-1 { animation: pulse-dot 1.4s infinite; }
  .pulse-2 { animation: pulse-dot 1.4s infinite 0.35s; }
  .pulse-3 { animation: pulse-dot 1.4s infinite 0.7s; }
  .pulse-4 { animation: pulse-dot 1.4s infinite 1.05s; }

  @keyframes progress-fill {
    0%   { transform: scaleX(0); }
    50%  { transform: scaleX(1); }
    100% { transform: scaleX(1); }
  }

  /* ============ VAKA DETAY MODALI ============ */
  .case-modal {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: flex-start; justify-content: center;
    padding: 24px 16px;
    background: rgba(6,6,5,.72);
    backdrop-filter: blur(4px);
    overflow-y: auto;
  }
  .case-modal.open { display: flex; }
  .case-modal.open .case-panel { animation: modal-in .28s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  .case-panel {
    background: var(--surface); width: 100%; max-width: 720px; margin: auto;
    border-radius: 32px;
    box-shadow: 0 24px 60px rgba(var(--fgRGB),.22);
    position: relative;
  }
  /* vaka videosu (uretimden tasindi) */
  .case-video-wrap {
    width: 100%; aspect-ratio: 16 / 9; background: #000;
    border-radius: 32px 32px 0 0; overflow: hidden;
  }
  .case-video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }
  @media (max-width: 640px) { .case-video-wrap { border-radius: 22px 22px 0 0; } }

  .case-close {
    position: absolute; top: 20px; right: 20px;
    width: 38px; height: 38px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--fgRGB),.14);
    background: var(--surface); cursor: pointer; font-size: 16px; line-height: 1;
    transition: all .15s;
  }
  .case-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

  /* ---- animasyonlu pipeline ---- */
  .pipeline { font-family: "SF Mono", "JetBrains Mono", Monaco, monospace; font-size: 12px; margin: 4px 0; }
  .pstage {
    border: 1px solid rgba(var(--fgRGB),.10);
    background: var(--surface); border-radius: 16px; padding: 14px 18px;
    display: flex; align-items: flex-start; gap: 12px; position: relative;
    box-shadow: 0 1px 3px rgba(var(--fgRGB),.04);
  }
  .pstage.ai  { border-left: 3px solid var(--accent); }
  .pstage.in  { border-left: 3px solid rgba(var(--fgRGB),.45); }
  .pstage.out { border-left: 3px solid var(--ink); background: var(--surface-2); }
  .pstage .pdot {
    width: 7px; height: 7px; border-radius: 50%;
    margin-top: 4px; flex: none; background: rgba(var(--fgRGB),.25);
  }
  .pstage.ai  .pdot { background: var(--accent); }
  .pstage.out .pdot { background: var(--ink); }
  .pstage .plabel {
    font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 2px;
  }
  .pstage.in  .plabel { color: rgba(var(--fgRGB),.5); }
  .pstage.out .plabel { color: var(--ink); }
  .pstage .ptext { color: var(--ink); line-height: 1.45; }
  .pstage .pbody { flex: 1; }

  .pconn {
    height: 26px; margin-left: 28px; position: relative; width: 1px;
    border-left: 1px dashed rgba(var(--fgRGB),.22);
  }
  .pconn .packet {
    position: absolute; left: -4px; top: 0; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 3px rgba(194,65,12,.15);
    animation: travel-down 3.2s linear infinite;
  }
  @keyframes travel-down {
    0%   { transform: translateY(-3px); opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateY(26px); opacity: 0; }
  }

  /* before/after metrik bari */
  .metric-bar {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface-2); color: var(--ink);
    border-radius: 9999px; padding: 14px 22px;
    font-family: "SF Mono", monospace; font-size: 13px;
  }
  .metric-bar .mfrom { color: var(--faint); text-decoration: line-through; }
  .metric-bar .marrow { color: var(--accent-light); }
  .metric-bar .mto { color: var(--ink); font-weight: 700; }
  .metric-bar .mtrack {
    flex: 1; height: 4px; background: rgba(var(--fgRGB),.14);
    border-radius: 2px; overflow: hidden; position: relative;
  }
  .metric-bar .mtrack::after {
    content: ""; position: absolute; inset: 0;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: progress-fill 3.2s ease-out infinite;
  }

  .outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .outcome-grid > div { background: var(--surface-2); border-radius: 18px; padding: 18px; }
  .outcome-grid .ostat  { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
  .outcome-grid .olabel { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
  @media (max-width: 540px) { .outcome-grid { grid-template-columns: 1fr; } }

  /* hover underline links */
  a.nav-link { position: relative; padding-bottom: 2px; }
  a.nav-link::after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 0; height: 1px; background: currentColor; transition: width .2s;
  }
  a.nav-link:hover::after { width: 100%; }

  /* ============ SOYUT SISTEM GORSELI ============ */
  .sysviz path {
    fill: none;
    stroke: rgba(var(--fgRGB),.22);
    stroke-width: 1.25;
    stroke-dasharray: 4 6;
    animation: viz-flow 3s linear infinite;
  }
  @keyframes viz-flow { to { stroke-dashoffset: -40; } }
  .sysviz .node { fill: var(--surface); stroke: rgba(var(--fgRGB),.14); stroke-width: 1; }
  .sysviz .core { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
  .sysviz .node-g { filter: drop-shadow(0 2px 8px rgba(var(--fgRGB),.06)); }
  .sysviz .bar { fill: rgba(var(--fgRGB),.14); }
  .sysviz .bar-accent { fill: var(--accent); opacity: .8; }
  .sysviz .dot { fill: var(--accent); }
  .sysviz .dot-mute { fill: rgba(var(--fgRGB),.3); }

  /* ============ CANLI URUN KARTLARI ============ */
  .product-card {
    display: flex; flex-direction: column; position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(var(--fgRGB),.13); }
  .product-card:hover .product-name { color: var(--accent); }
  .product-index {
    font-family: "SF Mono", "JetBrains Mono", Monaco, monospace;
    font-size: 11px; letter-spacing: .16em; color: var(--accent); font-weight: 600;
  }
  .product-name {
    font-size: 24px; font-weight: 800; letter-spacing: -.03em;
    margin-top: 14px; transition: color .2s ease;
  }
  .product-arrow {
    position: absolute; top: 30px; right: 30px;
    font-size: 16px; color: rgba(var(--fgRGB),.3);
    transition: transform .2s ease, color .2s ease;
  }
  .product-card:hover .product-arrow { color: var(--accent); transform: translate(3px,-3px); }
  .product-live {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: "SF Mono", "JetBrains Mono", Monaco, monospace;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .product-live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); animation: pulse-dot 1.8s infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .product-card { transition: none; }
    .product-card:hover { transform: none; }
    .product-card:hover .product-arrow { transform: none; }
    .product-live::before { animation: none; }
  }

  /* ============ SABIT UST BAR (okc tarzi: scroll'da beliren perde) ============ */
  .topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px;
  }
  .topbar > * { position: relative; z-index: 1; }
  .topbar::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -44px;
    pointer-events: none; opacity: 0;
    transition: opacity .42s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(to bottom,
      rgba(var(--bgRGB),.97) 0%,
      rgba(var(--bgRGB),.80) 58%,
      rgba(var(--bgRGB),0) 100%);
  }
  .topbar.is-scrolled::before { opacity: 1; }
  .topbar.is-scrolled { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .topbar-cta {
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .topbar.is-scrolled .topbar-cta { opacity: 1; transform: none; pointer-events: auto; }
  #page { padding-top: 72px; }

  /* ============ TEMA ANAHTARI ============ */
  .theme-toggle {
    width: 40px; height: 40px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ink); cursor: pointer;
    border: 1px solid rgba(var(--fgRGB),.20);
    transition: background-color .2s ease, border-color .2s ease;
  }
  .theme-toggle:hover { background: rgba(var(--fgRGB),.08); border-color: rgba(var(--fgRGB),.38); }
  .theme-toggle svg { width: 18px; height: 18px; }
  .theme-toggle .icon-sun  { display: none; }
  .theme-toggle .icon-moon { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
  :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

  /* ============ OZEL IMLEC ETIKETI ============ */
  .cursor-label {
    position: fixed; top: 0; left: 0; z-index: 55;
    pointer-events: none; opacity: 0;
    background: var(--ink); color: var(--paper);
    border-radius: 9999px; padding: 11px 20px;
    font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
    transform: translate3d(-50%, -50%, 0) scale(.75);
    transition: opacity .22s ease, scale .22s cubic-bezier(.2,.8,.2,1);
    scale: .75;
    will-change: transform;
  }
  .cursor-label.is-on { opacity: 1; scale: 1; }
  @media (hover: none), (pointer: coarse) { .cursor-label { display: none; } }
  @media (prefers-reduced-motion: reduce) { .cursor-label { transition: opacity .15s ease; } }
  /* imlec etiketi acikken varsayilan imleci gizle */
  [data-cursor] { cursor: none; }

  .miniviz .mv-t  { font: 13px/1 -apple-system, "Inter", system-ui, sans-serif; fill: var(--ink); }
  .miniviz .mv-s  { font: 11.5px/1 -apple-system, "Inter", system-ui, sans-serif; fill: var(--dim); }
  .miniviz .mv-m  { font: 11px/1 "SF Mono", Monaco, monospace; fill: var(--dim); letter-spacing: .02em; }
  .miniviz .mv-ta { font: 700 13px/1 -apple-system, "Inter", system-ui, sans-serif; fill: var(--accent); }
  .miniviz .mv-ma { font: 11px/1 "SF Mono", Monaco, monospace; fill: var(--accent); }

  /* ============ URUN OZETI (canli sayfalardan) ============ */
  .prod-steps { list-style: none; display: flex; flex-direction: column; }
  .prod-steps li {
    display: flex; gap: 14px; align-items: baseline;
    padding: 11px 0; border-top: 1px solid rgba(var(--fgRGB),.10);
    font-size: 13.5px; line-height: 1.45; color: var(--ink);
  }
  .prod-steps li:last-child { border-bottom: 1px solid rgba(var(--fgRGB),.10); }
  .prod-steps .ps-n {
    font-family: "SF Mono", Monaco, monospace; font-size: 10.5px;
    letter-spacing: .14em; color: var(--accent); flex: none; padding-top: 2px;
  }
  .prod-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .prod-chips span {
    font-family: "SF Mono", Monaco, monospace; font-size: 10.5px;
    letter-spacing: .08em; color: var(--dim);
    border: 1px solid rgba(var(--fgRGB),.16); border-radius: 9999px; padding: 5px 11px;
  }

  /* ============ URUN MINI GORSELLERI ============ */
  .miniviz { width: 100%; height: auto; display: block; }
  .miniviz .mv-box   { fill: var(--surface); stroke: rgba(var(--fgRGB),.12); stroke-width: 1; }
  .miniviz .mv-box-a { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
  .miniviz .mv-fill  { fill: var(--surface-2); stroke: rgba(var(--fgRGB),.10); stroke-width: 1; }
  .miniviz .mv-bar   { fill: rgba(var(--fgRGB),.13); }
  .miniviz .mv-bar-a { fill: var(--accent); opacity: .85; }
  .miniviz .mv-dot   { fill: var(--accent); }
  .miniviz .mv-dim   { fill: rgba(var(--fgRGB),.26); }
  .miniviz .mv-line  { stroke: rgba(var(--fgRGB),.24); stroke-width: 1.25; fill: none; stroke-dasharray: 4 6; }
  .miniviz .mv-num   { font: 600 12px "SF Mono", Monaco, monospace; fill: rgba(var(--fgRGB),.42); }
  .miniviz .mv-num-a { font: 600 12px "SF Mono", Monaco, monospace; fill: var(--accent); }
  .miniviz .mv-label { font: 600 10px "SF Mono", Monaco, monospace; letter-spacing: .14em; fill: rgba(var(--fgRGB),.38); }

  /* ============ ARKA PLAN SAHNESI (WebGL) ============ */
  #scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
    /* Iki katmanli maske:
       1) radyal — metin kolonunun oldugu merkez neredeyse seffaf, kenarlar tam gucte
       2) ust bant — sabit ust barin (logo + CTA) arkasini soldur
       Ikisi kesistirilir. */
  }
  /* tum icerik sahnenin ustunde */
  #page { position: relative; z-index: 1; }

  /* ============ SCROLL ILERLEME CUBUGU ============ */
  .scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: var(--accent);
    z-index: 70; pointer-events: none;
  }

  /* ekran disinda kalan bolumlerde animasyonlari durdur (CPU) */
  .anim-paused,
  .anim-paused *,
  .anim-paused *::before,
  .anim-paused *::after { animation-play-state: paused !important; }
  .anim-paused.reveal, .anim-paused .reveal { animation-play-state: running !important; }

  /* ============ BOLUM BASLIGI (numara + ince cizgi) ============ */
  .sec-head {
    display: flex; align-items: center; gap: 18px;
    font-family: "SF Mono", "JetBrains Mono", Monaco, monospace;
    font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
    padding-top: 26px; border-top: 1px solid rgba(var(--fgRGB),.12);
  }
  .sec-head .sn { color: var(--accent); font-weight: 600; }
  .sec-head .sl { color: var(--dim); }

  /* ============ MASKELI BASLIK REVEAL (yPercent 100 -> 0 esdegeri) ============ */
  .reveal-mask { opacity: 0; }
  .reveal-mask.in {
    animation: maskUp 1.2s cubic-bezier(.19,1,.22,1) forwards;
  }
  @keyframes maskUp {
    0%   { opacity: 1; clip-path: inset(100% 0 0 0); transform: translateY(48px); }
    100% { opacity: 1; clip-path: inset(-8% -8% -8% -8%); transform: translateY(0); }
  }

  /* ============ COZUM SATIRLARI (kutu yok, tam genislik) ============ */
  .sol-row {
    display: grid; grid-template-columns: 64px minmax(0,1fr) auto;
    align-items: baseline; gap: 18px;
    padding: 26px 0; cursor: pointer;
    border-bottom: 1px solid rgba(var(--fgRGB),.12);
    position: relative;
  }
  .sol-row::after {
    content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
    background: var(--accent); transition: width .5s cubic-bezier(.19,1,.22,1);
  }
  .sol-row:hover::after { width: 100%; }
  .sol-num {
    font-family: "SF Mono", Monaco, monospace; font-size: 12px;
    letter-spacing: .14em; color: var(--faint); padding-top: 4px;
  }
  .sol-name {
    font-size: clamp(1.35rem, 3.2vw, 2.4rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    color: var(--ink); transition: transform .45s cubic-bezier(.19,1,.22,1), color .3s;
  }
  .sol-row:hover .sol-name { transform: translateX(14px); color: var(--accent); }
  .sol-teaser {
    grid-column: 2; font-size: 13px; color: var(--dim); max-width: 56ch;
    margin-top: 6px; line-height: 1.55;
  }
  .sol-arrow {
    font-family: "SF Mono", Monaco, monospace; font-size: 14px; color: var(--faint);
    transition: transform .45s cubic-bezier(.19,1,.22,1), color .3s;
  }
  .sol-row:hover .sol-arrow { transform: translateX(8px); color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    .sol-row:hover .sol-name, .sol-row:hover .sol-arrow { transform: none; }
  }

  /* ============ SUREC TIMELINE (kart yok) ============ */
  .tl { position: relative; padding-left: 34px; }
  .tl::before {
    content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px;
    width: 1px; background: rgba(var(--fgRGB),.14);
  }
  .tl-step { position: relative; padding: 30px 0; }
  .tl-step + .tl-step { border-top: 1px solid rgba(var(--fgRGB),.08); }
  .tl-step::before {
    content: ""; position: absolute; left: -31.5px; top: 44px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--accent);
  }
  .tl-num {
    font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800;
    letter-spacing: -.05em; line-height: 1; color: rgba(var(--fgRGB),.16);
  }

  /* ============ EDITORIAL SATIRLAR (Neden SF AI) ============ */
  .ed-row {
    display: grid; gap: 10px 40px; padding: 34px 0;
    border-top: 1px solid rgba(var(--fgRGB),.12);
  }
  @media (min-width: 820px) { .ed-row { grid-template-columns: 110px minmax(0,1.2fr) minmax(0,1fr); } }
  .ed-num {
    font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 800;
    letter-spacing: -.05em; line-height: 1; color: rgba(var(--fgRGB),.16);
  }
  .ed-title {
    font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.12; color: var(--ink);
  }

  /* ============ DEV METRIKLER ============ */
  .metric-huge {
    font-size: clamp(3.2rem, 7.5vw, 6.5rem);
    font-weight: 800; letter-spacing: -.055em; line-height: .95;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .metric-label {
    font-family: "SF Mono", Monaco, monospace; font-size: 11px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
    margin-top: 12px; line-height: 1.6;
  }

  /* ============ ERISILEBILIRLIK ============ */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .marquee-track { animation: none; }
    .reveal, .reveal.in { animation: none; opacity: 1; }
    .reveal-mask, .reveal-mask.in { animation: none; opacity: 1; clip-path: none; transform: none; }
    .btn:hover { transform: none; }
    .pulse-1, .pulse-2, .pulse-3, .pulse-4 { animation: none; opacity: 1; }
    .pstage .pdot { animation: none; }
    .pconn .packet { animation: none; opacity: .9; top: 40%; }
    .metric-bar .mtrack::after { animation: none; width: 100%; }
    .sysviz path { animation: none; }
  }