:root{
  --bg:#070a09;--s1:#0d1311;--s2:#121a17;--line:rgba(57,255,136,.14);--line2:rgba(244,246,245,.08);
  --gr:#39FF88;--gr2:#18A85D;--yel:#FFCC4A;--red:#FF4D5E;--tx:#F4F6F5;--mu:#9AA59F;
  --ig1:#feda75;--ig2:#fa7e1e;--ig3:#d62976;--ig4:#962fbf;--yt:#ff3d3d;--dc:#5865F2;
  --r:18px;--fd:'Chakra Petch',system-ui,sans-serif;--fb:'Rubik',system-ui,sans-serif;--fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 var(--fb);overflow-x:hidden;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--gr);color:#050807;padding:8px 14px;border-radius:10px;z-index:50}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--gr);outline-offset:3px;border-radius:8px}

/* arka plan */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg .grid{position:absolute;inset:-96px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 75%);opacity:.55;animation:gridmove 14s linear infinite}
@keyframes gridmove{to{transform:translate3d(48px,48px,0)}}
.bg .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.bg .g1{width:620px;height:620px;background:var(--gr2);top:-260px;left:50%;margin-left:-310px;animation:breathe 9s ease-in-out infinite}
.bg .g2{width:480px;height:480px;background:#7a5a10;bottom:-220px;right:-160px;opacity:.22;animation:breathe 11s ease-in-out infinite reverse}
@keyframes breathe{50%{transform:scale(1.15);opacity:.25}}
.bg .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 4px);opacity:.5}

/* üst bar */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(7,10,9,.72);border-bottom:1px solid var(--line2)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 20px var(--fd);letter-spacing:.3px}
.brand b{color:var(--gr)}
.brand img{width:30px;height:auto}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;color:var(--mu);font:500 15px var(--fb);padding:8px 12px;border-radius:10px;transition:color .2s,background .2s}
.nav a:hover{color:var(--tx);background:var(--s2)}
@media (max-width:820px){.nav{display:none}.top .btn.sub{margin-left:auto}}

/* butonlar */
.btn{--c:var(--tx);display:inline-flex;align-items:center;gap:8px;text-decoration:none;font:600 15px var(--fb);color:var(--c);background:var(--s2);border:1px solid var(--line2);padding:10px 16px;border-radius:12px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);border-color:rgba(57,255,136,.5)}
.btn.main,.btn.sub{background:var(--gr);color:#050807;border-color:var(--gr);box-shadow:0 0 0 0 rgba(57,255,136,.5)}
.btn.main:hover,.btn.sub:hover{box-shadow:0 8px 30px -6px rgba(57,255,136,.6)}
.btn.ghost{background:transparent}

/* hero */
.hero{padding:56px 0 0;position:relative;overflow-x:clip}
.hero>.wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.id{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.ava{position:relative;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1d2b24,#0a0f0d);display:grid;place-items:center;overflow:hidden;flex:none}
.ava::before{content:"";position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(var(--gr),transparent 30%,var(--yel) 55%,transparent 80%,var(--gr));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4s linear infinite}
.ava img{width:44px;margin-top:10px}
@keyframes spin{to{transform:rotate(360deg)}}
.id strong{display:block;font:700 22px/1.1 var(--fd)}
.id small{display:flex;align-items:center;gap:7px;color:var(--mu);font:500 13px var(--fm)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gr);box-shadow:0 0 10px var(--gr);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
h1{font:700 clamp(38px,5.6vw,68px)/1.02 var(--fd);margin:0 0 18px;letter-spacing:-.5px;text-wrap:balance}
h1 em{font-style:normal;color:var(--gr);text-shadow:0 0 28px rgba(57,255,136,.45)}
.lede{color:#c4ccc7;font-size:clamp(16px,1.6vw,18px);max-width:560px;margin:0 0 26px}

/* link butonları */
.links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:620px}
.links li:first-child{grid-column:1/-1}
.lk{--a:var(--gr);position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);text-decoration:none;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)),var(--s1);border:1px solid var(--line2);overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.lk::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.12) 50%,transparent 65%);transform:translateX(-100%);transition:transform .7s}
.lk:hover{transform:translateY(-3px);border-color:var(--a);box-shadow:0 14px 40px -14px var(--a)}
.lk:hover::after{transform:translateX(100%)}
.lk:active{transform:translateY(-1px) scale(.99)}
.lk .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--a);color:#fff}
.lk .ic svg{width:24px;height:24px}
.lk .tx{display:flex;flex-direction:column;min-width:0}
.lk b{font:700 17px/1.2 var(--fd);letter-spacing:.2px}
.lk small{color:var(--mu);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .ar{margin-left:auto;color:var(--mu);font-size:20px;transition:transform .25s,color .25s}
.lk:hover .ar{transform:translateX(4px);color:var(--tx)}
.lk.ig{--a:#e1306c}.lk.ig .ic{background:radial-gradient(circle at 30% 107%,var(--ig1) 0%,var(--ig2) 25%,var(--ig3) 55%,var(--ig4) 90%)}
.lk.tt{--a:#25f4ee}.lk.tt .ic{background:#000;color:#fff;box-shadow:inset 2px 0 0 #25f4ee,inset -2px 0 0 #fe2c55}
.lk.yt{--a:var(--yt)}.lk.yt .ic{background:var(--yt)}
.lk.xx{--a:#e7e9ea}.lk.xx .ic{background:#000;border:1px solid #333}
.lk.dc{--a:var(--dc)}.lk.dc .ic{background:var(--dc)}

/* sahne */
.stage{position:relative;aspect-ratio:4/5;max-height:620px;justify-self:center;width:100%;max-width:480px}
.stage .ring{position:absolute;inset:8% 6% 6%;border-radius:50%;border:1px dashed rgba(57,255,136,.35);animation:spin 40s linear infinite}
.stage .ring::before{content:"";position:absolute;inset:9%;border-radius:50%;border:1px solid rgba(57,255,136,.12)}
.stage .beam{position:absolute;left:50%;top:44%;width:150%;height:70%;transform-origin:0 50%;background:conic-gradient(from 250deg at 0 50%,transparent 0deg,rgba(57,255,136,.18) 20deg,transparent 40deg);animation:sweep 6s ease-in-out infinite;mix-blend-mode:screen;margin-top:-35%}
@keyframes sweep{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
.stage .kasif{position:relative;width:78%;margin:6% auto 0;filter:drop-shadow(0 24px 40px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-14px) rotate(-1deg)}}
.chip{position:absolute;font:500 13px var(--fm);background:rgba(13,19,17,.85);border:1px solid var(--line);padding:7px 11px;border-radius:10px;white-space:nowrap;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:float 6s ease-in-out infinite}
.chip b{color:var(--gr);font-weight:600}.chip b.y{color:var(--yel)}.chip b.r{color:var(--red)}
.c1{top:10%;left:-4%}.c2{top:34%;right:-6%;animation-delay:-1.5s}.c3{bottom:26%;left:-8%;animation-delay:-3s}.c4{bottom:8%;right:0;animation-delay:-4.5s}
@keyframes float{50%{transform:translateY(-10px)}}

/* kayan şerit */
.ticker{margin-top:56px;border-block:1px solid var(--line2);background:rgba(13,19,17,.6);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tk{display:flex;width:max-content;animation:marquee 38s linear infinite}
.tk span{font:600 15px var(--fm);text-transform:uppercase;letter-spacing:2px;color:var(--mu);padding:16px 26px;display:flex;align-items:center;gap:26px}
.tk span::after{content:"◆";color:var(--gr);font-size:10px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* bölümler */
.sec{padding:88px 0 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.eyebrow{font:600 13px var(--fm);text-transform:uppercase;letter-spacing:2px;color:var(--gr);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--gr)}
h2{font:700 clamp(30px,4vw,46px)/1.05 var(--fd);margin:0}

/* videolar */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vc{position:relative;display:flex;flex-direction:column;text-decoration:none;border-radius:var(--r);background:var(--s1);border:1px solid var(--line2);overflow:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.vc:hover{transform:translateY(-5px);border-color:rgba(57,255,136,.5);box-shadow:0 22px 50px -20px rgba(57,255,136,.45)}
.vc.feat{grid-column:span 2;grid-row:span 2}
.vc .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0f0d}
.vc .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.vc:hover .th img{transform:scale(1.06);filter:saturate(1.15)}
.vc .th::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,10,9,.85))}
.play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:rgba(7,10,9,.55);border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;z-index:2;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transform:scale(.85);opacity:.9;transition:transform .3s,background .3s,border-color .3s}
.play svg{width:24px;height:24px;margin-left:3px;color:#fff}
.vc:hover .play{transform:scale(1);background:var(--yt);border-color:var(--yt)}
.feat .play{width:84px;height:84px;margin:-42px 0 0 -42px}.feat .play svg{width:32px;height:32px}
.badge{position:absolute;top:12px;left:12px;z-index:2;font:700 12px var(--fm);letter-spacing:1px;background:var(--gr);color:#050807;padding:5px 9px;border-radius:7px;box-shadow:0 0 20px rgba(57,255,136,.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 4px rgba(57,255,136,.3)}}
.vc .mt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.vc h3{font:600 17px/1.3 var(--fb);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feat h3{font:700 clamp(20px,2.2vw,28px)/1.2 var(--fd);-webkit-line-clamp:3}
.vc .ds{color:var(--mu);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vc .inf{margin-top:auto;display:flex;gap:12px;color:var(--mu);font:500 13px var(--fm)}
.sk .th{background:linear-gradient(100deg,#0d1311 30%,#16201c 50%,#0d1311 70%);background-size:300% 100%;animation:shim 1.4s linear infinite}
.sk .mt i{display:block;height:14px;border-radius:6px;background:#121a17;width:80%}.sk .mt i+i{width:45%}
@keyframes shim{to{background-position:-150% 0}}
.empty{grid-column:1/-1;text-align:center;padding:42px 20px;border:1px dashed var(--line);border-radius:var(--r);background:rgba(13,19,17,.6)}
.empty img{width:120px;margin:0 auto 14px}
.empty p{color:var(--mu);margin:0 0 16px}

/* kaşif */
.who{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}
.whoimg{position:relative;max-width:360px;justify-self:center}
.whoimg::before{content:"";position:absolute;inset:10% 0 0;border-radius:50%;background:radial-gradient(circle,rgba(57,255,136,.25),transparent 65%);filter:blur(20px)}
.whoimg img{position:relative;animation:bob 6s ease-in-out infinite}
.who p{color:#c4ccc7;max-width:620px}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.stats div{background:var(--s1);border:1px solid var(--line2);border-radius:14px;padding:14px 18px;min-width:120px}
.stats b{display:block;font:700 34px/1 var(--fd);color:var(--gr)}
.stats small{color:var(--mu);font:500 13px var(--fm)}

/* konular */
.topics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.topic{position:relative;padding:26px;border-radius:var(--r);background:var(--s1);border:1px solid var(--line2);transition:border-color .3s,transform .2s;transform-style:preserve-3d;overflow:hidden}
.topic::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(57,255,136,.14),transparent 45%);opacity:0;transition:opacity .3s}
.topic:hover{border-color:rgba(57,255,136,.45)}.topic:hover::before{opacity:1}
.topic code{font:500 13px var(--fm);color:var(--yel)}
.topic h3{font:700 24px var(--fd);margin:10px 0 8px}
.topic p{color:var(--mu);margin:0}

/* iş birliği */
.collab{display:grid;grid-template-columns:1.4fr auto;gap:18px 30px;align-items:center;padding:34px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(600px circle at 0 0,rgba(57,255,136,.12),transparent 60%),var(--s1)}
.collab p{color:var(--mu);margin:10px 0 0}
.mail{display:flex;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--line2);padding:6px 6px 6px 16px;border-radius:14px}
.mail output{font:500 15px var(--fm)}
.collab [data-dm]{justify-self:start}
.mail[hidden]{display:none}

footer.site{margin-top:96px;border-top:1px solid var(--line2);padding:26px 0 calc(26px + env(safe-area-inset-bottom));color:var(--mu);font-size:14px}
footer.site .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.up{text-decoration:none}.up:hover{color:var(--gr)}

/* belirme */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* tablet */
@media (max-width:980px){
  .hero>.wrap{grid-template-columns:1fr}
  .stage{display:none}
  .intro{max-width:620px;margin-inline:auto;width:100%}
  .vids{grid-template-columns:1fr 1fr}
  .vc.feat{grid-row:auto}
  .who{grid-template-columns:1fr;text-align:left}
  .whoimg{max-width:240px}
  .topics{grid-template-columns:1fr}
  .collab{grid-template-columns:1fr}
}
/* telefon */
@media (max-width:620px){
  .hero{padding-top:28px}
  .links{grid-template-columns:1fr}
  .lk{padding:13px 14px}
  .vids{grid-template-columns:1fr}
  .vc.feat{grid-column:auto;grid-row:auto}
  .sec{padding-top:64px}
  .sh .btn{width:100%;justify-content:center}
  .collab{padding:22px}
  .mail{flex-wrap:wrap;padding:12px}.mail output{word-break:break-all;flex:1 1 100%}.mail .btn{width:100%;justify-content:center}
  .collab [data-dm]{width:100%;justify-content:center}
  .top .btn.sub span{display:none}.top .btn.sub{padding:10px}
  .vids{gap:12px}
  .vc:not(.feat){flex-direction:row;align-items:stretch}
  .vc:not(.feat) .th{width:42%;flex:none;aspect-ratio:16/10}
  .vc:not(.feat) .mt{padding:10px 12px;gap:4px}
  .vc:not(.feat) h3{font-size:15px;-webkit-line-clamp:3}
  .vc:not(.feat) .inf{font-size:12px;flex-wrap:wrap;gap:2px 8px}
  .vc:not(.feat) .play{width:40px;height:40px;margin:-20px 0 0 -20px}.vc:not(.feat) .play svg{width:16px;height:16px}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats div{min-width:0;padding:12px}.stats b{font-size:28px}
  .whoimg{max-width:170px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}