:root{
  --bg:#e9f2f7;
  --ink:#041c26;
  --ink-2:#2c4855;
  --accent:#065a74;
  --rule:rgba(5,36,48,.16);
  --maxw:1240px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{ background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; cursor:none; }
@media (pointer:coarse){ body{cursor:auto} }
::selection{ background:var(--accent); color:#fff }

/* 3D sahne — tüm sayfanın full-bleed zemini */
#scene{ position:fixed; inset:0; width:100vw; height:100dvh; display:block; z-index:0 }
body.no-webgl #scene{ background:linear-gradient(180deg,#dff0f7 0%,#7fc6d6 58%,#0f6f8c 100%) }

/* okunabilirlik için çok yumuşak, kenarsız ışık perdesi (kart DEĞİL) */
.veil{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(97deg, rgba(233,242,247,.92) 0%, rgba(233,242,247,.62) 30%, rgba(233,242,247,.28) 50%, transparent 65%),
    linear-gradient(180deg, rgba(233,242,247,.38) 0%, transparent 22%, transparent 58%, rgba(233,242,247,.92) 100%) }
.grain{ position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.022; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 6s steps(6) infinite }
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,1%)}100%{transform:translate(0,0)}}

.progress{ position:fixed; top:0; left:0; height:2px; width:0; z-index:50; background:var(--accent) }
.cursor{ position:fixed; top:0; left:0; z-index:60; pointer-events:none; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:1px solid rgba(11,110,138,.6); transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s var(--ease) }
.cursor.hot{ width:60px; height:60px; margin:-30px 0 0 -30px; background:rgba(11,110,138,.1) }
@media (pointer:coarse){ .cursor{display:none} }

/* gösterge paneli — sağ alt, oyun HUD'u: koyu cam zemin + aydınlık enstrümanlar */
.instruments{ position:fixed; right:clamp(20px,3vw,48px); bottom:clamp(24px,5vh,52px); z-index:30; width:216px; pointer-events:none; text-align:center;
  padding:16px 18px 14px; border-radius:18px;
  background:linear-gradient(165deg, rgba(7,30,43,.82), rgba(4,20,30,.9));
  border:1px solid rgba(233,242,247,.16);
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 14px 38px rgba(3,18,28,.4), inset 0 1px 0 rgba(233,242,247,.1) }
.instruments svg{ width:104px; height:104px; display:block; margin:0 auto; overflow:visible }
.c-ring{ fill:rgba(10,36,52,.92); stroke:rgba(233,242,247,.3); stroke-width:1.2 }
.c-tik{ stroke:#eaf6fb; stroke-width:1.6 }
.c-min{ stroke:#9fc3d4; stroke-width:1; opacity:.6 }
.c-card{ font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:500; fill:#eaf6fb; text-anchor:middle }
.c-lubber{ fill:#ff5a4e }
.c-hub{ fill:#6fd3ef }
.speedo{ margin-top:12px; font-family:"JetBrains Mono",monospace; color:#fff; line-height:1;
  font-size:31px; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:0;
  text-shadow:0 0 18px rgba(111,211,239,.45) }
.speedo small{ font-size:11px; color:#9fc3d4; margin-left:5px; letter-spacing:.14em }
.spd-bar{ margin:9px 4px 0; height:4px; border-radius:2px; background:rgba(233,242,247,.14); overflow:hidden }
.spd-bar i{ display:block; height:100%; width:0; border-radius:2px;
  background:linear-gradient(90deg,#6fd3ef 0%, #8fe3c0 55%, #ffb36b 85%, #ff8a5c 100%);
  transition:width .25s linear }
.gauges{ margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px 10px }
.g{ display:flex; flex-direction:column; gap:3px }
.g-l{ font-family:"JetBrains Mono",monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:#9fc3d4 }
.g-v{ font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:500; color:#eaf6fb; font-variant-numeric:tabular-nums; white-space:nowrap }
.helm-hint{ margin-top:12px; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#9fc3d4;
  display:flex; justify-content:center; gap:12px; white-space:nowrap }
.helm-hint b{ display:inline-block; color:#aee7f7; font-weight:500; border:1px solid rgba(111,211,239,.45); border-radius:3px; padding:0 3.5px; margin:0 1px; line-height:1.5;
  background:rgba(111,211,239,.08) }

/* ilk ziyaret ipucu — WASD/dokunuşla dümenin sende olduğunu öğret */
.helm-onboard{ position:fixed; top:clamp(84px,11vh,124px); left:50%; transform:translateX(-50%); z-index:35; pointer-events:none;
  display:flex; align-items:center; gap:12px; white-space:nowrap; opacity:0;
  background:linear-gradient(165deg, rgba(7,30,43,.82), rgba(4,20,30,.9));
  border:1px solid rgba(233,242,247,.18); border-radius:999px; padding:10px 22px 10px 16px;
  box-shadow:0 14px 34px rgba(3,18,28,.35);
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.03em; color:#eaf6fb;
  animation:hoIn 3.2s var(--ease) 1.8s 3 both }
.helm-onboard p{ margin:0 } .helm-onboard b{ color:#aee7f7 }
.helm-onboard .ho-coarse{ display:none }
@media (pointer:coarse){ .helm-onboard .ho-keys, .helm-onboard .ho-fine{ display:none } .helm-onboard .ho-coarse{ display:block } }
.ho-keys{ display:flex; gap:4px }
.ho-keys b{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:5px;
  border:1px solid rgba(111,211,239,.5); background:rgba(111,211,239,.12); color:#aee7f7; font-weight:500 }
@keyframes hoIn{
  0%{ opacity:0; transform:translateX(-50%) translateY(14px) }
  30%{ opacity:1; transform:translateX(-50%) translateY(0) }
  70%{ opacity:1; transform:translateX(-50%) translateY(0) }
  85%{ transform:translateX(-50%) translateY(-4px) }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) }
}
body.helm-seen .helm-onboard, body.helm .helm-onboard{ animation:none; opacity:0; pointer-events:none; transition:opacity .4s var(--ease) }

/* kaptan modu: sayfaya dönmek için kaydırman gerektiğini büyük ve net göster */
.helm-banner{ position:fixed; top:clamp(84px,11vh,124px); left:50%; transform:translateX(-50%); z-index:35; pointer-events:none;
  display:flex; align-items:center; gap:10px; white-space:nowrap; opacity:0; transition:opacity .5s var(--ease) .3s;
  background:linear-gradient(165deg, rgba(41,20,10,.82), rgba(30,14,6,.9));
  border:1px solid rgba(255,201,163,.35); border-radius:999px; padding:10px 22px;
  font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#ffc9a3 }
.helm-banner .arrow{ display:inline-block; animation:hoBob 1.3s ease-in-out infinite }
@keyframes hoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
body.helm .helm-banner{ opacity:1 }

/* dokunmatik dümen — yalnızca dokunmatik cihazlarda */
.touch-helm{ display:none; position:fixed; left:0; right:0; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:31;
  justify-content:space-between; padding:0 16px; pointer-events:none }
.th-group{ display:flex; gap:12px; pointer-events:auto }
.th-throttle{ flex-direction:column }
.th-btn{ width:58px; height:58px; border-radius:50%; border:1px solid rgba(233,242,247,.22); color:#eaf6fb;
  background:linear-gradient(165deg, rgba(7,30,43,.78), rgba(4,20,30,.88)); font-size:19px; line-height:1;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); touch-action:none; user-select:none; -webkit-user-select:none;
  box-shadow:0 8px 22px rgba(3,18,28,.35); cursor:pointer }
.th-btn:active{ background:rgba(111,211,239,.28); border-color:rgba(111,211,239,.6) }
@media (pointer:coarse){ .touch-helm{ display:flex } .scrollhint{ display:none } }

/* mobil: kompakt HUD alt-ortada (pusula + sürat), dokunmatik butonlara yer aç */
@media (max-width:820px){
  /* NOT: transform kullanma — .rise animasyonunun forwards dolgusu transform'u ezer */
  .instruments{ left:50%; right:auto; width:176px; margin-left:-88px;
    bottom:calc(168px + env(safe-area-inset-bottom));
    display:flex; align-items:center; justify-content:center; gap:12px; padding:9px 14px; border-radius:14px }
  .instruments svg{ width:50px; height:50px; margin:0 }
  .speedo{ margin-top:0; font-size:22px }
  .spd-bar, .gauges, .helm-hint{ display:none }
  body.helm .helm-exit{ display:none }
}

/* kaptan modu: WASD'ye dokununca sayfa kenara çekilir, scroll geri getirir */
.wrap, .veil, header.nav, .grain{ transition:opacity .9s var(--ease) }
body.helm .wrap, body.helm .veil, body.helm header.nav{ opacity:.1 }
body.helm .helm-exit{ display:flex }
/* mobil kompakt HUD'da exit yazısına yer yok (bu kural sondaki flex'i ezmek için burada) */
@media (max-width:820px){ body.helm .helm-exit{ display:none } }

.wrap{ position:relative; z-index:5; max-width:var(--maxw); margin:0 auto; padding:0 clamp(22px,6vw,72px) }
a{ color:inherit; text-decoration:none }

/* NAV — minimal */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; padding:clamp(20px,3vw,30px) clamp(22px,6vw,72px);
  mix-blend-mode:normal }
.brand{ font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.28em; text-transform:uppercase; display:flex; align-items:center; gap:11px }
.brand .anchor{ width:18px; height:18px; color:var(--accent) }
.nav-cta{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease),color .3s var(--ease) }
.nav-cta:hover{ gap:14px; color:var(--accent) }

section{ position:relative; z-index:5 }
.eyebrow{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.4em; text-transform:uppercase; color:var(--accent) }

/* HERO */
.hero{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; padding:18vh 0 12vh; max-width:min(680px,68%) }
@media (max-width:860px){ .hero{ max-width:100% } }
.hero .eyebrow{ margin-bottom:30px }
h1{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(3.4rem,10.5vw,9.4rem); line-height:.9; letter-spacing:0; color:var(--ink);
  text-shadow:0 1px 2px rgba(233,242,247,.5), 0 2px 22px rgba(233,242,247,.85), 0 8px 60px rgba(233,242,247,.9) }
h1 em{ font-style:normal; font-weight:500; color:var(--accent) }
.lede{ margin-top:clamp(26px,3.5vw,40px); max-width:44ch; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; color:var(--ink-2);
  text-shadow:0 1px 24px rgba(233,242,247,.7) }

/* minimal underline form */
form.join{ margin-top:clamp(34px,5vw,54px); display:flex; align-items:center; gap:14px; max-width:560px;
  border-bottom:1.5px solid var(--ink); padding-bottom:6px; transition:border-color .3s var(--ease) }
form.join:focus-within{ border-color:var(--accent) }
.field{ flex:1; min-width:0 }
.field input{ width:100%; height:46px; background:none; border:none; outline:none; color:var(--ink); font-family:inherit; font-size:clamp(1rem,1.4vw,1.15rem) }
.field input::placeholder{ color:#5f7d8b }
button.cta{ flex:none; background:none; border:none; cursor:none; font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500; display:inline-flex; align-items:center; gap:9px; padding:10px 4px; transition:gap .3s var(--ease) }
@media (pointer:coarse){ button.cta{cursor:pointer} }
button.cta:hover{ gap:15px }
button.cta[disabled]{ opacity:.5 }
.note{ margin-top:18px; font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:9px }
.msg{ margin-top:14px; font-size:14px; min-height:20px; font-weight:500 }
.msg.ok{ color:var(--accent) } .msg.err{ color:#c0392b }

.scrollhint{ position:absolute; left:0; bottom:34px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; gap:14px }
.scrollhint .bar{ display:block; width:1px; height:40px; background:linear-gradient(var(--accent),transparent); animation:drop 2.2s var(--ease) infinite }
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* editorial bölüm düzeni */
.zone{ padding:clamp(110px,19vh,220px) 0; position:relative }
.sec-head{ position:relative; margin-bottom:clamp(50px,7vw,90px); max-width:620px }
.ghost{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(6rem,17vw,15rem); line-height:.7; color:var(--accent); opacity:.10;
  position:absolute; top:-.42em; left:-.06em; z-index:-1; pointer-events:none; user-select:none }
.label{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:26px }
h2{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(2.4rem,6.4vw,5.3rem); line-height:.98; letter-spacing:0; color:var(--ink);
  text-shadow:0 1px 2px rgba(233,242,247,.5), 0 2px 20px rgba(233,242,247,.8), 0 8px 52px rgba(233,242,247,.85) }
h2 em{ font-style:normal; font-weight:500; color:var(--accent) }
.body-lg{ margin-top:clamp(24px,3vw,34px); max-width:46ch; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.62; color:var(--ink-2);
  text-shadow:0 1px 14px rgba(233,242,247,.75) }
.acronym{ margin-top:34px; max-width:52ch; font-family:"JetBrains Mono",monospace; font-size:12.5px; letter-spacing:.14em; color:var(--ink-2) }
.acronym b{ color:var(--accent); font-weight:500 }

/* istatistik satırı — kutu YOK */
.stats{ display:flex; flex-wrap:wrap; gap:clamp(36px,6vw,80px); margin-top:clamp(56px,8vh,100px); padding-top:40px; border-top:1px solid var(--rule) }
.stat{ display:flex; flex-direction:column; gap:10px }
.stat .count{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(2.8rem,6vw,4.6rem); color:var(--ink); line-height:.9; font-variant-numeric:tabular-nums }
.stat-l{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); max-width:22ch }

/* avantajlar — editorial liste, kart yok */
.adv{ border-top:1px solid var(--ink) }
.adv-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,60px); align-items:baseline;
  padding:clamp(30px,4vw,48px) 0; border-bottom:1px solid var(--rule); transition:padding-left .5s var(--ease) }
.adv-row:hover{ padding-left:18px }
.adv-row .idx{ font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--accent); letter-spacing:.1em; padding-top:.6em }
.adv-t{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.02; color:var(--ink); letter-spacing:0;
  text-shadow:0 1px 2px rgba(233,242,247,.5), 0 2px 18px rgba(233,242,247,.8) }
.adv-d{ margin-top:14px; max-width:46ch; font-size:clamp(.98rem,1.3vw,1.12rem); line-height:1.55; color:var(--ink-2);
  text-shadow:0 1px 14px rgba(233,242,247,.75) }
.adv-p{ margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent) }
.adv-row .arw{ opacity:0; transform:translateX(-10px); transition:opacity .5s var(--ease),transform .5s var(--ease); color:var(--accent) }
.adv-row:hover .arw{ opacity:1; transform:none }

/* nasıl üye olunur — adımlar */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,54px); margin-top:20px; border-top:1px solid var(--ink); padding-top:clamp(34px,4vw,50px) }
@media (max-width:760px){ .steps{ grid-template-columns:1fr; gap:34px } }
.step .num{ font-family:"Cormorant Garamond",serif; font-size:clamp(2.4rem,4vw,3.4rem); font-weight:400; color:var(--accent); line-height:1 }
.step h3{ font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.58rem; margin:16px 0 10px; color:var(--ink) }
.step p{ font-size:1rem; line-height:1.55; color:var(--ink-2); max-width:34ch }

.fees{ display:flex; flex-wrap:wrap; gap:clamp(40px,7vw,90px); margin-top:clamp(56px,8vh,90px); padding-top:40px; border-top:1px solid var(--rule) }
.fee .lbl{ font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); max-width:16ch }
.fee .val{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:clamp(3rem,6.5vw,5rem); color:var(--ink); line-height:.95; margin-top:12px; font-variant-numeric:tabular-nums }
.fee .val small{ font-size:.28em; color:var(--ink-2); font-family:"Inter"; letter-spacing:.05em; margin-left:.2em }

/* FINAL */
.final{ min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:14vh 0; max-width:min(680px,100%) }
.final h2{ font-size:clamp(2.8rem,7vw,5.8rem) }

.foot{ position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:40px 0 clamp(30px,5vw,50px); border-top:1px solid var(--rule);
  font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
.foot a{ transition:color .25s var(--ease) } .foot a:hover{ color:var(--accent) }

/* reveal / geçişler */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal h2, .reveal h1{ clip-path:inset(0 105% 0 0); transition:clip-path 1.15s var(--ease) .05s }
.reveal.in h2, .reveal.in h1{ clip-path:inset(0 0 0 0) }
.reveal.in .stagger>*{ animation:rise 1s var(--ease) both }
.stagger>*:nth-child(1){animation-delay:.06s}.stagger>*:nth-child(2){animation-delay:.14s}.stagger>*:nth-child(3){animation-delay:.22s}
.stagger>*:nth-child(4){animation-delay:.30s}.stagger>*:nth-child(5){animation-delay:.38s}.stagger>*:nth-child(6){animation-delay:.46s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{ opacity:0; transform:translateY(24px); animation:rise 1.1s var(--ease) forwards }
.d1{animation-delay:.12s}.d2{animation-delay:.28s}.d3{animation-delay:.44s}.d4{animation-delay:.6s}.d5{animation-delay:.76s}.d6{animation-delay:.92s}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}
  .rise,.reveal{animation:none;opacity:1;transform:none;transition:none}
  .reveal h1,.reveal h2{clip-path:none} .grain,.scrollhint .bar{animation:none} }
@media (max-width:560px){ body{cursor:auto} .cursor{display:none} }
@media (max-width:820px){
  .veil{ background:
    linear-gradient(180deg, rgba(233,242,247,.6) 0%, rgba(233,242,247,.34) 42%, rgba(233,242,247,.16) 62%, rgba(233,242,247,.92) 100%) }
}