/* ==========================================================================
   CYBERZ — SITE FOUNDATION
   Tokens · reset · typography · layout · buttons · nav · footer
   Loaded by every page. Page-specific rules live in css/<page>.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONTS — self-hosted (no third-party origin, no render-blocking CDN)
   Orbitron is a variable face: one 12 KB file covers 600/700/900.
   Barlow ships the two weights the site actually renders (400 / 600).
   All latin subset, woff2. Toplam 3 dosya, ~57 KB.
   font-display:optional + preload: yuz zamaninda gelirse kullanilir, gelmezse
   o sayfa yuklemesinde hic takas edilmez. Boylece font kaynakli CLS sifir.
   -------------------------------------------------------------------------- */
@font-face{
    font-family:'Orbitron';
    src:url('../assets/fonts/orbitron-var-2.woff2') format('woff2');
    font-weight:400 900;
    font-style:normal;
    font-display:optional;
}
@font-face{
    font-family:'Barlow';
    src:url('../assets/fonts/barlow-400.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:optional;
}
@font-face{
    font-family:'Barlow';
    src:url('../assets/fonts/barlow-600.woff2') format('woff2');
    font-weight:600; font-style:normal; font-display:optional;
}
/* Türkçe karakterler (ş ğ ı İ …): latin-ext alt kümeleri, yalnızca gerekince iner */
@font-face{ font-family:'Barlow'; src:url('../assets/fonts/barlow-400-ext.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Barlow'; src:url('../assets/fonts/barlow-600-ext.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------------
   TOKENS
   Every colour pair below was measured: the lowest ratio in the system is
   4.97:1 (danger-hard on bg-3). Body text sits at 11.8:1 or better.
   -------------------------------------------------------------------------- */
:root{
    /* grounds */
    --bg-0:#04060A;
    --bg-1:#06090F;
    --bg-2:#0B111A;
    --bg-3:#111926;

    /* lines */
    --line:#1B2533;
    --line-2:#27364A;

    /* text */
    --fg:#EEF3F8;
    --fg-2:#C3CEDA;
    --fg-3:#909FB0;

    /* oksitlenmis metal / yanmis yuzey — oyun icindeki malzemelerden */
    --rust:#6B4A32;
    --metal:#3A424D;

    /* accents — cyan is reserved for interaction and live state.
       Raw Energy oyunda camgobegi-yesil okuyor; --energy semantik takma adi
       "bu renk Raw Energy'yi temsil ediyor" demek, --cyan ise "bu ogeyle
       etkilesilebilir" demek. Ayni deger, farkli niyet. */
    --cyan:#00D4C8;
    --cyan-2:#00F3FF;
    --cyan-a:rgba(0,212,200,.14);
    --energy:var(--cyan);
    --energy-hot:#7CFFE8;
    --energy-a:var(--cyan-a);

    /* tozlu ortam isigi — saf sari degil, sahne aydinlatmasi gibi kirli */
    --amber:#E9A63C;      /* progress, time, roadmap */
    --amber-a:rgba(233,166,60,.14);

    --danger:#FF5C5C;     /* danger text */
    --danger-hard:#FF3A3A;/* danger graphics */

    /* type */
    --font-display:'Orbitron',ui-sans-serif,system-ui,sans-serif;
    --font-body:'Barlow','Segoe UI',ui-sans-serif,system-ui,sans-serif;
    /* Teknik metadata icin — feed kodu, kredi, dosya numarasi. Sistem yuzu,
       dorduncu bir woff2 indirmiyoruz. */
    --font-mono:ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Consolas,monospace;

    /* rhythm */
    --nav-h:68px;
    --shell:1400px;
    --rail-w:0px;          /* Raw Energy kondui genisligi; genis ekranda acilir */
    --gutter:clamp(20px,5vw,56px);
    --section-y:clamp(64px,8vw,112px);

    /* motion */
    --t-fast:150ms;
    --t:220ms;
    --t-slow:320ms;
    --ease:cubic-bezier(.22,1,.36,1);

    --radius:2px;
    color-scheme:dark;
}

/* --------------------------------------------------------------------------
   RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
    scrollbar-gutter:stable;
    scroll-padding-top:calc(var(--nav-h) + 16px);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
    min-height:100dvh;
    background:var(--bg-0);
    color:var(--fg-2);
    font-family:var(--font-body);
    font-size:1rem;
    line-height:1.6;
    font-weight:400;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:var(--cyan); text-decoration:none; }
a:hover{ color:var(--cyan-2); }

button{ font:inherit; color:inherit; background:none; border:none; }

::selection{ background:var(--cyan); color:var(--bg-0); }

/* Keyboard focus is always visible and never clipped by the chamfer */
:focus-visible{
    outline:2px solid var(--cyan-2);
    outline-offset:3px;
    border-radius:1px;
}
:focus:not(:focus-visible){ outline:none; }

.sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Skip link — first tab stop on every page */
.skip-link{
    position:absolute; top:-100px; left:16px; z-index:10000;
    background:var(--cyan); color:var(--bg-0);
    font-family:var(--font-display); font-weight:700;
    font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
    padding:14px 22px;
    transition:top var(--t) var(--ease);
}
.skip-link:focus{ top:12px; color:var(--bg-0); }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.05;
    color:var(--fg);
    text-wrap:balance;
    letter-spacing:-.01em;
}
/* display:flex/grid tasiyan bir sinif, UA'nin [hidden] kuralini eziyor.
   JS ile gizlenen bloklar (filtreler, detay gorunumu) bu yuzden ekranda kaliyordu. */
[hidden]{ display:none !important; }

h1,h2,h3,h4{ overflow-wrap:break-word; }   /* uzun tek kelime basliklar tasmasin */
h1{ font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900; letter-spacing:-.02em; }
h2{ font-size:clamp(1.75rem,3.4vw,2.75rem); font-weight:900; }
h3{ font-size:clamp(1.15rem,1.7vw,1.4rem); }
h4{ font-size:1rem; letter-spacing:.02em; }

p{ max-width:68ch; }

/* Small uppercase metadata label — the one place wide tracking belongs */
.eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-size:.8125rem;            /* 13px */
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--cyan);
    line-height:1;
}
.eyebrow--amber{ color:var(--amber); }
.eyebrow--danger{ color:var(--danger); }
.eyebrow::before{
    content:''; flex-shrink:0;
    width:22px; height:1px; background:currentColor; opacity:.65;
}
.eyebrow--dot::before{
    width:7px; height:7px; border-radius:50%; opacity:1;
}

.lede{
    font-size:clamp(1.0625rem,1.5vw,1.1875rem);
    line-height:1.65;
    color:var(--fg-2);
}
.muted{ color:var(--fg-3); }
.small{ font-size:.875rem; }

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */
.shell{
    width:100%;
    max-width:var(--shell);
    margin-inline:auto;
    padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); position:relative; }
.section--alt{ background:var(--bg-1); }
.section--tight{ padding-block:clamp(48px,5vw,72px); }

.section__head{
    display:flex; flex-direction:column; gap:14px;
    margin-bottom:clamp(32px,4vw,52px);
    max-width:62ch;
}
.section__head h2{ margin:0; }
.section__head p{ margin:0; }

/* one hairline, not a grid of them */
.hr{
    height:1px; border:0;
    background:linear-gradient(90deg,var(--line-2),transparent);
}

/* --------------------------------------------------------------------------
   BUTTONS
   Chamfered corners keep the game-UI signature. 48px min height clears the
   44×44 target requirement with room to spare.
   -------------------------------------------------------------------------- */
.btn{
    --btn-bg:transparent;
    --btn-fg:var(--fg);
    --btn-bd:var(--line-2);
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:11px;
    min-height:48px;
    padding:12px 30px;
    background:var(--btn-bg);
    color:var(--btn-fg);
    border:1px solid var(--btn-bd);
    font-family:var(--font-display);
    font-size:.8125rem; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase;
    white-space:nowrap; cursor:pointer;
    /* uzun etiketli bir CTA dar ekranda kaptan tasip kirpilmasin */
    max-width:100%;
    clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
    transition:background var(--t) var(--ease),
               border-color var(--t) var(--ease),
               color var(--t) var(--ease),
               transform var(--t-fast) var(--ease);
}
/* Dar ekranda tek satira sigmayan etiket sarilsin; buton kesilmesin.
   min-height korunur, dokunma hedefi 48px altina inmez. */
@media (max-width:430px){
    .btn{
        white-space:normal; text-align:center;
        padding-inline:20px; line-height:1.25;
    }
    .btn-row > .btn{ flex:1 1 100%; }
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex-shrink:0; }

.btn--primary{
    --btn-bg:var(--cyan);
    --btn-fg:var(--bg-0);
    --btn-bd:var(--cyan);
    box-shadow:0 0 0 1px rgba(0,212,200,.25), 0 8px 28px -10px rgba(0,212,200,.55);
}
.btn--primary:hover{ --btn-bg:var(--cyan-2); --btn-bd:var(--cyan-2); color:var(--bg-0); }

.btn--ghost{ --btn-bd:var(--line-2); --btn-fg:var(--fg); }
.btn--ghost:hover{ --btn-bd:var(--cyan); --btn-fg:var(--cyan); background:var(--cyan-a); }

.btn--sm{ min-height:44px; padding:10px 20px; font-size:.75rem; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* --------------------------------------------------------------------------
   NAVIGATION
   -------------------------------------------------------------------------- */
.nav{
    position:fixed; inset:0 0 auto 0; z-index:900;
    height:var(--nav-h);
    display:flex; align-items:center;
    background:linear-gradient(to bottom,rgba(3,5,10,.92),rgba(3,5,10,.34) 70%,transparent);
    border-bottom:1px solid transparent;
    transition:background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav.is-stuck{
    background:rgba(4,7,13,.96);
    border-bottom-color:var(--line);
    backdrop-filter:blur(14px) saturate(1.15);
    -webkit-backdrop-filter:blur(14px) saturate(1.15);
}
.nav__inner{
    width:100%; max-width:var(--shell); margin-inline:auto;
    padding-inline:var(--gutter);
    display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.nav__brand{ display:flex; align-items:center; flex-shrink:0; min-height:44px; }
.nav__brand img{ height:30px; width:auto; }

.nav__links{
    display:flex; align-items:center; gap:clamp(14px,2vw,28px);
    margin-inline-start:auto;
}
.nav__link{
    position:relative;
    display:inline-flex; align-items:center;
    min-height:44px; padding:0 2px;
    font-family:var(--font-display);
    font-size:.75rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-3);
    transition:color var(--t) var(--ease);
    white-space:nowrap;
}
.nav__link::after{
    content:''; position:absolute; left:0; right:100%; bottom:12px;
    height:2px; background:var(--cyan);
    transition:right var(--t) var(--ease);
}
.nav__link:hover{ color:var(--fg); }
.nav__link:hover::after{ right:0; }
.nav__link[aria-current="true"],
.nav__link.is-active{ color:var(--fg); }
.nav__link[aria-current="true"]::after,
.nav__link.is-active::after{ right:0; }

.nav__cta{ margin-inline-start:clamp(8px,1.5vw,20px); }

/* Dil secici (EN | TR) — js/i18n.js ekler */
.nav__lang{
    display:inline-flex; align-items:center; gap:7px;
    min-height:34px; padding:0 10px;
    background:none; border:1px solid var(--line-2); color:var(--fg-3);
    font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
    cursor:pointer; transition:border-color var(--t) var(--ease);
}
.nav__lang:hover{ border-color:var(--cyan); }
.nav__lang span.is-on{ color:var(--cyan); }
.nav__lang i{ width:1px; height:12px; background:var(--line-2); }
@media (max-width:1100px){ .nav__lang{ align-self:flex-start; margin:14px 0 6px; } }

/* Kilitli sayfa baglantisi (Pitch Deck): kucuk kilit simgesi */
.nav__link--lock{ gap:7px; color:var(--amber); }
.nav__link--lock svg{ width:11px; height:11px; flex-shrink:0; }
.nav__link--lock::after{ background:var(--amber); }
.nav__link--lock:hover{ color:var(--amber); }

/* 7 baglanti + CTA orta genislikte tek satira sigsin (hamburger 1040px'te acilir) */
/* Türkçe etiketler daha uzun: geniş ekranda da sıkı dizilim */
html[lang="tr"] .nav__links{ gap:12px; }
html[lang="tr"] .nav__link{ font-size:.6875rem; letter-spacing:.07em; }
html[lang="tr"] .nav__cta{ margin-inline-start:6px; padding-inline:14px; font-size:.75rem; }
html[lang="tr"] .nav__lang{ padding:0 8px; }
@media (max-width:1200px) and (min-width:1101px){ html[lang="tr"] .nav__cta{ display:none; } }   /* TR: dar masaüstünde demo düğmesi hero'da zaten var */
@media (max-width:1280px) and (min-width:1101px){
    .nav__links{ gap:12px; }
    .nav__link{ font-size:.6875rem; letter-spacing:.08em; }
    .nav__cta{ margin-inline-start:6px; padding-inline:16px; }
}

.nav__burger{
    display:none;
    width:46px; height:46px;
    margin-inline-start:auto;
    align-items:center; justify-content:center;
    border:1px solid var(--line-2);
    cursor:pointer;
    transition:border-color var(--t) var(--ease);
}
.nav__burger:hover{ border-color:var(--cyan); }
.nav__burger span{
    position:relative; display:block;
    width:18px; height:1.5px; background:var(--fg);
    transition:transform var(--t) var(--ease), background var(--t) var(--ease);
}
.nav__burger span::before,
.nav__burger span::after{
    content:''; position:absolute; left:0;
    width:18px; height:1.5px; background:var(--fg);
    transition:transform var(--t) var(--ease), top var(--t) var(--ease);
}
.nav__burger span::before{ top:-6px; }
.nav__burger span::after{ top:6px; }
.nav__burger[aria-expanded="true"] span{ background:transparent; }
.nav__burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1100px){
    .nav__burger{ display:inline-flex; }
    .nav__links{
        position:fixed; inset:var(--nav-h) 0 auto 0;
        flex-direction:column; align-items:stretch; gap:0;
        margin:0;
        padding:8px var(--gutter) 26px;
        background:rgba(4,7,13,.98);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        border-bottom:1px solid var(--line);
        max-height:0; overflow:hidden;
        visibility:hidden; opacity:0;
        transition:max-height var(--t-slow) var(--ease),
                   opacity var(--t) var(--ease),
                   visibility 0s linear var(--t-slow);
    }
    .nav__links.is-open{
        max-height:calc(100dvh - var(--nav-h));
        overflow-y:auto;
        visibility:visible; opacity:1;
        transition-delay:0s;
    }
    .nav__link{
        min-height:52px; font-size:.9375rem;
        border-bottom:1px solid var(--line);
    }
    .nav__link::after{ display:none; }
    .nav__link[aria-current="true"],
    .nav__link.is-active{ color:var(--cyan); }
    .nav__cta{ margin:20px 0 0; width:100%; }
}

/* --------------------------------------------------------------------------
   PAGE OFFSET (pages that don't open with a full-bleed hero)
   -------------------------------------------------------------------------- */
.page-top{ padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px)); }

/* --------------------------------------------------------------------------
   FOOTER — compact
   -------------------------------------------------------------------------- */
.footer{
    background:var(--bg-1);
    border-top:1px solid var(--line);
    padding-block:clamp(40px,5vw,56px) 28px;
}
.footer__grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(28px,5vw,64px);
    align-items:start;
}
.footer__brand img{ height:34px; width:auto; margin-bottom:16px; }
.footer__brand p{ max-width:44ch; color:var(--fg-3); font-size:.9375rem; }

.footer__cols{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(20px,4vw,48px);
}
.footer__col h2{
    font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--fg-3); margin-bottom:14px; font-weight:600;
}
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.footer__col a{
    display:inline-flex; align-items:center;
    min-height:40px;
    color:var(--fg-2); font-size:.9375rem;
    transition:color var(--t) var(--ease);
}
.footer__col a:hover{ color:var(--cyan); }

.footer__social{ display:flex; flex-wrap:wrap; gap:8px; }
.footer__social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    border:1px solid var(--line);
    color:var(--fg-3);
    transition:color var(--t) var(--ease), border-color var(--t) var(--ease),
               background var(--t) var(--ease);
}
.footer__social a:hover{ color:var(--cyan); border-color:var(--cyan); background:var(--cyan-a); }
.footer__social svg{ width:18px; height:18px; fill:currentColor; }

.footer__bar{
    margin-top:clamp(28px,4vw,44px);
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; gap:12px 24px;
    align-items:center; justify-content:space-between;
    color:var(--fg-3); font-size:.8125rem;
}
.footer__bar a{ color:var(--fg-3); }
.footer__bar a:hover{ color:var(--cyan); }

@media (max-width:760px){
    .footer__grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
    .footer__cols{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   SHARED DECOR — used sparingly, half the density of the old build
   -------------------------------------------------------------------------- */
.corner-frame{ position:relative; }
.corner-frame::before,
.corner-frame::after{
    content:''; position:absolute; width:20px; height:20px;
    border-color:var(--cyan); border-style:solid; opacity:.5;
    pointer-events:none;
}
.corner-frame::before{ top:0; left:0; border-width:1px 0 0 1px; }
.corner-frame::after{ bottom:0; right:0; border-width:0 1px 1px 0; }

/* --------------------------------------------------------------------------
   MOTION PREFERENCES
   Content must remain visible when animation is switched off.
   -------------------------------------------------------------------------- */
.reveal{
    opacity:0; transform:translateY(14px);
    transition:opacity 420ms var(--ease), transform 420ms var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
    .reveal{ opacity:1 !important; transform:none !important; }
}
/* No JS: never leave content hidden */
.no-js .reveal{ opacity:1; transform:none; }

/* Küçük ekranda etiketlerin sarmasını önle */
@media (max-width:520px){
    .eyebrow{ letter-spacing:.14em; }
}


/* --------------------------------------------------------------------------
   TECHNICAL METADATA
   Monospace is reserved for things that are literally readouts: feed codes,
   credit balances, file numbers, percentages. Never for prose.
   -------------------------------------------------------------------------- */
.mono{
    font-family:var(--font-mono);
    font-size:.75rem;
    letter-spacing:.06em;
    font-variant-numeric:tabular-nums;
    color:var(--fg-3);
}

/* Honest labelling. Anything the player cannot do today wears this. */
.tag{
    /* Uzun etiketler (ornegin "upcoming feature" uyarisi) dar ekranda
       kirpilmasin diye sarilabilir; elmas isaret ilk satirda kalir. */
    display:inline-flex; align-items:flex-start; gap:8px;
    max-width:100%;
    padding:5px 11px;
    border:1px solid var(--line-2);
    font-family:var(--font-mono); font-size:.6875rem;
    line-height:1.45;
    letter-spacing:.14em; text-transform:uppercase;
    color:var(--fg-3);
    text-align:left;
}
.tag::before{
    content:''; width:6px; height:6px; flex-shrink:0;
    margin-top:.42em;
    background:currentColor;
    clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.tag--upcoming{ color:var(--amber); border-color:rgba(233,166,60,.4); }
.tag--live{ color:var(--energy); border-color:rgba(0,212,200,.4); }


/* --------------------------------------------------------------------------
   RAW ENERGY CONDUIT
   Sayfanin sol kenarindan inen kablo. Dolgusu scroll ilerlemesine bagli,
   her bolumde bir eklem yaniyor. Gezinme gorevi navigasyonda oldugu icin
   burasi tamamen dekoratif -> a11y agacindan cikarildi, odak almiyor.
   -------------------------------------------------------------------------- */
.conduit{ display:none; }

@media (min-width:1520px) and (prefers-reduced-motion:no-preference){
    :root{ --rail-w:64px; }
    .conduit{
        display:block;
        position:fixed; left:0; top:0; bottom:0; width:var(--rail-w);
        z-index:850; pointer-events:none;
    }
    .conduit svg{ width:100%; height:100%; overflow:visible; }
    .conduit__track{ stroke:var(--line); stroke-width:1; fill:none; }
    .conduit__live{
        stroke:var(--energy); stroke-width:1.5; fill:none;
        filter:drop-shadow(0 0 5px rgba(0,212,200,.75));
    }
    .conduit__node{ fill:var(--bg-0); stroke:var(--line-2); stroke-width:1; }
    .conduit__node.is-hot{
        fill:var(--energy); stroke:var(--energy-hot);
        filter:drop-shadow(0 0 7px rgba(0,212,200,.9));
    }
    .conduit__cap{
        fill:var(--energy-hot);
        filter:drop-shadow(0 0 9px rgba(124,255,232,.95));
    }
}

/* Dar ekranda kablo yerine ince bir sarj cizgisi — ayni bilgi, sifir alan. */
.charge{
    position:fixed; left:0; right:0; top:var(--nav-h); height:2px;
    z-index:880; background:transparent; pointer-events:none;
}
.charge__fill{
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--energy),var(--energy-hot));
    box-shadow:0 0 10px rgba(0,212,200,.6);
}
@media (min-width:1520px) and (prefers-reduced-motion:no-preference){
    .charge{ display:none; }
}

/* Footer alıntısı — Steam metninden, tek satır, sessiz. */
.footer__quote{
    margin:clamp(28px,4vw,44px) 0 0;
    text-align:center; max-width:none;
    font-family:var(--font-mono); font-size:.75rem;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--fg-3);
}
.footer__quote::before{ content:'— '; color:var(--energy); }
.footer__quote::after{ content:' —'; color:var(--energy); }