html,body{max-width:100%;overflow-x:hidden}
*{max-width:100vw}
.skyline{max-width:none!important}
/* hero */
.hero{min-height:96vh!important;display:flex!important;flex-direction:column;justify-content:center}
.hero .hero-in{width:100%;max-width:900px!important;margin:0 auto!important;text-align:center!important;display:flex;flex-direction:column;align-items:center}
.hero .hero-tag{margin:0 auto!important}

.hero-title{font-family:'Unbounded',sans-serif!important;font-size:clamp(28px,4.2vw,54px)!important;font-weight:700;line-height:1.34!important;letter-spacing:.8px;min-height:3.9em;text-align:center!important;text-transform:none;display:flex;align-items:center;justify-content:center}
.hero-title .grad{background:linear-gradient(92deg,#eaf2ff 0%,#4ade80 45%,#06b6d4 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleSheen 5s ease-in-out infinite}
@keyframes titleSheen{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.hero-caret{display:inline-block;width:.5em;height:.14em;background:#4ade80;box-shadow:0 0 12px #4ade80;margin-left:.12em;animation:caretBlink .8s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}

#twTxt{opacity:0;will-change:opacity}
#twTxt.lin{animation:glowIn .9s ease forwards}
#twTxt.lout{animation:glowOut .7s ease forwards}
@keyframes glowIn{0%{opacity:0;text-shadow:none}30%{opacity:.85;text-shadow:0 0 18px rgba(74,222,128,.5)}42%{opacity:.25;text-shadow:none}58%{opacity:1;text-shadow:0 0 26px rgba(74,222,128,.55),0 0 70px rgba(74,222,128,.22)}100%{opacity:1;text-shadow:0 0 26px rgba(74,222,128,.45),0 0 70px rgba(74,222,128,.18)}}
@keyframes glowOut{from{opacity:1}to{opacity:0;text-shadow:none}}

#tagTxt{display:inline-block;transition:opacity .35s,transform .35s}
#tagTxt.sw{opacity:0;transform:translateY(8px)}

.brand-line{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:4px;color:rgba(255,255,255,.34);margin-top:18px;display:flex;align-items:center;justify-content:center}

.cursor-light{position:absolute;width:540px;height:540px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(74,222,128,.12) 0%,rgba(6,182,212,.06) 35%,transparent 62%);transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;will-change:left,top}

/* hero istatistik seridi */
.stats-area{position:relative;z-index:2;display:flex;justify-content:center;padding:0 24px 34px;margin-top:auto}
.hero{padding-bottom:0!important}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(13,18,32,.72);border:1px solid rgba(255,255,255,.07);border-radius:16px;overflow:hidden;backdrop-filter:blur(8px)}
.stat-cell{padding:20px 34px;text-align:center;border-right:1px solid rgba(255,255,255,.06)}
.stat-cell:last-child{border-right:none}
.stat-value{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,3.4vw,42px);color:var(--green);letter-spacing:1px;line-height:1}
.stat-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.4);margin-top:6px}

/* butonlar */
.btn-main{display:inline-flex!important;align-items:center;justify-content:center;position:relative!important;overflow:hidden!important;isolation:isolate;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.btn-main:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 44px rgba(74,222,128,.4)}
.btn-main::after{content:none!important}
.btn-main:hover::after{content:''!important;position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none;animation:sheenMove .7s ease forwards}
@keyframes sheenMove{from{left:-80%}to{left:135%}}
.btn-ghost{transition:transform .25s,border-color .25s,background .25s}
.btn-ghost:hover{transform:translateY(-2px)}

/* kucuk ikonlar */
.icon{display:inline-block;vertical-align:-3px}
.icon-pulse{animation:iconPulse 1.8s ease-in-out infinite}
@keyframes iconPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.88)}}
.icon-float{animation:iconFloat 2.4s ease-in-out infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.icon-spin{animation:iconSpin 3.2s linear infinite}
@keyframes iconSpin{to{transform:rotate(360deg)}}
.icon-orbit{animation:iconOrbit 6s linear infinite}
@keyframes iconOrbit{to{transform:rotate(360deg)}}
.icon-sway,.icon-tilt{animation:iconSway 2.6s ease-in-out infinite}
@keyframes iconSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* IRL bolumu arka plan sahnesi */
#irl{position:relative;overflow:hidden}
#irl>div:not(.irl-scene){position:relative;z-index:1}
.irl-scene{position:absolute;inset:0;margin:0;border:none;border-radius:0;background:transparent;z-index:0;pointer-events:none;overflow:hidden}
.irl-scene .sky{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 0%,rgba(74,222,128,.05),transparent 55%),radial-gradient(ellipse at 15% 8%,rgba(6,182,212,.05),transparent 50%)}
.irl-scene .spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#9fb4ff;opacity:.35;animation:sparkle 3.4s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.7;transform:scale(1.2)}}
.skyline-track{position:absolute;bottom:0;left:0;display:flex;width:max-content;opacity:.5;animation:skylineSlide 64s linear infinite;animation-play-state:paused}
.irl-scene.play .skyline-track{animation-play-state:running}
.skyline{width:4000px;height:300px;flex-shrink:0}
@keyframes skylineSlide{to{transform:translateX(-4000px)}}
.irl-scene .ground{position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(180deg,rgba(22,29,51,.8),rgba(12,17,34,.9))}
.scene-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--dark) 0%,rgba(10,14,28,.55) 18%,rgba(10,14,28,0) 55%)}

.walker{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.w-live{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:1px;color:#fff;background:#e63946;border-radius:4px;padding:2px 8px;animation:liveBlink 1.4s infinite;animation-play-state:paused}
.irl-scene.play .w-live{animation-play-state:running}
@keyframes liveBlink{50%{opacity:.5}}
.figure-body{animation:figureBob .55s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:53px 80px}
.figure-leg-front{animation:legFront .55s ease-in-out infinite alternate;transform-origin:59px 82px;animation-play-state:paused}
.figure-leg-back{animation:legBack .55s ease-in-out infinite alternate;transform-origin:49px 82px;animation-play-state:paused}
.figure-arm-back{animation:armSwing .55s ease-in-out infinite alternate;transform-origin:38px 48px;animation-play-state:paused}
.irl-scene.play .figure-body,.irl-scene.play .figure-leg-front,.irl-scene.play .figure-leg-back,.irl-scene.play .figure-arm-back{animation-play-state:running}
@keyframes figureBob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes legFront{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@keyframes legBack{from{transform:rotate(22deg)}to{transform:rotate(-22deg)}}
@keyframes armSwing{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}

/* esim dunyasi */
#globeHover{position:relative}
.globe-orbit{position:absolute;inset:0;z-index:3;pointer-events:none;animation:globeSpin 16s linear infinite;animation-delay:1.5s}
@keyframes globeSpin{to{transform:rotate(360deg)}}
.globe-figure{position:absolute;left:50%;top:-14px;transform:translateX(-50%);animation:figureDrop 1.5s cubic-bezier(.34,1.1,.5,1.25) both}
@keyframes figureDrop{0%{transform:translate(-50%,-170px);opacity:0}55%{opacity:1}78%{transform:translate(-50%,10px)}100%{transform:translate(-50%,0)}}
.g-leg-front{animation:stepFront .5s ease-in-out infinite alternate;transform-origin:23px 37px;animation-delay:1.5s}
.g-leg-back{animation:stepBack .5s ease-in-out infinite alternate;transform-origin:17px 37px;animation-delay:1.5s}
@keyframes stepFront{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes stepBack{from{transform:rotate(18deg)}to{transform:rotate(-18deg)}}

/* maskot */
.mascot-greet{position:fixed;right:0;bottom:15vh;z-index:80;pointer-events:none;transform:translateX(115%);animation:mascotLoop 18s ease-in-out infinite;animation-delay:5s;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.mascot-greet img{display:block}
@keyframes mascotLoop{0%{transform:translateX(115%) rotate(0deg)}5%{transform:translateX(32%) rotate(-12deg)}8%{transform:translateX(32%) rotate(-4deg)}11%{transform:translateX(32%) rotate(-15deg)}14%{transform:translateX(32%) rotate(-5deg)}17%{transform:translateX(32%) rotate(-12deg)}24%{transform:translateX(115%) rotate(0deg)}100%{transform:translateX(115%) rotate(0deg)}}
.mascot-bubble{position:absolute;left:-58px;top:-6px;background:var(--green,#4ade80);color:#06270f;font-weight:700;font-size:13px;font-family:'Barlow',sans-serif;padding:6px 12px;border-radius:12px 12px 2px 12px;opacity:0;animation:bubblePop 18s ease-in-out infinite;animation-delay:5s;white-space:nowrap}
@keyframes bubblePop{0%,5%{opacity:0;transform:scale(.6)}8%,19%{opacity:1;transform:scale(1)}23%,100%{opacity:0;transform:scale(.6)}}

/* nav rozeti + footer */
.beta-tag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#06270f;background:var(--green,#4ade80);border-radius:5px;padding:3px 7px;margin-left:9px;vertical-align:middle}
footer{display:flex;flex-wrap:wrap;align-items:center;gap:18px;row-gap:18px}
.ft-mails{flex-basis:100%;display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05)}
.ft-mails a{color:rgba(255,255,255,.45);text-decoration:none}
.ft-mails a:hover{color:var(--green)}

@media(max-width:920px){
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat-cell{padding:14px 18px}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.06)}
}
@media(max-width:760px){
  .skyline-track{opacity:.3}
  .mascot-greet img{width:84px}
  .mascot-greet{bottom:11vh}
}
@media (prefers-reduced-motion:reduce){
  .hero-title .grad,.spark,.icon,.globe-orbit,.globe-figure,.g-leg-front,.g-leg-back{animation:none!important}
  .mascot-greet,.mascot-bubble{display:none}
  #twTxt{opacity:1;animation:none!important}
  .btn-main:hover::after{animation:none}
  .skyline-track,.figure-body,.figure-leg-front,.figure-leg-back,.figure-arm-back,.w-live,.hero-caret{animation:none!important}
}

@media(max-width:760px){.hero-title{font-size:clamp(20px,5.6vw,26px)!important;min-height:6.2em;letter-spacing:.4px}}

/* === MOBIL === */
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;z-index:60}
.nav-burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.nav-burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.x span:nth-child(2){opacity:0}
.nav-burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:900px){
  nav{flex-wrap:wrap;position:relative}
  .nav-burger{display:flex}
  nav ul{display:none;flex-direction:column;width:100%;margin-top:12px;gap:2px;align-items:stretch}
  nav ul.open{display:flex}
  nav ul li{width:100%}
  nav ul li a{display:block;padding:13px 14px;border-radius:8px}
  nav ul li a:hover{background:rgba(255,255,255,.05)}
  .nav-cta{text-align:center;margin-top:6px}
}

@media(max-width:760px){
  .hero{min-height:auto!important;padding:90px 16px 40px!important}
  .hero-title{font-size:clamp(22px,7vw,34px)!important;min-height:auto!important;line-height:1.28!important}
  .hero .hero-in{max-width:100%!important}
  .stats-area{margin-top:34px!important;padding:0 12px 24px!important}
  .stat-strip{grid-template-columns:repeat(2,1fr);width:100%}
  .stat-value{font-size:26px!important}
  section{padding-left:16px!important;padding-right:16px!important}
  .grid,.cards,[class*="col-2"],[class*="grid-2"]{grid-template-columns:1fr!important}
  h1,h2{word-break:break-word}
  table{display:block;overflow-x:auto;white-space:nowrap}
  .mascot-greet{display:none}
}

@media(max-width:480px){
  .hero-title{font-size:clamp(20px,6.4vw,28px)!important}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .btn-main,.btn-ghost,.nav-cta{width:100%;text-align:center;justify-content:center}
}