/* ============================================================
   latar.css — v65 "LATAR HIDUP"
   Diangkat dari desain PETS X, diselaraskan dengan palet stasiun.
   Semua ter-scope .bgfx / .mr-panggung / #mxRain.
   ============================================================ */

/* ---------- lapisan latar ---------- */
.bgfx{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none }
.bgfx svg{ position:absolute }
.bgfx .candles{ left:0; right:0; bottom:-10px; width:100%; height:34vh; min-height:180px }
.bgfx .hexes{ top:-30px; right:-50px; width:400px }
.bgfx .chain{ left:-30px; top:26%; width:280px }
.bgfx .sat{ left:3%; top:9%; width:200px; animation:satfloat 9s ease-in-out infinite alternate }
@keyframes satfloat{ from{transform:translateY(0) rotate(-2deg)} to{transform:translateY(14px) rotate(2deg)} }

/* ticker pair melayang */
.ftick{
  position:absolute; top:0; font-family:"JetBrains Mono",monospace;
  font-size:.6rem; font-weight:600; letter-spacing:.1em;
  border:1px solid; border-radius:999px; padding:4px 12px; opacity:0;
  background:rgba(19,20,38,.5); animation:floatup linear infinite;
}
.ftick.c{ color:#5CF2FF; border-color:rgba(92,242,255,.3) }
.ftick.p{ color:#FF8FD8; border-color:rgba(255,143,216,.3) }
.ftick.m{ color:#7DF0C9; border-color:rgba(125,240,201,.3) }
.ftick.l{ color:#B79CFF; border-color:rgba(183,156,255,.3) }
@keyframes floatup{
  0%{ transform:translateY(106vh); opacity:0 }
  10%{ opacity:.28 } 90%{ opacity:.28 }
  100%{ transform:translateY(-10vh); opacity:0 }
}

/* hujan kode biner */
.bin{
  position:absolute; top:0; font-family:"JetBrains Mono",monospace; font-size:12px;
  letter-spacing:.12em; white-space:pre; line-height:1.7; opacity:.09;
  color:#5CF2FF; animation:binfall linear infinite;
}
.bin.l{ color:#B79CFF } .bin.p{ color:#FF8FD8 } .bin.m{ color:#7DF0C9 }
@keyframes binfall{ from{transform:translateY(-50%)} to{transform:translateY(0)} }

/* aurora + kisi holografik */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(255,143,216,.13), transparent 70%),
    radial-gradient(34% 28% at 82% 18%, rgba(92,242,255,.11), transparent 70%),
    radial-gradient(40% 32% at 70% 80%, rgba(125,240,201,.10), transparent 70%),
    radial-gradient(30% 26% at 25% 78%, rgba(183,156,255,.12), transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate; filter:blur(10px);
}
@keyframes aurora{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2.5%,2%) scale(1.06)}
  100%{transform:translate(2%,-2.5%) scale(1.03)}
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(92,242,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(92,242,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(75% 60% at 50% 38%,#000 30%,transparent 100%);
  mask-image:radial-gradient(75% 60% at 50% 38%,#000 30%,transparent 100%);
}

/* matrix rain + scanline + sapuan */
#mxRain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.13 }
.scanfx{
  position:fixed; inset:0; z-index:120; pointer-events:none; opacity:.05;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(92,242,255,.5) 2px 3px);
}
.holosweep{
  position:fixed; left:0; right:0; height:120px; z-index:119; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(92,242,255,.055),rgba(255,143,216,.05),transparent);
  top:-140px; animation:sweep 9s linear infinite;
}
@keyframes sweep{ 0%{top:-140px} 100%{top:110vh} }

/* ---------- panggung duo di atas jaringan blockchain ---------- */
.mr-panggung{
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:6px;
  align-items:end; padding:8px 0 0;
}
.mr-panggung .sosok{ position:relative; text-align:center; cursor:pointer; user-select:none }
.mr-panggung svg{ width:100%; max-width:250px; margin:0 auto; display:block }
.mr-panggung .nama{
  font-family:"Cinzel",serif; font-size:.76rem; letter-spacing:.18em; margin-top:2px;
}
.mr-panggung .nama.momo{ color:#FF8FD8 } .mr-panggung .nama.bobon{ color:#5CF2FF }
.mr-panggung .peran{ font-size:.6rem; color:#7C769B; letter-spacing:.1em }
.mr-apung{ animation:mrApung 4.5s ease-in-out infinite }
.mr-apung.d2{ animation-delay:-2.2s }
@keyframes mrApung{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.mr-bisik{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  background:rgba(26,27,52,.94); border:1px solid var(--mr-sesi,#5FF5C9);
  border-radius:12px 12px 12px 4px; padding:6px 12px; font-size:.76rem;
  white-space:nowrap; box-shadow:0 0 16px rgba(92,242,255,.28);
  opacity:0; transition:opacity .3s; pointer-events:none; z-index:5;
}
.mr-bisik.tampil{ opacity:1 }
.mr-tip{
  text-align:center; font-size:.66rem; color:#7C769B; letter-spacing:.06em; margin-top:6px;
}

@media(max-width:640px){
  .bgfx .hexes{ width:250px; top:-20px; right:-70px }
  .bgfx .chain{ display:none }
  .bgfx .sat{ width:130px }
  #mxRain{ opacity:.09 }
  .mr-panggung{ gap:0 }
  .mr-panggung svg{ max-width:170px }
}

@media(prefers-reduced-motion:reduce){
  .ftick, .bin, #mxRain, .holosweep, .scanfx{ display:none }
  .bgfx .sat, .mr-apung{ animation:none }
  body::before{ animation:none }
}

/* ============================================================
   v66 — ANGKAT LATAR KE PERMUKAAN
   Akar masalah v65: .bgfx di z-index:-1 tertimbun latar opak
   milik land.css / polish.css. Kini .bgfx duduk di z-index 0
   dan seluruh konten diangkat ke z-index 1.
   ============================================================ */
.bgfx{ z-index:0 }
#mxRain{ z-index:0 }

/* konten selalu di atas latar */
body > header.site,
body > .hero,
body > section,
body > footer.site,
body > #mata-menara,
body > .authveil{ position:relative; z-index:1 }

/* buka tabir: latar bagian-bagian ini dibuat tembus
   supaya candlestick, heksagon & matrix terlihat menembus */
.hero{ background:transparent !important }
section, .section-alt{ background:transparent !important }
body > header.site{ background:rgba(10,12,32,.72) !important; backdrop-filter:blur(10px) }

/* kartu tetap perlu badan agar teks terbaca di atas latar ramai */
.card, .mr-sesi, .mr-seg, .mr-box, .vital, .stat{
  background:rgba(19,20,38,.62) !important; backdrop-filter:blur(6px);
}

/* ============================================================
   v67 — AKAR MASALAH LATAR AKHIRNYA DITEMUKAN
   polish.css baris ~314 berbunyi:
       body > *:not(#deepfield) { position: relative; z-index: 1 }
   Selektor itu memakai #deepfield di dalam :not(), jadi bobot
   spesifisitasnya setara satu ID — position:fixed milik .bgfx
   DITIMPA jadi relative, tingginya runtuh ke nol, latar lenyap.
   Urutan berkas tidak pernah bisa menolongnya. Obatnya: lawan
   dengan !important + selektor sederajat.
   ============================================================ */
body > .bgfx,
body > #mxRain,
body > .scanfx,
body > .holosweep{ position:fixed !important }

body > .bgfx{ z-index:0 !important; inset:0 !important }
body > #mxRain{ z-index:0 !important; inset:0 !important }
body > .scanfx{ z-index:120 !important; inset:0 !important }
body > .holosweep{ z-index:119 !important; left:0 !important; right:0 !important }

/* hero setinggi layar penuh milik land.css dibiarkan, tapi
   kabut bawahnya dilembutkan agar candlestick tembus */
.hero::after{ background:linear-gradient(180deg, rgba(6,11,30,.34) 0%, rgba(6,11,30,0) 40%) !important }

/* ---------- KOLOM SIARAN: jantung halaman ---------- */
.mr-siaran{ position:relative; z-index:1; margin-top:6px }
.mr-konsol{
  border:1px solid rgba(95,245,201,.22); border-radius:20px; overflow:hidden;
  background:rgba(11,18,48,.74); backdrop-filter:blur(10px);
  box-shadow:0 18px 60px -30px rgba(0,0,0,.9), inset 0 0 40px rgba(92,242,255,.04);
}
.mr-konsol-atas{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px solid rgba(95,245,201,.16);
  background:rgba(6,11,30,.55);
}
.mr-segnow{
  font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mr-sesi,#5FF5C9);
}
.mr-konsol-atas .kanan{ margin-left:auto; display:flex; gap:8px; align-items:center }
.mr-sp{
  font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.1em;
  padding:3px 10px; border-radius:999px; border:1px solid #2E2F58; color:#7C769B;
  transition:all .25s;
}
.mr-sp.bicara{ color:#060B1E; font-weight:600 }
.mr-sp.momo.bicara{ background:#FF8FD8; border-color:#FF8FD8 }
.mr-sp.bobon.bicara{ background:#5CF2FF; border-color:#5CF2FF }
.mr-konsol-isi{ padding:22px 20px; min-height:250px }
.mr-konsol-kaki{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid rgba(95,245,201,.16);
  background:rgba(6,11,30,.4);
}
.mr-konsol-kaki .btn{ margin:0 }
.mr-baris .mr-siapa{ display:block }
@media(max-width:640px){
  .mr-konsol-isi{ padding:16px 14px; min-height:200px }
  .mr-konsol-atas, .mr-konsol-kaki{ padding:11px 13px }
  .mr-konsol-kaki .btn{ width:100%; text-align:center }
}