/* INFERNOX - hareket katmani
   Mevcut tasarimin ustune biner; renk, font ve yerlesim degismez.
   html.motion  : GSAP motoru aktif (eski CSS giris animasyonlari devre disi, yerini zaman cizelgeleri alir)
   html.m-boot  : acilis oncesi (icerik acilis animasyonuna hazirlanir, en fazla birkac saniye)
   html.lenis   : yumusak kaydirma aktif */

:root {
  /* Hareket tokenlari: JS tarafindaki T nesnesiyle ayni degerler */
  --e-out: cubic-bezier(.16, 1, .3, 1);      /* expo.out */
  --e-soft: cubic-bezier(.22, 1, .36, 1);    /* power3.out */
  --e-io: cubic-bezier(.65, 0, .35, 1);      /* power3.inOut */
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-xs: .18s;
  --d-s: .35s;
  --d-m: .6s;
  --d-l: 1.1s;
}

/* ---------- Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Animasyonlar yatay tasma yaratmasin */
html.motion main { overflow-x: clip; }

/* ---------- Acilis oncesi gizleme (sadece opaklik: yerlesim kaymaz) ---------- */
html.m-boot #nav > *,
html.m-boot .hero .hero-bg,
html.m-boot .hero .status-pill,
html.m-boot .hero .hero-title,
html.m-boot .hero .title-echo,
html.m-boot .hero .hero-tag,
html.m-boot .hero .hero-desc,
html.m-boot .hero .hero-cta,
html.m-boot .hero .announce,
html.m-boot .hero .console,
html.m-boot .marquee,
html.m-boot .page-hero .hero-bg,
html.m-boot .page-hero .wrap > *,
html.m-boot .nf .reveal { opacity: 0; }

/* ---------- Eski CSS giris animasyonlari: GSAP devralir ---------- */
html.motion .hero-title,
html.motion .title-echo,
html.motion .hero-tag,
html.motion .hero-desc,
html.motion .hero-cta,
html.motion .console,
html.motion .crow,
html.motion .hero-title.fx .ch { animation: none; }
html.motion .hero-title.fx { animation: heatShift 6s ease-in-out infinite alternate; }
html.motion .marquee-track { animation: none; will-change: transform; }
html.motion .reveal { transform: none; transition: none; }
html.motion .stagger > * { opacity: 1; transform: none; transition: border-color .25s, background-color .25s; }
html.motion .tilt, html.motion .tilt.tilting { transition: border-color .25s; will-change: auto; }

/* ---------- Metin bolme maskeleri ---------- */
/* clip-path kullanilir (overflow degil): taban cizgisi ve satir yuksekligi aynen korunur */
.m-w { display: inline-block; clip-path: inset(-.18em -.06em -.14em -.06em); }
.m-w.m-open { clip-path: none; }
.m-wi { display: inline-block; will-change: transform; }
.m-w.m-open .m-wi { will-change: auto; }
.m-c { display: inline-block; }

/* ---------- Bolum basliklari ---------- */
/* Vurgulu kelimenin ici kaydirmaya bagli dolar (--fill JS'den gelir) */
html.motion .sec-head .sec-title em,
html.motion .reveal .sec-title em { background-size: var(--fill, 100%) 100%; transition: none; }
html.motion .eyebrow::before { transform: scaleX(var(--ln, 1)); transform-origin: left center; }

/* Bolumler arasi ince isik cizgisi (kaydirmayla cizilir) */
html.motion .section { position: relative; }
html.motion .section[data-m-line]::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(1240px, 92vw); height: 1px; pointer-events: none;
  translate: -50% 0; transform: scaleX(var(--sl, 0)); opacity: calc(var(--sl, 0) * .7);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--orange) 70%, transparent) 50%, transparent);
}

/* ---------- Hero ---------- */
.hero { --hx: 0; --hy: 0; }
html.motion .hero-horizon { translate: calc(var(--hx) * -26px) calc(var(--hy) * -14px + var(--rise, 0%)); }
html.motion .heat { translate: calc(var(--hx) * 18px) calc(var(--hy) * 12px); }
html.motion .title-echo { translate: calc(var(--hx) * -8px) calc(var(--hy) * -6px); }
html.motion .hero-tag #tagline { display: inline-block; }

/* ---------- Dashboard: karolar gorunene kadar gostergeler bos bekler ---------- */
html.motion .tile-players:not(.m-in) .g-fill { stroke-dasharray: 0 327 !important; }
html.motion .tile:not(.m-in) .fps-bar i { width: 0 !important; }
html.motion .spark svg { transition: clip-path 1.6s var(--e-out) .25s; }
html.motion .tile-players:not(.m-in) .spark svg { clip-path: inset(0 100% 0 0); }
html.motion .spark-dot { transition: opacity .4s 1.5s, scale .6s var(--e-spring) 1.5s; }
html.motion .tile-players:not(.m-in) .spark-dot { opacity: 0; scale: 0; }

/* ---------- Wipe ---------- */
html.motion .wipe-box:not(.m-in) .wp-bar i { width: 0 !important; }
html.motion .wipe-box.m-fill .wp-bar i { transition: width 1.8s var(--e-out); }
html.motion .wipe-box::before { translate: 0 var(--gy, 0px); }
html.motion .cd-unit span.tick { animation: mTick .5s var(--e-out); }
@keyframes mTick { from { transform: translateY(-38%); opacity: 0; filter: blur(3px); } }

/* ---------- Butonlar ---------- */
html.motion .btn-connect { transition: box-shadow .3s var(--e-soft), translate .35s var(--e-out), scale .5s var(--e-spring); }
html.motion .btn-connect:hover { transform: none; translate: 0 -2px; }
html.motion .btn { transition: box-shadow .25s, background .2s, border-color .2s, color .2s, scale .5s var(--e-spring); }
html.motion .btn-ghost { transition: border-color .2s, color .2s, background-color .2s, scale .5s var(--e-spring); }
html.motion .btn-steam { transition: border-color .2s, color .2s, background .2s, scale .5s var(--e-spring); }
.btn-ghost, .btn-steam { position: relative; overflow: hidden; isolation: isolate; }

/* Basma geri bildirimi: transform yerine bagimsiz `scale` (manyetik hareketle cakismaz) */
html.motion :is(.btn, .btn-connect, .btn-ghost, .btn-steam, .chip, .user-chip, .burger, .range-toggle button, .seg button, .m-sound-btn):active:not([disabled]) { scale: .965; transition-duration: .08s; }
html.motion .chip:active { transform: none; }
.user-chip, .burger, .range-toggle button, .seg button { transition: border-color .2s, color .2s, background .2s, scale .45s var(--e-spring); }

/* Tiklama isigi */
.m-ripple { position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); }

/* Kopyalandi durumu */
.btn-connect .bc-top { display: inline-block; }
.btn-connect.is-copied { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent), 0 18px 44px -14px var(--glow); animation: mCopied .9s var(--e-out); }
@keyframes mCopied { from { box-shadow: 0 0 0 0 rgba(53,208,127,.55), 0 18px 44px -14px var(--glow); } to { box-shadow: 0 0 0 16px rgba(53,208,127,0), 0 18px 44px -14px var(--glow); } }

/* ---------- Linkler: yonlu alt cizgi + metin yuvarlanmasi ---------- */
html.motion .nav-links a::after { width: 100%; transform: scaleX(0); transform-origin: right center; transition: transform .5s var(--e-out); }
html.motion .nav-links a:hover::after, html.motion .nav-links a.active::after { transform: scaleX(1); transform-origin: left center; }
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.roll-i { display: inline-block; transition: transform .55s var(--e-out); }
.roll-i::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--orange-2); }
a:hover > .roll .roll-i, a:focus-visible > .roll .roll-i { transform: translateY(-100%); }
@media (max-width: 860px) { .roll { overflow: visible; } .roll-i::after { display: none; } a:hover > .roll .roll-i { transform: none; } }

.foot-row .links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--e-out); }
.foot-row .links a:hover::after, .foot-row .links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.foot-row a { transition: color .25s; }

/* ---------- Menuler ---------- */
html.motion .menu-pop { transition: opacity .22s, transform .45s var(--e-out); transform: translateY(-10px) scale(.96); }
html.motion .menu-pop > * { opacity: 0; translate: 0 -6px; transition: opacity .2s, translate .35s var(--e-out), background-color .15s, color .15s; }
html.motion .user-menu.open .menu-pop > * { opacity: 1; translate: 0 0; }
html.motion .user-menu.open .menu-pop > :nth-child(1) { transition-delay: .03s; }
html.motion .user-menu.open .menu-pop > :nth-child(2) { transition-delay: .06s; }
html.motion .user-menu.open .menu-pop > :nth-child(3) { transition-delay: .09s; }
html.motion .user-menu.open .menu-pop > :nth-child(4) { transition-delay: .12s; }
html.motion .user-menu.open .menu-pop > :nth-child(5) { transition-delay: .15s; }
html.motion .user-menu.open .menu-pop > :nth-child(n+6) { transition-delay: .18s; }
html.motion .menu-pop a:hover, html.motion .menu-pop button:hover { translate: 3px 0; }
@media (max-width: 860px) {
  html.motion .nav-links { transition: max-height .55s var(--e-out); }
  html.motion .nav-links a { opacity: 0; translate: 0 -10px; transition: opacity .25s, translate .45s var(--e-out), color .2s; }
  html.motion .nav.open .nav-links a { opacity: 1; translate: 0 0; }
  html.motion .nav.open .nav-links a:nth-child(2) { transition-delay: .04s; }
  html.motion .nav.open .nav-links a:nth-child(3) { transition-delay: .08s; }
  html.motion .nav.open .nav-links a:nth-child(4) { transition-delay: .12s; }
  html.motion .nav.open .nav-links a:nth-child(5) { transition-delay: .16s; }
  html.motion .nav.open .nav-links a:nth-child(6) { transition-delay: .2s; }
}
.burger span { transition: top .35s var(--e-out), transform .45s var(--e-spring), opacity .2s; }

/* Sekme gostergesi: hafif yaylanma */
.seg .seg-ind { transition: left .5s var(--e-spring), width .5s var(--e-out), top .35s, height .35s; }

/* Destek listesi ogeleri */
html.motion .tlist > .titem { transition: border-color .2s, background-color .2s, translate .3s var(--e-out); }
html.motion .titem:hover { transform: none; translate: 3px 0; }

/* ---------- Bildirimler ---------- */
.toast { position: relative; overflow: hidden; }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; background: currentColor; opacity: .18; animation: mToastLife 3.2s linear forwards; }
.toast.err::after { animation-duration: 5.2s; }
.toast.ok::after { color: var(--ok); opacity: .5; }
.toast.err::after { color: var(--bad); opacity: .5; }
@keyframes mToastLife { to { transform: scaleX(0); } }
html.motion .toast { animation: mToastIn .6s var(--e-out) both; }
html.motion .toast.out { animation: mToastOut .32s var(--e-io) both; }
@keyframes mToastIn { from { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(6px); } }
@keyframes mToastOut { to { opacity: 0; transform: translateX(24px) scale(.97); filter: blur(4px); } }

/* Resim buyutme kapanisi */
.lightbox.out { animation: mFadeOut .22s ease-in both; }
.lightbox.out img { animation: mZoomOut .22s ease-in both; }
@keyframes mFadeOut { to { opacity: 0; } }
@keyframes mZoomOut { to { transform: scale(.94); opacity: 0; } }

/* ---------- Imlec isigi ---------- */
#m-glow { position: fixed; left: 0; top: 0; z-index: 1; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--orange) 15%, transparent), color-mix(in srgb, var(--orange) 5%, transparent) 40%, transparent 68%);
  transition: opacity .6s; will-change: transform; }
#m-glow.on { opacity: 1; }

/* ---------- Ses kontrolu ---------- */
.m-sound { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: flex; align-items: center; gap: 0; height: 42px; padding: 3px; border-radius: 30px;
  background: rgba(13,13,17,.82); border: 1px solid var(--line-2); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.9); transition: border-color .25s, box-shadow .3s, translate .45s var(--e-out), opacity .3s; }
.m-sound.tuck { translate: 0 calc(100% + 28px); opacity: 0; pointer-events: none; }
.m-sound:hover, .m-sound:focus-within { border-color: color-mix(in srgb, var(--orange) 50%, transparent); }
.m-sound.on { box-shadow: 0 14px 34px -18px rgba(0,0,0,.9), 0 0 24px -10px var(--glow); }
.m-sound-btn { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 12px 0 9px; border: 0; border-radius: 30px; background: none; cursor: pointer;
  color: var(--muted); font: 700 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; transition: color .2s, background .2s, scale .45s var(--e-spring); }
.m-sound-btn:hover { color: var(--text); background: rgba(255,255,255,.04); }
.m-sound.on .m-sound-btn { color: var(--orange-2); }
.m-sound-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.m-sound .m-wave { opacity: 0; transition: opacity .2s; }
.m-sound.on .m-wave { opacity: 1; }
.m-sound .m-x { transition: opacity .2s; }
.m-sound.on .m-x { opacity: 0; }
.m-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 14px; }
.m-eq i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; transition: height .3s; }
.m-sound.on .m-eq i { animation: mEq 1.1s ease-in-out infinite; }
.m-sound.on .m-eq i:nth-child(2) { animation-delay: -.35s; }
.m-sound.on .m-eq i:nth-child(3) { animation-delay: -.7s; }
.m-sound.on .m-eq i:nth-child(4) { animation-delay: -.2s; }
@keyframes mEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.m-vol { display: flex; align-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .45s var(--e-out), opacity .25s, padding .45s var(--e-out); }
.m-sound.on:hover .m-vol, .m-sound.on:focus-within .m-vol { width: 112px; opacity: 1; padding: 0 12px 0 4px; }
.m-vol input { width: 100%; height: 22px; accent-color: var(--orange); cursor: pointer; background: none; }
.m-vol input:focus-visible { outline-offset: 1px; }
@media (max-width: 640px) { .m-sound-btn .m-label { display: none; } .m-sound-btn { padding: 0 10px; } }
@media print { .m-sound, #m-glow { display: none; } }

/* ---------- Sayfa gecisleri: daha sinematik ---------- */
::view-transition-old(root) { animation: mVtOut .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: mVtIn .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes mVtOut { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes mVtIn { from { opacity: 0; transform: translateY(16px) scale(1.01); filter: blur(8px); } }
html.no-vt::view-transition-old(root), html.no-vt::view-transition-new(root) { animation: none; }

/* ---------- Azaltilmis hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  html.m-boot #nav > *, html.m-boot .hero *, html.m-boot .marquee, html.m-boot .page-hero *, html.m-boot .nf .reveal { opacity: 1 !important; }
  #m-glow { display: none; }
  .roll-i::after { display: none; }
  a:hover > .roll .roll-i { transform: none; }
}