/* ===================================================================== RCK TEMA SİSTEMİ — renk + aydınlık/karanlık iki eksenli tema motoru. Her token html[data-theme][data-mode] ile geçersiz kılınır; JS tarafı sadece bu iki attribute'u üzerine yazar, kalan her şey (arkaplan, buton, kart, oyun canvas'ları, 2048 küpleri) tamamen CSS custom property'lerinden akar. Yeni bir renk-alfa ihtiyacı olduğunda rgba(...) yazmak yerine color-mix(in srgb, var(--x) Y%, transparent) kullanılır — böylece tema değişince otomatik güncellenir. ===================================================================== */:root{/* ---- Nova (varsayılan) · Karanlık ---- */--void:#0a0413;--deep:#160a2b;--panel:#1c0f38;--panel-2:#140a28;--stage:#08030f;--royal:#5b21b6;--violet:#8b5cf6;--violet-2:#4c2a8f;--violet-edge:#3a1f6e;--pink:#ff5fc4;--pink-2:#c04fe0;--pink-hot:#ff2fb8;--ember:#ff2f6a;--pale:#e9def6;--ink:#ffffff;--on-accent:#ffffff;--muted:#8a8a99;--muted-2:#6b6478;--success:#7cffb2;--warning:#ffcc66;--warning-2:#ffb84d;--danger:#ff5f5f;--danger-2:#ff2f6a;--line:color-mix(in srgb, var(--ink) 9%, transparent);--container:1120px}/* ---- Aydınlık/Karanlık mod: durum renkleri temadan bağımsız ---- */html[data-mode="light"]{--success:#16a34a;--warning:#c2660a;--warning-2:#a8560a;--danger:#dc2626;--danger-2:#be123c;--muted:#9aa0ae;--muted-2:#c2c7d1}/* ---- Nova · Aydınlık ---- */html[data-theme="nova"][data-mode="light"]{--void:#f8f5fd;--deep:#efe6fb;--panel:#ffffff;--panel-2:#f5eefc;--stage:#ece3f9;--royal:#7c3aed;--violet:#8b5cf6;--violet-2:#6d3fc9;--violet-edge:#5b3aa0;--pink:#d6249f;--pink-2:#b23fc9;--pink-hot:#c11189;--ember:#e0355f;--pale:#4a3d63;--ink:#1a1030}/* ---- Aurora · mavi/camgöbeği ---- */html[data-theme="aurora"]{--void:#020617;--deep:#0a1128;--panel:#0f1b3d;--panel-2:#0b1530;--stage:#020510;--royal:#1d4ed8;--violet:#3b82f6;--violet-2:#1e40af;--violet-edge:#1e3a8a;--pink:#22d3ee;--pink-2:#0891b2;--pink-hot:#06b6d4;--ember:#0ea5e9;--pale:#dbeafe;--ink:#ffffff}html[data-theme="aurora"][data-mode="light"]{--void:#f3f8ff;--deep:#e6f1fd;--panel:#ffffff;--panel-2:#eef5fd;--stage:#e2eefc;--royal:#1d4ed8;--violet:#2563eb;--violet-2:#1e40af;--violet-edge:#1e3a8a;--pink:#0e7490;--pink-2:#0e7490;--pink-hot:#0369a1;--ember:#0284c7;--pale:#33415a;--ink:#0b1220}/* ---- Goth · obsidyen siyah / kızıl şarap / kemik ---- */html[data-theme="goth"]{--void:#07050a;--deep:#100b14;--panel:#17111d;--panel-2:#120d17;--stage:#050308;--royal:#4a0f24;--violet:#6b1d3a;--violet-2:#4c1229;--violet-edge:#3a0e20;--pink:#c8102e;--pink-2:#9f1239;--pink-hot:#e11d48;--ember:#b8860b;--pale:#d9d2dc;--ink:#f3eef5}html[data-theme="goth"][data-mode="light"]{--void:#f4f1f2;--deep:#e9e3e6;--panel:#ffffff;--panel-2:#f1ecee;--stage:#e4dde1;--royal:#7a1130;--violet:#8b1e3f;--violet-2:#6b1d3a;--violet-edge:#4a0f24;--pink:#9f1239;--pink-2:#881337;--pink-hot:#be123c;--ember:#92400e;--pale:#4a3a42;--ink:#1a0d13}/* ---- Terra · yeşil/lime ---- */html[data-theme="terra"]{--void:#020805;--deep:#08170f;--panel:#0e2318;--panel-2:#0a1c12;--stage:#020604;--royal:#14532d;--violet:#22c55e;--violet-2:#15803d;--violet-edge:#166534;--pink:#a3e635;--pink-2:#84cc16;--pink-hot:#65a30d;--ember:#4ade80;--pale:#dcfce7;--ink:#ffffff}html[data-theme="terra"][data-mode="light"]{--void:#f5fdf7;--deep:#e8f8ec;--panel:#ffffff;--panel-2:#eefaf1;--stage:#e3f6e8;--royal:#15803d;--violet:#16a34a;--violet-2:#166534;--violet-edge:#14532d;--pink:#65a30d;--pink-2:#4d7c0f;--pink-hot:#3f6212;--ember:#059669;--pale:#365a42;--ink:#0b1f13}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scrollbar-gutter:stable}body{background:var(--void);color:var(--pale);font-family:'Manrope',sans-serif;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}ul{list-style:none}button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}::selection{background:var(--pink-hot);color:var(--on-accent)}a:focus-visible,button:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}.container{max-width:var(--container);margin:0 auto;padding:0 24px}.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pink);display:inline-flex;align-items:center;gap:.6em;margin-bottom:18px;opacity:.9}.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px 2px var(--pink);flex-shrink:0}.glow{text-shadow:0 0 12px color-mix(in srgb, var(--pink) 55%, transparent),0 0 32px color-mix(in srgb, var(--violet) 45%, transparent),0 0 64px color-mix(in srgb, var(--violet) 25%, transparent)}h1,h2,h3{font-family:'Unbounded',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.01em}section{position:relative;padding:110px 0}@media(max-width:720px){section{padding:76px 0}}.section-head{max-width:640px;margin-bottom:56px}.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink)}.section-head p{margin-top:14px;color:var(--pale);opacity:.75;font-size:1.02rem}.about-ctas{display:flex;gap:16px;flex-wrap:wrap}/* ---------- HUB (Hakkımda + Mağazalarım + İletişim tek blokta) ---------- Üç ayrı tam-ekran section yerine tek bir "bento" ızgara: üstte yan yana Hakkımda + Mağazalarım (ikisi de kompakt), altta geniş İletişim şeridi. Amaç: aşağı kaydırma miktarını belirgin şekilde azaltmak. */#hub{padding:64px 0 96px}.hub-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:20px}.hub-panel{position:relative;border:1px solid var(--line);border-radius:22px;padding:28px 28px;background:color-mix(in srgb, var(--ink) 3%, transparent);transition:border-color .3s ease,box-shadow .4s ease;scroll-margin-top:100px}.hub-panel-about{grid-column:1;grid-row:1}.hub-panel-stores{grid-column:2;grid-row:1}.hub-panel-time{grid-column:1/-1;grid-row:2}.hub-panel-contact{grid-column:1/-1;grid-row:3}.hub-panel .eyebrow{margin-bottom:10px}.hub-panel h2{font-size:clamp(1.25rem,2vw,1.6rem);color:var(--ink);margin-bottom:8px}.hub-panel > p,.hub-panel-about p{color:var(--pale);opacity:.75;font-size:.88rem;line-height:1.5;margin-bottom:18px}.hub-panel-about .about-ctas{gap:12px}.age-counter{display:inline;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;letter-spacing:-.02em;text-shadow:0 0 12px color-mix(in srgb, var(--pink-hot) 35%, transparent);white-space:nowrap}@media(max-width:600px){.age-counter{white-space:normal}}.hub-panel-about .btn{padding:10px 16px;font-size:.85rem}/* Seçili (tıklanan) ya da üzerinde durulan kutu parlar — şeffaflaşma yok, sadece glow. */.hub-grid:not(:hover) .hub-panel.hub-active,.hub-panel:hover{border-color:color-mix(in srgb, var(--pink-hot) 65%, transparent);box-shadow:0 0 22px color-mix(in srgb, var(--pink-hot) 40%, transparent),0 0 46px color-mix(in srgb, var(--violet) 28%, transparent),inset 0 0 18px color-mix(in srgb, var(--pink-hot) 10%, transparent)}@media(max-width:900px){.hub-grid{grid-template-columns:1fr;grid-template-rows:none;gap:20px}.hub-panel-about,.hub-panel-stores,.hub-panel-time,.hub-panel-contact{grid-column:1;grid-row:auto}}@media(max-width:600px){.hub-panel{padding:24px 20px}}/* ---------- SAAT FARKI (Bizde / Sende) ---------- Hub'ın ortasındaki tam genişlik panel: solda Rod'un saati (GMT+3), sağda ziyaretçinin saati, aralarında fark rozeti. Kartlar birer "pencere": gece tabanının üstünde şafak / gündüz / gün batımı katmanları, JS'nin yazdığı --tz-* opaklıklarıyla karışır; güneş ve ay --sun-* / --moon-* ile yay üzerinde yürür. Gece tabanı ve tepeler temanın --royal rengiyle, köşe parıltısı --pink-hot ile boyanır. Aydınlık modda da gökyüzü aynı kalır; kart içi yazılar hep açık renk. */.tz-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;margin-bottom:18px}.hub-panel .tz-head h2{margin-bottom:0}.tz-summary{max-width:440px;text-align:right;font-size:.9rem;line-height:1.5;color:color-mix(in srgb, var(--pale) 82%, transparent)}.tz-summary strong{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--ink);white-space:nowrap;text-shadow:0 0 12px color-mix(in srgb, var(--pink-hot) 40%, transparent)}.tz-skies{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:14px}.tz-skies.is-same{grid-template-columns:1fr}.tz-skies.is-same #tzYou,.tz-skies.is-same .tz-bridge{display:none}.tz-card{container:tzcard/inline-size;position:relative;isolation:isolate;overflow:hidden;min-height:232px;border-radius:18px;color:#fff;border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);box-shadow:0 22px 44px -26px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease}.tz-skies.is-same .tz-card{min-height:250px}.tz-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb, var(--pink-hot) 45%, transparent);box-shadow:0 26px 50px -26px rgba(0,0,0,.8),0 0 30px color-mix(in srgb, var(--pink-hot) 20%, transparent)}/* -- gökyüzü katmanları -- */.tz-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 75% at 50% 110%, color-mix(in srgb, var(--royal) 60%, transparent) 0%, transparent 65%),linear-gradient(180deg, color-mix(in srgb, var(--royal) 16%, #02030a) 0%, color-mix(in srgb, var(--royal) 30%, #0b0d26) 100%)}.tz-sky > *{position:absolute}.tz-sky::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(75% 65% at 96% -12%, color-mix(in srgb, var(--pink-hot) 26%, transparent), transparent 70%)}.tz-layer{inset:0}.tz-layer-dawn{opacity:var(--tz-dawn,0);background:linear-gradient(180deg,#1c2656 0%,#5a4a8c 36%,#d6828f 68%,#ffc493 100%)}.tz-layer-day{opacity:var(--tz-day,0);background:linear-gradient(180deg,#2860b3 0%,#4b8bd4 46%,#9dcaee 100%)}.tz-layer-dusk{opacity:var(--tz-dusk,0);background:linear-gradient(180deg,#211747 0%,#5f2a71 32%,#c64c7a 62%,#ff955e 86%,#ffbe80 100%)}.tz-stars{inset:0 0 34% 0;z-index:2;opacity:var(--tz-night,1)}.tz-stars::before{/* soluk samanyolu bandı */content:"";position:absolute;inset:-20% -10%;background:linear-gradient(118deg, transparent 32%, rgba(210,200,255,.06) 44%, rgba(225,215,255,.1) 50%, rgba(210,200,255,.06) 56%, transparent 68%)}.tz-star{position:absolute;width:var(--s,1.5px);height:var(--s,1.5px);border-radius:50%;background:#fff;box-shadow:0 0 4px 1px rgba(255,255,255,.5);opacity:.85;animation:tzTwinkle var(--d,3.6s) ease-in-out var(--dl,0s) infinite}@keyframes tzTwinkle{0%,100%{opacity:.18}50%{opacity:1}}.tz-shoot{position:absolute;width:86px;height:1.5px;border-radius:2px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.95));opacity:0;transform-origin:100% 50%;animation:tzShoot var(--sd,13s) linear var(--sdl,3s) infinite}@keyframes tzShoot{0%{opacity:0;transform:rotate(24deg) translateX(-40px) scaleX(.3)}1.5%{opacity:1}6%{opacity:0;transform:rotate(24deg) translateX(150px) scaleX(1)}100%{opacity:0;transform:rotate(24deg) translateX(150px) scaleX(1)}}.tz-clouds{inset:0;z-index:3;opacity:var(--tz-cloud,.1)}.tz-cloud-track{position:absolute;left:0;width:100%;height:0;transform:translateX(var(--cx,20%));animation:tzDrift var(--cd,100s) linear var(--cdl,0s) infinite}.tz-cloud{--cc:color-mix(in srgb, #fff, #ffb39e var(--cloud-warm,0%));/* gün batımında pembeleşir */position:absolute;left:0;top:0;width:var(--w,120px);height:calc(var(--w,120px) * .34);background:radial-gradient(38% 62% at 28% 62%, color-mix(in srgb, var(--cc) 90%, transparent), transparent 72%),radial-gradient(34% 78% at 52% 42%, color-mix(in srgb, var(--cc) 95%, transparent), transparent 72%),radial-gradient(38% 60% at 76% 64%, color-mix(in srgb, var(--cc) 85%, transparent), transparent 72%)}@keyframes tzDrift{from{transform:translateX(-60%)}to{transform:translateX(105%)}}/* Güneş ufka yakınken arkasındaki göğü ısıtan geniş parıltı */.tz-glow{z-index:2;left:var(--sun-x,50%);top:var(--sun-y,120%);width:340px;height:190px;margin:-95px 0 0 -170px;background:radial-gradient(closest-side, rgba(255,176,102,.6), rgba(255,120,90,.22) 55%, transparent);opacity:calc(var(--sun-o,0) * var(--sun-glow,0))}.tz-sun{z-index:3;left:var(--sun-x,50%);top:var(--sun-y,120%);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:radial-gradient(circle, #fffdf3 0%, #ffeab0 45%, color-mix(in srgb, #ffc56a, #ff6b3d var(--sun-warm,0%)) 100%);box-shadow:0 0 16px 4px color-mix(in srgb, #ffd98f, #ff7a45 var(--sun-warm,0%)),0 0 54px 18px color-mix(in srgb, color-mix(in srgb, #ffd98f, #ff7a45 var(--sun-warm,0%)) 42%, transparent);opacity:var(--sun-o,0)}.tz-sun::after{content:"";position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, #ffd98f 38%, transparent), transparent 68%);animation:tzBreath 6s ease-in-out infinite}@keyframes tzBreath{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.12);opacity:1}}.tz-moon{z-index:3;left:var(--moon-x,50%);top:var(--moon-y,120%);width:26px;height:26px;margin:-13px 0 0 -13px;overflow:visible;opacity:var(--moon-o,0);filter:drop-shadow(0 0 5px rgba(226,232,255,.7)) drop-shadow(0 0 16px rgba(186,200,255,.35))}.tz-moon-dark{fill:rgba(205,214,255,.14)}.tz-moon-lit{fill:#f6f4ff}.tz-hills{left:0;bottom:0;width:100%;height:46%;z-index:4;display:block}/* Uzak tepe opak (arkasındaki güneş/ay sızmasın); rengi ufuktaki göğün tonuyla (--tz-haze, JS) karışarak günün saatine göre puslanır. */.tz-hill-far{fill:color-mix(in srgb, var(--tz-haze,#241a3d) 32%, color-mix(in srgb, var(--royal) 30%, #0c0b1f))}.tz-hill-near{fill:color-mix(in srgb, var(--royal) 20%, #050410)}.tz-lights{left:0;bottom:0;width:100%;height:46%;z-index:5;opacity:var(--tz-lights,0)}.tz-light{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd58c;box-shadow:0 0 6px 2px rgba(255,186,105,.55);animation:tzFlicker var(--d,4s) ease-in-out var(--dl,0s) infinite}@keyframes tzFlicker{0%,100%{opacity:1}40%{opacity:.55}60%{opacity:.9}}/* İlk çizimde gökyüzü "geceden açılmasın" diye geçişler JS hazır olunca açılır */.tz-ready .tz-layer,.tz-ready .tz-stars,.tz-ready .tz-clouds,.tz-ready .tz-glow,.tz-ready .tz-lights,.tz-ready .tz-sun,.tz-ready .tz-moon{transition:opacity 1.6s ease}/* -- kart yazıları -- */.tz-card-body{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px 16px 18px}.tz-card-body::before{/* alt kısımda okunabilirlik için hafif karartma */content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg, rgba(4,3,12,.6) 0%, rgba(4,3,12,.18) 42%, transparent 62%)}.tz-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.tz-who,.tz-phase{display:inline-flex;align-items:center;gap:7px;min-width:0;padding:5px 11px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.94);background:rgba(8,6,22,.52);border:1px solid rgba(255,255,255,.14)}.tz-who-text{overflow:hidden;text-overflow:ellipsis}.tz-who i{color:color-mix(in srgb, var(--pink-hot) 55%, #fff);font-size:.85em}.tz-phase{flex-shrink:0}.tz-phase i{color:#ffd98f}.tz-card[data-phase="evening"] .tz-phase i,.tz-card[data-phase="night"] .tz-phase i{color:#dfe5ff}.tz-clock{display:flex;align-items:baseline;font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(2.2rem, 11cqw, 3.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgba(0,0,0,.45),0 0 28px color-mix(in srgb, var(--pink-hot) 32%, transparent)}.tz-skies.is-same .tz-clock{font-size:clamp(2.4rem, 8cqw, 4rem)}.tz-colon{margin:0 .03em;animation:tzColon 1s ease-in-out infinite}@keyframes tzColon{0%,100%{opacity:1}50%{opacity:.3}}.tz-ss{margin-left:.4em;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.38em;letter-spacing:0;opacity:.72}.tz-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:9px;font-size:.78rem;font-weight:600;color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.4)}.tz-offset{padding:3px 9px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:600;letter-spacing:.06em;color:#fff;text-shadow:none;background:color-mix(in srgb, var(--pink-hot) 34%, rgba(8,6,22,.45));border:1px solid color-mix(in srgb, var(--pink-hot) 60%, transparent);box-shadow:0 0 14px color-mix(in srgb, var(--pink-hot) 30%, transparent)}.tz-rel{padding:2px 7px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2)}.tz-rel:empty{display:none}/* -- iki kartın arasındaki fark rozeti -- */.tz-bridge{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:66px;min-height:66px;padding:8px 12px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:600;white-space:nowrap;color:var(--ink);background:color-mix(in srgb, var(--panel) 94%, transparent);border:1px solid color-mix(in srgb, var(--pink-hot) 55%, transparent);box-shadow:0 0 0 5px color-mix(in srgb, var(--void) 72%, transparent),0 0 26px color-mix(in srgb, var(--pink-hot) 34%, transparent);pointer-events:none}.tz-bridge i{color:var(--pink);font-size:.8rem}@container tzcard (max-width:380px){.tz-phase-text{display:none}.tz-phase{padding:5px 8px}}@container tzcard (max-width:300px){.tz-card-body{padding:12px 13px 14px 14px}.tz-who{font-size:.58rem;letter-spacing:.08em}}@media(max-width:720px){.tz-summary{text-align:left}.tz-skies{grid-template-columns:1fr;gap:12px}.tz-card{min-height:204px}.tz-skies.is-same .tz-card{min-height:220px}.tz-bridge{flex-direction:row;gap:7px;min-width:0;min-height:0;padding:6px 13px}.tz-bridge i{transform:rotate(90deg)}}/* Ekran dışındayken, performans modunda ve "hareketi azalt" tercihinde sürekli dönen küçük animasyonlar durur; gökyüzü yine doğru çizilir. */.tz-skies.is-paused .tz-star,.tz-skies.is-paused .tz-shoot,.tz-skies.is-paused .tz-cloud-track,.tz-skies.is-paused .tz-light,.tz-skies.is-paused .tz-colon,.tz-skies.is-paused .tz-sun::after{animation-play-state:paused}html.perf-mode .tz-star,html.perf-mode .tz-cloud-track,html.perf-mode .tz-light,html.perf-mode .tz-colon,html.perf-mode .tz-sun::after{animation:none}html.perf-mode .tz-shoot{display:none}html.perf-mode .tz-moon{filter:none}html.perf-mode .tz-card{box-shadow:none}html.perf-mode .tz-who,html.perf-mode .tz-phase{background:rgba(8,6,22,.52)}@media(prefers-reduced-motion:reduce){.tz-star,.tz-cloud-track,.tz-light,.tz-colon,.tz-sun::after{animation:none}.tz-shoot{display:none}}/* ---------- reveal on scroll (v3: "düşüş") ---------- Öğe ekrana girerken YUKARIDAN aşağıya düşüp yumuşakça oturur (hafif bir aşma payıyla "tok" bir iniş). Sadece opacity + transform: blur/filter yok, boyama yok, GPU'da çalışır — düşük sistemlerde de akıcı kalır. Giriş geçişleri öğe yerine oturana kadar (JS .fx-settled ekleyene dek) !important ile zorlanır — kartların kendi transition kuralları reveal'ı ezmesin; oturduktan sonra her kartın kendi hover geçişleri geri gelir. in-view kuralı bilerek burada (dosyanın başında) duruyor: aynı özgüllükteki :hover kuralları sonra geldiği için hover transform'u kazanır. */.reveal{opacity:0;transform:translate3d(0,-44px,0) scale(.972);transform-origin:50% 0}:where(.reveal) .reveal:not(.in-view){transform:translate3d(0,-28px,0) scale(.955)}.reveal.in-view{opacity:1;transform:none}.reveal:not(.fx-settled){transition:opacity .8s ease-out,transform 1.25s cubic-bezier(.2,1.14,.34,1) !important;transition-delay:var(--reveal-delay, 0s) !important}html.perf-mode .reveal:not(.in-view){transform:translate3d(0,-18px,0)}html.perf-mode .reveal:not(.fx-settled){transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1) !important;transition-delay:var(--reveal-delay, 0s) !important}@media(prefers-reduced-motion:reduce){.reveal:not(.in-view){transform:none}.reveal:not(.fx-settled){transition:opacity .4s ease !important;transition-delay:0s !important}}/* ---------- NAV ---------- */header{position:fixed;top:0;left:0;right:0;z-index:100;background:color-mix(in srgb, var(--void) 84%, transparent);border-bottom:1px solid var(--line)}nav{max-width:var(--container);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:.5em}.brand .dot{color:var(--pink)}.nav-left{display:flex;align-items:center;gap:16px}.status-badge{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--success);padding:6px 12px;border-radius:100px;border:1px solid color-mix(in srgb, var(--success) 35%, transparent);background:color-mix(in srgb, var(--success) 8%, transparent);cursor:default}.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px 2px var(--success);animation:pulseDot 1.8s ease-in-out infinite;flex-shrink:0}@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}/* Yazı sadece imleç ikonun üzerine gelince açılır — normalde sadece nokta görünüp yer kaplamasın diye. */.status-badge span{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .3s ease,opacity .2s ease}.status-badge:hover span{max-width:120px;opacity:1}@media(max-width:520px){.status-badge{padding:6px 7px}}@media(max-width:420px){nav{padding:14px 16px}.nav-left{gap:8px}.brand{font-size:.95rem}.nav-cta{padding:8px 13px;font-size:.78rem;gap:6px}}.nav-links{display:flex;gap:14px;font-size:.92rem;font-weight:600}.nav-links a{display:inline-flex;align-items:center;opacity:.75;transition:opacity .25s ease,color .25s ease,background .3s ease,box-shadow .35s ease,border-color .3s ease,transform .25s ease;position:relative;padding:9px 18px;border-radius:12px;border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);background:color-mix(in srgb, var(--ink) 3%, transparent)}.nav-links a:hover{opacity:1;color:var(--pink);border-color:color-mix(in srgb, var(--pink) 45%, transparent)}.nav-links a.active{opacity:1;color:var(--ink);border-color:color-mix(in srgb, var(--pink-hot) 65%, transparent);background:color-mix(in srgb, var(--pink-hot) 16%, transparent);box-shadow:0 0 16px color-mix(in srgb, var(--pink-hot) 55%, transparent),0 0 34px color-mix(in srgb, var(--violet) 35%, transparent),inset 0 0 12px color-mix(in srgb, var(--pink-hot) 20%, transparent)}.nav-links.has-active a:not(.active){opacity:.75}.nav-cta{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px;border:1px solid color-mix(in srgb, var(--pink) 50%, transparent);font-size:.85rem;font-weight:700;color:var(--ink);background:color-mix(in srgb, var(--pink) 8%, transparent);transition:box-shadow .3s ease,background .3s ease,transform .2s ease;white-space:nowrap}.nav-cta:hover{box-shadow:0 0 22px color-mix(in srgb, var(--pink) 50%, transparent);background:color-mix(in srgb, var(--pink) 18%, transparent);transform:translateY(-1px)}@media(max-width:760px){.nav-left,.nav-right{flex-shrink:0}.nav-links{flex-shrink:1;min-width:0;gap:10px;font-size:.84rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}.nav-links::-webkit-scrollbar{display:none}.nav-links li{flex-shrink:0}.nav-links a{padding:7px 13px;border-radius:10px}}.nav-right{display:flex;align-items:center;gap:10px}/* ---------- SETTINGS (hamburger + drawer) ---------- */.settings-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:100px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 3%, transparent);color:var(--pale);gap:0;transition:border-color .3s ease,color .3s ease,background .3s ease,transform .2s ease}.settings-toggle:hover{border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:var(--pink);transform:translateY(-1px)}.settings-toggle .bars{width:16px;height:12px;position:relative}.settings-toggle .bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}.settings-toggle .bars span:nth-child(1){top:0}.settings-toggle .bars span:nth-child(2){top:5px}.settings-toggle .bars span:nth-child(3){top:10px}.settings-toggle.is-open .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}.settings-toggle.is-open .bars span:nth-child(2){opacity:0}.settings-toggle.is-open .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}/* ---------- İlk ziyarette ayarlar ikonuna dikkat çekme efekti ---------- */.settings-toggle.rck-attract{position:relative;border-color:color-mix(in srgb, var(--pink) 55%, transparent);color:var(--pink);animation:rckAttractBounce 1.8s ease-in-out infinite}.settings-toggle.rck-attract::before,.settings-toggle.rck-attract::after{content:'';position:absolute;inset:0;border-radius:100px;border:1.5px solid var(--pink);pointer-events:none}.settings-toggle.rck-attract::before{animation:rckAttractRing 1.8s ease-out infinite}.settings-toggle.rck-attract::after{animation:rckAttractRing 1.8s ease-out infinite;animation-delay:.6s}.settings-toggle-hint{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);white-space:nowrap;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--pink);color:var(--on-accent, #fff);opacity:0;pointer-events:none;z-index:40;box-shadow:0 6px 18px color-mix(in srgb, var(--pink) 40%, transparent);transition:opacity .35s ease,transform .35s ease}.settings-toggle-hint::before{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--pink)}.settings-toggle-hint.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}@keyframes rckAttractBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes rckAttractRing{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pink) 55%, transparent);opacity:1;transform:scale(1)}100%{box-shadow:0 0 0 0 transparent;opacity:0;transform:scale(1.55)}}@media(prefers-reduced-motion:reduce){.settings-toggle.rck-attract{animation:none}.settings-toggle.rck-attract::before,.settings-toggle.rck-attract::after{animation:none;display:none}}.settings-overlay{position:fixed;inset:0;z-index:1100;background:color-mix(in srgb, var(--void) 60%, transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s ease}.settings-overlay.is-open{opacity:1;pointer-events:auto}.settings-drawer{position:fixed;top:0;left:0;bottom:0;width:320px;max-width:86vw;z-index:1101;background:linear-gradient(180deg,var(--panel),var(--deep));border-right:1px solid color-mix(in srgb, var(--violet) 35%, transparent);box-shadow:30px 0 80px rgba(0,0,0,.45);transform:translateX(-100%);transition:transform .35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow-y:auto}.settings-drawer.is-open{transform:translateX(0)}.settings-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;border-bottom:1px solid var(--line);flex-shrink:0}.settings-drawer-header h3{font-family:'Unbounded',sans-serif;color:var(--ink);font-size:1.05rem}.settings-drawer-close{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--pale);font-size:1.3rem;line-height:1;transition:border-color .25s ease,color .25s ease,background .25s ease}.settings-drawer-close:hover{border-color:var(--pink);color:var(--pink);background:color-mix(in srgb, var(--pink) 8%, transparent)}.settings-section{padding:22px;border-bottom:1px solid var(--line)}.settings-section:last-child{border-bottom:none}.settings-section-title{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 50%, transparent);margin-bottom:16px;display:flex;align-items:center;gap:8px}.volume-row{display:flex;align-items:center;gap:14px}.volume-btn{flex-shrink:0;width:40px;height:40px;border-radius:100px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 3%, transparent);color:var(--pale);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:border-color .25s ease,color .25s ease,background .25s ease}.volume-btn:hover{border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:var(--pink)}.volume-btn.is-muted{color:color-mix(in srgb, var(--pale) 40%, transparent)}.volume-slider-wrap{flex:1;display:flex;flex-direction:column;gap:6px}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;background:linear-gradient(90deg, var(--pink-hot) var(--vol-pct,70%), color-mix(in srgb, var(--ink) 12%, transparent) var(--vol-pct,70%));outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--on-accent);border:3px solid var(--pink-hot);box-shadow:0 2px 8px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.volume-slider::-moz-range-track{height:6px;border-radius:100px;background:color-mix(in srgb, var(--ink) 12%, transparent)}.volume-slider::-moz-range-progress{height:6px;border-radius:100px;background:var(--pink-hot)}.volume-slider::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--on-accent);border:3px solid var(--pink-hot);cursor:pointer}.volume-value{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:color-mix(in srgb, var(--pale) 55%, transparent);text-align:right}.lang-list{display:flex;flex-direction:column;gap:6px}.lang-option{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:1px solid transparent;background:color-mix(in srgb, var(--ink) 2%, transparent);color:var(--pale);text-align:left;transition:border-color .2s ease,background .2s ease,color .2s ease}.lang-option:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}.lang-option .flag{font-size:1.25rem;line-height:1;flex-shrink:0}.lang-option .lang-name{flex:1;font-weight:600;font-size:.92rem}.lang-option .lang-check{flex-shrink:0;font-size:.85rem;color:var(--pink);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}.lang-option.is-active{border-color:color-mix(in srgb, var(--pink) 45%, transparent);background:color-mix(in srgb, var(--pink) 8%, transparent);color:var(--ink)}.lang-option.is-active .lang-check{opacity:1;transform:scale(1)}/* ---------- ROZETLER / BAŞARIMLAR ---------- */.settings-section-title .achievements-progress{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:color-mix(in srgb, var(--pale) 60%, transparent);font-weight:400}.achievements-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.achievement-badge{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 3%, transparent);color:color-mix(in srgb, var(--pale) 35%, transparent);font-size:1.05rem;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .15s ease}.achievement-badge:hover{transform:translateY(-2px)}.achievement-badge.is-unlocked{background:linear-gradient(135deg, color-mix(in srgb, var(--royal) 30%, transparent), color-mix(in srgb, var(--pink-hot) 30%, transparent));border-color:color-mix(in srgb, var(--pink-hot) 50%, transparent);color:var(--ink);box-shadow:0 4px 14px color-mix(in srgb, var(--pink-hot) 25%, transparent)}.achievement-badge.is-selected{outline:2px solid var(--pink-hot);outline-offset:2px}.achievements-detail{margin:12px 0 0;min-height:34px;font-family:'Manrope',sans-serif;font-size:.8rem;line-height:1.4;color:color-mix(in srgb, var(--pale) 75%, transparent)}.achievements-detail strong{color:var(--ink);display:block;font-size:.85rem;margin-bottom:2px}.achievement-toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-140%);z-index:2000;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:16px;background:color-mix(in srgb, var(--panel) 92%, transparent);backdrop-filter:blur(12px);border:1px solid color-mix(in srgb, var(--pink-hot) 45%, var(--line));box-shadow:0 12px 32px rgba(0,0,0,.4);transition:transform .4s cubic-bezier(.16,1,.3,1);pointer-events:none}.achievement-toast.is-visible{transform:translate(-50%,0)}.achievement-toast i{font-size:1.4rem;color:#ffd166}.achievement-toast-label{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 65%, transparent)}.achievement-toast-title{font-family:'Unbounded',sans-serif;font-size:.88rem;color:var(--ink);margin-top:2px}/* ---------- PERFORMANS MODU ANAHTARI ---------- Ayarlar panelinde, düşük donanımlı cihazlar için ağır blur/glow efektlerini tek bir tıkla kapatan toggle. */.perf-row{margin-top:2px}.perf-toggle{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 3%, transparent);cursor:pointer;transition:background .18s ease,border-color .18s ease}.perf-toggle:hover{border-color:color-mix(in srgb, var(--pink-hot) 45%, var(--line))}.perf-toggle-text{flex:1;display:flex;flex-direction:column;gap:2px}.perf-toggle-title{font-family:'Manrope',sans-serif;font-weight:700;font-size:.9rem;color:var(--ink)}.perf-toggle-hint{font-family:'Manrope',sans-serif;font-weight:500;font-size:.72rem;line-height:1.35;color:color-mix(in srgb, var(--ink) 60%, transparent)}.perf-switch{position:relative;width:44px;height:24px;flex:0 0 auto}.perf-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}.perf-switch-slider{position:absolute;inset:0;border-radius:999px;background:color-mix(in srgb, var(--ink) 12%, transparent);border:1px solid var(--line);transition:background .18s ease,border-color .18s ease}.perf-switch-slider::before{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--pale);box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .22s cubic-bezier(.4,.9,.4,1.2),background .18s ease}.perf-switch input:checked ~ .perf-switch-slider{background:linear-gradient(115deg, var(--pink-hot), var(--violet));border-color:transparent}.perf-switch input:checked ~ .perf-switch-slider::before{transform:translateX(20px);background:#fff}.perf-switch input:focus-visible ~ .perf-switch-slider{outline:2px solid var(--pink-hot);outline-offset:2px}/* Aktif olduğunda: pahalı efektleri sıfırla */html.perf-mode .blob,html.perf-mode .sparkle,html.perf-mode .hero-glow{display:none !important}html.perf-mode .hero h1{animation:heroEnter .9s cubic-bezier(.16,1,.3,1) both !important;filter:none !important}html.perf-mode *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}html.perf-mode .status-badge::before,html.perf-mode .scroll-cue,html.perf-mode .bob,html.perf-mode .pixel-dot{animation:none !important}html.perf-mode .card-spotlight::before,html.perf-mode .store-card::before,html.perf-mode .game-launch-card::before,html.perf-mode .discord-card::before,html.perf-mode .contact-tile::before{display:none !important}/* Extra low-end: heavy shadows & continuous animations off, simpler transitions */html.perf-mode .game-launch-card,html.perf-mode .store-card,html.perf-mode .hub-panel,html.perf-mode .settings-drawer,html.perf-mode .nav-links a,html.perf-mode .btn-primary,html.perf-mode .btn-secondary{box-shadow:none !important;transition-duration:.12s !important}html.perf-mode .settings-toggle.rck-attract,html.perf-mode .settings-toggle.rck-attract::before,html.perf-mode .settings-toggle.rck-attract::after{animation:none !important}html.perf-mode .coming-soon-icon{box-shadow:none !important}@media(max-width:340px){.achievements-grid{grid-template-columns:repeat(5,1fr)}}/* ---------- THEME SWITCHER (settings drawer) ---------- */.theme-mode-row{display:flex;gap:8px;margin-bottom:14px;border-radius:12px;background:color-mix(in srgb, var(--ink) 4%, transparent);padding:4px;border:1px solid var(--line)}.theme-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;border-radius:9px;font-family:'Manrope',sans-serif;font-weight:600;font-size:.82rem;color:color-mix(in srgb, var(--pale) 65%, transparent);transition:background .2s ease,color .2s ease,box-shadow .2s ease}.theme-mode-btn i{font-size:.85rem}.theme-mode-btn:hover{color:var(--pale)}.theme-mode-btn.is-active{background:linear-gradient(120deg,var(--royal),var(--pink-hot));color:var(--on-accent);box-shadow:0 4px 14px color-mix(in srgb, var(--pink-hot) 35%, transparent)}/* ---------- SFX PACK PICKER (settings drawer) ---------- */.sfx-pack-label{margin:12px 0 8px;font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 55%, transparent)}.sfx-pack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sfx-pack-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border-radius:11px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 4%, transparent);font-family:'Manrope',sans-serif;font-weight:700;font-size:.72rem;color:color-mix(in srgb, var(--pale) 65%, transparent);transition:background .2s ease,color .2s ease,transform .18s ease,box-shadow .2s ease,border-color .2s ease}.sfx-pack-btn i{font-size:.95rem}.sfx-pack-btn:hover{color:var(--pale);transform:translateY(-2px)}.sfx-pack-btn.is-active{background:linear-gradient(120deg,var(--royal),var(--pink-hot));border-color:transparent;color:var(--on-accent);box-shadow:0 4px 14px color-mix(in srgb, var(--pink-hot) 35%, transparent)}.sfx-pack-btn.is-active i{animation:sfxPackPulse .55s ease}@keyframes sfxPackPulse{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}html.perf-mode .sfx-pack-btn.is-active i{animation:none}.theme-swatch-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-swatch{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:color-mix(in srgb, var(--ink) 2%, transparent);color:var(--pale);text-align:left;transition:border-color .2s ease,background .2s ease,color .2s ease}.theme-swatch:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}.theme-swatch-dot{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid color-mix(in srgb, var(--ink) 20%, transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--void) 25%, transparent)}.theme-swatch-dot[data-theme-preview="nova"]{background:linear-gradient(135deg,#5b21b6,#ff2fb8)}.theme-swatch-dot[data-theme-preview="aurora"]{background:linear-gradient(135deg,#1d4ed8,#22d3ee)}.theme-swatch-dot[data-theme-preview="goth"]{background:linear-gradient(135deg,#0b0710,#6b1d3a 55%,#e11d48)}.theme-swatch-dot[data-theme-preview="terra"]{background:linear-gradient(135deg,#14532d,#a3e635)}.theme-swatch-dot[data-theme-preview="custom"]{background:conic-gradient(from 0deg, #ff3b3b, #ffd23b, #3bff6e, #3bd4ff, #6e3bff, #ff3bd4, #ff3b3b)}.theme-swatch-name{flex:1;font-weight:600;font-size:.85rem}.theme-swatch .lang-check{flex-shrink:0;font-size:.8rem;color:var(--pink);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}.theme-swatch.is-active{border-color:color-mix(in srgb, var(--pink) 45%, transparent);background:color-mix(in srgb, var(--pink) 8%, transparent);color:var(--ink)}.theme-swatch.is-active .lang-check{opacity:1;transform:scale(1)}.theme-swatch-custom{grid-column:1/-1;justify-self:center;width:calc(50% - 4px)}/* ---------- Özel tema: tam renk seçici ---------- */.theme-hue-row{margin-top:2px;display:flex;flex-direction:column;gap:8px}.theme-hue-row.is-hidden{display:none}.theme-hue-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 55%, transparent)}.theme-color-picker-row{display:flex;align-items:center;gap:12px}.theme-color-picker{-webkit-appearance:none;appearance:none;flex-shrink:0;width:52px;height:38px;padding:0;border-radius:10px;border:1px solid var(--line);background:none;cursor:pointer}.theme-color-picker::-webkit-color-swatch-wrapper{padding:3px}.theme-color-picker::-webkit-color-swatch{border:none;border-radius:7px}.theme-color-picker::-moz-color-swatch{border:none;border-radius:7px}.theme-color-picker-hint{font-family:'Manrope',sans-serif;font-size:.78rem;color:color-mix(in srgb, var(--pale) 70%, transparent)}@media(max-width:420px){.settings-drawer{width:290px}.theme-swatch-list{grid-template-columns:1fr}.theme-swatch-custom{width:100%}}/* ---------- HERO ---------- */.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:96px;position:relative}.hero-glow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg, #000 0, #000 62%, transparent 100%);mask-image:linear-gradient(180deg, #000 0, #000 62%, transparent 100%)}.blob{position:absolute;border-radius:50%;opacity:.55;will-change:transform}.blob-1{width:520px;height:520px;background:radial-gradient(circle, var(--royal), transparent 70%);top:-140px;left:-120px;animation:float1 16s ease-in-out infinite alternate}.blob-2{width:460px;height:460px;background:radial-gradient(circle, var(--pink-hot), transparent 70%);bottom:-160px;right:-100px;animation:float2 19s ease-in-out infinite alternate}.blob-3{width:360px;height:360px;background:radial-gradient(circle, var(--violet), transparent 70%);top:78%;left:14%;opacity:.3;animation:float1 22s ease-in-out infinite alternate-reverse}/* ---------- HERO PARILTILARI (sparkle) ---------- "Cutecore" hissini güçlendiren, hafifçe yanıp sönen küçük nokta ışıklar. Sabit (JS'siz) konumlarla, farklı gecikme/süre değerleriyle dağıtılmış — performans maliyeti neredeyse sıfır, sadece opacity/transform animasyonu. */.sparkle{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:currentColor;box-shadow:0 0 6px 1px currentColor;opacity:0;animation:sparkleTwinkle var(--dur,4s) ease-in-out var(--delay,0s) infinite}@keyframes sparkleTwinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.85;transform:scale(1)}}.hero-glow.is-offscreen .blob,.hero-glow.is-offscreen .sparkle,.hero.is-offscreen h1{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.blob,.sparkle,.hero h1,.hero p,.hero-ctas,.pixel-dot,.bob,.settings-toggle.rck-attract,.settings-toggle.rck-attract::before,.settings-toggle.rck-attract::after{animation:none !important}}@keyframes float1{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,60px) scale(1.12)}}@keyframes float2{from{transform:translate(0,0) scale(1)}to{transform:translate(-50px,-40px) scale(1.08)}}.hero-content{position:relative;z-index:1;max-width:940px;padding:0 24px}.hero h1{font-size:clamp(3rem,9vw,6.4rem);padding:0 .15em;font-weight:900;background:linear-gradient(115deg,var(--ink) 10%, var(--pink) 55%, color-mix(in srgb, var(--violet) 65%, var(--ink) 35%) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroEnter .9s cubic-bezier(.16,1,.3,1) both}@keyframes pulseGlow{0%,100%{filter:drop-shadow(0 0 20px color-mix(in srgb, var(--pink) 45%, transparent))}50%{filter:drop-shadow(0 0 32px color-mix(in srgb, var(--violet) 50%, transparent))}}/* ---------- HERO GİRİŞ ANİMASYONU ---------- Sayfa ilk açıldığında başlık/metin/butonlar kademeli olarak yukarı doğru belirir; sayfanın geri kalanındaki .reveal sisteminin (scroll'a bağlı) hero'daki karşılığı — hero zaten ilk karede görünür olduğundan scroll beklemeden, sabit gecikmelerle kendiliğinden oynar. */@keyframes heroEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}.hero p{margin:26px auto 0;max-width:540px;font-size:1.08rem;color:color-mix(in srgb, var(--pale) 85%, transparent);animation:heroEnter .9s cubic-bezier(.16,1,.3,1) .12s both}.hero-ctas{margin-top:40px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:heroEnter .9s cubic-bezier(.16,1,.3,1) .22s both}.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:100px;font-weight:700;font-size:.95rem;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease}.btn-primary{background:linear-gradient(120deg,var(--royal),var(--pink-hot));color:var(--on-accent);box-shadow:0 0 0 color-mix(in srgb, var(--pink-hot) 0%, transparent)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px color-mix(in srgb, var(--pink-hot) 45%, transparent)}.btn-secondary{border:1px solid color-mix(in srgb, var(--ink) 25%, transparent);color:var(--ink);background:color-mix(in srgb, var(--ink) 3%, transparent)}.btn-secondary:hover{border-color:var(--pink);box-shadow:0 0 20px color-mix(in srgb, var(--pink) 30%, transparent);transform:translateY(-2px)}.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:1;color:color-mix(in srgb, var(--ink) 45%, transparent);font-size:1.1rem;animation:bob 2.2s ease-in-out infinite}@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}/* ---------- STORES ---------- */.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}@media(max-width:900px){.store-grid{grid-template-columns:1fr}}.store-card{position:relative;background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), color-mix(in srgb, var(--ink) 0%, transparent));border:1px solid var(--line);border-radius:18px;padding:30px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s cubic-bezier(.16,1,.3,1)}.store-card::after{content:"";position:absolute;top:0;left:-140%;width:80%;height:100%;background:linear-gradient(115deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent), transparent);transform:skewX(-18deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}.store-card:hover::after{left:140%}.store-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.35)}.store-card.tier-epic-card:hover{border-color:color-mix(in srgb, var(--violet) 60%, transparent);box-shadow:0 16px 40px color-mix(in srgb, var(--violet) 25%, transparent)}.store-card.tier-legendary-card:hover{border-color:color-mix(in srgb, var(--pink-hot) 60%, transparent);box-shadow:0 16px 40px color-mix(in srgb, var(--pink-hot) 25%, transparent)}.store-card.tier-mythic-card:hover{border-color:color-mix(in srgb, var(--ink) 50%, transparent);box-shadow:0 16px 40px color-mix(in srgb, var(--ink) 15%, transparent)}.store-icon{width:42px;height:42px;border-radius:10px;background:color-mix(in srgb, var(--ink) 6%, transparent);display:flex;align-items:center;justify-content:center;margin-bottom:16px;overflow:hidden}.store-icon img{width:24px;height:24px;border-radius:4px}.store-icon i{font-size:1.1rem;color:var(--pale);display:none}.store-card h3{font-size:1.2rem;color:var(--ink);margin-bottom:8px}.store-card p{color:var(--pale);opacity:.72;font-size:.94rem;margin-bottom:22px;min-height:44px}.store-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--ink)}.store-link i{transition:transform .25s ease;font-size:.8rem}.store-card:hover .store-link i{transform:translateX(4px)}/* Hub içindeki Mağazalar paneli dar olduğundan kartları biraz sıkıştır */.hub-panel-stores .store-grid{grid-template-columns:repeat(3,1fr);gap:14px}.hub-panel-stores .store-card{padding:20px 16px}.hub-panel-stores .store-icon{width:34px;height:34px;margin-bottom:12px}.hub-panel-stores .store-icon img{width:20px;height:20px}.hub-panel-stores .store-card h3{font-size:1rem;margin-bottom:14px}.hub-panel-stores .store-link{font-size:.82rem}@media(max-width:560px){.hub-panel-stores .store-grid{grid-template-columns:1fr}}/* ---------- PROJECTS ---------- */.project-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:26px}.project-card{position:relative;background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 3%, transparent), color-mix(in srgb, var(--ink) 0%, transparent));border:1px solid var(--line);border-radius:18px;padding:30px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s cubic-bezier(.16,1,.3,1)}.project-card::after{content:"";position:absolute;top:0;left:-140%;width:80%;height:100%;background:linear-gradient(115deg, transparent, color-mix(in srgb, var(--ink) 10%, transparent), transparent);transform:skewX(-18deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}.project-card:is(:hover,:focus-within)::after{transform:translateX(350%) skewX(-18deg);pointer-events:none}.project-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb, var(--pink-hot) 60%, transparent);box-shadow:0 16px 40px color-mix(in srgb, var(--pink-hot) 25%, transparent)}.project-icon{width:44px;height:44px;border-radius:11px;background:color-mix(in srgb, var(--ink) 6%, transparent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.project-icon i{font-size:1.3rem;color:var(--ink)}.project-card h3{font-size:1.2rem;color:var(--ink);margin-bottom:10px}.project-card p{color:var(--pale);opacity:.75;font-size:.92rem;line-height:1.55;margin-bottom:20px}.project-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.project-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--pale);background:color-mix(in srgb, var(--ink) 4%, transparent)}.project-badge i{font-size:.7rem;color:var(--pink-hot)}.project-link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--ink)}.project-link i{font-size:.8rem;transition:transform .25s ease}.project-link i:last-child{font-size:.75rem}.project-card:hover .project-link i:last-child{transform:translateX(4px)}@media(max-width:900px){.project-grid{grid-template-columns:1fr}}/* ---------- CONTACT ---------- */.discord-card{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:linear-gradient(120deg, color-mix(in srgb, var(--royal) 25%, transparent), color-mix(in srgb, var(--pink-hot) 12%, transparent));border:1px solid color-mix(in srgb, var(--pink) 35%, transparent);border-radius:20px;padding:36px 40px;margin-bottom:26px;box-shadow:0 0 50px color-mix(in srgb, var(--violet) 15%, transparent)}.discord-left{display:flex;align-items:center;gap:20px}.discord-icon{position:relative;width:60px;height:60px;border-radius:16px;background:color-mix(in srgb, var(--ink) 8%, transparent);display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--ink);flex-shrink:0;overflow:visible}.discord-icon img{width:100%;height:100%;border-radius:16px;object-fit:cover;display:none}.discord-status-dot{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;border:3px solid var(--deep);background:var(--muted);transition:background .3s ease,box-shadow .3s ease}.discord-status-dot.is-online{background:var(--success);box-shadow:0 0 8px 2px color-mix(in srgb, var(--success) 60%, transparent)}.discord-status-dot.is-idle{background:var(--warning);box-shadow:0 0 8px 2px color-mix(in srgb, var(--warning) 55%, transparent)}.discord-status-dot.is-dnd{background:var(--danger);box-shadow:0 0 8px 2px color-mix(in srgb, var(--danger) 55%, transparent)}.discord-status-dot.is-offline{background:var(--muted-2);box-shadow:none}.discord-card h3{font-size:1.3rem;color:var(--ink);margin-bottom:6px}.discord-card p{color:var(--pale);opacity:.8;font-size:.95rem;max-width:420px}.discord-presence-live{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-top:8px;color:color-mix(in srgb, var(--pale) 70%, transparent)}.dot-inline{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0;transition:background .3s ease,box-shadow .3s ease}.dot-inline.is-online{background:var(--success);box-shadow:0 0 6px 1px color-mix(in srgb, var(--success) 60%, transparent)}.dot-inline.is-idle{background:var(--warning);box-shadow:0 0 6px 1px color-mix(in srgb, var(--warning) 55%, transparent)}.dot-inline.is-dnd{background:var(--danger);box-shadow:0 0 6px 1px color-mix(in srgb, var(--danger) 55%, transparent)}.dot-inline.is-offline{background:var(--muted-2)}.tile-live-status{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.78rem;color:color-mix(in srgb, var(--pale) 60%, transparent)}.contact-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}@media(max-width:1024px){.contact-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.contact-grid{grid-template-columns:1fr}.discord-card{padding:28px 24px}}.contact-tile{background:color-mix(in srgb, var(--ink) 3%, transparent);border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:left;transition:border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}.contact-tile:hover{border-color:color-mix(in srgb, var(--pink) 45%, transparent);transform:translateY(-4px);box-shadow:0 12px 30px color-mix(in srgb, var(--pink) 15%, transparent)}.contact-tile i.tile-icon{font-size:1.1rem;color:var(--pink);margin-bottom:10px;display:block}.contact-tile .tile-icon-guns{width:22px;height:22px;color:var(--pink);margin-bottom:10px;display:block;transition:color .25s ease}.contact-tile .label{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 50%, transparent);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-tile .value{color:var(--ink);font-weight:700;font-size:.86rem;word-break:break-word}.contact-tile .copy-btn{margin-top:10px;font-size:.7rem;color:var(--pink);font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.contact-tile.is-link:hover .value{color:var(--pink)}/* İletişim paneli artık tam genişlikte (hub'ın alt şeridi), bu yüzden yalnızca hafif bir sıkılaştırma yeterli. */.hub-panel-contact .discord-card{padding:26px 30px;margin-bottom:20px}.hub-panel-contact .contact-grid{grid-template-columns:repeat(5,1fr)}@media(max-width:1024px){.hub-panel-contact .contact-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.hub-panel-contact .contact-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:420px){.hub-panel-contact .contact-grid{grid-template-columns:1fr}.hub-panel-contact .discord-card{padding:22px 22px}}/* ---------- KART SPOTLIGHT ---------- Store/oyun/discord/iletişim kartlarının üzerinde imleci yumuşakça takip eden bir parıltı. JS sadece --mx/--my CSS değişkenlerini günceller; görünürlük tamamen CSS ile (hover'da opacity 0→1) yönetiliyor. Var olan .store-card::after (shine sweep) ile çakışmasın diye ::before kullanılır — böylece ::before (spotlight) en altta, gerçek kart içeriği ortada, shine sweep en üstte kalır. Dokunmatik cihazlarda (hover yok) tamamen kapatılır. */.store-card,.game-launch-card,.discord-card,.contact-tile{position:relative}.store-card::before,.game-launch-card::before,.discord-card::before,.contact-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--pink) 16%, transparent), transparent 72%);opacity:0;transition:opacity .5s ease;pointer-events:none}.store-card:hover::before,.game-launch-card:hover::before,.discord-card:hover::before,.contact-tile:hover::before{opacity:1}@media(hover:none){.store-card::before,.game-launch-card::before,.discord-card::before,.contact-tile::before{display:none}}/* ---------- FOOTER ---------- */footer{border-top:1px solid var(--line);padding:36px 0;text-align:center;font-size:.85rem;color:color-mix(in srgb, var(--pale) 45%, transparent)}footer .brand{justify-content:center;margin-bottom:10px;font-size:.95rem}/* Hareketi azalt tercihine sadece sürekli/döngüsel dekoratif animasyonlarda uyuyoruz (blob'lar, parıltı, scroll ipucu, durum noktası). Kısa ve amaçlı geçişler (reveal, hover, modal, 2048 küpleri) bilinçli olarak etkilenmiyor — aksi halde bu tercih açıkken site "donuk" görünüyordu. */@media (prefers-reduced-motion: reduce){.blob-1,.blob-2,.blob-3,.hero h1.glow,.scroll-cue,.status-badge::before,.coming-soon-icon{animation:none !important}}/* ---------- MINI OYUN ---------- */body.game-no-scroll{overflow:hidden}.game-launch-card{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:linear-gradient(120deg, color-mix(in srgb, var(--royal) 22%, transparent), color-mix(in srgb, var(--pink-hot) 10%, transparent));border:1px solid color-mix(in srgb, var(--violet) 35%, transparent);border-radius:20px;padding:28px 32px;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .3s cubic-bezier(.16,1,.3,1)}.game-launch-card:hover,.game-launch-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb, var(--pink) 55%, transparent);box-shadow:0 16px 40px color-mix(in srgb, var(--violet) 22%, transparent)}.game-launch-left{display:flex;align-items:center;gap:20px}.game-launch-icon{flex-shrink:0;width:52px;height:52px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:5px;background:color-mix(in srgb, var(--ink) 5%, transparent);border:1px solid var(--line);border-radius:10px}.game-launch-icon span{border-radius:2px;background:color-mix(in srgb, var(--ink) 6%, transparent)}.game-launch-icon span:nth-child(1){background:var(--violet)}.game-launch-icon span:nth-child(5){background:var(--pink-hot)}.game-launch-icon span:nth-child(9){background:var(--royal)}.game-launch-card h3{font-size:1.15rem;color:var(--ink);margin-bottom:4px}.game-launch-card p{color:var(--pale);opacity:.8;font-size:.92rem}.game-launch-card p strong{color:var(--pink);font-family:'JetBrains Mono',monospace}.game-play-btn{flex-shrink:0;pointer-events:none}.game-coming-soon-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;background:color-mix(in srgb, var(--ink) 4%, transparent);border:1.5px dashed color-mix(in srgb, var(--violet) 38%, transparent);border-radius:20px;padding:36px 40px;min-height:140px}.coming-soon-icon{width:50px;height:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 5%, transparent);color:var(--pink);font-size:1.25rem;animation:comingSoonPulse 2.6s ease-in-out infinite}@keyframes comingSoonPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pink) 28%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb, var(--pink) 0%, transparent)}}html.perf-mode .coming-soon-icon{animation:none !important}.game-coming-soon-card h3{font-size:1.1rem;color:var(--ink);margin:0}.game-coming-soon-card p{color:var(--pale);opacity:.75;font-size:.88rem;max-width:280px;margin:0}.game-modal-overlay{position:fixed;inset:0;z-index:1000;background:color-mix(in srgb, var(--void) 78%, transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s ease}.game-modal-overlay.is-open{opacity:1;pointer-events:auto}.game-modal{width:100%;max-width:880px;background:linear-gradient(180deg,var(--panel),var(--deep));border:1px solid color-mix(in srgb, var(--violet) 40%, transparent);border-radius:22px;box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 3%, transparent) inset,0 30px 80px rgba(0,0,0,.55),0 0 60px color-mix(in srgb, var(--violet) 20%, transparent);padding:30px 30px 32px;transform:scale(.92) translateY(14px);transition:transform .3s ease;max-height:92vh;overflow:auto}.game-modal-overlay.is-open .game-modal{transform:scale(1) translateY(0)}.game-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.game-modal-title{display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;font-weight:700;color:var(--ink);font-size:1.3rem}.game-modal-title .pixel-dot{width:11px;height:11px;background:var(--pink);box-shadow:0 0 8px 2px var(--pink);border-radius:2px;flex-shrink:0}.game-modal-close{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--pale);font-size:1.5rem;line-height:1;transition:border-color .25s ease,color .25s ease,background .25s ease}.game-modal-close:hover{border-color:var(--pink);color:var(--pink);background:color-mix(in srgb, var(--pink) 8%, transparent)}.game-hud{display:flex;gap:22px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--pale);opacity:.85;margin-bottom:14px}.game-hud b{color:var(--pink);font-size:1.08rem}.game-canvas-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--stage);line-height:0;transition:min-height .3s ease}/* Ayarlar/liderlik/günlük mücadele paneli AÇIKKEN ya da henüz oyun başlamamışken/oyun bittiğinde gösterilen başlangıç ekranı (game-overlay-message) görünürken tuvale ekstra yükseklik ver. Aksi halde tuval kendi doğal en-boy oranıyla (ör. 640x220) çok dar ekranlarda aşırı kısalıyor ve üstteki metin + Başla + Liderlik/Paylaş/Günün Mücadelesi butonları kutunun dışına taşıp görünmez oluyordu — hem dar mobil ekranlarda hem de düşük çözünürlüklü/kısa pencereli masaüstülerinde. Panelin/mesajın kendi arka planı alanı zaten tamamen kapladığı için altta boşluk görünmez. */.game-canvas-wrap:has(.game-settings-panel:not(.is-hidden)),.game-canvas-wrap:has(.game-overlay-message:not(.is-hidden)){min-height:340px}@media(max-width:640px){.game-canvas-wrap:has(.game-settings-panel:not(.is-hidden)),.game-canvas-wrap:has(.game-overlay-message:not(.is-hidden)){min-height:300px}}#gameCanvas,#flapCanvas,#snakeCanvas{display:block;width:100%;height:auto;touch-action:none;cursor:pointer}/* Snake kare (1:1) bir tuvale sahip; modal genişliği büyüdükçe tuval de aynı oranda büyüyüp modalın ekrana sığmamasına yol açmasın diye üst sınır koyuyoruz. */#snakeModalOverlay .game-canvas-wrap{max-width:420px;margin:0 auto}#snakeModalOverlay .game-dpad{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,44px);gap:8px;margin-top:12px}.game-overlay-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:color-mix(in srgb, var(--void) 88%, transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);text-align:center;padding:20px;opacity:1;transition:opacity .2s ease;cursor:pointer;line-height:1.45/* .game-canvas-wrap'ten miras kalan line-height:0'ı geçersiz kılar — aksi halde başlık/alt yazı kutusu yükseklik olarak sıfıra çöküyor ve metinler alt alta değil üst üste biniyordu */}.game-overlay-message.is-hidden{opacity:0;pointer-events:none}.game-overlay-message h4{font-family:'Unbounded',sans-serif;color:var(--ink);font-size:1.1rem}.game-overlay-message p{color:var(--pale);opacity:.8;font-size:.85rem;max-width:340px}.game-overlay-message .btn{margin-top:4px;pointer-events:none}/* İkincil aksiyon butonlarını (Liderlik/Paylaş/Günün Mücadelesi/Ayarlar) alt alta dizmek yerine 2'li ızgara halinde göstererek hem yerden kazanılıyor hem de daha modern/derli toplu bir görünüm elde ediliyor. Tüm butonlar her zaman eşit genişlikte kalır (tek kalan buton olsa bile genişlemez, sadece kendi hücresinde durur). */.game-overlay-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:360px;margin-top:2px}.game-overlay-actions > *{margin-top:0 !important;width:100%}.game-instructions{margin-top:12px;text-align:center;font-size:.78rem;color:color-mix(in srgb, var(--pale) 50%, transparent)}.game-instructions kbd{font-family:'JetBrains Mono',monospace;background:color-mix(in srgb, var(--ink) 8%, transparent);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--pale)}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}@media(max-width:760px){.game-grid{grid-template-columns:1fr}}.game-grid .game-launch-card{height:100%}.game-grid .game-coming-soon-card{height:100%}/* Tek kalan "Yakında" kartını ortala (çift sütunda sola yapışmasın) */@media(min-width:761px){.game-grid .game-coming-soon-card:last-child{grid-column:1/-1;max-width:420px;margin-left:auto;margin-right:auto;width:100%}}/* touch controls (mobil / dokunmatik için, klavye şart değil) */.game-touch-controls{display:flex;gap:10px;margin-top:14px}.game-touch-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:17px 10px;border-radius:12px;border:1px solid color-mix(in srgb, var(--violet) 40%, transparent);background:color-mix(in srgb, var(--violet) 12%, transparent);color:var(--ink);font-weight:700;font-size:1rem;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;transition:background .15s ease,border-color .15s ease,transform .1s ease}.game-touch-btn:active,.game-touch-btn.is-pressed{background:color-mix(in srgb, var(--pink) 22%, transparent);border-color:color-mix(in srgb, var(--pink) 60%, transparent);transform:translateY(1px) scale(.98)}/* D-pad (Snake, isteğe bağlı diğer oyunlar için) */.game-dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,52px);gap:10px;justify-content:center;margin-top:16px}.game-dpad .dpad-btn{display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid color-mix(in srgb, var(--violet) 40%, transparent);background:color-mix(in srgb, var(--violet) 12%, transparent);color:var(--ink);font-size:1.2rem;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;transition:background .15s ease,border-color .15s ease,transform .1s ease}.game-dpad .dpad-btn:active,.game-dpad .dpad-btn.is-pressed{background:color-mix(in srgb, var(--pink) 22%, transparent);border-color:color-mix(in srgb, var(--pink) 60%, transparent);transform:scale(.94)}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}/* ---------- SNAKE OYUN AYARLARI (harita boyutu, büyüme, ekstra yem) ---------- */.game-overlay-message .game-settings-open-btn{margin-top:2px;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 4%, transparent);color:var(--pale);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.game-overlay-message .game-settings-open-btn:hover{border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:var(--pink)}.game-settings-panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;background:color-mix(in srgb, var(--void) 88%, transparent);padding:24px 26px 20px;overflow-y:auto;opacity:1;transition:opacity .2s ease;line-height:1.45/* aynı line-height:0 miras sorununu burada da düzeltir */}.game-settings-panel.is-hidden{opacity:0;pointer-events:none}.game-settings-panel h4{font-family:'Unbounded',sans-serif;color:var(--ink);font-size:1.15rem;text-align:center;margin-bottom:2px;flex-shrink:0}.snake-setting-group{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.snake-setting-label{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--pale) 55%, transparent)}.snake-setting-pills{display:flex;gap:6px;flex-wrap:wrap;border-radius:12px;background:color-mix(in srgb, var(--ink) 4%, transparent);padding:4px;border:1px solid var(--line)}.snake-setting-pills button{flex:1 1 0;min-width:64px;padding:10px 6px;border-radius:9px;font-family:'Manrope',sans-serif;font-weight:600;font-size:.85rem;color:color-mix(in srgb, var(--pale) 65%, transparent);text-align:center;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.snake-setting-pills button:hover{color:var(--pale)}.snake-setting-pills button.is-active{background:linear-gradient(120deg,var(--royal),var(--pink-hot));color:var(--on-accent);box-shadow:0 4px 14px color-mix(in srgb, var(--pink-hot) 35%, transparent)}.game-settings-back-btn{margin-top:auto;flex-shrink:0;align-self:center;display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:100px;border:1px solid var(--line);color:var(--pale);font-size:.95rem;font-weight:600;transition:border-color .2s ease,color .2s ease,background .2s ease}.game-settings-back-btn:hover{border-color:color-mix(in srgb, var(--pink) 45%, transparent);color:var(--pink)}@media(max-width:420px){.game-settings-panel{padding:18px 16px 14px;gap:12px}.snake-setting-pills button{font-size:.8rem;padding:8px 4px}}/* ---------- LİDERLİK TABLOSU (Snake/Runner/Flap/2048 hepsinde ortak) ---------- */.leaderboard-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;padding-right:2px}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb, var(--ink) 4%, transparent);border:1px solid var(--line);font-family:'Manrope',sans-serif;font-size:.82rem}.leaderboard-row:nth-child(1) .leaderboard-rank{color:#ffd166}.leaderboard-row:nth-child(2) .leaderboard-rank{color:#c9d3e0}.leaderboard-row:nth-child(3) .leaderboard-rank{color:#e0a370}.leaderboard-rank{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--pale);min-width:28px;flex-shrink:0}.leaderboard-name{flex:1;min-width:0;color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.leaderboard-score{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--pink);flex-shrink:0}.leaderboard-empty{color:color-mix(in srgb, var(--pale) 60%, transparent);font-size:.8rem;text-align:center;padding:16px 0}.leaderboard-name-row{display:flex;gap:8px;align-items:center}.leaderboard-name-row input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb, var(--ink) 4%, transparent);color:var(--ink);font-family:'Manrope',sans-serif;font-size:.82rem}.leaderboard-name-row input:focus{outline:none;border-color:color-mix(in srgb, var(--pink) 50%, transparent)}.leaderboard-name-row button{flex-shrink:0;cursor:pointer;padding:9px 16px;border-radius:10px;border:none;background:linear-gradient(120deg,var(--royal),var(--pink-hot));color:var(--on-accent);font-weight:600;font-size:.8rem;font-family:'Manrope',sans-serif}.leaderboard-status{font-size:.72rem;text-align:center;margin:0;color:color-mix(in srgb, var(--pale) 55%, transparent)}/* ---------- GÜNÜN MÜCADELESİ ---------- */.game-overlay-message .game-daily-open-btn{margin-top:2px;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;border:1px solid color-mix(in srgb, var(--warning) 45%, var(--line));background:color-mix(in srgb, var(--warning) 10%, transparent);color:var(--pale);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.game-overlay-message .game-daily-open-btn:hover{border-color:var(--warning);color:var(--warning)}.daily-desc{font-family:'Manrope',sans-serif;font-size:.92rem;line-height:1.5;color:color-mix(in srgb, var(--pale) 78%, transparent);margin:0;text-align:center}.daily-your-best{font-family:'JetBrains Mono',monospace;font-size:.84rem;letter-spacing:.05em;text-align:center;color:var(--warning);font-weight:600}.game-hud .daily-mode-badge{display:none;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.08em;padding:3px 9px;border-radius:100px;background:color-mix(in srgb, var(--warning) 18%, transparent);border:1px solid color-mix(in srgb, var(--warning) 45%, transparent);color:var(--warning);align-self:center}.game-hud.is-daily .daily-mode-badge{display:inline-block}/* ---------- SKORU GÖRSEL OLARAK PAYLAŞMA ---------- */.game-overlay-message .game-share-open-btn{margin-top:2px;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:100px;border:1px solid color-mix(in srgb, var(--pink-hot) 45%, var(--line));background:color-mix(in srgb, var(--pink-hot) 10%, transparent);color:var(--pale);font-size:.9rem;font-weight:600;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.game-overlay-message .game-share-open-btn:hover{border-color:var(--pink-hot);color:var(--pink-hot)}.game-overlay-message .game-share-open-btn.is-hidden{display:none}.share-modal{max-width:420px}.share-card-canvas-wrap{position:relative;border-radius:16px;overflow:hidden;background:var(--stage);aspect-ratio:1/1}.share-card-canvas-wrap canvas{display:block;width:100%;height:auto}.share-card-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:color-mix(in srgb, var(--void) 55%, transparent);color:var(--pale);font-family:'Manrope',sans-serif;font-size:.85rem;transition:opacity .2s ease}.share-card-loading.is-hidden{opacity:0;pointer-events:none}.share-card-loading i{font-size:1.6rem;color:var(--pink-hot)}.share-card-actions{display:flex;gap:10px;margin-top:16px}.share-card-actions .btn{flex:1;justify-content:center}/* ---------- RCK 2048 ---------- */.board2048-wrap{position:relative;border-radius:14px;background:var(--stage);border:1px solid var(--line);padding:12px;touch-action:none;max-width:460px;margin:0 auto;transition:min-height .3s ease}/* Aynı sebeple (bkz. .game-canvas-wrap yorumu): başlangıç/liderlik/günlük mücadele ekranları görünürken tahtaya ekstra yükseklik ver ki butonlar dar/kısa ekranlarda dışarı taşıp kaybolmasın. */.board2048-wrap:has(.game-settings-panel:not(.is-hidden)),.board2048-wrap:has(.game-overlay-message:not(.is-hidden)){min-height:340px}@media(max-width:640px){.board2048-wrap:has(.game-settings-panel:not(.is-hidden)),.board2048-wrap:has(.game-overlay-message:not(.is-hidden)){min-height:300px}}.board2048{position:relative;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:8px;aspect-ratio:1/1;width:100%;max-width:436px;margin:0 auto}.board2048-cell{background:color-mix(in srgb, var(--ink) 9%, transparent);border:1px solid color-mix(in srgb, var(--ink) 6%, transparent);border-radius:7px}.board2048-tile{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:7px;font-family:'Unbounded',sans-serif;font-weight:700;color:var(--on-accent);background:linear-gradient(140deg,var(--royal),var(--pink-hot));box-shadow:0 4px 14px rgba(0,0,0,.35);/* Kayma süresi: JS'teki SLIDE_MS ile aynı olmalı (240ms) */transition:left .24s ease-out,top .24s ease-out,background .18s ease;font-size:1.25rem;will-change:left,top,transform}.board2048-tile.is-spawning{animation:tile2048Spawn .18s cubic-bezier(.22,1,.36,1) both}.board2048-tile.is-merging{animation:tile2048Pop .16s ease-out}#t2048ModalOverlay .game-dpad{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,44px);gap:8px;margin-top:12px}@keyframes tile2048Spawn{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}@keyframes tile2048Pop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}.board2048-tile[data-v="4"]{background:linear-gradient(140deg,var(--violet-2),var(--violet))}.board2048-tile[data-v="8"]{background:linear-gradient(140deg,var(--violet),var(--pink-2))}.board2048-tile[data-v="16"]{background:linear-gradient(140deg,var(--pink-2),var(--pink))}.board2048-tile[data-v="32"]{background:linear-gradient(140deg,var(--pink),var(--pink-hot))}.board2048-tile[data-v="64"]{background:linear-gradient(140deg,var(--pink-hot),var(--ember))}.board2048-tile[data-v="128"],.board2048-tile[data-v="256"],.board2048-tile[data-v="512"]{background:linear-gradient(140deg,var(--ember),var(--warning-2));font-size:1.05rem}.board2048-tile[data-v="1024"],.board2048-tile[data-v="2048"]{background:linear-gradient(140deg,var(--warning-2),var(--success));color:var(--void);font-size:.92rem;box-shadow:0 0 22px color-mix(in srgb, var(--success) 50%, transparent)}@media(max-width:420px){.board2048-tile{font-size:.98rem}.game-dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,48px)}}@media(max-width:640px){.game-modal-overlay{padding:8px}.game-launch-card{padding:22px 20px}.game-modal{max-width:100%;padding:20px 16px 20px;border-radius:18px;max-height:96vh}.game-modal-title{font-size:1.1rem}.game-hud{font-size:.84rem;gap:14px}.game-hud b{font-size:1.02rem}}/* ---------- RCK ORTAM MÜZİĞİ (mini oynatıcı + toz parçacıkları) ---------- Site açıldığında kısık sesle çalmaya çalışan küçük bir "şimdi çalıyor" kapsülü + Web Audio API'nin gerçek frekans verisiyle beslenen, ekranda süzülen toz parçacıkları. Parçacıklar sahte/rastgele bir döngüyle değil, çalan sesin anlık enerji seviyesine göre hareket ediyor. */.ambient-music-widget{position:fixed;left:50%;bottom:16px;z-index:2400;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;padding:10px 14px 10px 10px;border-radius:20px;background:color-mix(in srgb, var(--panel) 90%, transparent);border:1px solid color-mix(in srgb, var(--violet) 35%, transparent);box-shadow:0 8px 22px rgba(0,0,0,.35);width:min(90vw, 320px);transition:box-shadow .25s ease,opacity .4s ease}.ambient-music-widget:hover{box-shadow:0 10px 26px rgba(0,0,0,.42)}.ambient-music-top{display:flex;align-items:center;gap:9px}.ambient-music-disc{width:38px;height:38px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden;background:radial-gradient(circle at 32% 30%, var(--pink-hot), var(--violet) 62%, var(--void) 100%);border:2px solid color-mix(in srgb, var(--pale) 22%, transparent);box-shadow:0 2px 8px rgba(0,0,0,.4);animation:rckDiscSpin 3s linear infinite;animation-play-state:paused}.ambient-music-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;opacity:0;transition:opacity .3s ease}.ambient-music-disc img.is-loaded{opacity:1}.ambient-music-disc::after{content:'';position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:var(--void);box-shadow:0 0 0 2px color-mix(in srgb, var(--pale) 32%, transparent);z-index:2}.ambient-music-widget.is-playing .ambient-music-disc{animation-play-state:running}@keyframes rckDiscSpin{to{transform:rotate(360deg)}}.ambient-music-info{min-width:0;display:flex;flex-direction:column;gap:1px;flex:1 1 auto}.ambient-music-title{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-size:.78rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden}.ambient-music-title span{overflow:hidden;text-overflow:ellipsis}.ambient-music-title i{flex:0 0 auto;font-size:.72rem;color:#1ed760;opacity:.85;transition:opacity .18s ease,transform .18s ease}.ambient-music-title:hover i{opacity:1;transform:scale(1.15)}.ambient-music-title:hover span{color:#1ed760}.ambient-music-artist{font-size:.66rem;color:var(--pale);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ambient-music-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}.ambient-music-btn{width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto;background:color-mix(in srgb, var(--violet) 18%, transparent);color:var(--ink);font-size:.68rem;transition:background .18s ease,transform .18s ease}.ambient-music-btn:hover{background:color-mix(in srgb, var(--pink) 32%, transparent);transform:scale(1.08)}#ambientMusicPlayBtn{font-size:.72rem}/* ---- Ses düzeyi düğmesi + üstte açılan mini kaydırıcı ---- */.ambient-music-volume{position:relative}.ambient-music-volume-pop{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translate(-50%, 6px);width:110px;padding:11px 12px;background:color-mix(in srgb, var(--panel) 96%, transparent);border:1px solid color-mix(in srgb, var(--violet) 35%, transparent);border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.ambient-music-volume-pop::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:color-mix(in srgb, var(--panel) 96%, transparent)}.ambient-music-volume.is-open .ambient-music-volume-pop{opacity:1;pointer-events:auto;transform:translate(-50%, 0)}.ambient-music-volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:100px;background:linear-gradient(90deg, var(--pink-hot) var(--vol-pct,55%), color-mix(in srgb, var(--ink) 14%, transparent) var(--vol-pct,55%));outline:none;cursor:pointer}.ambient-music-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--on-accent);border:2.5px solid var(--pink-hot);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s ease}.ambient-music-volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.ambient-music-volume-slider::-moz-range-track{height:5px;border-radius:100px;background:color-mix(in srgb, var(--ink) 14%, transparent)}.ambient-music-volume-slider::-moz-range-progress{height:5px;border-radius:100px;background:var(--pink-hot)}.ambient-music-volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--on-accent);border:2.5px solid var(--pink-hot);cursor:pointer}/* ---- İlerleme (seek) çubuğu ---- */.ambient-music-seek-row{display:flex;align-items:center;gap:7px}.ambient-music-time{font-size:.62rem;color:var(--pale);opacity:.7;flex:0 0 auto;min-width:26px;font-variant-numeric:tabular-nums}.ambient-music-time:last-child{text-align:right}.ambient-music-seek{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:4px;border-radius:100px;background:linear-gradient(90deg, var(--pink-hot) var(--seek-pct,0%), color-mix(in srgb, var(--ink) 14%, transparent) var(--seek-pct,0%));outline:none;cursor:pointer}.ambient-music-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--on-accent);border:2.5px solid var(--pink-hot);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s ease}.ambient-music-seek::-webkit-slider-thumb:hover{transform:scale(1.2)}.ambient-music-seek::-moz-range-track{height:4px;border-radius:100px;background:color-mix(in srgb, var(--ink) 14%, transparent)}.ambient-music-seek::-moz-range-progress{height:4px;border-radius:100px;background:var(--pink-hot)}.ambient-music-seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--on-accent);border:2.5px solid var(--pink-hot);cursor:pointer}@media(max-width:520px){.ambient-music-widget{left:50%;bottom:10px;padding:8px 11px 8px 8px;width:94vw;gap:7px}.ambient-music-disc{width:32px;height:32px}.ambient-music-actions{gap:3px}.ambient-music-btn{width:24px;height:24px;font-size:.62rem}#ambientMusicPlayBtn{font-size:.66rem}.ambient-music-volume-pop{width:96px}.ambient-music-time{font-size:.58rem;min-width:22px}}@media(prefers-reduced-motion:reduce){.ambient-music-disc{animation:none}}/* ---------- KLİP MODU (sadece arka plandaki videoyu izle) ---------- Sol alttaki düğmeye basınca menü, başlık, toz efekti ve müzik widget'ı dahil her şey ekrandan kayboluyor, geriye sadece o an gösterilen arka plan (Phantom videosu ya da dekoratif döngü) kalıyor. Tekrar basınca her şey geri geliyor. */.theater-mode-btn{position:fixed;left:16px;bottom:16px;z-index:2500;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--panel) 90%, transparent);border:1px solid color-mix(in srgb, var(--violet) 35%, transparent);color:var(--ink);font-size:.95rem;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:background .2s ease,transform .2s ease,box-shadow .3s ease}.theater-mode-btn:hover{background:color-mix(in srgb, var(--pink) 22%, transparent);transform:scale(1.07)}body.theater-mode .theater-mode-btn{background:color-mix(in srgb, var(--pink-hot) 30%, transparent);border-color:color-mix(in srgb, var(--pink-hot) 60%, transparent);box-shadow:0 0 20px color-mix(in srgb, var(--pink-hot) 38%, transparent)}body.theater-mode > *:not(.rck-bg):not(#theaterModeBtn){opacity:0;pointer-events:none;transition:opacity .4s ease}@media(max-width:520px){.theater-mode-btn{left:10px;bottom:10px;width:40px;height:40px;font-size:.85rem}}/* ---------- RCK GİRİŞ KAPISI (click-to-enter) ---------- guns.lol tarzı: site tamamen bu ekranın arkasında saklı başlıyor, kullanıcı tıklayana kadar hiçbir şey görünmüyor/etkileşime açılmıyor. Bu tıklama aynı zamanda tarayıcının sesli otomatik oynatma engelini de meşru şekilde aşan "gerçek kullanıcı etkileşimi" — bu yüzden müzik tam bu anda başlıyor. */body.gate-locked{overflow:hidden;height:100vh}body.gate-locked > *:not(.entry-gate):not(#rckCursorCanvas):not(#rckDustLayer):not(.rck-bg){visibility:hidden}.entry-gate{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:radial-gradient(900px 600px at 50% 35%, color-mix(in srgb, var(--royal) 28%, transparent) 0%, transparent 70%),color-mix(in srgb, var(--void) 74%, transparent);backdrop-filter:blur(6px) saturate(.8);-webkit-backdrop-filter:blur(6px) saturate(.8);user-select:none;overflow:hidden;animation:rckGateIn .7s ease both}.entry-gate::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 1.6%, transparent) 3px 4px),radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--pink-hot) 10%, transparent), transparent 60%);opacity:.9}.entry-gate.is-leaving{animation:rckGateOut .7s cubic-bezier(.16,1,.3,1) both;pointer-events:none}.entry-gate.is-leaving .entry-gate-content{animation:rckGateContentOut .55s cubic-bezier(.16,1,.3,1) both}@keyframes rckGateIn{from{opacity:0}to{opacity:1}}@keyframes rckGateOut{from{opacity:1}to{opacity:0;visibility:hidden}}@keyframes rckGateContentOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.08)}}.entry-gate-orb{position:absolute;width:520px;height:520px;border-radius:50%;opacity:.3;background:radial-gradient(circle, var(--pink-hot), transparent 70%);animation:rckOrbFloat 9s ease-in-out infinite}.entry-gate-orb-2{width:380px;height:380px;opacity:.18;left:60%;top:55%;background:radial-gradient(circle, var(--violet), transparent 70%);animation:rckOrbFloat 11s ease-in-out infinite reverse}@keyframes rckOrbFloat{0%,100%{transform:translate(-14%,-8%) scale(1)}50%{transform:translate(10%,8%) scale(1.18)}}.entry-gate-frame{position:absolute;inset:clamp(14px,3vw,34px);pointer-events:none;border:1px solid color-mix(in srgb, var(--ink) 7%, transparent);animation:rckFrameIn 1.1s cubic-bezier(.16,1,.3,1) both}.entry-gate-frame::before,.entry-gate-frame::after{content:"";position:absolute;width:26px;height:26px;border-color:color-mix(in srgb, var(--pink-hot) 70%, transparent);border-style:solid}.entry-gate-frame::before{top:-1px;left:-1px;border-width:2px 0 0 2px}.entry-gate-frame::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}@keyframes rckFrameIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:scale(1)}}.entry-gate-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 24px;animation:rckGateContentIn .9s cubic-bezier(.16,1,.3,1) .15s both}@keyframes rckGateContentIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.entry-gate-hand{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:2.3rem;color:var(--ink);background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--pink-hot) 22%, transparent), transparent 70%);border:1px solid color-mix(in srgb, var(--pink-hot) 38%, transparent);box-shadow:0 0 0 10px color-mix(in srgb, var(--pink-hot) 6%, transparent),0 18px 50px rgba(0,0,0,.55),inset 0 0 30px color-mix(in srgb, var(--pink-hot) 10%, transparent);margin-bottom:6px}.entry-gate-hand i{display:inline-block;transform-origin:72% 82%;animation:rckWave 2.4s ease-in-out infinite;filter:drop-shadow(0 0 10px color-mix(in srgb, var(--pink-hot) 65%, transparent))}@keyframes rckWave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(18deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(16deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}.entry-gate-greet{display:flex;align-items:center;justify-content:center;gap:4px;min-height:1.2em;margin:0;font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-shadow:0 0 28px color-mix(in srgb, var(--pink-hot) 45%, transparent),0 2px 0 color-mix(in srgb, var(--royal) 60%, transparent)}.entry-gate-greet .entry-gate-greet-text{white-space:nowrap}.entry-gate-greet .entry-gate-greet-text:empty::before{content:"\00a0"}.entry-gate-caret{display:inline-block;width:.09em;height:.95em;margin-left:.04em;border-radius:2px;background:var(--pink-hot);box-shadow:0 0 12px var(--pink-hot);animation:rckCaret 1s steps(1) infinite}@keyframes rckCaret{0%,49%{opacity:1}50%,100%{opacity:0}}.entry-gate-sub{margin:0;color:var(--pale);opacity:.72;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600}.entry-gate-sub .sep{color:var(--pink-hot);margin:0 .35em}.entry-gate-btn{position:relative;margin-top:18px;display:inline-flex;align-items:center;gap:12px;padding:15px 34px;border-radius:999px;overflow:hidden;font-family:'Manrope',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);background:color-mix(in srgb, var(--panel) 55%, transparent);border:1px solid color-mix(in srgb, var(--pink-hot) 55%, transparent);box-shadow:0 0 0 0 color-mix(in srgb, var(--pink-hot) 35%, transparent),0 14px 40px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.16,1,.3,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease;animation:rckClickPulse 2.2s ease-in-out infinite}.entry-gate-btn::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--ink) 22%, transparent), transparent);transform:skewX(-18deg);animation:rckBtnShine 3.4s ease-in-out infinite}@keyframes rckBtnShine{0%,55%{left:-60%}100%{left:140%}}.entry-gate-btn i{font-size:.85em;transition:transform .35s cubic-bezier(.16,1,.3,1)}.entry-gate-btn:hover,.entry-gate-btn:focus-visible{transform:translateY(-2px);background:color-mix(in srgb, var(--pink-hot) 88%, var(--void));border-color:var(--pink-hot);color:#fff;box-shadow:0 0 0 8px color-mix(in srgb, var(--pink-hot) 14%, transparent),0 18px 50px color-mix(in srgb, var(--pink-hot) 35%, transparent);animation:none;outline:none}.entry-gate-btn:hover i{transform:translateX(5px)}.entry-gate-btn:active{transform:translateY(0) scale(.97)}@keyframes rckClickPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--pink-hot) 35%, transparent),0 14px 40px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 12px transparent,0 14px 40px rgba(0,0,0,.45)}}.entry-gate-track{margin:14px 0 0;color:var(--pale);opacity:.55;font-size:.72rem;display:flex;align-items:center;gap:7px;letter-spacing:.04em}.entry-gate-track i{color:var(--pink-hot)}.entry-gate-error{margin:12px 0 0;padding:8px 14px;border-radius:12px;max-width:300px;font-size:.72rem;line-height:1.4;color:#ffb4b4;background:color-mix(in srgb, #ff4d4d 14%, transparent);border:1px solid color-mix(in srgb, #ff4d4d 35%, transparent)}html.perf-mode .entry-gate{backdrop-filter:none;-webkit-backdrop-filter:none;background:radial-gradient(900px 600px at 50% 35%, color-mix(in srgb, var(--royal) 28%, transparent) 0%, transparent 70%),var(--void)}html.perf-mode .entry-gate-orb,html.perf-mode .entry-gate::before{display:none}@media(prefers-reduced-motion:reduce){.entry-gate,.entry-gate-orb,.entry-gate-btn,.entry-gate-btn::before,.entry-gate-frame,.entry-gate-content{animation:none}}@media(max-width:520px){.entry-gate-hand{width:76px;height:76px;font-size:1.9rem}.entry-gate-btn{padding:13px 26px}}/* ---------- 0/1 KURUKAFA (giriş kapısı arka plan ambiyansı) ---------- Kapının içeriği (el, selam, buton…) aynen duruyor; arkasında tek bir canvas (rck.js MODULE 19) yarı saydam, büyük bir 0/1 kurukafayı çenesini açıp kapatarak döngüde çiziyor. "click me" tıklaması müziği başlatır ve kamera kurukafanın ağzının içine dalarak siteyi açar. Canvas'ın kendi koyu zemini olduğundan eski backdrop-filter bulanıklığı gereksiz (ve düşük sistemlerde çok pahalıydı) — canvas hazırken kapatılıyor. */html.rck-diving,html.rck-diving body{overflow:hidden}.entry-gate-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.entry-gate.is-live,html.perf-mode .entry-gate.is-live{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}.entry-gate.is-live::before{display:none}.entry-gate-orb{transition:opacity .45s ease}/* kurukafa rakamlarının üstünde ince yazılar okunaklı kalsın */.entry-gate-sub,.entry-gate-track{text-shadow:0 0 10px var(--void),0 0 4px var(--void)}/* tıklama → dalış: içerik süzülerek çıkar, süsler kaybolur */.entry-gate.is-diving{pointer-events:none}.entry-gate.is-diving .entry-gate-content{animation:rckGateContentOut .55s cubic-bezier(.16,1,.3,1) both}.entry-gate.is-diving .entry-gate-orb{opacity:0}.entry-gate.is-diving .entry-gate-frame{animation:rckGateFade .45s ease both}@keyframes rckGateFade{from{opacity:1}to{opacity:0}}/* canvas açılamazsa: orijinal kapı (sadece buton) */.entry-gate.gate-simple .entry-gate-canvas{display:none}/* Hareketi azalt açıkken (Windows'ta "animasyon efektleri" kapalıysa PC'lerde çok yaygın) el sallama tamamen duruyordu — mobilde çalışıp PC'de çalışmamasının sebebi buydu. Küçük, dekoratif bir sallanma olduğu için kapatmak yerine genliği yarıya indirilmiş yumuşak sürüm oynatılıyor. */@keyframes rckWaveSoft{0%,60%,100%{transform:rotate(0)}12%{transform:rotate(9deg)}24%{transform:rotate(-6deg)}36%{transform:rotate(8deg)}48%{transform:rotate(-3deg)}}@media(prefers-reduced-motion:reduce){.entry-gate-hand i{animation:rckWaveSoft 2.8s ease-in-out infinite}}html.perf-mode .entry-gate-hand i{filter:none}/* ---------- RCK DUST (canvas) ---------- */#rckDustLayer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483645}html.perf-mode #rckDustLayer{opacity:.75}/* ---------- RCK ARKA PLAN (video / görsel) ---------- */.rck-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;pointer-events:none}.rck-bg.is-active{opacity:1}.rck-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease}.rck-bg.has-video video{opacity:1}/* "Arka Planı Gizle" açıkken: hangi video aktif olursa olsun (ambient ya da o an çalan parçanın klip videosu) görüntü gizlenir, sabit shade/void zemin görünür hale gelir; video/ses elemanına dokunulmadığı için müzik çalmaya kesintisiz devam eder. */html.bg-hidden .rck-bg{opacity:1}html.bg-hidden .rck-bg video{opacity:0 !important}.rck-bg-shade{position:absolute;inset:0;background:repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--ink) 2.2%, transparent) 3px 4px),linear-gradient(180deg, color-mix(in srgb, var(--void) 78%, transparent) 0%, color-mix(in srgb, var(--void) 50%, transparent) 40%, color-mix(in srgb, var(--void) 72%, transparent) 100%),radial-gradient(ellipse at 50% 40%, transparent 30%, color-mix(in srgb, var(--void) 70%, transparent) 100%)}html[data-mode="light"] .rck-bg-shade{background:linear-gradient(180deg, color-mix(in srgb, var(--void) 82%, transparent), color-mix(in srgb, var(--void) 70%, transparent))}/* ---------- RCK GÖRÜNTÜLENME SAYACI ---------- */.rck-views{position:fixed;right:16px;bottom:16px;z-index:2400;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--pale);background:color-mix(in srgb, var(--panel) 90%, transparent);border:1px solid color-mix(in srgb, var(--pink) 32%, transparent);box-shadow:0 8px 22px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),border-color .2s ease;pointer-events:auto}.rck-views.is-ready{opacity:1;transform:translateY(0)}.rck-views:hover{border-color:var(--pink)}.rck-views i{color:var(--pink);font-size:.9em}.rck-views-label{font-family:'Manrope',sans-serif;font-weight:500;font-size:.72rem;color:color-mix(in srgb, var(--pale) 65%, transparent)}@media(max-width:560px){.rck-views{right:10px;bottom:10px;padding:6px 11px;font-size:.74rem}.rck-views-label{display:none}}/* ---------- RCK CUSTOM CURSOR v3 ---------- */@media (hover:hover) and (pointer:fine){html.rck-cursor-on,html.rck-cursor-on body,html.rck-cursor-on body *{cursor:none!important}#rckCursorCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147483647;opacity:0;transition:opacity .25s ease}#rckCursorCanvas.is-visible{opacity:1}}@media(hover:none),(pointer:coarse){#rckCursorCanvas{display:none!important}}/* Offscreen sections: tarayıcıya "şimdilik çizme" de — scroll gelince yükler (Minecraft chunk mantığı) */#hub,#oyun,footer{content-visibility:auto;contain-intrinsic-size:auto 700px}/* ===================================================================== RCK FX v3 — sitenin genel animasyon / ambiyans katmanı (rck.js MODULE 18) · Kapı (0/1 kurukafa) ağzından açılınca: menü, hero ve alttaki widget'lar sırayla sahneye girer, hero paragrafı kelime kelime belirir. · Kaydırırken: header'ın altında ilerleme çubuğu, header kompaktlaşır, hero yukarı süzülerek solar, arka planda tema renginde aurora ışıkları. · Bölümler ekrana girerken (reveal v3): öğeler YUKARIDAN aşağıya düşüp yumuşakça oturur, oturma anında üst kenarında bir ışık çizgisi çakar; başlıklar 0/1'lerden harf harf çözülür, paragraflar aşağı doğru açılır. · Etkileşim: mıknatıslı butonlar, imleçle 3B eğilen kartlar, tık dalgası, hub panellerinde dönen ışık çerçevesi + imleç ışığı, ikon animasyonları. Hiçbir giriş efekti blur/filter KULLANMAZ — sadece opacity + transform (GPU'da, boyama yok). Performans modunda / "hareketi azalt" tercihinde ağır ve sürekli efektler kapanır (JS tarafı da aynı kontrolleri yapar). ===================================================================== *//* ---- 1) Kapı → sahne ---- *//* Kapı kapalıyken hero animasyonları başlamasın; kapı açılınca baştan oynasın */body.gate-locked .hero h1,body.gate-locked .hero p,body.gate-locked .hero-ctas > *,body.gate-locked .scroll-cue,body.gate-locked .hero p .fx-w{animation:none !important}body:not(.gate-locked) .nav-left,body:not(.gate-locked) .nav-links li,body:not(.gate-locked) .nav-right{animation:fxDropIn .9s cubic-bezier(.2,1.1,.34,1) backwards}body:not(.gate-locked) .nav-left{animation-delay:.25s}body:not(.gate-locked) .nav-links li:nth-child(1){animation-delay:.33s}body:not(.gate-locked) .nav-links li:nth-child(2){animation-delay:.39s}body:not(.gate-locked) .nav-links li:nth-child(3){animation-delay:.45s}body:not(.gate-locked) .nav-links li:nth-child(4){animation-delay:.51s}body:not(.gate-locked) .nav-links li:nth-child(5){animation-delay:.57s}body:not(.gate-locked) .nav-right{animation-delay:.65s}@keyframes fxDropIn{from{opacity:0;transform:translate3d(0,-28px,0)}}body:not(.gate-locked) .ambient-music-widget{animation:fxRiseIn 1s cubic-bezier(.16,1,.3,1) .8s backwards}body:not(.gate-locked) .theater-mode-btn{animation:fxRiseIn 1s cubic-bezier(.16,1,.3,1) .95s backwards}body:not(.gate-locked) .rck-views{animation:fxRiseIn 1s cubic-bezier(.16,1,.3,1) 1.05s backwards}@keyframes fxRiseIn{from{opacity:0;translate:0 48px}}/* Hero: başlık yukarıdan oturur; paragraf kelime kelime YUKARIDAN düşer; butonlar yaylanır. (Eski sürekli filter/text-shadow animasyonları kaldırıldı: her karede yeniden boyuyordu.) */.hero h1{background-image:linear-gradient(115deg, var(--ink) 8%, var(--pink) 42%, color-mix(in srgb, var(--violet) 65%, var(--ink) 35%) 100%);animation:fxHeroTitle 1.15s cubic-bezier(.2,1.12,.34,1) .1s backwards;filter:drop-shadow(0 0 26px color-mix(in srgb, var(--pink) 38%, transparent))}@keyframes fxHeroTitle{from{opacity:0;transform:translate3d(0,-44px,0) scale(.97)}}.hero p.fx-split{animation:none}.hero p .fx-w{display:inline-block;animation:fxWordIn .9s cubic-bezier(.2,1.1,.34,1) backwards;animation-delay:calc(.45s + var(--wi,0) * .028s)}@keyframes fxWordIn{from{opacity:0;transform:translate3d(0,-.7em,0)}}html.perf-mode .hero p .fx-w{animation-name:fxWordInLite}@keyframes fxWordInLite{from{opacity:0}}.hero-ctas{animation:none}.hero-ctas > *{animation:fxPopIn .9s cubic-bezier(.34,1.56,.64,1) backwards}.hero-ctas > :nth-child(1){animation-delay:1s}.hero-ctas > :nth-child(2){animation-delay:1.12s}@keyframes fxPopIn{from{opacity:0;transform:translate3d(0,-22px,0) scale(.85)}}.scroll-cue{animation:fxFadeIn .9s ease 1.6s backwards,bob 2.2s ease-in-out 2.5s infinite}@keyframes fxFadeIn{from{opacity:0}}/* ---- 2) Kaydırma: ilerleme çubuğu, kompakt header, hero çıkışı ---- */.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}.fx-progress-bar{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--fx-scroll,0));background:linear-gradient(90deg, var(--royal), var(--pink-hot) 60%, var(--violet));box-shadow:0 0 10px color-mix(in srgb, var(--pink-hot) 70%, transparent)}.fx-progress-head{position:absolute;inset:0;transform:translateX(calc(var(--fx-scroll,0) * 100%))}.fx-progress-head::after{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--pink-hot),0 0 22px 7px color-mix(in srgb, var(--pink-hot) 45%, transparent);opacity:var(--fx-head-o,0);transition:opacity .35s ease}header{transition:background .45s ease,box-shadow .45s ease,border-color .45s ease}header nav{transition:padding .45s cubic-bezier(.16,1,.3,1)}header.fx-scrolled{background:color-mix(in srgb, var(--void) 93%, transparent);box-shadow:0 14px 36px -18px rgba(0,0,0,.65)}header.fx-scrolled nav{padding-top:10px;padding-bottom:10px}/* Hero içeriği aşağı kaydırdıkça hafifçe geri çekilip solar (blur yok) */.hero-content{transform:translate3d(0, calc(var(--fx-hero,0) * 90px), 0) scale(calc(1 - var(--fx-hero,0) * .07));opacity:calc(1 - var(--fx-hero,0) * 1.3)}.scroll-cue{opacity:calc(1 - var(--fx-hero,0) * 4)}/* ---- 3) Aurora: arka planda süzülen, kaydırmayla kayan tema ışıkları ---- */.fx-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.fx-aurora i{position:absolute;width:54vmax;height:54vmax;border-radius:50%;opacity:.17;background:radial-gradient(circle, var(--c) 0%, transparent 64%);will-change:transform}.fx-aurora i:nth-child(1){--c:var(--pink-hot);left:-16vmax;top:-12vmax;translate:0 calc(var(--fx-scroll,0) * -24vh);animation:fxAuroraA 26s ease-in-out infinite alternate}.fx-aurora i:nth-child(2){--c:var(--violet);right:-20vmax;top:30vh;translate:0 calc(var(--fx-scroll,0) * -46vh);animation:fxAuroraB 31s ease-in-out infinite alternate}.fx-aurora i:nth-child(3){--c:var(--royal);left:14vw;bottom:-28vmax;opacity:.22;translate:0 calc(var(--fx-scroll,0) * -16vh);animation:fxAuroraA 37s ease-in-out infinite alternate-reverse}@keyframes fxAuroraA{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.18)}}@keyframes fxAuroraB{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vw,-6vh) scale(.92)}}html.perf-mode .fx-aurora{display:none}/* ---- 4) Bölümler ekrana girerken ---- *//* Oturma ışığı: öğe yerine düştüğü anda üst kenarında çakan çizgi */.fx-land{position:absolute;left:8%;right:8%;top:-1px;height:2px;z-index:4;pointer-events:none;border-radius:2px;background:linear-gradient(90deg, transparent, var(--pink-hot) 28%, color-mix(in srgb, #fff 72%, var(--pink-hot)) 50%, var(--pink-hot) 72%, transparent);box-shadow:0 0 16px 1px color-mix(in srgb, var(--pink-hot) 60%, transparent);opacity:0;transform:scaleX(.15);animation:fxLand 1.15s cubic-bezier(.2,.8,.2,1) calc(var(--reveal-delay,0s) + .55s) forwards}@keyframes fxLand{0%{opacity:0;transform:scaleX(.15)}22%{opacity:1}100%{opacity:0;transform:scaleX(1)}}/* Başlıklar: harfler 0/1'den çözülür. Gerçek harf akıştaki yerinde durur (yerleşim değişmez); çözülmeden önce şeffaf, üstünde yanıp sönen bir bit görünür. */.fx-word{display:inline-block;white-space:nowrap}.fx-ch{position:relative}.fx-ch.is-bit{color:transparent !important;-webkit-text-fill-color:transparent;text-shadow:none !important}.fx-ch.is-bit::before{content:attr(data-g);position:absolute;left:0;right:0;top:0;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--pink-hot);-webkit-text-fill-color:var(--pink-hot);text-shadow:0 0 12px color-mix(in srgb, var(--pink-hot) 70%, transparent)}/* Eyebrow şifre çözülürken hafif parlar */.eyebrow.fx-decoding{text-shadow:0 0 10px color-mix(in srgb, var(--pink) 70%, transparent)}/* Paragraflar yukarıdan aşağı düşer */:where(.hub-panel, .section-head).reveal > p,.reveal .tz-summary{opacity:0;transform:translate3d(0,-14px,0);transition:opacity .85s ease,transform 1.1s cubic-bezier(.2,1.1,.34,1);transition-delay:calc(var(--reveal-delay,0s) + .42s)}:where(.hub-panel, .section-head).reveal.in-view > p,.reveal.in-view .tz-summary{opacity:1;transform:none}:where(.hub-panel, .section-head).reveal.fx-settled > p,.reveal.fx-settled .tz-summary{transition:none}/* Bölüm başlığının altında çizilen vurgu çizgisi */.section-head h2::after{content:"";display:block;width:64px;height:3px;margin-top:16px;border-radius:3px;background:linear-gradient(90deg, var(--pink-hot), var(--violet));box-shadow:0 0 14px color-mix(in srgb, var(--pink-hot) 55%, transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.16,1,.3,1) calc(var(--reveal-delay,0s) + .75s)}.section-head.in-view h2::after{transform:scaleX(1)}.game-coming-soon-card{position:relative}/* Bölüm ayraçları: ortadan iki yana çizilen çizgi + parlayan elmas */.fx-divider{position:relative;width:min(560px, 72%);height:12px;margin:0 auto 60px;pointer-events:none}.fx-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pink-hot) 75%, transparent), transparent);transform:scaleX(0);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}.fx-divider::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--pink-hot);box-shadow:0 0 14px 3px color-mix(in srgb, var(--pink-hot) 60%, transparent);transform:rotate(45deg) scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .65s}.fx-divider.in-view::before{transform:scaleX(1)}.fx-divider.in-view::after{transform:rotate(45deg) scale(1)}/* İkonlar kartları açılırken yaylanarak belirir */.store-card.in-view:not(.fx-settled) > .store-icon,.project-card.in-view:not(.fx-settled) > .project-icon,.contact-tile.in-view:not(.fx-settled) > .tile-icon,.discord-card.in-view:not(.fx-settled) .discord-icon,.game-launch-card.in-view:not(.fx-settled) .game-launch-icon,.game-coming-soon-card.in-view:not(.fx-settled) > .coming-soon-icon{animation:fxIconPop .85s cubic-bezier(.34,1.56,.64,1) calc(var(--reveal-delay,0s) + .3s) backwards}@keyframes fxIconPop{from{opacity:0;transform:scale(.3) rotate(-22deg)}}/* Footer içerikleri görünür alana girince yükselir */footer{position:relative;overflow:hidden}html.fx-ready footer:not(.fx-in) > *{opacity:0;transform:translateY(18px)}footer > *{transition:opacity .9s ease,transform 1s cubic-bezier(.16,1,.3,1)}footer > :nth-child(2){transition-delay:.12s}/* ---- 5) Etkileşim ---- *//* 3B için perspektif (iç içe kartların "kalkışı" ve imleç eğimi) */.store-grid,.contact-grid,.project-grid,.game-grid,.tz-skies,.hub-panel-contact{perspective:1200px}/* Eğilme (rotate) ve mıknatıs (translate) ayrı özellikler; hover transform'larıyla çakışmaz */.store-card{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s cubic-bezier(.16,1,.3,1),rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.project-card{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .35s cubic-bezier(.16,1,.3,1),rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.game-launch-card{transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .3s cubic-bezier(.16,1,.3,1),rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.contact-tile{transition:border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.discord-card,.game-coming-soon-card{transition:rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.tz-card{transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease,rotate var(--fx-rot-dur,.7s) cubic-bezier(.16,1,.3,1)}.fx-tilt-active{--fx-rot-dur:.16s}.btn,.nav-cta{position:relative;overflow:hidden;isolation:isolate}.btn{transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease,translate .45s cubic-bezier(.16,1,.3,1)}.nav-cta{transition:box-shadow .3s ease,background .3s ease,transform .2s ease,translate .45s cubic-bezier(.16,1,.3,1)}.btn > i,.nav-cta > i{transition:translate .45s cubic-bezier(.16,1,.3,1)}/* Birincil butonlarda hover'da geçen parıltı */.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;z-index:-1;pointer-events:none;background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);transform:skewX(-18deg);transition:left .8s cubic-bezier(.16,1,.3,1)}.btn-primary:hover::after{left:130%}/* Tık dalgası */.fx-ripple{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.18) 45%, transparent 70%);transform:translate(var(--x), var(--y)) scale(0);animation:fxRipple .75s cubic-bezier(.16,1,.3,1) forwards}@keyframes fxRipple{to{transform:translate(var(--x), var(--y)) scale(var(--s,24));opacity:0}}/* Hub panelleri: üzerine gelince/seçiliyken dönen ışık çerçevesi + imleci izleyen ışık */@property --fx-angle{syntax:'';initial-value:0deg;inherits:false}.hub-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--fx-angle), transparent 0deg, color-mix(in srgb, var(--pink-hot) 90%, transparent) 40deg, transparent 100deg, transparent 180deg, color-mix(in srgb, var(--violet) 85%, transparent) 220deg, transparent 280deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .6s ease;animation:fxSpin 5s linear infinite paused}.hub-panel:hover::before,.hub-grid:not(:hover) .hub-panel.hub-active::before{opacity:1;animation-play-state:running}@keyframes fxSpin{to{--fx-angle:360deg}}.hub-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--pink-hot) 10%, transparent), transparent 70%);opacity:0;transition:opacity .5s ease}.hub-panel:hover::after{opacity:1}/* Menü linklerinin altında ortadan açılan ışık çizgisi */.nav-links a::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;border-radius:2px;pointer-events:none;background:linear-gradient(90deg, transparent, var(--pink-hot), transparent);transform:scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1)}.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}/* Marka adındaki "Media" yazısında akan gradyan; footer üst çizgisinde gezen ışık */.brand .dot{background:linear-gradient(90deg, var(--pink), var(--violet), var(--pink-hot), var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShimmer 7s linear infinite}@keyframes fxShimmer{to{background-position:300% 0}}footer::before{content:"";position:absolute;top:-1px;left:0;width:28%;height:1px;pointer-events:none;background:linear-gradient(90deg, transparent, var(--pink-hot), transparent);box-shadow:0 0 10px var(--pink-hot);animation:fxTravel 7s linear infinite}@keyframes fxTravel{from{transform:translateX(-100%)}to{transform:translateX(360%)}}/* İkon mikro animasyonları */.store-card:hover .store-icon,.project-card:hover .project-icon{animation:fxIconBounce .7s cubic-bezier(.34,1.56,.64,1)}.contact-tile:hover .tile-icon{animation:fxWiggle .65s ease}@keyframes fxIconBounce{0%{transform:none}35%{transform:translateY(-6px) scale(1.14) rotate(-8deg)}70%{transform:translateY(1px) scale(.96) rotate(3deg)}100%{transform:none}}@keyframes fxWiggle{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.12)}40%{transform:rotate(10deg) scale(1.12)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}/* Oyun kartı ikonu: üzerine gelince kareler yılan gibi sırayla yanar */.game-launch-card:hover .game-launch-icon span{animation:fxChase 1.15s ease-in-out infinite}.game-launch-icon span:nth-child(2){animation-delay:.08s}.game-launch-icon span:nth-child(3){animation-delay:.16s}.game-launch-icon span:nth-child(6){animation-delay:.24s}.game-launch-icon span:nth-child(5){animation-delay:.32s}.game-launch-icon span:nth-child(4){animation-delay:.40s}.game-launch-icon span:nth-child(7){animation-delay:.48s}.game-launch-icon span:nth-child(8){animation-delay:.56s}.game-launch-icon span:nth-child(9){animation-delay:.64s}@keyframes fxChase{0%,60%,100%{transform:scale(1)}20%{transform:scale(.55);background:var(--pink-hot);box-shadow:0 0 10px var(--pink-hot)}}/* Discord çevrimiçiyken durum noktasından yayılan sinyal halkası */.discord-status-dot.is-online::after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;border:2px solid var(--success);animation:fxPing 2.2s cubic-bezier(0,0,.2,1) infinite}@keyframes fxPing{0%{transform:scale(.8);opacity:.9}80%,100%{transform:scale(2.3);opacity:0}}/* Ayarlar çekmecesi açılınca bölümler sırayla kayarak gelir */.settings-drawer.is-open .settings-section{animation:fxDrawerIn .6s cubic-bezier(.16,1,.3,1) backwards}.settings-drawer.is-open .settings-section:nth-child(2){animation-delay:.08s}.settings-drawer.is-open .settings-section:nth-child(3){animation-delay:.14s}.settings-drawer.is-open .settings-section:nth-child(4){animation-delay:.20s}.settings-drawer.is-open .settings-section:nth-child(5){animation-delay:.26s}.settings-drawer.is-open .settings-section:nth-child(6){animation-delay:.32s}@keyframes fxDrawerIn{from{opacity:0;transform:translateX(-26px)}}/* ---- 6) Performans modu / hareketi azalt ---- */html.perf-mode .fx-scan,html.perf-mode .fx-land,html.perf-mode .hub-panel::before,html.perf-mode .hub-panel::after,html.perf-mode footer::before,html.perf-mode .fx-progress-head{display:none}html.perf-mode .hero h1{filter:none}html.perf-mode .brand .dot,html.perf-mode .discord-status-dot.is-online::after,html.perf-mode .game-launch-card:hover .game-launch-icon span{animation:none}@media(prefers-reduced-motion:reduce){.fx-aurora i,.brand .dot,footer::before,.discord-status-dot.is-online::after,.game-launch-card:hover .game-launch-icon span,.hero p .fx-w,.hero-ctas > *,.hero h1,.fx-land{animation:none}.fx-land{display:none}.hero-content{transform:none}:where(.hub-panel, .section-head).reveal > p,.reveal .tz-summary{opacity:1;transform:none;transition:none}}@media(prefers-reduced-motion:reduce){.project-card::after{transition:none}}