*{box-sizing:border-box}html,body{margin:0;min-height:100%}
:root{--acc:#ff9c00;--acc2:#ffc400;--hot:#ff4d1a;--line:rgba(255,255,255,.12);--glass:rgba(12,13,16,.74);--muted:#a9a9ad;--cut:12px}
body{min-height:100vh;display:flex;flex-direction:column;color:#ececec;font:15px/1.5 "Segoe UI",Tahoma,Arial,sans-serif;overflow-x:hidden;
 background:radial-gradient(ellipse at 70% 40%,transparent 0,rgba(6,6,8,.55) 60%,rgba(6,6,8,.92) 100%),linear-gradient(90deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,.45) 50%,rgba(6,6,8,.55) 100%),#0b0c0e url(/site-arka.webp) center/cover no-repeat fixed}
a{color:inherit}
/* ---- yükleme ekranı ---- */
.loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#1a1410 0,#060607 70%);opacity:0;
 animation:ldIn .2s .12s forwards,ldAuto .5s 6s forwards}
.loader::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
 linear-gradient(rgba(255,156,0,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(255,156,0,.05) 1px,transparent 1px) 0 0/48px 48px}
.loader.out{animation:ldOut .6s forwards}
.ld-box{position:relative;width:min(560px,86vw);text-align:center}
/* Yükleme ekranı logosu = başlatıcı simgesi (21 Ekim 2026, kullanıcı isteği; 256 px kaynak, 120 px gösterim). */
.ld-logo{display:inline-block;line-height:0;border:2px solid var(--acc);border-radius:10px;overflow:hidden;
 box-shadow:0 0 30px rgba(255,120,0,.35),0 0 60px rgba(255,90,30,.15);animation:flick 2.4s infinite}
.ld-logo img{display:block;width:120px;height:120px}
.ld-track{position:relative;height:140px;margin-top:10px;overflow:hidden;border-bottom:1px solid rgba(255,156,0,.35)}
.ld-runner{position:absolute;bottom:0;left:0;animation:across 3.4s linear infinite;mix-blend-mode:screen}
.ld-bar{height:6px;margin-top:14px;background:rgba(255,255,255,.08);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.ld-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc),var(--hot));box-shadow:0 0 12px var(--acc);animation:fill 2.8s cubic-bezier(.3,.6,.4,1) forwards}
.ld-txt{margin:12px 0 0;font:700 14px/1 Consolas,"Courier New",monospace;letter-spacing:6px;color:var(--acc2)}.ld-txt span{animation:blink .7s steps(1) infinite}
/* ---- sprite animasyonları ---- */
.spr{display:block;width:128px;height:128px;background:url(/site-kosan.png) 0 0 no-repeat;image-rendering:auto}
/* DASH kareleri siyah zeminli (oyunda additive karışım): sitede de screen karışımı, siyah zemin görünmez. */
.spr.dash{animation:dash 1.7s steps(49) infinite}
.spr.qdash{background-image:url(/site-karantina.png);animation:qdash 1.5s steps(31) infinite;filter:drop-shadow(0 0 8px rgba(120,170,60,.45))}
/* ---- arka plan efektleri ---- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);animation:flick 6s infinite}
.embers i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px 2px rgba(255,120,0,.7);opacity:0;animation:ember 9s linear infinite}
.embers i:nth-child(1){left:6%;animation-delay:0s}.embers i:nth-child(2){left:14%;animation-delay:2.1s;animation-duration:11s}.embers i:nth-child(3){left:22%;animation-delay:4.3s}
.embers i:nth-child(4){left:31%;animation-delay:1.2s;animation-duration:12s}.embers i:nth-child(5){left:39%;animation-delay:6.2s}.embers i:nth-child(6){left:47%;animation-delay:3.4s;animation-duration:10s}
.embers i:nth-child(7){left:55%;animation-delay:7.5s}.embers i:nth-child(8){left:63%;animation-delay:.6s;animation-duration:13s}.embers i:nth-child(9){left:70%;animation-delay:5.1s}
.embers i:nth-child(10){left:77%;animation-delay:2.8s;animation-duration:11s}.embers i:nth-child(11){left:84%;animation-delay:8.3s}.embers i:nth-child(12){left:90%;animation-delay:4.9s;animation-duration:12s}
.embers i:nth-child(13){left:95%;animation-delay:1.7s}.embers i:nth-child(14){left:50%;animation-delay:9.4s;animation-duration:14s}
.lane{position:fixed;left:0;right:0;bottom:6px;height:232px;pointer-events:none;z-index:1;overflow:hidden;opacity:.55}
.lane .zw{position:absolute;bottom:0;left:0;animation:lane 34s linear infinite}
.p-davet .lane{opacity:.8}.p-davet .lane .zw{animation-duration:26s}
.lane .spr.jump{animation:qdash 1.5s steps(31) infinite,jump .7s cubic-bezier(.3,0,.3,1)}
/* ---- üst çubuk ---- */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:12px clamp(16px,4vw,48px);background:linear-gradient(180deg,rgba(8,8,10,.85),rgba(8,8,10,.55));border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.6;animation:sweep 5s linear infinite;background-size:40% 100%;background-repeat:no-repeat}
/* Sol üst: başlatıcı simgesi (21 Ekim 2026, kullanıcı: "CA yazısını başlatıcıda kullandığımız ikon ile değiştirelim"). */
.brand{position:relative;display:block;flex:none;line-height:0;text-decoration:none;border:1px solid rgba(255,156,0,.45);border-radius:6px;overflow:hidden;
 box-shadow:0 0 14px rgba(255,120,0,.18);transition:box-shadow .2s,border-color .2s,transform .2s}
.brand img{display:block;width:48px;height:48px}
.brand:hover{border-color:var(--acc);box-shadow:0 0 18px rgba(255,140,0,.55);transform:translateY(-1px)}
.pages{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* Üst menüde çıkış (giriş yapılınca) ve profil kutusu (21 Ekim 2026). */
.pages .out{display:inline-block;width:auto;flex:none;margin:0;margin-inline-start:6px;padding:7px 14px;font:700 13px "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;
 clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:rgba(255,77,26,.14);color:#ffb39c;border:0;box-shadow:none;transition:background .15s,color .15s}
.pages .out:hover{background:var(--hot);color:#fff}
.prof{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:14px 0 6px;padding:14px 16px;background:rgba(255,255,255,.04);border-inline-start:3px solid var(--acc)}
.prof dt{color:var(--muted);font-size:13px;letter-spacing:.6px;text-transform:uppercase}.prof dd{margin:0;font-weight:700;overflow-wrap:anywhere}
button.code-send{margin:4px 0 6px;padding:10px;font-size:13px}
.sub{margin:22px 0 8px;font:900 18px/1.1 Impact,"Arial Black",sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--acc2)}
.pages a{position:relative;text-decoration:none;color:#d0d0d4;padding:7px 16px;font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
 clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:rgba(255,255,255,.04);transition:background .15s,color .15s}
.pages a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.pages a:hover{color:#fff;background:rgba(255,255,255,.09)}.pages a:hover::after{transform:scaleX(1)}
.pages a.on{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#111}.pages a.on::after{display:none}
.langs{display:flex;gap:2px;margin-inline-start:auto;padding:3px;border:1px solid var(--line);background:rgba(0,0,0,.35);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.langs a{text-decoration:none;color:var(--muted);font-size:12px;font-weight:700;padding:4px 9px}
.langs a:hover{color:#fff}.langs a.on{background:#fff;color:#111}
/* ---- düzen ---- */
main{position:relative;z-index:2;flex:1;width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(24px,5vw,56px) clamp(16px,4vw,48px) 150px}
.hero{max-width:540px}
.tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:5px 14px;border:1px solid rgba(255,156,0,.5);color:var(--acc2);font:700 12px/1 Consolas,"Courier New",monospace;letter-spacing:3px;background:rgba(255,156,0,.08);
 clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.tag i{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 8px var(--hot);animation:blink 1.2s steps(1) infinite}
.hero h2{margin:0 0 12px;font:900 clamp(40px,6vw,72px)/1 Impact,"Arial Black","Segoe UI",sans-serif;letter-spacing:1px;text-transform:uppercase;
 background:linear-gradient(180deg,#fff 30%,#ffd08a 70%,var(--acc) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(0,0,0,.8))}
.hero p{margin:0 0 22px;color:#d4d4d8;font-size:17px;max-width:460px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(10,10,12,.6);border:1px solid var(--line);border-inline-start:3px solid var(--acc);
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:transform .2s,background .2s}
.steps li:hover{transform:translateX(6px);background:rgba(255,156,0,.08)}[dir=rtl] .steps li:hover{transform:translateX(-6px)}
.steps b{flex:none;font:800 18px/1 Consolas,"Courier New",monospace;color:var(--acc2);letter-spacing:1px;text-shadow:0 0 8px rgba(255,180,0,.5)}
/* ---- kart (HUD) ---- */
.card{position:relative;width:430px;max-width:100%;background:var(--glass);border:1px solid var(--line);padding:30px 30px 24px;box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);
 clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--acc2),var(--acc),var(--hot));box-shadow:0 0 14px var(--acc)}
.card.wide{width:580px}
.hud{position:absolute;width:16px;height:16px;border:2px solid var(--acc);opacity:.85;pointer-events:none}
.hud.tl{top:10px;left:10px;border-right:0;border-bottom:0}.hud.tr{top:10px;right:10px;border-left:0;border-bottom:0}
.hud.bl{bottom:10px;left:10px;border-right:0;border-top:0}.hud.br{bottom:10px;right:10px;border-left:0;border-top:0}
h1{margin:0 0 4px;font:900 28px/1.1 Impact,"Arial Black","Segoe UI",sans-serif;letter-spacing:1px;text-transform:uppercase}.lead{margin:0 0 6px;color:var(--muted)}
.lock{width:54px;height:54px;margin:0 0 12px;display:grid;place-items:center;border:2px solid var(--acc);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
 background:rgba(255,156,0,.08);animation:pulse 2.2s infinite}
.lock i{position:relative;width:20px;height:15px;background:var(--acc2);border-radius:2px;margin-top:8px}
.lock i::before{content:"";position:absolute;left:3px;top:-11px;width:14px;height:14px;border:3px solid var(--acc2);border-bottom:0;border-radius:8px 8px 0 0;box-sizing:border-box}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fld{margin-top:14px}
label{display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#c9c9cd}
input{display:block;width:100%;margin-top:6px;padding:11px 12px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);border-inline-start:3px solid rgba(255,156,0,.45);color:#fff;font:inherit;
 transition:border-color .15s,box-shadow .15s,background .15s}
input:focus{outline:none;border-color:var(--acc);background:rgba(0,0,0,.65);box-shadow:0 0 0 3px rgba(255,156,0,.18),inset 0 0 12px rgba(255,140,0,.12)}
input.code{font:700 20px/1 Consolas,"Courier New",monospace;letter-spacing:6px;text-transform:uppercase;text-align:center}
small{display:block;color:#85858b;font-size:12px;margin-top:4px}
/* ---- düğmeler: köşesi kesik, hover mermi izi, basınca namlu alevi ---- */
button{position:relative;display:block;width:100%;margin-top:22px;padding:14px;border:0;overflow:hidden;cursor:pointer;
 background:linear-gradient(135deg,var(--acc2),var(--acc) 60%,#ff7a00);color:#111;font:900 17px/1 Impact,"Arial Black","Segoe UI",sans-serif;letter-spacing:2px;text-transform:uppercase;
 clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:0 8px 24px rgba(255,140,0,.25);transition:transform .08s,filter .15s}
button span{position:relative;z-index:2}
button::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);opacity:0}
button:hover{filter:brightness(1.08)}button:hover::before{animation:tracer .55s ease-out}
button::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;z-index:1;border-radius:50%;
 background:radial-gradient(circle,#fff 0,#ffe08a 25%,rgba(255,120,0,.6) 50%,transparent 70%);opacity:0;transform:scale(.2)}
button.shot::after{animation:flash .32s ease-out}button:active{transform:translateY(2px) scale(.99)}
button.ghost{background:transparent;border:1px solid rgba(255,255,255,.22);color:#ddd;box-shadow:none;font:700 14px "Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:1px}
button.ghost:hover{background:rgba(255,255,255,.06)}
button:disabled{opacity:.6;cursor:default}.msg{min-height:1.5em;margin:14px 0 0}
.alt{margin:16px 0 0;font-size:14px;text-align:center}.alt a{color:var(--acc2);text-decoration:none;border-bottom:1px dashed rgba(255,196,0,.5)}.alt a:hover{color:#fff;border-bottom-color:#fff}.msg.ok{color:#8fd19e}.msg.bad{color:#ff7a6e}
.files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.files li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:rgba(0,0,0,.4);border:1px solid var(--line);border-inline-start:3px solid var(--acc);transition:background .2s}
.files li:hover{background:rgba(255,156,0,.08)}
.files a{color:var(--acc2);text-decoration:none;font-weight:700;word-break:break-all}.files a::before{content:"\2B07  "}.files a:hover{text-decoration:underline}.files span{color:#888;white-space:nowrap;font-size:13px}
[hidden]{display:none!important}
.foot{position:relative;z-index:2;padding:14px clamp(16px,4vw,48px);text-align:center;font-size:12px;color:#77777d;border-top:1px solid var(--line);background:rgba(6,6,8,.6)}
/* ---- animasyonlar ---- */
@keyframes dash{to{background-position:-6272px 0}}@keyframes qdash{to{background-position:-3968px 0}}
@keyframes across{from{transform:translateX(-130px)}to{transform:translateX(min(560px,86vw))}}
@keyframes lane{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 20px))}}
@keyframes jump{0%{transform:translateY(0)}45%,55%{transform:translateY(-92px)}100%{transform:translateY(0)}}
@keyframes fill{to{width:100%}}@keyframes blink{50%{opacity:0}}
@keyframes ldIn{to{opacity:1}}@keyframes ldOut{from{opacity:1}to{opacity:0;visibility:hidden}}@keyframes ldAuto{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.75}94%{opacity:1}97%{opacity:.85}}
@keyframes ember{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}100%{opacity:0;transform:translate(30px,-95vh)}}
@keyframes sweep{from{background-position:-40% 0}to{background-position:140% 0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tracer{0%{left:-40%;opacity:1}100%{left:110%;opacity:1}}
@keyframes flash{0%{opacity:1;transform:scale(.4)}60%{opacity:.9;transform:scale(9)}100%{opacity:0;transform:scale(12)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,156,0,.35)}50%{box-shadow:0 0 0 8px rgba(255,156,0,0)}}
@media (max-width:900px){main{grid-template-columns:1fr;justify-items:center;padding-bottom:140px}.hero{text-align:center}.hero p{margin-inline:auto}.steps{text-align:start}.card,.card.wide{width:100%;max-width:580px}}
@media (max-width:600px){.top{flex-wrap:wrap;gap:10px}.langs{margin-inline-start:0}.row{grid-template-columns:1fr}.card{padding:24px 18px}.steps li{padding:9px 12px}.lane{height:200px}}
/* Hareket azaltma tercihi (Windows'ta animasyonlar kapalıyken tarayıcı bunu bildirir): kullanıcı animasyonları özellikle istediği için yükleme
   ekranı, koşucular ve düğme efektleri kalır; yalnız sürekli arka plan efektleri (kor, titreşim) kapanır. */
@media (prefers-reduced-motion:reduce){.embers{display:none}.scan,.ld-logo{animation:none}}