/* ==========================================================================
   OrbitJuara — Patch Header Mobile (v3 — STRONGER FIX)
   --------------------------------------------------------------------------
   v3 memperbaiki dua masalah yang masih dialami user setelah v2:

   1. BROWSER CACHE — file lama masih dipakai browser
      Solusi: rename file jadi _patch-header-v3.css (cache otomatis busted
              karena nama file baru) + index.html pakai URL baru.

   2. TEKS TERTUTUP KONTEN KANAN — OrbitJuara muncul tapi ditutupi
      status spinner "Menyiapkan OrbitJuara…" / badge di kanan.
      Solusi: pada layar sangat sempit (<= 480px), SEMBUNYIKAN konten kanan
              agar OrbitJuara center tidak tertutup. Konten kanan muncul
              kembali di layar >= 481px.

   Cara kerja lengkap:
   - Force display:block + visibility:visible + opacity:1 (triple override)
     untuk menjamin teks tampil meski ada utility class Tailwind `hidden`.
   - Position absolute di tengah header (left:50% + translate -50%).
   - z-index:30 menyamai header, di atas konten statis.
   - pointer-events:none agar tidak menghalangi klik pada logo / tombol kanan.
   - Hanya aktif di max-width:639px (mobile). Desktop tidak berubah.
   ========================================================================== */

@media (max-width: 639px) {
  /* Container header jadi positioning context untuk anak absolute */
  header.sticky > div {
    position: relative !important;
  }

  /* Target span teks "OrbitJuara" — descendant combinator (spasi) agar
     cocok baik saat loading shell (div > span) maupun setelah hydration
     (div > button > span). Triple override display+visibility+opacity
     untuk memastikan teks tampil walau Tailwind `hidden` class ada. */
  header.sticky span.font-black.text-lg.tracking-tight {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 30 !important;
  }
}

/* ==========================================================================
   LAYAR SANGAT SEMPIT (<= 480px)
   Sembunyikan konten kanan (status/badge/spinner) agar OrbitJuara center
   tidak tertutup. Pada layar >= 481px, konten kanan muncul kembali dan
   layout otomatis menyesuaikan.
   ========================================================================== */
@media (max-width: 480px) {
  /* Target span kanan — kombinasi class ml-auto + inline-flex.
     Multiple selector untuk variasi struktur (direct child / sibling button). */
  header.sticky span.ml-auto.inline-flex,
  header.sticky > div > span.ml-auto,
  header.sticky > div > button + span.ml-auto,
  header.sticky > div > button ~ span.ml-auto {
    display: none !important;
  }
}

/* Untuk layar ekstra sempit (<= 360px), kecilkan teks OrbitJuara sedikit */
@media (max-width: 360px) {
  header.sticky span.font-black.text-lg.tracking-tight {
    font-size: 0.95rem !important;
    letter-spacing: -0.025em !important;
  }
}