/* bi-mind web sunumu: gece mavisi zemin, kehribar vurgu. Harici font/kaynak yok. */
:root{
  --bg0:#06192b; --bg1:#0B3A5C; --ink:#EEF4F9; --mut:#A9BED0; --line:rgba(160,200,230,.22);
  --amber:#F2A900; --amber-d:#b98100; --cy:#7DD3F0; --lav:#C3B5FF; --gr:#6EDBA4; --slate:#9AA9B8;
  --panel:rgba(8,38,62,.72); --r:14px;
  --sans:"Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(120% 90% at 70% 0%,#0d4268 0%,var(--bg1) 28%,var(--bg0) 75%) fixed,var(--bg0);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.45;overflow:hidden;-webkit-text-size-adjust:100%}
.num,.count{font-variant-numeric:tabular-nums lining-nums}
b{font-weight:650}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
[hidden]{display:none!important}

.app{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;z-index:1}
.top{display:flex;align-items:center;gap:18px;padding:12px var(--pad) 8px}
.brand{font-weight:700;letter-spacing:.01em;display:flex;align-items:center;gap:8px;font-size:17px}
.brand-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.steps{flex:1;display:flex;align-items:center;position:relative;height:44px}
.steps::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
.steps .fill{position:absolute;left:12px;top:50%;height:2px;background:var(--amber);transform:translateY(-50%);width:0;transition:width .25s linear}
.step-dot{position:relative;flex:1;height:44px;min-width:0;background:none;border:0;cursor:pointer;display:grid;place-items:center;padding:0}
.step-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:#0b2a44;border:2px solid #4d7899;transition:.2s}
.step-dot.done::after{background:var(--amber);border-color:var(--amber)}
.step-dot.cur::after{width:18px;height:18px;background:var(--bg0);border-color:var(--amber);box-shadow:0 0 0 4px rgba(242,169,0,.25)}
.step-dot:hover::after{border-color:#fff}
.scene-name{font-size:14px;color:var(--mut);min-width:170px;text-align:right}

.stage{position:relative;min-height:0}
.scene{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:6px var(--pad) 10px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s;scrollbar-width:thin}
.scene.active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease}
.wrap{max-width:1320px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.6vh,18px)}

/* reveal: data-at olan öğeler ses ilerledikçe görünür */
[data-at]{transition:opacity .6s ease,transform .6s ease,filter .6s ease}
.js-timeline [data-at]:not(.in){opacity:0;transform:translateY(12px);filter:blur(3px)}
.js-timeline [data-at]:not(.in) a{pointer-events:none}

/* tipografi */
.mega{font-size:clamp(56px,13vw,176px);line-height:.95;margin:0;font-weight:300;letter-spacing:-.045em}
.lede{font-size:clamp(24px,4.4vw,56px);margin:0;font-weight:500;letter-spacing:-.02em;color:var(--amber)}
.title{font-size:clamp(26px,4.2vw,58px);line-height:1.08;margin:0;font-weight:560;letter-spacing:-.025em;max-width:22ch}
.title.sm{font-size:clamp(22px,3.1vw,42px);max-width:30ch}
.sub{font-size:clamp(15px,1.7vw,22px);color:var(--mut);margin:0;max-width:62ch}
.plan,.ask{margin:0;font-size:clamp(16px,1.8vw,24px)}
.ask{color:var(--ink)} .ask b{color:var(--amber)}
.foot{font-size:clamp(12.5px,1.15vw,15px);color:var(--mut);margin:0;max-width:96ch}
.foot.bold{color:#c9d9e6}
.strip{margin:0;padding:8px 14px;border-left:3px solid var(--amber);background:rgba(242,169,0,.08);font-size:clamp(13px,1.25vw,16px);color:#f3e2b4;max-width:96ch}
.note-lead{color:var(--mut);margin-right:6px}

/* kanıt etiketleri */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1;padding:5px 9px;border-radius:99px;border:1px solid currentColor;white-space:nowrap;vertical-align:middle;font-weight:560}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.t-olc{color:var(--cy)} .t-gozl{color:var(--amber)} .t-pilot{color:var(--lav);border-style:dashed} .t-plan{color:var(--slate)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.corp{display:flex;align-items:center;gap:14px;color:var(--mut);font-size:13.5px;flex-wrap:wrap;margin-top:6px}
.corp img{height:34px;width:auto}
.corp.end{margin-top:2px}

/* paneller */
.panel,.res,.col,.step,.sc,.fn,.outs,.why,.rung{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(3px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.panel{padding:clamp(14px,2vw,26px)}
.panel h3{margin:0 0 6px;font-size:clamp(16px,1.6vw,21px);color:var(--amber);font-weight:600}
.panel p{margin:0;font-size:clamp(15px,1.5vw,20px)}
.ask-panel{border-color:var(--amber);box-shadow:0 0 0 1px rgba(242,169,0,.35),0 0 36px rgba(242,169,0,.14)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vw,34px);align-items:start}
.ladder{display:grid;gap:10px}
.rung{padding:12px 16px}
.rung-k{font-size:13px;color:var(--amber);font-weight:600}
.rung p{margin:3px 0 0;font-size:clamp(14px,1.35vw,18px)}
.r2{margin-left:clamp(10px,2.5vw,36px)} .r3{margin-left:clamp(20px,5vw,72px)}
.rung.now{border-color:var(--amber)}
.four{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.four li{padding:10px 14px;border-left:3px solid var(--line)}
.four li.now{border-left-color:var(--amber);background:rgba(242,169,0,.07)}
.four b{display:block;font-size:clamp(15px,1.5vw,19px)}
.four span{font-size:clamp(13px,1.2vw,15px);color:var(--mut)}

/* sonuç kartları */
.dense .title.sm{max-width:40ch}
.cards4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.res{padding:12px 16px 10px;display:flex;flex-direction:column;gap:6px;position:relative}
.res header{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.res h3{margin:0;font-size:clamp(15px,1.45vw,19px);font-weight:600}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.ba small{display:block;font-size:12px;color:var(--mut)}
.ba strong{display:block;font-size:clamp(22px,2.7vw,38px);line-height:1.05;letter-spacing:-.02em;font-weight:560}
.ba strong.t{font-size:clamp(17px,1.8vw,25px)}
.ba .a strong{color:var(--amber)}
.ba em{font-style:normal;font-size:12.5px;color:var(--mut)}
.arrow{width:34px;height:2px;background:var(--amber);position:relative}
.arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:8px solid var(--amber);border-right:0}
.mult{position:absolute;right:14px;top:46px}
.mult strong{font-size:clamp(14px,1.4vw,19px);color:var(--ink);border:1px solid var(--amber);border-radius:8px;padding:2px 8px;background:rgba(242,169,0,.14)}
.limit{margin:0;font-size:clamp(12px,1.1vw,14px);color:#c4d4e2;line-height:1.4}
.usage{margin:0;font-size:clamp(12.5px,1.2vw,15px);color:var(--mut)}
.usage b{color:var(--ink)}

/* dört sütun */
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.col{padding:12px 14px;transition:border-color .4s,box-shadow .4s,opacity .6s,transform .6s,filter .6s}
.js-timeline body:not(.static-mode) .col.in:not(.now){opacity:.55}
.col.now{border-color:var(--amber);box-shadow:0 0 34px rgba(242,169,0,.16)}
.col h3{margin:0;font-size:clamp(22px,2.4vw,32px);color:var(--amber);font-weight:560;letter-spacing:.01em}
.cap{margin:0 0 6px;font-size:13.5px;color:var(--mut)}
.col dl{margin:0}
.col dt{font-size:11.5px;color:var(--mut);margin-top:7px}
.col dd{margin:1px 0 0;font-size:clamp(12.5px,1.15vw,14.5px);line-height:1.38}
.col .tag{margin-top:4px;font-size:11.5px;padding:4px 8px}

/* ürün akışı */
.flow{display:grid;grid-template-columns:repeat(9,auto);align-items:stretch;gap:0;justify-content:stretch}
.flow{grid-template-columns:1fr 24px 1fr 24px 1fr 24px 1.15fr 24px 1fr}
.fn{padding:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fn h3{margin:0;font-size:clamp(15px,1.4vw,19px)}
.fn small{color:var(--mut);font-size:12.5px;margin-top:auto}
.fnum{width:26px;height:26px;border-radius:50%;background:var(--amber);color:#1a1200;font-weight:700;display:grid;place-items:center;font-size:14px}
.quote{margin:0;font-size:clamp(13px,1.2vw,15.5px);font-style:italic;color:#dfeaf3}
.agent{border-color:var(--amber);box-shadow:0 0 30px rgba(242,169,0,.16)}
.agentname{margin:0;font-size:clamp(17px,1.8vw,24px);font-weight:600;color:var(--amber);line-height:1.15}
.src{display:grid;gap:6px}
.src span{border:1px dashed #5d86a6;border-radius:8px;padding:6px 9px;font-size:13.5px}
.src i{font-style:normal;color:var(--amber);font-weight:700;margin-right:4px}
.cite span{border-style:solid;border-color:var(--cy);color:var(--cy)}
.rep{display:grid;gap:5px}
.rep b{font-size:13.5px;margin-bottom:2px}
.rep span{background:rgba(125,211,240,.12);border-left:3px solid var(--cy);padding:4px 8px;font-size:13px;border-radius:3px}
.link{align-self:center;height:2px;background:var(--line);position:relative;overflow:hidden}
.link::after{content:"";position:absolute;inset:0 auto 0 -30%;width:30%;background:var(--amber);opacity:0}
.js-timeline .link.go::after,.link.go::after{opacity:1;animation:pkt 1.6s linear infinite}
@keyframes pkt{to{left:100%}}

/* adımlar */
.timeline{display:grid;grid-template-columns:1fr 72px 1fr 72px 1fr;align-items:stretch}
.step{padding:12px 14px}
.step .dur{font-size:clamp(22px,2.5vw,34px);color:var(--amber);font-weight:560;line-height:1.1}
.step .dur small{font-size:12.5px;color:var(--mut);font-weight:400}
.step h3{margin:2px 0 6px;font-size:clamp(15px,1.4vw,19px)}
.step p{margin:3px 0;font-size:clamp(12.5px,1.15vw,14.5px);color:#d3e1ec}
.step p b{color:var(--amber);margin-right:4px}
.gate{align-self:center;justify-self:center;text-align:center;font-size:11.5px;color:var(--mut);display:grid;gap:3px;place-items:center}
.gate span{width:26px;height:26px;transform:rotate(45deg);border:2px solid var(--amber);background:rgba(242,169,0,.15);font-size:0;display:block}
.gate em{font-style:normal;font-size:11.5px;line-height:1.15}
.gauges-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.gauges-h h3{margin:0;font-size:clamp(15px,1.5vw,20px)}
.gauges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.gauges li{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:clamp(12.5px,1.15vw,14.5px);display:flex;flex-direction:column;gap:3px}
.gauges li span{font-size:12px;color:var(--amber);font-weight:600}
.gauges li.now{border-color:var(--amber)}
.gauges .hl-t,.gauges .hl-l{border-color:rgba(242,169,0,.6)}

/* güvenlik */
.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sc{padding:12px 14px}
.sc h3{margin:0 0 6px;font-size:clamp(18px,1.9vw,25px);display:flex;align-items:center;gap:9px}
.sc h3 i{width:13px;height:13px;border-radius:50%;background:currentColor;display:inline-block}
.s-prod h3{color:var(--gr)} .s-part h3{color:var(--amber)} .s-plan h3{color:var(--slate)}
.s-prod{border-top:3px solid var(--gr)} .s-part{border-top:3px solid var(--amber)} .s-plan{border-top:3px dashed var(--slate)}
.sc ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sc li b{display:block;font-size:clamp(13.5px,1.3vw,16.5px)}
.sc li span{font-size:clamp(12px,1.1vw,14px);color:var(--mut);line-height:1.35;display:block}

/* neden farklı */
.merge{position:relative;border:1px solid transparent;border-radius:20px;padding:14px;transition:border-color .8s,box-shadow .8s,padding .8s,background .8s}
.merge-tag{position:absolute;top:-11px;left:18px;background:var(--bg1);color:var(--amber);font-size:13px;padding:2px 12px;border:1px solid var(--amber);border-radius:99px;opacity:0;transition:opacity .6s}
.eight{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;transition:gap .9s ease}
.eight div{padding:12px 14px;border:1px solid var(--line);background:var(--panel);border-radius:12px;font-size:clamp(13px,1.3vw,17px);min-height:64px;display:flex;align-items:center;transition:border-radius .9s,border-color .9s}
.merge.joined{border-color:var(--amber);box-shadow:0 0 50px rgba(242,169,0,.18);background:rgba(242,169,0,.05)}
.merge.joined .merge-tag{opacity:1}
.merge.joined .eight{gap:3px}
.merge.joined .eight div{border-radius:6px;border-color:rgba(242,169,0,.5)}
.why{padding:12px 16px}
.why h3{margin:0 0 6px;font-size:clamp(15px,1.5vw,20px)}
.why ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 24px}
.why li{font-size:clamp(13px,1.2vw,15.5px);color:#d3e1ec}
.why li b{color:var(--amber);margin-right:6px}
.manifest{margin:0;font-size:clamp(17px,2.2vw,30px);line-height:1.25;font-weight:520;letter-spacing:-.01em;max-width:44ch;border-left:4px solid var(--amber);padding-left:16px}

/* kapanış */
.bigask{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline;border:2px solid var(--amber);border-radius:20px;padding:clamp(14px,2.6vw,32px);background:rgba(242,169,0,.08);box-shadow:0 0 60px rgba(242,169,0,.16)}
.bigask>span{font-size:clamp(18px,2.2vw,30px);color:var(--mut);width:100%}
.bigask strong{font-size:clamp(28px,5vw,70px);font-weight:520;letter-spacing:-.03em;line-height:1}
.bigask em{font-style:normal;color:var(--amber);font-weight:700}
.bigask .plus{color:var(--amber)}
.mini{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.mini li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:clamp(14px,1.4vw,18px)}
.mini .num{color:var(--amber);font-weight:600}
.outs{padding:12px 16px}
.outs h3{margin:0 0 6px;font-size:clamp(15px,1.5vw,20px)}
.outs ol{margin:0;padding-left:22px;display:grid;gap:5px;font-size:clamp(14px,1.3vw,17px)}
.outs ol li::marker{color:var(--amber);font-weight:700}
.outs small{color:var(--mut)}
.cta{display:inline-flex;flex-direction:column;gap:2px;align-self:flex-start;text-decoration:none;color:#1a1200;background:var(--amber);padding:14px 24px;border-radius:14px;min-height:56px;justify-content:center;box-shadow:0 8px 30px rgba(242,169,0,.35);transition:transform .2s,box-shadow .2s}
.cta span{font-size:clamp(13px,1.3vw,16px);font-weight:560}
.cta strong{font-size:clamp(20px,2.4vw,32px);letter-spacing:-.01em}
.cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(242,169,0,.5)}

/* dock */
.dock{padding:4px var(--pad) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(6,25,43,0),rgba(6,25,43,.9) 22%,rgba(6,25,43,.97));position:relative}
.wave-wrap{position:relative;height:50px}
#wave{position:absolute;inset:0;width:100%;height:100%}
.seek{position:absolute;left:0;right:0;bottom:0;width:100%;height:22px;margin:0;opacity:.0001;cursor:pointer}
.seek:focus-visible{opacity:1;background:none}
.caps{min-height:0;padding:4px 0}
.caps.off{display:none}
.cap-now{margin:0;font-size:clamp(15px,1.7vw,23px);line-height:1.3;color:#fff;font-weight:520;max-width:90ch;text-shadow:0 1px 8px #000}
.cap-now.long{font-size:clamp(14px,1.3vw,18px)}
.cap-now mark{background:none;color:var(--amber)}
.cap-next{margin:3px 0 0;font-size:clamp(12.5px,1.15vw,15px);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110ch}
.ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:4px}
.grow{flex:1}
.btn{min-width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(10,45,72,.8);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;font:inherit;font-size:14px;padding:0 12px}
.btn:hover{border-color:#8fb7d4;background:rgba(18,70,108,.9)}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn.play{width:54px;background:var(--amber);color:#1a1200;border-color:var(--amber)}
.btn.play svg{width:24px;height:24px}
.btn.play .i-pause{display:none} .playing .btn.play .i-pause{display:block} .playing .btn.play .i-play{display:none}
.btn.txt{white-space:nowrap}
.btn.txt:not(.on){color:var(--mut);text-decoration:line-through}
.btn.txt.on{border-color:rgba(242,169,0,.6)}
.btn:disabled{opacity:.35;cursor:default}
.time{font-size:13.5px;color:var(--mut);padding:0 6px}
.vol{display:flex;align-items:center;gap:6px;height:44px}
.vol svg{width:20px;height:20px;fill:var(--mut)}
.vol input{width:90px;accent-color:var(--amber);height:44px}

/* giriş ekranı */
.intro{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:radial-gradient(90% 80% at 50% 30%,rgba(11,58,92,.55),rgba(6,25,43,.93));transition:opacity .6s,visibility .6s}
.intro.gone{opacity:0;visibility:hidden}
.intro-in{display:grid;gap:12px;justify-items:center;text-align:center;max-width:640px}
.intro-logo{height:48px;width:auto}
.intro h1{margin:0;font-size:clamp(64px,16vw,150px);line-height:.95;font-weight:300;letter-spacing:-.045em}
.intro-sub{margin:0;font-size:clamp(17px,2.4vw,24px);color:var(--ink)}
.intro-meta{margin:0;color:var(--mut)}
.start{margin-top:8px;min-height:60px;padding:0 40px;border-radius:99px;border:0;background:var(--amber);color:#1a1200;font:inherit;font-size:20px;font-weight:650;cursor:pointer;box-shadow:0 0 0 0 rgba(242,169,0,.5);animation:ring 2.4s infinite}
.start:hover{filter:brightness(1.08)}
@keyframes ring{70%{box-shadow:0 0 0 22px rgba(242,169,0,0)}100%{box-shadow:0 0 0 0 rgba(242,169,0,0)}}
.quiet{min-height:44px;background:none;border:0;color:var(--mut);font:inherit;text-decoration:underline;cursor:pointer;padding:0 14px}
.intro-hint{margin:6px 0 0;font-size:13px;color:var(--mut)}
.intro-err{margin:0;color:#ffb4a8}

/* tablet / mobil */
@media (max-width:1100px){
  .cols4{grid-template-columns:1fr 1fr}
  .gauges{grid-template-columns:repeat(3,1fr)}
  .scene-name{display:none}
}
@media (max-width:820px){
  body{font-size:15px}
  .top{gap:10px;padding-top:8px}
  .brand{display:none}
  .trio,.two,.cards4,.sec3,.why ul,.cols4{grid-template-columns:1fr}
  .eight{grid-template-columns:1fr 1fr;gap:8px}
  .flow{grid-template-columns:1fr}
  .link{width:2px;height:16px;justify-self:center}
  .link::after{inset:-30% 0 auto 0;width:100%;height:30%}
  @keyframes pkt{to{top:100%;left:0}}
  .timeline{grid-template-columns:1fr}
  .gate{padding:6px 0;grid-auto-flow:column;gap:10px}
  .gauges{grid-template-columns:1fr 1fr}
  .mult{position:static;margin-top:-4px}
  .r2,.r3{margin-left:0}
  .ctrl{gap:6px}
  .time{display:none}
  .vol{display:none}
  .btn.txt{padding:0 9px;font-size:13px}
  .scene{padding-bottom:20px}
  .cap-next{display:none}
  .wave-wrap{height:40px}
  .title{max-width:none}
  .wrap{justify-content:flex-start;padding-top:8px}
  .s0{justify-content:center}
}
@media (max-height:700px) and (min-width:821px){
  .wave-wrap{height:36px}.cap-next{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .js-timeline [data-at]:not(.in){filter:none;transform:none}
}