/* Ecela Games studio page. Night neon, tokens from Documentation/SongDuel/UI/design_tokens.v0.1.json. System fonts only, no external asset. */
:root{--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--canvas:#090F18;--surface:#111B2A;--raised:#1A293C;--ink:#F2F6FC;--ink2:#B4C3D6;--mute:#90A2BA;--lime:#DDFC76;--teal:#70E2DA;--peach:#FFBC89;--line:#31435B;--focus:#fff;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html[lang="en"] [lang="tr"],html:not([lang="en"]) [lang="en"]{display:none}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--canvas);color:var(--ink);font:400 16px/24px var(--sans);overflow-x:hidden;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,rgba(112,226,218,.16),transparent 70%),radial-gradient(50% 35% at 85% 100%,rgba(221,252,118,.09),transparent 70%)}
.grid{position:fixed;left:0;right:0;bottom:0;height:46vh;pointer-events:none;opacity:.5;background:repeating-linear-gradient(90deg,rgba(112,226,218,.16) 0 1px,transparent 1px 56px),repeating-linear-gradient(0deg,rgba(112,226,218,.16) 0 1px,transparent 1px 44px);-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)}
main{position:relative;flex:1;width:100%;max-width:560px;margin:0 auto;padding:16px 20px 32px}
.top{display:flex;justify-content:flex-end}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:rgba(17,27,42,.7)}
.lang button{font:600 12px/18px var(--sans);letter-spacing:.08em;color:var(--ink2);background:transparent;border:0;border-radius:999px;min-width:44px;min-height:40px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--lime);color:#101711}
.lang button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(32px,10vh,88px) 0 clamp(32px,8vh,64px)}
.mark{width:72px;height:72px;filter:drop-shadow(0 0 14px rgba(221,252,118,.45))}
.wordmark{margin:20px 0 0;display:flex;flex-direction:column;align-items:center;font-weight:800;font-style:italic;line-height:1;text-transform:uppercase}
.w1{font-size:clamp(48px,17vw,92px);letter-spacing:.04em;background:linear-gradient(100deg,var(--lime),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(112,226,218,.35))}
.w2{margin-top:10px;font-size:clamp(14px,4.6vw,22px);font-weight:700;letter-spacing:.62em;margin-right:-.62em;color:var(--ink2)}
.label{margin:0 0 12px;font:600 12px/18px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.card{display:flex;align-items:center;gap:20px;padding:20px;background:linear-gradient(135deg,var(--surface),var(--raised));border:1px solid var(--line);border-radius:16px;box-shadow:0 0 0 1px rgba(112,226,218,.06),0 12px 40px rgba(0,0,0,.35);position:relative;overflow:hidden}
.card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--lime),var(--teal));box-shadow:0 0 14px var(--teal)}
.road{flex:none;width:72px;height:72px;color:var(--teal);filter:drop-shadow(0 0 8px rgba(112,226,218,.5))}
.body{min-width:0}
.card h3{margin:0;font:800 28px/32px var(--sans);font-style:italic;letter-spacing:.02em;color:var(--ink)}
.tag{margin:4px 0 12px;color:var(--ink2)}
.chip{display:inline-block;padding:2px 12px;border:1px solid var(--peach);border-radius:999px;color:var(--peach);font:600 12px/20px var(--sans);letter-spacing:.1em;text-transform:uppercase}
footer{position:relative;width:100%;max-width:560px;margin:0 auto;padding:20px 20px 28px;border-top:1px solid var(--line);text-align:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink2);text-decoration:none;font-weight:500;overflow-wrap:anywhere}
footer a:hover{color:var(--lime);text-decoration:underline;text-underline-offset:4px}
.op{margin:4px 0 0;color:var(--mute);font-size:14px;line-height:20px}
.nf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.code{margin:0;font:800 72px/1 var(--sans);font-style:italic;background:linear-gradient(100deg,var(--lime),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--lime);color:#101711;font-weight:700;text-decoration:none}
@media (prefers-reduced-motion:no-preference){.mark{animation:pulse 4s ease-in-out infinite}@keyframes pulse{50%{filter:drop-shadow(0 0 22px rgba(112,226,218,.6))}}}
@media (max-width:360px){main{padding-left:16px;padding-right:16px}.card{gap:14px;padding:16px}.road{width:56px;height:56px}}