/* ── Fonts ─────────────────────────────────────────────────────────── */
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/landing/fonts/poppins-latin-400.woff2)format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/landing/fonts/poppins-latin-ext-400.woff2)format("woff2");unicode-range:U+0100-024F,U+011E-011F,U+0130-0131,U+015E-015F}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/landing/fonts/poppins-latin-600.woff2)format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/landing/fonts/poppins-latin-ext-600.woff2)format("woff2");unicode-range:U+0100-024F,U+011E-011F,U+0130-0131,U+015E-015F}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/landing/fonts/poppins-latin-800.woff2)format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/landing/fonts/poppins-latin-ext-800.woff2)format("woff2");unicode-range:U+0100-024F,U+011E-011F,U+0130-0131,U+015E-015F}

/* ── Tokens ────────────────────────────────────────────────────────── */
:root{
  --bg:#0d0d0d; --bg2:#161616; --bg3:#1f1f1f;
  --fg:#f5f2ec; --fg-dim:#8a8578;
  --amber:#f9aa02; --amber-soft:rgba(249,170,2,.14);
  --font:Poppins,system-ui,sans-serif;
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--amber);color:#0d0d0d}
em{font-style:normal;color:var(--amber)}
a{color:inherit;text-decoration:none}
section{position:relative;padding:18vh 6vw;max-width:var(--max);margin:0 auto}

/* ── 0 Loader ──────────────────────────────────────────────────────── */
#loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
.loader-tent{width:96px;filter:drop-shadow(0 0 18px var(--amber-soft))}
.loader-tent .draw{stroke-dasharray:200;stroke-dashoffset:200}
body.loaded #loader{display:none}

/* ── Nav ───────────────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
     padding:20px 4vw;mix-blend-mode:normal;background:linear-gradient(#0d0d0dd9,transparent)}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;font-size:14px}
.nav-right{display:flex;align-items:center;gap:18px}
#lang-toggle{background:none;border:1px solid var(--bg3);color:var(--fg-dim);font:600 12px var(--font);
             padding:8px 12px;border-radius:99px;cursor:pointer;letter-spacing:.08em}
#lang-toggle span{color:var(--amber);margin:0 2px}
#lang-toggle .on{color:var(--fg)}

/* ── Buttons (char stagger) ────────────────────────────────────────── */
.char-btn{position:relative;display:inline-block;overflow:hidden;font-weight:600;letter-spacing:.02em}
.cta-amber{background:var(--amber);color:#0d0d0d;padding:16px 34px;border-radius:99px;border:0;cursor:pointer;font-size:15px}
.nav-cta{background:var(--amber);color:#0d0d0d;padding:10px 22px;border-radius:99px;font-size:13px}
.char-btn .ch{display:inline-block;transition:transform .34s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.char-btn .clone{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:inherit}
.char-btn .clone .ch{transform:translateY(110%)}
.char-btn:hover .base .ch{transform:translateY(-110%)}
.char-btn:hover .clone .ch{transform:translateY(0)}

/* ── 1 Hero ────────────────────────────────────────────────────────── */
#hero{min-height:100vh;max-width:none;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 6vw;gap:2vw}
.hero-copy h1{font-size:clamp(44px,6.5vw,96px);font-weight:800;line-height:1.02;letter-spacing:-.02em}
.hero-copy h1 .ch{display:inline-block}
.hero-sub{margin:28px 0 40px;font-size:clamp(15px,1.4vw,19px);color:var(--fg-dim);max-width:44ch;line-height:1.6}
.hero-globe{position:relative;aspect-ratio:1;max-height:82vh;display:grid;place-items:center}
#globe-canvas{width:min(44vw,82vh);height:min(44vw,82vh);cursor:grab;touch-action:pan-y}
#globe-canvas:active{cursor:grabbing}
.globe-fallback{display:none;width:min(40vw,70vh);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#242424 0%,#141414 65%,#0d0d0d 100%);
  box-shadow:inset -30px -20px 80px #000,0 0 120px var(--amber-soft)}
body.no-webgl #globe-canvas{display:none}
body.no-webgl .globe-fallback{display:block}
.scroll-cue{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;
            gap:10px;color:var(--fg-dim);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--amber),transparent);display:block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── 2 Manifesto ───────────────────────────────────────────────────── */
#manifesto{min-height:110vh;display:flex;flex-direction:column;justify-content:center;gap:1.2em}
.mani-line{font-size:clamp(26px,3.6vw,54px);font-weight:600;line-height:1.25;color:var(--bg3)}
.mani-line em{color:var(--bg3)}
.layer-parallax.stars{position:absolute;inset:-20% 0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1px 1px at 12% 20%,#fff5 0,transparent 50%),radial-gradient(1px 1px at 68% 12%,#fff4 0,transparent 50%),
    radial-gradient(1.5px 1.5px at 42% 60%,#fff3 0,transparent 50%),radial-gradient(1px 1px at 84% 44%,#fff5 0,transparent 50%),
    radial-gradient(1px 1px at 26% 82%,#fff4 0,transparent 50%)}

/* ── 3 Showreel ────────────────────────────────────────────────────── */
#showreel{min-height:160vh}
.reel-stage{position:sticky;top:0;height:100vh;display:grid;place-items:center}
.phone{position:relative;width:min(300px,72vw);aspect-ratio:9/19.5;border-radius:40px;border:3px solid #2a2a2a;
       background:#000;overflow:hidden;box-shadow:0 40px 120px #000c,0 0 0 1px #000}
.phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:22px;background:#000;border-radius:12px;z-index:2}
#reel-video{width:100%;height:100%;object-fit:cover}
#reel-toggle{position:absolute;inset:0;margin:auto;width:76px;height:76px;background:#0d0d0dcc;border:0;border-radius:50%;
             cursor:pointer;display:grid;place-items:center;z-index:3}
#reel-ring{position:absolute;inset:0;transform:rotate(-90deg)}
#reel-ring circle{fill:none;stroke-width:3}
.ring-bg{stroke:#ffffff22}
.ring-fg{stroke:var(--amber);stroke-dasharray:132;stroke-dashoffset:132}
#reel-toggle svg.icon-play,#reel-toggle svg.icon-pause{color:var(--fg)}
#reel-toggle .icon-play{margin-left:3px}
#reel-toggle .icon-pause{display:none}
.playing #reel-toggle .icon-play{display:none}
.playing #reel-toggle .icon-pause{display:block}
#reel-mute{position:absolute;right:14px;bottom:14px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;
           background:#0d0d0dcc;color:var(--fg);cursor:pointer;display:grid;place-items:center}
.unmuted #reel-mute .mute-line{display:none}
.float-card{position:absolute;background:var(--bg2);border:1px solid var(--bg3);border-radius:16px;padding:16px 20px;z-index:4;
            display:flex;flex-direction:column;gap:6px;font-size:13px;box-shadow:0 20px 60px #0009}
.float-card b{font-weight:600}
.float-card span{color:var(--fg-dim)}
.float-card span i{font-style:normal}
.fc-a{left:12%;top:24%}
.fc-b{right:10%;bottom:26%;max-width:240px}
.fc-c{left:8%;bottom:20%;max-width:220px}
.fc-c b{color:var(--amber);letter-spacing:.06em}
#showreel h2{text-align:center;font-size:clamp(20px,2.4vw,32px);font-weight:600;color:var(--fg-dim)}

/* ── 4 Features (stacked) ──────────────────────────────────────────── */
#features{min-height:100vh;display:grid;gap:24px;align-content:center}
.feat-card{position:sticky;top:16vh;background:var(--bg2);border:1px solid var(--bg3);border-radius:24px;
           padding:clamp(28px,4vw,56px);min-height:38vh;display:flex;flex-direction:column;justify-content:center;gap:14px}
.feat-card:nth-child(2){top:19vh}.feat-card:nth-child(3){top:22vh}.feat-card:nth-child(4){top:25vh}
.feat-no{font-weight:800;color:var(--amber);letter-spacing:.2em;font-size:13px}
.feat-card h3{font-size:clamp(26px,3.4vw,44px);font-weight:800}
.feat-card p{color:var(--fg-dim);font-size:clamp(15px,1.4vw,18px);max-width:52ch;line-height:1.6}
.soon{background:var(--amber-soft);color:var(--amber);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
      padding:6px 12px;border-radius:99px;vertical-align:middle;margin-left:12px;font-weight:600}

/* ── 5 Stats ───────────────────────────────────────────────────────── */
#stats{display:flex;justify-content:space-around;flex-wrap:wrap;gap:6vw;text-align:center;min-height:60vh;align-items:center}
.stat-num{display:block;font-size:clamp(56px,9vw,128px);font-weight:800;color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat-label{color:var(--fg-dim);font-size:clamp(13px,1.3vw,17px);letter-spacing:.08em}

/* ── 6 Waitlist ────────────────────────────────────────────────────── */
#waitlist{text-align:center;min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px}
#waitlist h2{font-size:clamp(34px,5vw,72px);font-weight:800}
#waitlist>p{color:var(--fg-dim)}
#wl-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:16px}
#wl-email{background:var(--bg2);border:1px solid var(--bg3);color:var(--fg);border-radius:99px;
          padding:16px 26px;font:400 15px var(--font);min-width:min(360px,80vw);outline:none}
#wl-email:focus{border-color:var(--amber)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
#wl-msg{min-height:1.4em;font-size:14px}
#wl-msg.ok{color:var(--amber)}
#wl-msg.err{color:#e05656}
#spark-canvas{position:absolute;bottom:8vh;pointer-events:none;opacity:0}

/* ── 7 Footer ──────────────────────────────────────────────────────── */
.landing-footer{position:relative;overflow:hidden;padding:12vh 6vw 4vh;background:var(--bg2);margin-top:10vh}
.foot-links{display:flex;gap:28px;justify-content:center;color:var(--fg-dim);font-size:14px}
.foot-links a:hover{color:var(--amber)}
.foot-word{font-size:clamp(72px,16vw,260px);font-weight:800;text-align:center;line-height:.9;margin:6vh 0 4vh;
           color:transparent;-webkit-text-stroke:1px #2c2c2c;letter-spacing:.02em;user-select:none}
.foot-line{text-align:center;color:var(--fg-dim);font-size:13px}

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #hero{grid-template-columns:1fr;padding-top:16vh;text-align:center;gap:6vh}
  .hero-copy{display:flex;flex-direction:column;align-items:center}
  #globe-canvas{width:min(84vw,52vh);height:min(84vw,52vh)}
  /* Spec §6: sticky showreel mobilde basit dikey akışa iner */
  #showreel{min-height:auto}
  .reel-stage{position:static;height:auto;padding:8vh 0}
  .fc-a{left:2%;top:4%}.fc-b{right:2%;bottom:2%}.fc-c{display:none}
  #stats{flex-direction:column;gap:8vh}
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #loader{display:none}
  .scroll-cue i{animation:none}
  .mani-line,.mani-line em{color:var(--fg)}
  .mani-line em{color:var(--amber)}
  .char-btn .clone{display:none}
  .char-btn:hover .base .ch{transform:none}   /* clone gizliyken metin kaybolmasın */
}
