:root{--bg:#050505;--fg:#e9e9e5;--muted:#92928d;--line:#292925;--red:#8e1515}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:-50%;pointer-events:none;opacity:.045;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .22s steps(2) infinite}.nav{position:fixed;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;z-index:30;mix-blend-mode:difference}.wordmark,.menu{color:#fff;text-decoration:none;font-size:12px;letter-spacing:.28em;background:none;border:0}.menu{cursor:pointer}.intro{height:100vh;min-height:700px;position:relative;overflow:hidden;background:#030303}.intro-room{position:absolute;inset:0;background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.84)),url('assets/hero.png');background-size:cover;background-position:center;filter:contrast(1.08) brightness(.58);transform:scale(1.04);animation:slowzoom 18s ease-out forwards}.lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:7px;height:46%;background:#d9d9cf;opacity:.12;filter:blur(10px);box-shadow:0 0 70px 25px rgba(225,225,210,.12);animation:flicker 7s infinite}.logo-wrap{position:absolute;inset:0;width:100vw;height:100vh;transform:none;opacity:1}.logo-wrap img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:brightness(.8) contrast(1.15)}.intro-copy{position:absolute;left:6vw;bottom:7vh;max-width:620px}.intro-copy span,.eyebrow{font-size:10px;letter-spacing:.28em;color:var(--muted)}.intro-copy h1{font-size:clamp(42px,8vw,120px);font-weight:400;letter-spacing:.12em;margin:12px 0}.intro-copy p{font-size:15px;line-height:1.7;color:#c3c3be}.enter{display:inline-flex;gap:24px;margin-top:20px;color:#fff;text-decoration:none;font-size:10px;letter-spacing:.3em}.enter i{font-style:normal}.section{padding:16vh 8vw;border-top:1px solid var(--line);position:relative}.story{min-height:90vh;display:flex;flex-direction:column;justify-content:center}.section h2{font-size:clamp(42px,7vw,100px);line-height:.95;font-weight:300;letter-spacing:-.04em;margin:40px 0}.section h2 em{color:#888;font-style:normal}.lead{max-width:720px;font-size:18px;line-height:1.8;color:#c5c5bf}.muted{color:#777}.character{min-height:100vh;display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:center}.character-image{height:75vh;background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.4)),url('assets/hero.png') center/cover;filter:grayscale(1) contrast(1.1) brightness(.55)}.character-copy p:not(.eyebrow){max-width:460px;line-height:1.8;color:#aaa}.world{min-height:80vh}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:80px}.grid>div{background:var(--bg);padding:40px;min-height:250px}.grid span{font-size:10px;color:#666}.grid h3{font-size:20px;letter-spacing:.2em;font-weight:400;margin-top:60px}.grid p{color:#777;line-height:1.6}.final{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.final-mark{font-size:clamp(44px,9vw,130px);letter-spacing:.08em}.final-mark span{font-size:.62em;color:#8c8c87}.final p{font-size:9px;letter-spacing:.35em;color:#666;margin:35px}.contact{color:#aaa;text-decoration:none;font-size:10px;letter-spacing:.3em;border-bottom:1px solid #444;padding-bottom:8px}@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1.1)}}@keyframes flicker{0%,35%,38%,42%,100%{opacity:.12}36%,40%{opacity:.03}}@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}@media(max-width:800px){.nav{height:64px;padding:0 6vw}.intro{min-height:650px}.logo-wrap{inset:0;width:100vw;height:100vh;}.intro-copy{left:6vw;right:6vw;bottom:6vh}.intro-copy h1{font-size:48px}.section{padding:13vh 7vw}.character{grid-template-columns:1fr;gap:40px}.character-image{height:55vh}.grid{grid-template-columns:1fr}.grid>div{min-height:190px}.grid h3{margin-top:35px}}

/* SARXOSS room background: full viewport, fluorescent on/off */
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#000; }
.logo-wrap {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  margin:0 !important;
  transform:none !important;
  opacity:1 !important;
  z-index:0 !important;
}
.logo-wrap img {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  filter:brightness(calc(1 + var(--boost,0) * .7)) !important;
}
/* Irregular fluorescent tube behavior: several quick failed starts,
   then a brief unstable glow, then a steady burn. */
.logo-wrap {
  isolation:isolate;
}
.logo-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  background:#000;
  pointer-events:none;
  z-index:2;
  opacity:calc(var(--dark,.9) * .97);
}

@keyframes sarxossFluorescent {
  0%, 43% {
    opacity:1;
    filter:brightness(1) contrast(1);
  }

  /* first failed flicker */
  44% { opacity:.72; filter:brightness(.72) contrast(1.02); }
  44.7% { opacity:.18; filter:brightness(.22) contrast(1.05); }
  45.3% { opacity:.62; filter:brightness(.62) contrast(1.02); }
  46% { opacity:.10; filter:brightness(.12) contrast(1.05); }

  /* second, shorter flicker */
  46.7% { opacity:.80; filter:brightness(.80) contrast(1.01); }
  47.1% { opacity:.28; filter:brightness(.30) contrast(1.03); }
  47.7% { opacity:.90; filter:brightness(.90) contrast(1); }

  /* almost catches, then dies */
  48.2% { opacity:.48; filter:brightness(.50) contrast(1.04); }
  48.8% { opacity:.08; filter:brightness(.10) contrast(1.05); }
  49.6% { opacity:.20; filter:brightness(.22) contrast(1.04); }

  /* dark pause */
  50.5%, 55% { opacity:.035; filter:brightness(.04) contrast(1.08); }

  /* successful restart */
  55.7% { opacity:.16; filter:brightness(.18) contrast(1.06); }
  56.2% { opacity:.72; filter:brightness(.75) contrast(1.02); }
  56.8% { opacity:.38; filter:brightness(.40) contrast(1.04); }
  57.5% { opacity:.92; filter:brightness(.94) contrast(1.01); }
  58.2% { opacity:.78; filter:brightness(.80) contrast(1.02); }
  59% { opacity:1; filter:brightness(1.02) contrast(1); }

  60%, 100% { opacity:1; filter:brightness(1) contrast(1); }
}

@keyframes sarxossFluorescentShadow {
  0%, 43% { opacity:0; }
  44% { opacity:.22; }
  45% { opacity:.82; }
  46% { opacity:.28; }
  47% { opacity:.72; }
  48% { opacity:.12; }
  49% { opacity:.86; }
  50.5%, 55% { opacity:.97; }
  55.7% { opacity:.84; }
  56.2% { opacity:.25; }
  56.8% { opacity:.62; }
  57.5% { opacity:.08; }
  58.2% { opacity:.20; }
  59% { opacity:0; }
  60%, 100% { opacity:0; }
}

/* Arka paneldeki kırmızı LED'ler: floresan sönse de yanmaya devam eder */
.panel-leds{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:url('assets/panel_leds.png') center/cover no-repeat;
  mix-blend-mode:screen;
  animation:sarxossLedPulse 3.4s ease-in-out infinite;
}
@keyframes sarxossLedPulse{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

/* Ortadaki yazı: IM Fell English SC, "F" stili (bozulan görüntü).
   Sadece ışıklar sönükken görünür: karartma katmanıyla (::after)
   script.js tarafından müziğin zamanına göre --txt değişkeniyle sürülür. */
.center-text{
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:pre;
  font-family:'IM Fell English SC',Georgia,'Times New Roman',serif;
  font-size:clamp(40px,9vw,130px);
  font-weight:400;
  letter-spacing:.1em;
  color:#e9e9e5;
  pointer-events:none;
  opacity:var(--txt,0);
  filter:drop-shadow(0 0 22px rgba(0,0,0,.8));
}
.ct-a{text-shadow:-3px 0 rgba(170,10,10,.9),3px 0 rgba(40,90,120,.5)}
.ct-r{color:#b01212;text-shadow:0 0 18px rgba(176,18,18,.6)}
.ct-o{opacity:.45;filter:blur(1.4px)}

/* Giriş ekranı (ENTER) ve ses düğmesi */
.gate{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  opacity:1; transition:opacity .6s ease;
}
.gate.hide{opacity:0; pointer-events:none}
.enter-btn{
  background:none; border:0; border-bottom:1px solid #8e1515; cursor:pointer;
  font-family:'IM Fell English SC',Georgia,'Times New Roman',serif;
  font-size:clamp(22px,3.4vw,38px); letter-spacing:.6em; padding:14px 10px 14px calc(10px + .6em);
  color:#8a8a85; animation:enterPulse 2.6s ease-in-out infinite;
  transition:color .3s, border-color .3s;
}
.enter-btn:hover,.enter-btn:focus-visible{color:#e9e9e5; border-bottom-color:#c01515; outline:none}
@keyframes enterPulse{0%,100%{opacity:.55}50%{opacity:1}}
.gate-note{
  margin:0; font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:13px; letter-spacing:.3em; color:#55554f;
}
.mute{
  position:fixed; right:22px; bottom:18px; z-index:6;
  background:none; border:0; cursor:pointer; padding:8px;
  font-family:Georgia,'Times New Roman',serif; font-style:italic;
  font-size:12px; letter-spacing:.25em; color:#6f6f6a;
  opacity:0; pointer-events:none; transition:opacity .8s, color .3s;
}
.mute.show{opacity:1; pointer-events:auto}
.mute:hover{color:#c0c0ba}

/* Sol alt köşe: yapımcı / yatırımcı notu (ışık açık ya da kapalı hep görünür) */
.invest{
  position:fixed; left:clamp(18px,3.2vw,48px); bottom:clamp(16px,3.4vh,34px); z-index:45;
  max-width:min(520px,78vw);
  font-family:Arial,Helvetica,sans-serif; text-transform:uppercase;
  font-size:11px; letter-spacing:.3em; line-height:2; color:#92928d;
  text-shadow:0 0 8px rgba(0,0,0,.9), 0 1px 2px #000;
}
.invest p{margin:0}
.invest .wm{text-transform:none}
.invest a{
  display:inline-block; margin-top:10px; color:#aaa; text-decoration:none; text-transform:none;
  border-top:1px solid #555; border-bottom:1px solid #555; padding:6px 2px;
  transition:color .3s, border-color .3s;
}
.invest a:hover{color:#e9e9e5; border-top-color:#8e1515; border-bottom-color:#8e1515}
@media(max-width:800px){.invest{font-size:10px; letter-spacing:.22em; max-width:68vw}}