/* ════════════════════════════════════════════════════════════
   SRCN — sinematik 3B landing
   Sıcak altın-saat paleti · metinsiz arayüz · harici: three.js
   ════════════════════════════════════════════════════════════ */

:root{
  --bg:#0b0e14;
  --accent:#ffbd7a;
  --accent-rgb:255,189,122;
  --txt:#f2e9dc;
  --mono:"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
}

body{
  font-family:var(--mono);
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

::selection{background:rgba(var(--accent-rgb),.28)}

/* three.js yüklenemezse: durağan alacakaranlık fonu */
body.is-fallback::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  background:
    radial-gradient(90% 65% at 72% 26%, rgba(255,178,102,.30), transparent 62%),
    radial-gradient(130% 90% at 28% 86%, rgba(28,44,66,.6), transparent 66%),
    linear-gradient(180deg, #0d1626 0%, #1c2739 42%, #33303a 66%, #14161b 100%);
}
body.is-fallback::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;
  height:36%;
  z-index:1;
  background:linear-gradient(180deg, transparent, rgba(6,8,12,.88));
}

/* ─────────────────── SAHNE KANVASI ─────────────────── */

#scene{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity 1.4s ease .15s;
}
body.is-ready #scene{opacity:1}

/* ─────────────────── GÖRSEL KATMANLAR ─────────────────── */

.fx{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
}

.fx--scanlines{
  background:repeating-linear-gradient(0deg,
    rgba(255,255,255,.02) 0 1px,
    transparent 1px 3px);
  opacity:.5;
}

.fx--grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
}

.fx--vignette{
  background:
    radial-gradient(120% 92% at 50% 42%, transparent 55%, rgba(4,5,9,.62) 100%),
    linear-gradient(180deg, rgba(255,189,122,.04), transparent 22%);
}

.fx--flash{
  background:radial-gradient(62% 52% at 50% 55%, rgba(255,228,190,.5), rgba(255,190,130,.14) 42%, transparent 72%);
  opacity:0;
}

/* ─────────────────── HUD ÇERÇEVESİ ─────────────────── */

.hud{
  position:fixed;
  inset:0;
  z-index:30;
  pointer-events:none;
  font-family:var(--mono);
}

.hud__led{
  position:absolute;
  top:27px;
  right:66px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.9), 0 0 26px rgba(var(--accent-rgb),.4);
  animation:led 2.6s ease-in-out infinite;
}

/* ── üst pusula şeridi ── */

.hud__compass{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(340px,42vw);
  height:20px;
  overflow:hidden;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(90deg,transparent, #000 18%, #000 82%, transparent);
}
.hud__compass i{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.55) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb),.9) 0 1px, transparent 1px 45px);
  background-size:9px 6px, 45px 12px;
  background-repeat:repeat-x;
  background-position:0 12px, 0 8px;
}
.hud__compass::after{
  content:"";
  position:absolute;
  left:50%;
  top:2px;
  width:1px;
  height:16px;
  background:#ffe9d2;
  box-shadow:0 0 8px rgba(var(--accent-rgb),.9);
}

/* ── ses düğmesi ── */

.hud__sound{
  position:absolute;
  top:16px;
  right:20px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:none;
  border:1px solid transparent;
  border-radius:4px;
  color:rgba(242,233,220,.5);
  pointer-events:auto;
  touch-action:manipulation;
  transition:color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hud__sound:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.35)}
.hud__sound .ic{width:19px;height:19px;display:none}
.hud__sound:not(.is-on) .ic--off{display:block}
.hud__sound.is-on .ic--on{display:block}
.hud__sound.is-on{
  color:var(--accent);
  border-color:rgba(var(--accent-rgb),.4);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.25), inset 0 0 10px rgba(var(--accent-rgb),.12);
}

.hud__corner{
  position:absolute;
  width:28px;height:28px;
  opacity:.6;
  animation:hudPulse 5.5s ease-in-out infinite;
}
.hud__corner--tl{top:14px;left:14px;border-top:1px solid rgba(var(--accent-rgb),.5);border-left:1px solid rgba(var(--accent-rgb),.5)}
.hud__corner--tr{top:14px;right:14px;border-top:1px solid rgba(var(--accent-rgb),.5);border-right:1px solid rgba(var(--accent-rgb),.5);animation-delay:-1.4s}
.hud__corner--bl{bottom:14px;left:14px;border-bottom:1px solid rgba(var(--accent-rgb),.5);border-left:1px solid rgba(var(--accent-rgb),.5);animation-delay:-2.8s}
.hud__corner--br{bottom:14px;right:14px;border-bottom:1px solid rgba(var(--accent-rgb),.5);border-right:1px solid rgba(var(--accent-rgb),.5);animation-delay:-4.2s}

/* ── etkileşim ipuçları (sözsüz) ── */

.hud__hints{
  position:absolute;
  bottom:20px;
  right:26px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--accent);
  opacity:.32;
  animation:hints 3.6s ease-in-out infinite;
}
.hud__hints svg{width:26px;height:26px}
.hud__hints .hud__hint-key{width:42px;height:26px}

/* ─────────────────── NİŞAN ALMA İMLECİ ─────────────────── */

.cursor{
  position:fixed;
  left:0;top:0;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  display:none;
}
.cursor.is-on{opacity:1}

.cursor__dot{
  position:absolute;
  width:5px;height:5px;
  margin:-2.5px;
  border-radius:50%;
  background:#fff3e4;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.95), 0 0 22px rgba(var(--accent-rgb),.5);
  transition:transform .18s ease;
}

.cursor__ret{
  position:absolute;
  width:38px;height:38px;
  margin:-19px;
  animation:spin 14s linear infinite;
}
.cursor__ret i{
  position:absolute;
  width:9px;height:9px;
  transition:border-color .18s ease;
}
.cursor__ret i:nth-child(1){top:0;left:0;border-top:1.5px solid rgba(var(--accent-rgb),.9);border-left:1.5px solid rgba(var(--accent-rgb),.9)}
.cursor__ret i:nth-child(2){top:0;right:0;border-top:1.5px solid rgba(var(--accent-rgb),.9);border-right:1.5px solid rgba(var(--accent-rgb),.9)}
.cursor__ret i:nth-child(3){bottom:0;right:0;border-bottom:1.5px solid rgba(var(--accent-rgb),.9);border-right:1.5px solid rgba(var(--accent-rgb),.9)}
.cursor__ret i:nth-child(4){bottom:0;left:0;border-bottom:1.5px solid rgba(var(--accent-rgb),.9);border-left:1.5px solid rgba(var(--accent-rgb),.9)}

.cursor.is-down .cursor__dot{transform:scale(1.9)}
.cursor.is-down .cursor__ret i{border-color:#fff3e4}

@media (pointer:fine){
  html.cursor-ready,
  html.cursor-ready body,
  html.cursor-ready *{cursor:none !important}
  html.cursor-ready .cursor{display:block}
}

/* ─────────────────── AÇILIŞ ANİMASYONU ─────────────────── */

.boot{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:radial-gradient(60% 50% at 50% 50%, #131722 0%, #0b0e14 72%);
  transition:opacity .7s ease, visibility .7s;
  animation:bootAuto .7s ease 5s both;
}
body.is-ready .boot{opacity:0;visibility:hidden}

.boot__svg{
  width:clamp(110px,22vw,150px);
  height:auto;
  color:var(--accent);
  filter:drop-shadow(0 0 16px rgba(var(--accent-rgb),.35));
}

.boot__hex,
.boot__ring{
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:draw 1.05s cubic-bezier(.4,0,.2,1) forwards;
  transform-box:view-box;
}
.boot__ring{animation-delay:.55s}

.boot__dot{
  transform-box:view-box;
  transform-origin:60px 60px;
  transform:scale(0);
  animation:pop .5s cubic-bezier(.2,1.5,.4,1) 1.02s forwards;
}

.boot__spin{
  transform-box:view-box;
  transform-origin:60px 60px;
  animation:spin 2.4s linear infinite, bootFade .4s ease 1.15s both;
}

/* ─────────────────── ANAHTAR KARELER ─────────────────── */

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bootFade{from{opacity:0}to{opacity:.8}}

@keyframes led{
  0%,100%{opacity:1;box-shadow:0 0 10px rgba(var(--accent-rgb),.9), 0 0 26px rgba(var(--accent-rgb),.4)}
  50%{opacity:.45;box-shadow:0 0 6px rgba(var(--accent-rgb),.5), 0 0 14px rgba(var(--accent-rgb),.2)}
}

@keyframes hudPulse{
  0%,100%{opacity:.6}
  50%{opacity:.25}
}

@keyframes hints{
  0%,100%{opacity:.32}
  50%{opacity:.12}
}

@keyframes bootAuto{
  to{opacity:0;visibility:hidden}
}

/* ─────────────────── UYARLAMA ─────────────────── */

@media (max-width:700px){
  .hud__led{top:23px;right:56px}
  .hud__sound{top:14px;right:14px}
  .hud__compass{width:64vw;opacity:.4}
  .hud__corner{width:20px;height:20px}
  .hud__hints{bottom:16px;right:16px;gap:10px;opacity:.28}
  .hud__hints svg{width:21px;height:21px}
  .hud__hints .hud__hint-key{width:34px;height:21px}
}

@media (prefers-reduced-motion: reduce){
  .hud__corner,
  .hud__led,
  .hud__hints,
  .cursor__ret{animation:none}
  .boot{display:none}
  #scene{transition-duration:0s}
}