/* ============================================================
   siar.css — MESIN SIARAN BARU (tahap 1)
   Kokpit global untuk /live.html. Berdiri sendiri, tidak
   bergantung pada deck.css. Semua ter-scope .sr-*
   ============================================================ */
.sr{
  --sesi:#5FF5C9;
  --sr-line:#1A2049; --sr-ink:#EEF2FF; --sr-dim:#7E8AB8;
  --sr-momo:#FF7EC0; --sr-bobon:#5FF5C9; --sr-lav:#B79CFF;
  --sr-gold:#F0C24B; --sr-cyan:#5CF2FF; --sr-merah:#FF3B5C;
  position:relative; max-width:1240px; margin:96px auto 0;
  border:1px solid var(--sr-line); border-radius:16px; overflow:hidden;
  background:#02040C; color:var(--sr-ink);
  box-shadow:0 40px 110px -50px #000;
  font-family:"Spectral",Georgia,serif;
}
.sr *{ box-sizing:border-box }

/* ---------- pita atas ---------- */
.sr-atas{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px;
  background:linear-gradient(180deg,#0A1130,#050915); border-bottom:1px solid var(--sr-line);
  font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.08em;
  position:relative; z-index:20;
}
.sr-live{ display:inline-flex; align-items:center; gap:7px; background:var(--sr-merah);
  color:#fff; font-weight:700; letter-spacing:.18em; padding:4px 11px; border-radius:4px;
  box-shadow:0 0 18px rgba(255,59,92,.55) }
.sr-live i{ width:6px;height:6px;border-radius:50%;background:#fff;animation:srKedip 1.2s infinite }
@keyframes srKedip{ 50%{opacity:.2} }
.sr-tc{ color:var(--sr-gold); font-weight:600 }
.sr-nonton{ color:var(--sr-dim) } .sr-nonton b{ color:var(--sr-ink) }
.sr-simul{ margin-left:auto; display:flex; gap:5px; flex-wrap:wrap }
.sr-pf{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--sr-line);
  border-radius:999px; padding:3px 9px; color:var(--sr-dim); font-size:.58rem;
  background:rgba(10,17,48,.7); text-decoration:none }
.sr-pf:hover{ color:var(--sr-ink); border-color:var(--sesi); text-decoration:none }
.sr-pf i{ width:5px;height:5px;border-radius:50%;background:#43E8A0;box-shadow:0 0 7px #43E8A0 }

/* ---------- panggung ---------- */
.sr-panggung{ position:relative; aspect-ratio:16/9; min-height:360px; overflow:hidden;
  background:linear-gradient(180deg,#060C24,#02040E) }
#srLaut{ position:absolute; inset:0; width:100%; height:100%; z-index:0 }
.sr-kaca{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.05) 0 10%,transparent 26%) }
.sr-vig{ position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.75) }
.sr-pindai{ position:absolute; left:0; right:0; height:70px; z-index:4; pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sesi) 9%,transparent),transparent);
  animation:srTurun 8s linear infinite }
@keyframes srTurun{ 0%{top:-70px} 100%{top:100%} }

/* ---------- rak monitor ---------- */
.sr-rak{ position:absolute; width:122px; z-index:6; display:flex; flex-direction:column; gap:7px }
.sr-rak.kiri{ left:10px; top:10px; bottom:78px }
.sr-rak.kanan{ right:10px; top:10px; height:46% }
.sr-mon{ flex:1; border:1px solid var(--sr-line); border-radius:7px; overflow:hidden; position:relative;
  background:rgba(3,7,20,.82); padding:5px 6px; backdrop-filter:blur(3px); min-height:0 }
.sr-mon::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 40%) }
.sr-mon h4{ font-family:"JetBrains Mono",monospace; font-size:.48rem; letter-spacing:.13em;
  color:var(--sr-dim); display:flex; justify-content:space-between; margin:0 0 3px }
.sr-mon h4 i{ font-style:normal; color:var(--sesi) }
.sr-mon svg{ display:block; width:100%; height:calc(100% - 12px) }

/* ---------- satelit ---------- */
.sr-sat{ position:absolute; top:14px; right:144px; width:74px; z-index:7;
  animation:srMelayang 8s ease-in-out infinite alternate }
@keyframes srMelayang{ to{ transform:translateY(9px) rotate(3deg) } }
.sr-sinyal{ position:absolute; top:64px; right:172px; width:2px; height:110px; z-index:6;
  background:linear-gradient(180deg,var(--sr-cyan),transparent); opacity:.5;
  animation:srTembak 2.6s ease-in-out infinite }
@keyframes srTembak{ 0%,100%{opacity:.12} 45%{opacity:.8} }
.sr-uplink{ position:absolute; top:14px; left:144px; z-index:7;
  font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.08em;
  border:1px solid rgba(92,242,255,.35); background:rgba(2,5,16,.85);
  padding:5px 9px; border-radius:6px; color:var(--sr-cyan); line-height:1.5 }
.sr-uplink b{ color:var(--sr-bobon) } .sr-uplink span{ color:var(--sr-dim) }

/* ---------- watermark & rundown ---------- */
.sr-bug{ position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:9;
  text-align:center; font-family:"Cinzel",serif; letter-spacing:.24em; font-size:.62rem;
  color:rgba(238,242,255,.5) }
.sr-bug small{ display:block; font-family:"JetBrains Mono",monospace; font-size:.5rem;
  letter-spacing:.2em; color:var(--sesi); opacity:.85 }
.sr-rundown{ position:absolute; right:208px; bottom:82px; z-index:11;
  font-family:"JetBrains Mono",monospace; font-size:.56rem; letter-spacing:.1em;
  text-align:right; color:var(--sr-dim); line-height:1.7 }
.sr-rundown b{ color:var(--sesi) } .sr-rundown u{ text-decoration:none; color:var(--sr-ink) }

/* ---------- chat ---------- */
.sr-chat{ position:absolute; right:10px; top:calc(16px + 46%); bottom:78px; width:188px; z-index:9;
  display:flex; flex-direction:column; border:1px solid var(--sr-line); border-radius:8px;
  background:rgba(3,6,18,.78); backdrop-filter:blur(4px); overflow:hidden }
.sr-chat h5{ font-family:"JetBrains Mono",monospace; font-size:.48rem; letter-spacing:.14em;
  color:var(--sr-dim); padding:5px 8px; border-bottom:1px solid rgba(26,32,73,.8);
  display:flex; justify-content:space-between; background:rgba(10,17,48,.6); margin:0 }
.sr-chat h5 i{ font-style:normal; color:#43E8A0 }
.sr-chatIsi{ flex:1; overflow:hidden; padding:5px 7px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:3px }
.sr-pesan{ font-size:.6rem; line-height:1.35; opacity:0; transform:translateY(6px);
  animation:srMasukChat .35s ease forwards; word-break:break-word }
@keyframes srMasukChat{ to{ opacity:1; transform:none } }
.sr-pesan .nm{ font-weight:600; font-family:"JetBrains Mono",monospace; font-size:.55rem; margin-right:4px }
.sr-pesan .tx{ color:#C3CBEA }
.sr-chat .kaki{ font-family:"JetBrains Mono",monospace; font-size:.44rem; letter-spacing:.08em;
  color:var(--sr-dim); padding:4px 8px; border-top:1px solid rgba(26,32,73,.8); text-align:center }

/* ---------- duo ---------- */
.sr-duo{ position:absolute; left:50%; bottom:68px; transform:translateX(-50%); z-index:8;
  display:flex; gap:min(9vw,86px); align-items:flex-end; perspective:900px;
  transition:transform .8s cubic-bezier(.4,0,.2,1) }
.sr-sosok{ position:relative; text-align:center; transform-style:preserve-3d }
.sr-sosok svg{ width:min(23vw,160px); display:block; overflow:visible }
.sr-apung{ animation:srApung 4.6s ease-in-out infinite; transform-style:preserve-3d;
  will-change:transform; filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)) }
.sr-apung.d2{ animation-delay:-2.3s }
.sr-sosok.m .sr-apung{ filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(255,126,192,.3)) }
.sr-sosok.b .sr-apung{ filter:drop-shadow(0 18px 22px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(95,245,201,.28)) }
@keyframes srApung{ 50%{ transform:translateY(-11px) } }
.sr-panggung.close .sr-duo{ transform:translateX(-50%) scale(1.5) translateY(5%) }
.sr-panggung.wide .sr-duo{ transform:translateX(-50%) scale(.86) }

/* ---------- chyron ---------- */
.sr-chyron{ position:absolute; left:0; bottom:70px; z-index:12; display:flex; align-items:stretch;
  transform:translateX(-110%); transition:transform .5s cubic-bezier(.2,.8,.2,1); max-width:74% }
.sr-chyron.tampil{ transform:translateX(0) }
.sr-chyron .pita{ width:6px; background:var(--sesi); box-shadow:0 0 16px var(--sesi) }
.sr-chyron .isi{ background:linear-gradient(90deg,rgba(4,8,24,.97),rgba(4,8,24,.82));
  padding:8px 22px 9px 14px; border-top:1px solid rgba(255,255,255,.08) }
.sr-chyron .siapa{ font-family:"Cinzel",serif; letter-spacing:.16em; font-size:.86rem; line-height:1.2 }
.sr-chyron .peran{ font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.16em;
  color:var(--sr-dim); text-transform:uppercase }
.sr-chyron .ucap{ font-size:.86rem; color:var(--sr-ink); margin-top:3px; max-width:56ch }

/* ---------- breaking ---------- */
.sr-breaking{ position:absolute; left:0; right:0; bottom:70px; z-index:14; display:none;
  background:linear-gradient(90deg,var(--sr-merah),#8A0F26); align-items:center; gap:12px;
  padding:7px 14px; font-family:"JetBrains Mono",monospace; font-size:.68rem; letter-spacing:.1em }
.sr-breaking.on{ display:flex }
.sr-breaking b{ background:#fff; color:var(--sr-merah); padding:2px 8px; border-radius:3px;
  font-weight:700; letter-spacing:.16em; animation:srKedip 1.1s infinite }

/* ---------- meter audio ---------- */
.sr-meter{ position:absolute; left:12px; bottom:80px; z-index:11; display:flex; gap:9px }
.sr-mtr{ display:flex; flex-direction:column; align-items:center }
.sr-mtr .bar{ display:flex; flex-direction:column-reverse; gap:2px }
.sr-mtr i{ width:14px; height:3px; border-radius:1px; background:#1B2450 }
.sr-mtr i.aktif{ background:var(--w) }
.sr-mtr span{ font-family:"JetBrains Mono",monospace; font-size:.46rem; letter-spacing:.1em;
  color:var(--sr-dim); margin-top:3px }

/* ---------- ticker bawah ---------- */
.sr-bawah{ position:absolute; left:0; right:0; bottom:0; z-index:15;
  background:linear-gradient(180deg,rgba(3,6,18,.9),#02040C); border-top:1px solid var(--sr-line) }
.sr-trek{ overflow:hidden; white-space:nowrap; padding:5px 0;
  border-bottom:1px solid rgba(26,32,73,.6) }
.sr-trek:last-child{ border-bottom:0 }
.sr-trek .jln{ display:inline-block; font-family:"JetBrains Mono",monospace; font-size:.6rem;
  letter-spacing:.06em; color:var(--sr-dim); animation:srGeser 38s linear infinite }
.sr-trek.b2 .jln{ animation-duration:52s; animation-direction:reverse }
.sr-trek b{ color:var(--sr-ink) }
.sr-naik{ color:#43E8A0 } .sr-turun{ color:var(--sr-merah) }
.sr-trek .lbl{ color:var(--sr-gold); letter-spacing:.16em }
@keyframes srGeser{ to{ transform:translateX(-50%) } }

/* ---------- kendali bawah panggung ---------- */
.sr-kendali{ display:flex; gap:7px; flex-wrap:wrap; align-items:center;
  padding:10px 12px; background:#050915; border-top:1px solid var(--sr-line) }
.sr-kendali button{ font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.07em;
  padding:7px 13px; border-radius:999px; cursor:pointer; border:1px solid var(--sr-line);
  background:rgba(10,17,48,.9); color:var(--sr-ink); transition:.2s }
.sr-kendali button:hover{ border-color:var(--sesi) }
.sr-kendali button.aktif{ border-color:var(--sr-gold); color:var(--sr-gold) }
.sr-kendali button:focus-visible{ outline:2px solid var(--sr-gold); outline-offset:3px }
.sr-kendali .pagar{ margin-left:auto; font-family:"JetBrains Mono",monospace;
  font-size:.54rem; color:var(--sr-dim); letter-spacing:.08em }

/* ---------- tombol siaran (v71) ---------- */
.sr-kendali .sakelar{ margin-left:6px }
.sr-kendali button.nyala{ border-color:var(--sesi); color:var(--sesi);
  box-shadow:0 0 14px color-mix(in srgb,var(--sesi) 26%,transparent) }
.sr-kendali button.funk{ border-color:var(--sr-momo); color:var(--sr-momo);
  animation:srKedip 1.6s ease-in-out infinite }

/* ---------- kotak surat (v71) ---------- */
.sr-tirai{ position:fixed; inset:0; z-index:300; display:none; align-items:center;
  justify-content:center; background:rgba(2,4,12,.78); backdrop-filter:blur(6px) }
.sr-tirai.on{ display:flex }
.sr-kotak{ width:min(420px,92vw); background:rgba(8,14,40,.97);
  border:1px solid var(--sr-line); border-radius:18px; padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.7) }
.sr-kotak h3{ font-family:"Cinzel",serif; font-size:1.1rem; margin:0 0 4px; color:var(--sesi) }
.sr-kotak p.ket{ font-size:.8rem; color:var(--sr-dim); margin:0 0 14px }
.sr-kotak input, .sr-kotak textarea{ width:100%; padding:11px 13px; border-radius:11px;
  margin-bottom:10px; border:1px solid var(--sr-line); background:rgba(2,5,16,.8);
  color:var(--sr-ink); font-family:inherit; font-size:.9rem; resize:vertical }
.sr-kotak input:focus, .sr-kotak textarea:focus{ outline:none; border-color:var(--sesi) }
.sr-kotak .aksi{ display:flex; gap:9px; margin-top:4px }
.sr-kotak .aksi button{ flex:1; padding:11px; border-radius:11px; cursor:pointer;
  font-family:"JetBrains Mono",monospace; font-size:.72rem; border:1px solid var(--sr-line);
  background:rgba(10,17,48,.9); color:var(--sr-ink) }
.sr-kotak .aksi button.utama{ background:var(--sesi); color:#02040C; border-color:var(--sesi); font-weight:700 }
.sr-kotak .pesanBalik{ font-size:.8rem; color:var(--sr-dim); margin-top:12px; min-height:18px }

@media(max-width:860px){
  .sr{ margin-top:84px }
  .sr-panggung{ aspect-ratio:3/4; min-height:0 }
  .sr-chat{ display:none }
  .sr-meter{ display:none }
  .sr-rundown{ display:none }              /* jangan menimpa chyron */
  .sr-sat{ right:14px; width:52px } .sr-sinyal{ right:38px; top:56px; height:80px }
  .sr-uplink{ left:10px; font-size:.5rem }

  /* monitor jadi baris gulir di atas ticker — tidak lagi disembunyikan */
  .sr-rak.kiri{ left:0; right:0; top:auto; bottom:104px; width:auto; height:64px;
    flex-direction:row; overflow-x:auto; gap:6px; padding:0 8px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch }
  .sr-rak.kiri::-webkit-scrollbar{ display:none }
  .sr-rak.kiri .sr-mon{ flex:0 0 116px; min-height:0 }
  .sr-rak.kanan{ display:none }

  /* chyron: pita penuh di bawah, tidak menimpa apa pun */
  .sr-chyron{ left:0; right:0; bottom:70px; max-width:none }
  .sr-chyron .isi{ flex:1; padding:7px 14px 8px 12px }
  .sr-chyron .siapa{ font-size:.76rem }
  .sr-chyron .ucap{ font-size:.76rem; max-width:none }

  .sr-duo{ bottom:176px; gap:5vw }         /* naik, di atas monitor & chyron */
  .sr-sosok svg{ width:min(34vw,142px) }
  .sr-bug{ top:8px; font-size:.56rem }
  .sr-kendali .pagar{ display:none }
}
@media(prefers-reduced-motion:reduce){
  .sr *{ animation:none !important; transition:none !important }
}

/* ---------- kepala bergerak (v82) ---------- */
.srKepala{
  transform-box:fill-box;
  transform-origin:50% 96%;          /* poros di pangkal leher */
  animation:srAyunKepala 6.4s ease-in-out infinite;
  will-change:transform;
}
@keyframes srAyunKepala{
  0%,100%{ transform:rotate(-1.5deg) translateY(0) }
  50%    { transform:rotate(1.5deg)  translateY(-1px) }
}
/* mengangguk saat bicara */
.srKepala.bicara{ animation:srAngguk 1.05s ease-in-out infinite }
@keyframes srAngguk{
  0%,100%{ transform:rotate(0deg)    translateY(0) }
  28%    { transform:rotate(2.4deg)  translateY(1.4px) }
  56%    { transform:rotate(-1.4deg) translateY(-.7px) }
  78%    { transform:rotate(1deg)    translateY(.5px) }
}
/* memiringkan kepala ke arah yang bicara */
.srKepala.dengar{
  animation:none;
  transform:rotate(var(--miring,0deg)) translateY(-.5px);
  transition:transform .5s cubic-bezier(.22,.9,.3,1);
}
@media(prefers-reduced-motion:reduce){
  .srKepala, .srKepala.bicara{ animation:none }
  .srKepala.dengar{ transform:none }
}

/* ---------- kartu stasiun saat jeda musik (v87) ---------- */
.sr-kartu{
  position:absolute; inset:0; z-index:40; display:grid; place-content:center;
  text-align:center; gap:6px; opacity:0; pointer-events:none;
  transition:opacity .9s ease;
  background:radial-gradient(60% 70% at 50% 45%, rgba(6,11,30,.86), rgba(3,6,15,.96));
  backdrop-filter:blur(3px);
}
.sr-kartu.nyala{ opacity:1 }
.sr-kartu .jam{
  font-family:"JetBrains Mono",monospace; font-size:.62rem; letter-spacing:.24em;
  color:var(--ink-dim);
}
.sr-kartu .nm{
  font-family:"Cinzel",serif; font-size:clamp(1.2rem,4vw,2rem); letter-spacing:.16em;
  background:linear-gradient(96deg,#FF7EC0,#5FF5C9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sr-kartu .sub{
  font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.3em;
  color:var(--ink-dim);
}
.sr-kartu .next{
  margin-top:14px; font-family:"JetBrains Mono",monospace; font-size:.52rem;
  letter-spacing:.2em; color:var(--sovereign-gold); opacity:.9;
}
/* denyut halus supaya jeda tidak terasa mati */
.sr-kartu.nyala .nm{ animation:srKartuNapas 4.5s ease-in-out infinite }
@keyframes srKartuNapas{ 50%{ opacity:.68 } }
@media(prefers-reduced-motion:reduce){
  .sr-kartu{ transition:none } .sr-kartu.nyala .nm{ animation:none }
}

/* ---------- sosok tamu: RANGER & WARGA (v90) ---------- */
.sr-tamu{
  position:absolute; z-index:26; left:50%; bottom:16%;
  transform:translateX(-50%) translateY(18px) scale(.94);
  opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
.sr-tamu.nyala{ opacity:1; transform:translateX(-50%) translateY(0) scale(1) }
.sr-tamu svg{ width:min(17vw,116px); display:block; overflow:visible }

/* RANGER — mesin: melayang tegas, cahaya keemasan */
.sr-tamu.r{ filter:drop-shadow(0 0 18px rgba(240,194,75,.4)) }
.sr-tamu.r svg{ animation:srTamuLayang 3.4s ease-in-out infinite }
@keyframes srTamuLayang{ 50%{ transform:translateY(-7px) } }

/* WARGA — kiriman: tembus pandang, berkedip halus seperti sinyal jauh */
.sr-tamu.w{ filter:drop-shadow(0 0 20px rgba(183,156,255,.42)) }
.sr-tamu.w svg{ animation:srTamuSinyal 5s ease-in-out infinite }
@keyframes srTamuSinyal{
  0%,100%{ opacity:.92 } 46%{ opacity:.62 } 52%{ opacity:.95 }
}
@media(max-width:640px){ .sr-tamu svg{ width:min(26vw,104px) } }
@media(prefers-reduced-motion:reduce){
  .sr-tamu{ transition:none }
  .sr-tamu.r svg, .sr-tamu.w svg{ animation:none }
}

/* ---------- pita siaga (v91) ---------- */
.sr-breaking.siaga{
  background:linear-gradient(90deg,#7A4A00,#F0C24B 45%,#7A4A00);
  color:#1A1000;
}
.sr-breaking.siaga.mendesak{
  background:linear-gradient(90deg,#5A0010,#FF5C7A 45%,#5A0010);
  color:#FFF0F3;
  animation:srSiagaDenyut 1.05s ease-in-out infinite;
}
@keyframes srSiagaDenyut{ 50%{ filter:brightness(1.45) } }
@media(prefers-reduced-motion:reduce){
  .sr-breaking.siaga.mendesak{ animation:none }
}

/* ---------- kartu diam saat siaran dihentikan (v97) ---------- */
.sr-hening{
  position:absolute; inset:0; z-index:70; display:grid; place-content:center;
  text-align:center; gap:10px; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  background:radial-gradient(70% 80% at 50% 45%, rgba(30,4,10,.94), rgba(8,2,4,.985));
  backdrop-filter:blur(5px);
}
.sr-hening.nyala{ opacity:1 }
.sr-hening .tanda{
  font-size:1.1rem; color:#FF5C7A;
  animation:srHeningDenyut 2.2s ease-in-out infinite;
}
.sr-hening .jdl{
  font-family:"JetBrains Mono",monospace; font-size:clamp(.62rem,2.4vw,.8rem);
  letter-spacing:.26em; color:#FFD9E1;
}
.sr-hening .sub{
  font-family:"JetBrains Mono",monospace; font-size:.56rem;
  letter-spacing:.14em; color:var(--ink-dim); max-width:32ch; margin:0 auto;
  line-height:1.7;
}
@keyframes srHeningDenyut{ 50%{ opacity:.25 } }
@media(prefers-reduced-motion:reduce){
  .sr-hening{ transition:none } .sr-hening .tanda{ animation:none }
}

/* ---------- nama lagu yang sedang diputar (v99) ---------- */
.sr-lagu{
  position:absolute; left:14px; bottom:14px; z-index:30;
  font-family:"JetBrains Mono",monospace; font-size:.54rem; letter-spacing:.14em;
  color:var(--ink-dim); background:rgba(6,11,30,.62);
  border:1px solid rgba(255,255,255,.08); border-radius:999px;
  padding:5px 12px; opacity:0; transition:opacity .6s ease; pointer-events:none;
  max-width:min(58vw,340px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-lagu.nyala{ opacity:.85 }
@media(max-width:640px){ .sr-lagu{ font-size:.5rem; max-width:64vw } }
@media(prefers-reduced-motion:reduce){ .sr-lagu{ transition:none } }

/* ---------- gerak badan (v103 — dinaikkan) ---------- */
/* v102 terlalu halus: Arsitek menonton dan berkata "masih kurang".
   Nilainya dinaikkan sekitar dua kali lipat, dan ditambah tiga gerak
   baru: naik-turun saat bicara, lengan mengangkat sesekali, dan
   antena/telinga ikut bergoyang.

   Batas yang tetap dijaga: tidak ada gerak yang membuat sosoknya
   terlihat mabuk atau kejang. Yang dikejar HIDUP, bukan heboh. */

.srBadan{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:srNapas 3.8s ease-in-out infinite;
}
#srBadanB{ animation-duration:4.4s; animation-delay:-1.5s }

@keyframes srNapas{
  0%,100%{ transform:scaleY(1)     translateY(0)    }
  50%    { transform:scaleY(1.038) translateY(-1.8px) }
}

/* BICARA: condong + naik-turun sekaligus — dua gerak yang berbeda
   iramanya membuat sosoknya terlihat menekankan kata, bukan bergoyang. */
.srBadan.bicara{ animation:srCondong 0.92s ease-in-out infinite }
@keyframes srCondong{
  0%,100%{ transform:rotate(0deg)    translateY(0)      scaleY(1)     }
  28%    { transform:rotate(3.8deg)  translateY(-2.2px) scaleY(1.026) }
  55%    { transform:rotate(-1.4deg) translateY(0.8px)  scaleY(0.994) }
  78%    { transform:rotate(2.2deg)  translateY(-1.2px) scaleY(1.014) }
}

/* MENDENGAR: pergeseran berat badan, sekarang jelas terlihat */
.srBadan.dengar{ animation:srGeser 2.4s ease-in-out }
@keyframes srGeser{
  0%,100%{ transform:translateX(0)    rotate(0deg)    }
  40%    { transform:translateX(3.6px) rotate(-2.4deg) }
  70%    { transform:translateX(-1.4px) rotate(1.1deg) }
}

/* LENGAN: ayunan diperbesar, dan sesekali SATU lengan terangkat
   seperti orang yang menegaskan sesuatu. */
.srLengan{ transform-box:fill-box; transform-origin:50% 6% }
.srBicara .srLengan.kiri { animation:srAyunKiri  0.92s ease-in-out infinite }
.srBicara .srLengan.kanan{ animation:srAyunKanan 0.92s ease-in-out infinite }
@keyframes srAyunKiri{
  0%,100%{ transform:rotate(0deg) }
  30%    { transform:rotate(13deg) }
  65%    { transform:rotate(-4deg) }
}
@keyframes srAyunKanan{
  0%,100%{ transform:rotate(0deg) }
  30%    { transform:rotate(-11deg) }
  65%    { transform:rotate(5deg) }
}

/* TEGAS: satu lengan terangkat tinggi sesaat — dipicu dari JS,
   tidak berulang, supaya terasa disengaja bukan otomatis. */
.srLengan.tegas{ animation:srTegas 1.05s cubic-bezier(.34,1.4,.5,1) }
@keyframes srTegas{
  0%  { transform:rotate(0deg) }
  35% { transform:rotate(-26deg) }
  60% { transform:rotate(-18deg) }
  100%{ transform:rotate(0deg) }
}

/* ANTENA & TELINGA ikut bergoyang saat bicara — bagian kecil yang
   bergerak justru paling menarik mata. */
.srBicara #srAntena{ transform-box:fill-box; transform-origin:50% 100%;
                     animation:srAntena 1.5s ease-in-out infinite }
@keyframes srAntena{
  0%,100%{ transform:rotate(0deg) }
  30%    { transform:rotate(6deg) }
  65%    { transform:rotate(-5deg) }
}

@media(prefers-reduced-motion:reduce){
  .srBadan, .srBadan.bicara, .srBadan.dengar, .srLengan,
  .srBicara .srLengan.kiri, .srBicara .srLengan.kanan,
  .srLengan.tegas, .srBicara #srAntena{ animation:none }
}


/* ---------- latar hidup di halaman siaran (v105) ----------
   Halaman siaran dulu memakai latar polos #02040C sementara index,
   arena, avatara, dan nexus memakai latar.css \u2014 hujan matrix, lilin,
   rantai, satelit, ticker melayang. Bedanya terasa seperti dua situs.

   Sekarang latar.js dipasang juga di sini. `pasangDuo()` keluar sendiri
   karena #mrPanggung tidak ada di halaman ini, jadi tidak ada yang
   bertabrakan dengan MOMO & BOBON versi siaran.

   Panggungnya sendiri TETAP pekat \u2014 ia layar televisi, dan sosok di
   dalamnya harus terbaca. Yang berubah cuma ruang di sekitarnya. */
body{ background:#02040C }

/* Panggung diberi bingkai bercahaya supaya batas antara "layar" dan
   "latar hidup" terlihat disengaja, bukan seperti gambar yang
   tertempel. */
.sr-panggung{
  border:1px solid rgba(92,242,255,.16);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(2,4,12,.9),
             0 22px 60px rgba(0,0,0,.55),
             0 0 70px rgba(92,242,255,.07);
}

/* Efek latar tidak boleh menutupi apa pun yang bisa disentuh. */
.bgfx, #mxRain, .scanfx, .holosweep{ pointer-events:none }


/* ---------- LATAR DITENANGKAN (v106) ----------
   Keluhan Arsitek: "papan harga dan berita jadi melayang-layang".
   Tangkapan layarnya menjawab dalam satu detik: gelembung XAU, US500,
   BTC, NVDA, ETHEREUM melayang naik di atas kepala MOMO & BOBON dan
   menabrak pita berita. Itu `.ftick` bawaan latar.css \u2014 yang baru
   saja ditambahkan ke halaman ini.

   KENAPA IA MERUSAK DI SINI, padahal bagus di halaman utama:
   di halaman utama .ftick adalah SATU-SATUNYA harga di layar. Di
   halaman siaran, papan harga sungguhan sudah ada di monitor rak dan
   di pita bawah \u2014 jadi gelembung itu menampilkan angka yang SAMA di
   tempat KEDUA, dan penonton tidak tahu mana yang harus dibaca.

   Aturannya sederhana: SATU HARGA, SATU TEMPAT.

   YANG TETAP: hujan matrix, lilin, heksagon, rantai, satelit. Semua
   latar yang tidak mengklaim menyampaikan informasi \u2014 jadi ia tidak
   bersaing dengan apa pun. */

.ftick{ display:none !important }

/* Hujan biner diredupkan sedikit: di halaman utama ia latar, di sini
   ia bersaing dengan lilin candlestick di dalam panggung. */
.bin{ opacity:.05 }

/* Panggung dijadikan lapisan tertutup \u2014 apa pun yang melayang di
   halaman berada di belakangnya, bukan di atasnya. Ia layar televisi,
   dan sosok di dalamnya harus terbaca. */
.sr-panggung{
  isolation:isolate;
  z-index:1;
  background:#02040C;
}

/* Ticker bawah dipekatkan penuh. Lapisan atasnya dulu 90% tembus
   pandang, dan lilin di belakangnya masih terlihat \u2014 itu yang
   membuat angkanya terasa mengambang, bukan duduk di papan. */
.sr-bawah{
  background:linear-gradient(180deg,#050A1C,#02040C) !important;
  box-shadow:0 -10px 24px rgba(2,4,12,.75);
}