/* ============ VORYNOX FX v2 — Cinematic layer ============ */
/* ANA RENK — VORYNOX marka teması (varsayılan) */
[data-theme="vorynox"]{--bg:#020806;--bg2:#04120d;--accent:#00e5a0;--accent2:#7cffd4;--glow:rgba(0,229,160,.42);--grad:linear-gradient(135deg,#00e5a0,#4dd9ff)}
/* yeni temalar */
[data-theme="cyber"]{--bg:#02040c;--bg2:#050b1e;--accent:#00d4ff;--accent2:#7cf0ff;--glow:rgba(0,212,255,.4);--grad:linear-gradient(135deg,#00d4ff,#7c5cff)}
[data-theme="neon"]{--bg:#020c06;--bg2:#04170c;--accent:#00ff88;--accent2:#a5ffcf;--glow:rgba(0,255,136,.35);--grad:linear-gradient(135deg,#00ff88,#7cffe0)}
[data-theme="royal"]{--bg:#06030f;--bg2:#100826;--accent:#8b5cff;--accent2:#d3a8ff;--glow:rgba(139,92,255,.45);--grad:linear-gradient(135deg,#8b5cff,#ff6ee0)}
[data-theme="solar"]{--bg:#0c0803;--bg2:#1c1206;--accent:#ffb520;--accent2:#ffe29a;--glow:rgba(255,181,32,.4);--grad:linear-gradient(135deg,#ffb520,#ff7a3d)}
[data-theme="titanium"]{--bg:#0b0d10;--bg2:#14171c;--accent:#c9d4e0;--accent2:#8fa2b8;--glow:rgba(201,212,224,.3);--grad:linear-gradient(135deg,#e8eef5,#8fa2b8)}
[data-theme="aurora"]{--bg:#030812;--bg2:#071228;--accent:#3affc3;--accent2:#7c9bff;--glow:rgba(58,255,195,.35);--grad:linear-gradient(120deg,#3affc3,#7c9bff 55%,#e07cff)}

/* noise overlay */
body::after{content:'';position:fixed;inset:0;z-index:998;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

/* ===== SPLASH LOADER ===== */
#splash{position:fixed;inset:0;z-index:9999;background:#020204;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .9s ease,visibility .9s;animation:splashKill .9s ease 4.5s forwards}
@keyframes splashKill{to{opacity:0;visibility:hidden;pointer-events:none}}
#splash.done{opacity:0;visibility:hidden;pointer-events:none}
#splash img{width:130px;opacity:0;animation:splIn 1.4s .2s forwards;filter:drop-shadow(0 0 30px var(--glow,rgba(0,212,255,.5)))}
@keyframes splIn{0%{opacity:0;transform:scale(.6) rotate(-20deg)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
#splash .sw{font-family:'Space Grotesk',sans-serif;letter-spacing:12px;color:#fff;font-weight:700;font-size:1.4rem;margin-top:26px;overflow:hidden}
#splash .sw span{display:inline-block;opacity:0;transform:translateY(24px);animation:swUp .6s forwards}
@keyframes swUp{to{opacity:1;transform:none}}
#splash .bar{width:220px;height:2px;background:rgba(255,255,255,.1);margin-top:30px;border-radius:2px;overflow:hidden}
#splash .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#00d4ff,#8b5cff);transition:width .3s;box-shadow:0 0 12px #00d4ff}
#splash .pct{color:#5a6272;font-size:.72rem;letter-spacing:3px;margin-top:12px;font-family:monospace}

/* ===== PAGE TRANSITION v2 ===== */
#ptrans{position:fixed;inset:0;z-index:9998;pointer-events:none}
#ptrans .wave{position:absolute;inset:0;background:radial-gradient(circle at var(--tx,50%) var(--ty,50%),color-mix(in srgb,var(--accent) 30%,var(--bg)),var(--bg) 62%);clip-path:circle(0% at var(--tx,50%) var(--ty,50%));transition:clip-path .55s cubic-bezier(.7,0,.3,1)}
#ptrans .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:.35s .2s;display:flex;flex-direction:column;align-items:center;gap:14px}
#ptrans .pl img{width:88px;filter:drop-shadow(0 0 26px var(--glow));animation:ptSpin 1.4s linear infinite}
@keyframes ptSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
#ptrans .pl span{letter-spacing:6px;font-size:.68rem;color:var(--accent);font-family:monospace;animation:pul 1s infinite}
#ptrans .ring2{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px;border-radius:50%;border:1px solid var(--accent);opacity:0;transform:scale(.4)}
#ptrans.go{pointer-events:all}
#ptrans.go .wave{clip-path:circle(150% at var(--tx,50%) var(--ty,50%))}
#ptrans.go .pl{opacity:1;transform:translate(-50%,-50%) scale(1)}
#ptrans.go .ring2{animation:ringOut 1s ease-out infinite}
@keyframes ringOut{0%{opacity:.7;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}

/* ===== CURSOR ===== */
#cursor{position:fixed;width:14px;height:14px;border-radius:50%;background:var(--accent);z-index:9997;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen;box-shadow:0 0 18px var(--glow);transition:width .25s,height .25s,opacity .3s}
#cursor.big{width:44px;height:44px;opacity:.45}
.ctrail{position:fixed;border-radius:50%;background:var(--accent);pointer-events:none;z-index:9996;transform:translate(-50%,-50%);mix-blend-mode:screen}
@media(pointer:coarse){#cursor,.ctrail{display:none}}

/* ===== HERO CINEMA ===== */
.hero{isolation:isolate}
.hero video.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;opacity:.28;filter:saturate(1.3)}
.hero .vign{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,transparent 25%,var(--bg) 85%)}
.hero .scan{position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.15) 3px 4px);pointer-events:none;opacity:.4}
#hero3d{width:min(560px,92vw);height:min(430px,58vw);cursor:grab;position:relative}
#hero3d:active{cursor:grabbing}
#hero3d canvas{outline:none}
.h3dui{display:flex;gap:10px;justify-content:center;margin:-6px 0 22px;flex-wrap:wrap}
.h3dui .chip{padding:8px 18px;border-radius:99px;border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(10px);font-size:.76rem;letter-spacing:1px;cursor:pointer;transition:.3s;color:var(--muted)}
.h3dui .chip:hover,.h3dui .chip.on{color:var(--txt);border-color:var(--accent);box-shadow:0 0 18px var(--glow)}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:inline-block;transform:translateY(110%);animation:lnUp 1s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes lnUp{to{transform:none}}
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-t);position:absolute;inset:0;background:var(--bg);clip-path:inset(0 0 0 0);opacity:0}
.arrowdn{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.7rem;letter-spacing:4px;animation:floaty 2.4s infinite}

/* ===== HUD ===== */
.hud{border:1px solid var(--glass-b);border-radius:24px;background:linear-gradient(160deg,var(--glass),transparent);backdrop-filter:blur(20px);padding:34px;position:relative;overflow:hidden}
.hud::before{content:'';position:absolute;inset:-1px;border-radius:24px;padding:1px;background:linear-gradient(120deg,var(--accent),transparent 30%,transparent 70%,var(--accent2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none}
.hud-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.hud-top h3{font-size:1rem;letter-spacing:3px;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.hud-top .tstamp{font-family:monospace;color:var(--accent);font-size:.8rem;letter-spacing:2px}
.hudgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.hcell{padding:18px 14px;border:1px solid var(--glass-b);border-radius:16px;background:var(--surface);position:relative;overflow:hidden;transition:.35s}
.hcell:hover{border-color:var(--accent);box-shadow:inset 0 0 24px var(--glow)}
.hcell small{display:block;color:var(--muted);font-size:.66rem;letter-spacing:2px;text-transform:uppercase;margin-bottom:7px}
.hcell b{font-size:1.35rem;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hcell .u{font-size:.7rem;color:var(--muted);margin-left:3px}
.hcell canvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:26px;opacity:.7}
.hring{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:74px;height:74px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.ring .bgc{stroke:var(--surface)}
.ring .fgc{stroke:url(#rg);transition:stroke-dashoffset 1s ease}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.86rem}

/* ===== TILE FIELD (yüzlerce karo) ===== */
.field{background:radial-gradient(ellipse at 50% 120%,var(--glow),transparent 55%),var(--glass);border:1px solid var(--glass-b);border-radius:24px;padding:50px 10px 60px;perspective:1100px;overflow:hidden;position:relative}
.fgrid3d{transform:rotateX(46deg);transform-style:preserve-3d;display:flex;flex-direction:column;align-items:center}
.frow{display:flex}
.frow:nth-child(even){transform:translateX(27px)}
.ftile{width:54px;height:47px;margin:-4px 1px;position:relative;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.9,.3,1.4);cursor:pointer}
.ftile img{width:100%;height:100%;object-fit:contain;filter:brightness(.75) drop-shadow(0 4px 6px rgba(0,0,0,.6));transition:filter .3s}
.ftile::after{content:'';position:absolute;inset:12% 8%;background:radial-gradient(ellipse,var(--glow),transparent 70%);opacity:0;transition:.3s;transform:translateZ(-6px)}
.ftile:hover{transform:translateZ(38px) scale(1.25);z-index:9}
.ftile:hover img{filter:brightness(1.35) drop-shadow(0 0 16px var(--glow))}
.ftile:hover::after{opacity:1}
.ftile .w{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotateX(-46deg);font-size:.6rem;font-weight:700;color:var(--accent);text-shadow:0 0 8px var(--glow);opacity:0;transition:.25s;white-space:nowrap;font-family:monospace}
.ftile:hover .w{opacity:1;top:-26px}
.ftile.on img{filter:brightness(1.5) drop-shadow(0 0 20px var(--accent))}
/* tile info modal */
.tmodal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(10px)}
.tmodal.open{display:flex}
.tmodal .tcard{width:min(460px,92vw);max-height:86vh;overflow:auto;background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--accent);border-radius:22px;padding:30px;box-shadow:0 0 60px var(--glow);animation:tIn .45s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tIn{from{transform:scale(.8) translateY(40px);opacity:0}}

/* ===== MAP ===== */
.map{display:grid;grid-template-columns:1fr 300px;gap:22px}
.mapfield{background:var(--glass);border:1px solid var(--glass-b);border-radius:22px;padding:30px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;min-height:300px}
.mdot{width:34px;height:30px;position:relative;cursor:pointer;transition:.25s}
.mdot img{width:100%;height:100%;object-fit:contain}
.mdot i{position:absolute;inset:26%;border-radius:50%;opacity:.85;box-shadow:0 0 10px currentColor}
.mdot:hover{transform:scale(1.4);z-index:3}
.c-ok{color:var(--ok);background:var(--ok)}.c-warn{color:var(--warn);background:var(--warn)}.c-alert{color:var(--alert);background:var(--alert)}.c-err{color:var(--err);background:var(--err)}.c-sun{color:var(--sun);background:var(--sun)}.c-off{color:#666;background:#666}
.mdot i{background:currentColor}
.mdot.blink i{animation:pul 1s infinite}

/* magnetic */
.btn{will-change:transform}

/* sound toggle */
#sndBtn{position:fixed;bottom:22px;right:22px;z-index:900;width:48px;height:48px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);backdrop-filter:blur(12px);color:var(--txt);cursor:pointer;font-size:1.1rem;transition:.3s}
#sndBtn:hover{border-color:var(--accent);box-shadow:0 0 18px var(--glow)}
#sndBtn.off{opacity:.45}

/* marquee */
.marq{overflow:hidden;border-block:1px solid var(--glass-b);padding:18px 0;white-space:nowrap;position:relative}
.marq .inner{display:inline-block;animation:mq 28s linear infinite;font-size:1rem;letter-spacing:4px;color:var(--muted)}
.marq .inner b{color:var(--accent);margin:0 14px}
@keyframes mq{to{transform:translateX(-50%)}}

@media(max-width:900px){.map{grid-template-columns:1fr}.hudgrid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}}


/* ===== ana renk noktası ===== */
.tdot.main{width:22px;height:22px;box-shadow:0 0 10px var(--glow);border:2px solid rgba(255,255,255,.5);position:relative}
.tdot.main::after{content:'★';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;text-shadow:0 0 4px #000}

/* ===== PAGE TRANSITION v3 — hex loader ===== */
#ptrans .hexspin{position:absolute;top:50%;left:50%;width:130px;height:130px;margin:-65px;opacity:0;transition:.3s .15s}
#ptrans.go .hexspin{opacity:1}
#ptrans .hexspin svg{width:100%;height:100%;animation:hexRot 2.2s linear infinite}
@keyframes hexRot{to{transform:rotate(360deg)}}
#ptrans .hexspin .hx{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:40 210;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--glow));animation:hexDash 1.6s ease-in-out infinite}
@keyframes hexDash{50%{stroke-dasharray:150 100;stroke-dashoffset:-60}100%{stroke-dasharray:40 210;stroke-dashoffset:-250}}
#ptrans .pl img{width:64px;animation:ptPulse 1.2s ease-in-out infinite}
@keyframes ptPulse{50%{transform:scale(1.12);filter:drop-shadow(0 0 34px var(--glow)) brightness(1.3)}}
#ptrans .ptbar{position:absolute;left:50%;top:calc(50% + 92px);width:150px;height:2px;margin-left:-75px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;opacity:0;transition:.3s .2s}
#ptrans.go .ptbar{opacity:1}
#ptrans .ptbar i{display:block;height:100%;width:40%;background:var(--grad);border-radius:2px;animation:ptSlide .8s ease-in-out infinite}
@keyframes ptSlide{from{margin-left:-40%}to{margin-left:100%}}

/* ===== SECTION ANIMATIONS ===== */
.reveal.pre{opacity:0;transform:translateY(46px) scale(.985);filter:blur(6px)}
.reveal{transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1),filter .9s}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.in .grid>*{animation:cardUp .8s cubic-bezier(.2,.9,.3,1.2) backwards}
.reveal.in .grid>*:nth-child(1){animation-delay:.05s}.reveal.in .grid>*:nth-child(2){animation-delay:.13s}
.reveal.in .grid>*:nth-child(3){animation-delay:.21s}.reveal.in .grid>*:nth-child(4){animation-delay:.29s}
.reveal.in .grid>*:nth-child(5){animation-delay:.37s}.reveal.in .grid>*:nth-child(6){animation-delay:.45s}
.reveal.in .grid>*:nth-child(7){animation-delay:.53s}.reveal.in .grid>*:nth-child(8){animation-delay:.61s}
@keyframes cardUp{from{opacity:0;transform:translateY(34px) scale(.96)}}
.sec-head h2{position:relative;display:inline-block}
.sec-head h2::after{content:'';position:absolute;left:50%;bottom:-10px;width:0;height:3px;border-radius:3px;background:var(--grad);transition:width .8s .3s cubic-bezier(.2,.9,.3,1),left .8s .3s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 12px var(--glow)}
.reveal.in .sec-head h2::after{width:64px;left:calc(50% - 32px)}
.card .ic{transition:.45s cubic-bezier(.2,.9,.3,1.4)}
.card:hover .ic{transform:translateY(-6px) rotate(-8deg) scale(1.18);filter:drop-shadow(0 8px 18px var(--glow))}
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-18deg);transition:left .7s ease;pointer-events:none}
.card:hover::after{left:120%}
.stat{transition:.4s}
.stat:hover{transform:translateY(-6px)}
.stat:hover b{animation:statPop .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes statPop{40%{transform:scale(1.12)}}
.uses span{transition:.35s cubic-bezier(.2,.9,.3,1.4)}
.uses span:hover{transform:translateY(-5px) scale(1.07);border-color:var(--accent);box-shadow:0 10px 26px -8px var(--glow);color:var(--accent)}

/* ===== PREMIUM FOOTER ===== */
footer{position:relative;margin-top:120px;padding:0!important;border-top:none!important;overflow:hidden}
footer .ftop{position:relative;border-top:1px solid var(--glass-b);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 4%,transparent))}
footer .fgrid{max-width:1200px;margin:0 auto;padding:70px 5vw 40px;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
footer h4{font-size:.8rem;letter-spacing:3px;color:var(--accent);margin-bottom:18px;text-transform:uppercase}
footer .fbrand img{width:54px;filter:drop-shadow(0 0 14px var(--glow));animation:floaty 5s ease-in-out infinite}
footer .fbrand b{display:block;font-size:1.4rem;letter-spacing:4px;margin:12px 0 8px}
footer .fbrand p{color:var(--muted);font-size:.86rem;max-width:300px;line-height:1.7}
footer ul{list-style:none;padding:0;margin:0}
footer ul li{margin-bottom:10px}
footer ul a{color:var(--muted);text-decoration:none;font-size:.88rem;position:relative;transition:.3s}
footer ul a::before{content:'⬡';position:absolute;left:-2px;opacity:0;color:var(--accent);transition:.3s;font-size:.7rem;top:2px}
footer ul a:hover{color:var(--txt);padding-left:18px}
footer ul a:hover::before{opacity:1}
footer .fstat{display:flex;gap:10px;flex-wrap:wrap}
footer .fstat div{flex:1;min-width:100px;padding:14px;border:1px solid var(--glass-b);border-radius:14px;background:var(--glass);text-align:center;transition:.35s}
footer .fstat div:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 12px 30px -10px var(--glow)}
footer .fstat b{display:block;font-size:1.25rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
footer .fstat span{font-size:.68rem;color:var(--muted);letter-spacing:1px}
footer .fsoc{display:flex;gap:10px;margin-top:16px}
footer .fsoc a{width:38px;height:38px;border-radius:12px;border:1px solid var(--glass-b);background:var(--glass);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1rem;transition:.35s cubic-bezier(.2,.9,.3,1.5)}
footer .fsoc a:hover{transform:translateY(-5px) rotate(-6deg);border-color:var(--accent);box-shadow:0 10px 24px -8px var(--glow)}
footer .fbot{border-top:1px solid var(--glass-b);padding:20px 5vw;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
footer .fbot small{color:var(--muted);font-size:.78rem}
footer .fpulse{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;color:var(--accent);font-family:monospace}
footer .fpulse i{width:8px;height:8px;border-radius:50%;background:#2fd57b;animation:pul 1.6s infinite}
footer .fticker{white-space:nowrap;overflow:hidden;border-top:1px solid var(--glass-b);padding:10px 0;font-family:monospace;font-size:.72rem;color:var(--muted);letter-spacing:2px}
footer .fticker>div{display:inline-block;animation:tick 30s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
@media(max-width:860px){footer .fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .fgrid{grid-template-columns:1fr}}


/* ===== VORYNOX v4 — renkli canlı katman ===== */
/* ana tema daha canlı degrade */
[data-theme="vorynox"]{--grad:linear-gradient(120deg,#00e5a0,#4dd9ff 40%,#8b5cff 80%,#ff6ad5);--glow:rgba(0,229,160,.5)}

/* hero aurora blobları */
.hero::before{content:'';position:absolute;inset:-20%;z-index:-3;pointer-events:none;
 background:
  radial-gradient(38% 30% at 18% 28%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
  radial-gradient(30% 26% at 82% 22%,color-mix(in srgb,#8b5cff 20%,transparent),transparent 70%),
  radial-gradient(34% 30% at 70% 78%,color-mix(in srgb,#4dd9ff 16%,transparent),transparent 70%),
  radial-gradient(26% 22% at 30% 80%,color-mix(in srgb,#ff6ad5 12%,transparent),transparent 70%);
 filter:blur(40px);animation:auroraMove 16s ease-in-out infinite alternate}
@keyframes auroraMove{
 0%{transform:translate(0,0) scale(1) rotate(0)}
 50%{transform:translate(3%,-2%) scale(1.06) rotate(2deg)}
 100%{transform:translate(-3%,2%) scale(1.02) rotate(-2deg)}}

/* animasyonlu gradient başlık */
.hero h1 .ln span{background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lnUp .9s cubic-bezier(.2,.8,.2,1) backwards,gradShift 6s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* hero ışık hüzmeleri */
.beams{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.beams i{position:absolute;top:-30%;width:2px;height:160%;background:linear-gradient(180deg,transparent,var(--accent),transparent);opacity:.14;transform:rotate(14deg);animation:beamSway 9s ease-in-out infinite}
.beams i:nth-child(1){left:12%;animation-delay:0s}
.beams i:nth-child(2){left:34%;animation-delay:2s;opacity:.1}
.beams i:nth-child(3){left:58%;animation-delay:4s}
.beams i:nth-child(4){left:78%;animation-delay:1s;opacity:.09}
.beams i:nth-child(5){left:90%;animation-delay:3s}
@keyframes beamSway{0%,100%{transform:rotate(12deg) translateX(0);opacity:.05}50%{transform:rotate(16deg) translateX(30px);opacity:.2}}

/* orbit halkaları — hero 3d etrafında */
#hero3d{position:relative}
#hero3d::before,#hero3d::after{content:'';position:absolute;top:50%;left:50%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none}
#hero3d::before{width:420px;height:420px;margin:-210px;animation:orbitA 26s linear infinite}
#hero3d::after{width:560px;height:560px;margin:-280px;border-color:color-mix(in srgb,#8b5cff 35%,transparent);animation:orbitB 40s linear infinite}
@keyframes orbitA{to{transform:rotate(360deg)}}
@keyframes orbitB{from{transform:rotate(360deg)}to{transform:rotate(0)}}

/* orbit uydu noktaları */
.orbdots{position:absolute;top:50%;left:50%;width:420px;height:420px;margin:-210px;pointer-events:none;animation:orbitA 26s linear infinite}
.orbdots i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--glow)}
.orbdots i:nth-child(1){top:-5px;left:50%}
.orbdots i:nth-child(2){bottom:-5px;left:50%;background:#8b5cff;box-shadow:0 0 14px rgba(139,92,255,.6)}
.orbdots i:nth-child(3){top:50%;left:-5px;background:#4dd9ff;box-shadow:0 0 14px rgba(77,217,255,.6)}

/* renkli tag rozeti */
.hero .tag{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,#8b5cff 14%,transparent));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);animation:tagGlow 3s ease-in-out infinite}
@keyframes tagGlow{50%{box-shadow:0 0 26px -4px var(--glow)}}

/* CTA butonları canlı */
.btn.pri{background:var(--grad);background-size:220% 100%;animation:gradShift 5s ease-in-out infinite;border:none;box-shadow:0 8px 30px -8px var(--glow)}
.btn.pri:hover{box-shadow:0 14px 44px -8px var(--glow);transform:translateY(-3px) scale(1.03)}
.btn{transition:.35s cubic-bezier(.2,.9,.3,1.4)}

/* scroll indicator */
.scrollhint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.66rem;letter-spacing:3px;z-index:2;animation:hintFade 2s ease-in-out infinite}
.scrollhint .mouse{width:22px;height:36px;border:2px solid var(--accent);border-radius:12px;position:relative;box-shadow:0 0 12px -2px var(--glow)}
.scrollhint .mouse::after{content:'';position:absolute;top:6px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:3px;background:var(--grad);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@keyframes hintFade{50%{opacity:.5}}

/* bölüm arkaplan renk lekeleri */
section.reveal{position:relative}
section.reveal::before{content:'';position:absolute;top:10%;width:44vw;height:44vw;max-width:600px;max-height:600px;border-radius:50%;filter:blur(90px);opacity:0;transition:opacity 1.4s;z-index:-1;pointer-events:none}
section.reveal:nth-of-type(odd)::before{left:-18vw;background:color-mix(in srgb,var(--accent) 9%,transparent)}
section.reveal:nth-of-type(even)::before{right:-18vw;background:color-mix(in srgb,#8b5cff 9%,transparent)}
section.reveal.in::before{opacity:1}

/* kart kenar gradient parlatma */
.card:hover{border-image:var(--grad) 1;border-color:transparent}
.grid .card:nth-child(3n+1):hover .ic{color:var(--accent)}
.grid .card:nth-child(3n+2):hover{box-shadow:0 22px 50px -16px rgba(139,92,255,.4)}
.grid .card:nth-child(3n):hover{box-shadow:0 22px 50px -16px rgba(77,217,255,.4)}

/* marquee renklen */
.marq .inner b{background:var(--grad);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 4s linear infinite}