/* Seldos tanıtım sayfası: koyu, sade, kurumsal. Her kaydırmada bir cümle.
   Satır içi stil yok (CSP style-src 'self'). */
/* Quicksand: SIL Open Font License 1.1 (Google Fonts); sitenin kendi sunucusundan sunulur, Google'a istek gitmez. */
@font-face{font-family:"Quicksand";src:url("fonts/Quicksand.ttf") format("truetype");font-weight:300 700;font-style:normal;font-display:swap}
:root{
  --bg:#0b0d12;--sf:#12151c;--sf2:#1a1f2b;--line:#252b39;--tx:#eef0f5;--mut:#a4abbd;
  --acc:#5b8def;--acc-ink:#0b0d12;--ok:#4ade80;--warn:#fbbf24;--no:#f87171;
  --sans:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:500 18.5px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:8px;background:var(--acc);color:var(--acc-ink);padding:8px 14px;z-index:200}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px}
code{font:15px var(--mono);background:var(--sf2);padding:1px 6px;border-radius:4px}

/* ============ üst çubuk ============ */
.top{position:fixed;left:0;right:0;top:0;z-index:60;background:rgba(11,13,18,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.bar{display:flex;align-items:center;gap:24px;height:68px}
.logo{margin-right:auto;display:inline-flex}
.logo img{display:block;height:28px;width:auto}
.top nav{display:flex;align-items:center;gap:22px;font-size:15px}
.top nav a{text-decoration:none;color:var(--mut);transition:color .15s}
.top nav a:hover{color:var(--tx)}
.top nav a.cta{background:var(--acc);color:var(--acc-ink);font-weight:700;padding:8px 18px;border-radius:8px}
.top nav a.cta:hover{filter:brightness(1.1)}
@media (max-width:900px){.top nav a:not(.cta){display:none}}

/* ============ sahne: her kaydırma bir cümle ============ */
.chapter{display:block}
.scene{position:relative;overflow:hidden;padding:calc(68px + clamp(20px,5vh,64px)) 0 clamp(20px,5vh,64px);min-height:100vh;min-height:100svh;display:flex;align-items:center}
.scene>.wrap{width:100%;position:relative;z-index:1}
.scene+.scene::before,.chapter+.chapter>.scene:first-child::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);z-index:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 82% 30%,rgba(91,141,239,.13),transparent 70%)}
.scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.scene-grid.flip .art{order:-1}
@media (max-width:900px){.scene-grid{grid-template-columns:1fr}.scene-grid.flip .art{order:0}.scene{min-height:0}}
.no{font:600 15px var(--sans);color:var(--acc);margin-bottom:18px}
h1,h2{font-weight:700;letter-spacing:-.03em;line-height:1.04;margin-bottom:26px}
h1{font-size:clamp(42px,6.6vw,92px);line-height:1.02}
h2{font-size:clamp(32px,4.6vw,62px)}
mark{background:none;color:var(--acc)}
.txt .body{font-size:clamp(17px,1.5vw,20px);color:var(--mut);max-width:46ch}
.txt .body+.body{margin-top:16px}
.txt .body b{color:var(--tx)}
.txt .note{border-left:3px solid var(--acc);padding-left:16px;color:var(--tx)}
.txt.wide{max-width:820px}
.fine{font-size:14px;line-height:1.6;color:var(--mut);margin-top:12px;max-width:62ch}
.fine a{text-underline-offset:3px}

/* düğmeler */
.links{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.btn,.demo button{font:inherit;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;border-radius:8px;transition:filter .15s,background .15s,border-color .15s}
.btn{background:var(--acc);color:var(--acc-ink);border:0;padding:13px 24px}
.btn:hover{filter:brightness(1.1)}
.btn[disabled]{opacity:.6;cursor:default;filter:none}
.lnk{font-weight:600;color:var(--mut);text-underline-offset:5px}
.lnk:hover{color:var(--tx)}
.demo{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.demo button{padding:9px 16px;font-size:16px;color:var(--tx);background:var(--sf);border:1px solid var(--line)}
.demo button:hover{border-color:var(--acc);background:var(--sf2)}
.demo button.soft{background:transparent;border-style:dashed}

/* ============ çizimler ============ */
.art svg{display:block;width:100%;height:auto;overflow:visible}
.art.plain{display:grid;gap:22px}
.ink{fill:none;stroke:#c3cadb;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ln-w{fill:none;stroke-width:2.4;stroke-linecap:round}
.s-w{stroke:var(--acc-ink)}
.f-a{fill:var(--acc)}.f-b{fill:#2c3b66}.f-w{fill:var(--tx)}.f-p{fill:var(--sf)}.f-p2{fill:var(--sf2)}
.ink.dim{stroke:#4a5368}
.ink.acc,.acc{stroke:var(--acc);stroke-width:3}
.ring{opacity:.3}
.dashed{stroke-dasharray:9 8;fill:none}
.t{font:600 20px var(--sans);fill:var(--tx)}
.t.i{font-style:italic;font-weight:400;fill:var(--mut)}
.t.sm{font-size:15px}
.t.w{fill:var(--acc-ink)}
.t.tc{text-anchor:middle}
.t.tr{text-anchor:end}
.draw{fill:none}
.code{margin:0;background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:20px 22px;font:13.5px/1.8 var(--mono);overflow-x:auto;white-space:pre;color:#cfd5e6}
.code code{background:none;padding:0;font:inherit}
.tk-t{color:#f472b6}.tk-a{color:#7dd3fc}.tk-s{color:#86efac}
.mini{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0;counter-reset:m;font-size:16px;color:var(--mut)}
.mini li{counter-increment:m;display:flex;align-items:center}
.mini li::before{content:counter(m);display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:50%;margin-right:8px;font:600 13px var(--sans)}
.mini li:not(:last-child)::after{content:"→";margin:0 14px;color:var(--acc);font-weight:700}
.mini li:last-child{color:var(--tx)}
.mini li:last-child::before{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}

/* adımlar */
.steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:16px;max-width:46ch}
.steps li{counter-increment:st;position:relative;padding-left:48px;color:var(--mut);font-size:clamp(17px,1.5vw,19px)}
.steps li::before{content:counter(st);position:absolute;left:0;top:1px;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--acc);border-radius:50%;color:var(--acc);font:600 14px var(--sans)}
.steps+.fine{margin-top:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ne durumdayız */
.stage .txt{margin-bottom:44px}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.board{grid-template-columns:1fr}}
.board article{background:var(--sf);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:12px;padding:26px}
.board article:nth-child(1){border-top-color:var(--ok)}.board article:nth-child(2){border-top-color:var(--warn)}.board article:nth-child(3){border-top-color:var(--no)}
.board h3{font:700 20px var(--sans);display:flex;align-items:center;gap:12px;margin-bottom:14px;min-height:30px}
.mk{flex:none;line-height:1;display:grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;border-radius:50%;font:700 14px var(--sans)}
.mk.ok{color:var(--ok)}.mk.wip{color:var(--warn)}.mk.no{color:var(--no)}
.board ul{list-style:none;padding:0}
.board li{padding:10px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--mut)}
.board li:first-child{border-top:0}

/* farkı nedir */
.vs{margin-top:44px;border-top:1px solid var(--line)}
.vs-row{display:grid;grid-template-columns:.7fr 1.2fr 1.5fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.vs-row [role=rowheader]{font-weight:700;font-size:17px}
.vs-row [role=cell]{color:var(--mut);font-size:16.5px;line-height:1.55}
.vs-row .us{color:var(--tx);font-weight:600}
.vs-head{padding:12px 0;font-size:13px;font-weight:650;color:var(--mut)}
.vs-head .us{color:var(--acc)}
@media (max-width:760px){.vs-row{grid-template-columns:1fr;gap:6px}.vs-head{display:none}.vs-row [role=cell]:not(.us)::before{content:"Klasik: ";font-weight:700;color:var(--tx)}.vs-row .us::before{content:"Seldos: ";color:var(--acc)}}

/* ön başvuru */
.apply{background:rgba(18,21,28,.9)}
.form{display:grid;gap:16px}
.form .fld{display:grid;gap:6px;font-size:15px;color:var(--mut)}
.form input[type=email],.form textarea{width:100%;font:17px var(--sans);color:var(--tx);background:var(--bg);border:1px solid var(--line);padding:12px 14px;border-radius:8px}
.form input[type=email]:focus,.form textarea:focus{border-color:var(--acc);outline:none}
.form input::placeholder{color:#6d7488}
.form textarea{resize:vertical;min-height:64px}
.form .fld i{font-style:normal;font-size:13px;color:#7d8499}
.seg{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.seg legend{font-size:15px;color:var(--mut);padding:0;margin-bottom:10px;float:left;width:100%}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:inline-block;border:1px solid var(--line);background:var(--bg);padding:8px 14px;border-radius:8px;font-size:15.5px;line-height:1.3}
.seg input:checked+span{border-color:var(--acc);background:rgba(91,141,239,.14);color:var(--tx);font-weight:650}
.seg input:focus-visible+span{outline:3px solid var(--acc);outline-offset:3px}
.agree{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.55;color:var(--mut)}
.agree input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--acc)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{min-height:1.6em;font-size:16px;color:var(--mut)}
.msg.ok{color:var(--ok)}.msg.err{color:var(--no)}

/* alt bilgi */
.foot{position:relative;z-index:1;background:#07090d;border-top:1px solid var(--line);padding:44px 0 36px}
.foot-grid{display:grid;grid-template-columns:1fr 1.6fr 1.2fr;gap:36px;align-items:start}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr}}
.foot img{display:block;height:28px;width:auto}
.foot .fine{margin-top:8px}

/* belirme (betik .js ekler; betik yoksa veya hareket azaltılmışsa hepsi görünür) */
.js .txt>*,.js .art{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .scene.in .txt>*,.js .scene.in .art{opacity:1;transform:none}
.js .scene.in .txt>:nth-child(2){transition-delay:.07s}.js .scene.in .txt>:nth-child(3){transition-delay:.14s}.js .scene.in .txt>:nth-child(4){transition-delay:.21s}.js .scene.in .txt>:nth-child(5){transition-delay:.28s}.js .scene.in .art{transition-delay:.15s}
.js .draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease-in-out .3s}
.js .scene.in .draw{stroke-dashoffset:0}
.js .pop{opacity:0;transition:opacity .6s ease .9s}
.js .scene.in .pop{opacity:1}
.js .scene.in .ring.pop{opacity:.3}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ============ derinlik: katmanlar, paralaks, tam ekran sahneler ============ */
.space{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.space .l{position:absolute;left:0;right:0;top:0;will-change:transform}
.space .l1{inset:-40px;background-image:radial-gradient(circle,rgba(160,180,255,.1) 1.3px,transparent 1.6px);background-size:46px 46px;translate:calc(var(--mx,0)*-8px) calc(var(--sy,0)*-.05px + var(--my,0)*-6px)}
.space .l2{translate:calc(var(--mx,0)*-22px) calc(var(--sy,0)*-.22px + var(--my,0)*-14px)}
.space .l3{translate:calc(var(--mx,0)*-46px) calc(var(--sy,0)*-.5px + var(--my,0)*-30px)}
.sp{position:absolute;display:block}
.sp.ring{border:1.5px solid rgba(110,150,255,.22);border-radius:50%}
.sp.sq{border:1.5px solid rgba(110,150,255,.18);border-radius:8px}
.sp.dot{border-radius:50%;background:rgba(91,141,239,.55)}
.sp.plus::before,.sp.plus::after{content:"";position:absolute;background:rgba(150,175,255,.4);border-radius:2px}
.sp.plus::before{left:0;right:0;top:calc(50% - 1px);height:2px}
.sp.plus::after{top:0;bottom:0;left:calc(50% - 1px);width:2px}
.bg-num{position:absolute;z-index:0;top:50%;left:-3vw;font:700 clamp(220px,38vw,600px)/1 var(--sans);color:transparent;-webkit-text-stroke:1.5px rgba(91,141,239,.16);pointer-events:none;user-select:none;white-space:nowrap;translate:calc(var(--p,0)*-120px) calc(-50% + var(--p,0)*-220px)}
.bg-num.r{left:auto;right:-3vw}

@media (min-width:901px) and (min-height:600px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y mandatory}
  .scene,.foot{scroll-snap-align:start;scroll-snap-stop:always}
  .txt{translate:0 calc(var(--p,0)*46px);opacity:calc(1 - var(--ap,0)*1.3)}
  .art{translate:0 calc(var(--p,0)*-86px);scale:calc(1 - var(--ap,0)*.12);rotate:calc(var(--p,0)*-2.4deg);opacity:calc(1 - var(--ap,0)*1.1)}
  .art svg,.art .code{transform:perspective(1100px) rotateY(calc(var(--mx,0)*7deg)) rotateX(calc(var(--my,0)*-5deg));transition:transform .25s ease-out}
}
@media (max-width:900px),(max-height:599px),(prefers-reduced-motion:reduce){
  .space,.bg-num{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-snap-type:none}.txt,.art{translate:none;scale:none;rotate:none}}