/* ══════════════════════════════════════════════════════════════════════
   FX LIVE — momen live (lihat js/fx-live.js).
   Kapsul "Closing masuk", kapsul rekor pribadi (tepi emas) + banner
   target 100%.

   - TANPA backdrop-filter: kaca padat (isi gelap + tepi cahaya). Anggaran
     blur HP sudah habis di header + nav.
   - z-index 850: di atas header (110) & nav bawah (400), DI BAWAH overlay
     laci/modal (900+), modal .mo (999), kalender (1100), percikan (1200)
     dan toast (9999). Jadi kapsul tidak pernah menutupi modal / laci input
     / toast. Posisinya di BAWAH header (dihitung js), jadi ketukan ke header
     tidak pernah terhalang.
   - Semua gerak dijalankan lewat Web Animations di js (transform/opacity).
     Tidak ada animation/transition !important di sini.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --hxl-g:#30d158;
  --hxl-g2:#5cf08a;
  --hxl-txt:#f5f5f7;
  --hxl-dim:rgba(235,235,245,.62);
  --hxl-faint:rgba(235,235,245,.40);
  /* isi kapsul: gradasi VERTIKAL saja — tiga potongan (2 tutup + tengah)
     harus menyambung tanpa jahitan */
  --hxl-fill:linear-gradient(180deg,#26282d 0%,#17181b 50%,#0e0f11 100%);
}

/* ── kapsul ──────────────────────────────────────────────────────────── */
.hxl-island{
  position:fixed;left:50%;top:74px;z-index:850;
  width:var(--w,360px);height:var(--h,62px);margin-left:calc(var(--w,360px) / -2);
  pointer-events:none;outline:none;
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  contain:layout style;
}
/* halo gelap di LUAR kapsul: memisahkan kapsul dari teks halaman di
   belakangnya (tanpa backdrop-filter). Di bawah bentuk kapsul, jadi hanya
   bagian luarnya yang terlihat; muncul bersama kaca (opacity di js). */
.hxl-shade{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;opacity:0;pointer-events:none;
  /* hampir pekat ±8px di sekeliling tepi (teks di belakang hilang di ujung
     kapsul), memudar sampai ±30px; digeser ke bawah supaya header di atas
     kapsul tidak ikut gelap */
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 8px 12px rgba(0,0,0,.94),0 14px 34px 16px rgba(0,0,0,.6);
}
.hxl-k-ch .hxl-shade{box-shadow:0 0 0 1px rgba(0,0,0,.55),0 5px 7px 9px rgba(0,0,0,.9),0 10px 26px 12px rgba(0,0,0,.55)}
.hxl-island.is-live{pointer-events:auto;cursor:pointer}

/* bentuk: 2 lingkaran (tutup) + 1 persegi (tengah). Dari titik ke kapsul
   hanya dengan transform: grup diskala seragam, tutup bergeser, tengah
   scaleX — bentuknya tetap kapsul sempurna di setiap frame. */
.hxl-shape{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:50% 0}
.hxl-cap,.hxl-mid{position:absolute;top:0;height:var(--h);background:var(--hxl-fill)}
.hxl-cap{
  left:50%;width:var(--h);margin-left:calc(var(--h) / -2);border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.20);
}
/* tengah DI ATAS tutup: menutup setengah dalam lingkaran, jadi tepi cahaya
   tutup hanya terlihat di sisi luar. Garis atas tengah = gabungan 2 garis
   tutup (.075 + .20 ≈ .26) supaya sambungannya tidak terlihat. */
.hxl-mid{
  left:50%;width:calc(var(--w) - var(--h) + 2px);margin-left:calc((var(--w) - var(--h) + 2px) / -2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(255,255,255,.075);
}
.hxl-glass{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;opacity:0;pointer-events:none;
  background:radial-gradient(120% 150% at 50% -45%,rgba(255,255,255,.10),rgba(255,255,255,0) 58%);
  box-shadow:inset 0 -16px 26px -20px rgba(48,209,88,.42),
             0 22px 44px -18px rgba(0,0,0,.95),0 6px 14px -6px rgba(0,0,0,.6);
}
.hxl-bloom{
  position:absolute;left:-16%;right:-16%;top:-70%;bottom:-70%;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(48,209,88,.42),rgba(48,209,88,.12) 55%,rgba(48,209,88,0));
}
/* titik hijau tempat kapsul lahir dan kembali */
.hxl-seed{
  position:absolute;left:50%;top:1px;width:10px;height:10px;margin-left:-5px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#c9ffd9 0,#5cf08a 45%,#30d158 100%);
  box-shadow:0 0 0 3px rgba(48,209,88,.16),0 0 14px 2px rgba(48,209,88,.55);
}
.hxl-k-ch .hxl-seed{background:#9fa3aa;box-shadow:0 0 0 3px rgba(255,255,255,.08),0 0 10px rgba(255,255,255,.25)}

/* isi */
.hxl-body{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;overflow:hidden;opacity:0;
  display:flex;align-items:center;padding:0 20px 0 12px;box-sizing:border-box;
  color:var(--hxl-txt);
}
.hxl-chip{
  position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22);
  font:700 12px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.02em;color:#ececf0;
}
.hxl-chip svg{display:block}
.hxl-badge{
  position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  border-radius:999px;background:var(--hxl-g);color:#03140a;
  font:700 10px/17px 'Space Grotesk',system-ui,sans-serif;text-align:center;
  box-shadow:0 0 0 2px #15161a;opacity:0;transform:scale(.3);
}
/* jarak antar-elemen pakai margin, BUKAN flex gap (iOS < 14.5 tidak mendukungnya) */
.hxl-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;margin-left:11px}
.hxl-main>*+*{margin-top:4px}
.hxl-l1{display:flex;align-items:center;min-width:0;line-height:1.15}
.hxl-l1>*+*{margin-left:7px}
.hxl-name{font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--hxl-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hxl-rank{
  flex:0 0 auto;font:700 9px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 6px 3px;border-radius:6px;color:var(--hxl-g2);
  background:rgba(48,209,88,.12);box-shadow:inset 0 0 0 1px rgba(48,209,88,.32);
}
.hxl-rank:empty{display:none}
/* #1 hari ini: satu-satunya tempat kuning logo dipakai */
.hxl-rank.is-top{color:#ffd426;background:rgba(255,212,38,.10);box-shadow:inset 0 0 0 1px rgba(255,212,38,.42)}
.hxl-l2wrap{position:relative;height:15px;overflow:hidden}
.hxl-l2{
  display:block;font-size:11.5px;font-weight:500;letter-spacing:.01em;line-height:15px;color:var(--hxl-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hxl-l2.is-old{position:absolute;top:0;left:0;right:0}
.hxl-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;margin-left:11px}
.hxl-side>*+*{margin-top:5px}
.hxl-amt{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--hxl-g);font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap}
.hxl-sub{font:400 9.5px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--hxl-faint);white-space:nowrap}
.hxl-prog{
  position:absolute;left:calc(var(--h) / 2);right:calc(var(--h) / 2);bottom:0;height:1px;opacity:0;transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,rgba(48,209,88,0),rgba(92,240,138,.75) 18%,rgba(92,240,138,.75) 82%,rgba(48,209,88,0));
}
.hxl-sweep{
  position:absolute;top:-10%;bottom:-10%;left:0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(190,255,210,.07) 35%,rgba(225,255,235,.22) 50%,rgba(190,255,210,.07) 65%,rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-16deg);
}

/* closing besar (>= Rp10jt): tepi hijau terang + cahaya. BUKAN kuning. */
.hxl-island.is-big .hxl-cap{box-shadow:inset 0 0 0 1px rgba(48,209,88,.48),inset 0 1px 0 rgba(190,255,210,.34)}
.hxl-island.is-big .hxl-mid{box-shadow:inset 0 1px 0 rgba(160,255,190,.62),inset 0 -1px 0 rgba(48,209,88,.48)}
.hxl-island.is-big .hxl-glass{
  box-shadow:inset 0 -18px 30px -16px rgba(48,209,88,.62),
             0 0 30px -6px rgba(48,209,88,.42),
             0 22px 44px -18px rgba(0,0,0,.95),0 6px 14px -6px rgba(0,0,0,.6);
}
.hxl-island.is-big .hxl-amt{color:var(--hxl-g2)}
/* cahaya lewat filter di LUAR kolom odometer yang ter-clip — text-shadow di
   dalam kolom terpotong jadi kotak-kotak */
.hxl-island.is-big .hxl-side{filter:drop-shadow(0 0 10px rgba(48,209,88,.5))}
.hxl-island.is-big .hxl-chip{box-shadow:inset 0 0 0 1px rgba(92,240,138,.75),inset 0 1px 0 rgba(255,255,255,.25),0 0 16px -3px rgba(48,209,88,.7)}

/* HP sempit (320–360px): sedikit lebih rapat supaya nama & nominal muat.
   Padding kiri tetap 12px — chip tetap sepusat dengan tutup kiri kapsul. */
@media(max-width:360px){
  .hxl-body{padding-right:15px}
  .hxl-main,.hxl-side{margin-left:9px}
  .hxl-name{font-size:14.5px}
  .hxl-amt{font-size:15px}
}

/* channel (Tokopedia, Shopee, Live TikTok…): lebih kecil dan lebih tenang */
.hxl-k-ch .hxl-body{padding:0 17px 0 8px}
.hxl-k-ch .hxl-main,.hxl-k-ch .hxl-side{margin-left:10px}
.hxl-tag{
  flex:0 0 auto;font:700 9.5px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(235,235,245,.8);padding:7px 10px 6px;border-radius:999px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);white-space:nowrap;
}
.hxl-k-ch .hxl-main>*+*{margin-top:0}
.hxl-k-ch .hxl-l2{font-size:12px;color:var(--hxl-dim)}
.hxl-k-ch .hxl-amt{font-size:13.5px;color:rgba(48,209,88,.9)}
.hxl-k-ch .hxl-glass{box-shadow:0 16px 34px -16px rgba(0,0,0,.95),0 4px 10px -4px rgba(0,0,0,.6)}

/* cincin target (kapsul 25/50/75%) */
.hxl-ring{position:relative;width:38px;height:38px;flex:0 0 auto}
.hxl-ring svg{position:absolute;top:0;left:0;width:38px;height:38px;transform:rotate(-90deg)}
.hxl-ring circle{fill:none;stroke-width:3}
.hxl-ring .trk{stroke:rgba(255,255,255,.12)}
.hxl-ring .arc{stroke:var(--hxl-g);stroke-linecap:round}
.hxl-ring b{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  font:700 10.5px/1 'Space Mono',ui-monospace,Menlo,monospace;color:#fff;letter-spacing:-.02em}

/* untuk mengukur lebar kapsul channel */
.hxl-measure{visibility:hidden;left:0;top:-300px;margin-left:0;width:auto}
.hxl-measure .hxl-body{position:relative;display:inline-flex;opacity:1;height:var(--h);width:auto}
.hxl-measure .hxl-main{flex:0 0 auto}

/* ── kapsul REKOR PRIBADI: tepi emas ──────────────────────────────────
   Satu-satunya tempat kuning logo dipakai di modul ini (selain label #1).
   Isi tetap gelap & tenang; emas hanya di tepi, label, titik puncak, dan
   cahaya sesaat ketika rekor lama ditembus. */
.hxl-k-rec .hxl-seed{
  background:radial-gradient(circle at 40% 35%,#fff7cf 0,#ffe066 45%,#ffd426 100%);
  box-shadow:0 0 0 3px rgba(255,212,38,.16),0 0 14px 2px rgba(255,212,38,.5);
}
.hxl-k-rec .hxl-cap{box-shadow:inset 0 0 0 1px rgba(255,212,38,.40),inset 0 1px 0 rgba(255,240,186,.30)}
.hxl-k-rec .hxl-mid{box-shadow:inset 0 1px 0 rgba(255,232,150,.58),inset 0 -1px 0 rgba(255,212,38,.40)}
.hxl-k-rec .hxl-glass{
  background:radial-gradient(120% 150% at 50% -45%,rgba(255,236,170,.09),rgba(255,255,255,0) 58%);
  box-shadow:inset 0 -18px 30px -20px rgba(255,212,38,.30),
             0 0 28px -12px rgba(255,212,38,.24),
             0 22px 44px -18px rgba(0,0,0,.95),0 6px 14px -6px rgba(0,0,0,.6);
}
/* tepi emas yang "menyala" saat rekor ditembus (hanya opacity yang bergerak) */
.hxl-rim{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:999px;opacity:0;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,214,58,.92),inset 0 1px 0 rgba(255,246,206,.75),
             0 0 1px rgba(255,212,38,.9),0 0 26px -4px rgba(255,212,38,.5);
}
.hxl-k-rec .hxl-bloom{
  left:-12%;right:-12%;top:-60%;bottom:-60%;
  background:radial-gradient(closest-side,rgba(255,212,38,.26),rgba(255,200,40,.08) 55%,rgba(255,200,40,0));
}
.hxl-k-rec .hxl-sweep{
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,236,170,.06) 35%,rgba(255,246,214,.20) 50%,rgba(255,236,170,.06) 65%,rgba(255,255,255,0) 100%);
}
.hxl-k-rec .hxl-prog{background:linear-gradient(90deg,rgba(255,212,38,0),rgba(255,222,90,.8) 18%,rgba(255,222,90,.8) 82%,rgba(255,212,38,0))}
.hxl-k-rec .hxl-body{padding:0 26px 0 12px}
.hxl-k-rec .hxl-main{margin-left:12px}
.hxl-k-rec .hxl-main>*+*{margin-top:5px}

/* grafik mini: 52px, sepusat dengan tutup kiri kapsul (tinggi 76) */
.hxl-glyph{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 22%,rgba(255,212,38,.10),rgba(255,212,38,0) 64%),
             linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  box-shadow:inset 0 0 0 1px rgba(255,212,38,.34),inset 0 1px 0 rgba(255,240,190,.26);
}
.hxl-glyph svg{position:absolute;top:0;left:0;width:52px;height:52px;overflow:visible}
.hxl-gl-line{fill:none;stroke:#30d158;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hxl-gl-lvl{
  position:absolute;left:10px;width:32px;height:0;margin-top:-.5px;
  border-top:1px dashed rgba(235,235,245,.42);transform-origin:0 50%;
}
.hxl-gl-gold{border-top-color:rgba(255,212,38,.95);opacity:0}
.hxl-gl-bar{
  position:absolute;width:4.6px;border-radius:1.5px 1.5px 0 0;
  background:rgba(235,235,245,.24);transform-origin:50% 100%;
}
.hxl-gl-bar.is-now{background:linear-gradient(180deg,#5cf08a,#30d158)}
.hxl-gl-peak{
  position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:#ffd426;box-shadow:0 0 0 2px rgba(255,212,38,.2),0 0 9px 1px rgba(255,212,38,.75);
}
.hxl-gl-halo{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;opacity:0;
  box-shadow:0 0 0 1px rgba(255,212,38,.9),0 0 8px rgba(255,212,38,.35);
}

/* teks */
.hxl-kick{display:flex;align-items:center;justify-content:space-between;min-width:0;height:11px}
.hxl-kt{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 9.5px/11px 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#ffd426;
}
.hxl-gain{
  flex:0 0 auto;display:inline-flex;align-items:center;margin-left:8px;
  font:700 10.5px/11px 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.02em;color:var(--hxl-g2);
  font-variant-numeric:tabular-nums;
}
.hxl-gain b{font-weight:700;margin-left:4px}
.hxl-gain svg{display:block}
.hxl-k-rec .hxl-l1{align-items:center;line-height:1.2}
.hxl-k-rec .hxl-l1>*+*{margin-left:6px}
.hxl-sep{flex:0 0 auto;color:var(--hxl-faint);font-size:13px}
.hxl-rv{
  flex:0 0 auto;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--hxl-g);
  font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;
}
.hxl-when{flex:0 0 auto;font-size:12px;font-weight:500;color:var(--hxl-dim);white-space:nowrap}
/* tidak muat (js: recFit) -> nama didahulukan, 'hari ini' / 'bulan ini' disembunyikan */
.hxl-island.is-tight .hxl-when{display:none}
@media(max-width:360px){
  .hxl-k-rec .hxl-body{padding:0 22px 0 12px}
  .hxl-k-rec .hxl-main{margin-left:10px}
  .hxl-kt{font-size:9px;letter-spacing:.075em}
  .hxl-gain{font-size:10px}
  .hxl-gain b{margin-left:3px}
  .hxl-k-rec .hxl-name,.hxl-rv{font-size:14.5px}
  .hxl-when{font-size:11.5px}
}

/* ── odometer: tiap digit = kolom 0–9 yang digeser (transform) ───────── */
.hxl-odo{display:inline-flex;align-items:flex-start;height:1.2em;line-height:1.2em;overflow:hidden;white-space:nowrap;vertical-align:top}
.hxl-odo>span{display:block;height:1.2em;white-space:pre}
.hxl-dg{position:relative;overflow:hidden}
.hxl-dgs{display:block}
.hxl-dgs>i{display:block;height:1.2em;font-style:normal;text-align:center}
/* Selama bergulir: jendela kolom = tinggi tinta angka + tepi memudar
   (--hxl-ink diukur dari font di js). Angka tetangga hanya lewat di tepi
   yang memudar, tidak pernah terlihat bertumpuk. Dilepas setelah kolom
   terakhir mendarat. */
.hxl-odo.is-rolling .hxl-dg{
  -webkit-mask-image:var(--hxl-ink,linear-gradient(180deg,transparent .055em,#000 .205em,#000 .985em,transparent 1.135em));
          mask-image:var(--hxl-ink,linear-gradient(180deg,transparent .055em,#000 .205em,#000 .985em,transparent 1.135em));
}

/* ── banner TARGET HARIAN TEMBUS ─────────────────────────────────────── */
.hxl-banner{
  position:fixed;z-index:850;top:74px;left:10px;right:10px;border-radius:26px;outline:none;
  color:var(--hxl-txt);font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  transform-origin:50% 0;
}
.hxl-bn-bg{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;
  background:
    radial-gradient(90% 130% at 16% 0%,rgba(48,209,88,.20),rgba(48,209,88,0) 62%),
    linear-gradient(165deg,#1d2420 0%,#121614 46%,#0a0c0b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(48,209,88,.30),
             inset 0 -40px 60px -42px rgba(48,209,88,.40),
             0 0 0 1px rgba(0,0,0,.6),0 8px 10px 12px rgba(0,0,0,.92),0 18px 44px 16px rgba(0,0,0,.6),
             0 40px 80px -30px rgba(0,0,0,.95);
}
.hxl-bn-rim{
  position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(92,240,138,.75),inset 0 1px 0 rgba(220,255,230,.55),0 0 46px -8px rgba(48,209,88,.55);
}
.hxl-bn-fx{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hxl-bn-grid{
  position:absolute;top:0;right:0;bottom:0;left:0;opacity:.75;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:22px 22px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(70% 95% at 22% 50%,#000,transparent 78%);
          mask-image:radial-gradient(70% 95% at 22% 50%,#000,transparent 78%);
}
.hxl-bn-bloom{
  position:absolute;left:var(--bx,30%);top:var(--by,50%);width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(48,209,88,.55),rgba(48,209,88,.16) 52%,rgba(48,209,88,0));
}
.hxl-bn-ring{
  position:absolute;left:var(--bx,30%);top:var(--by,50%);width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;opacity:0;
  box-shadow:0 0 0 1px rgba(92,240,138,.75),0 0 22px rgba(48,209,88,.32),inset 0 0 18px rgba(48,209,88,.22);
}
.hxl-bn-sweep{
  position:absolute;top:-25%;bottom:-25%;left:0;width:30%;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(200,255,215,.05) 35%,rgba(225,255,235,.17) 50%,rgba(200,255,215,.05) 65%,rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-18deg);
}
.hxl-bn-edge{
  position:absolute;top:0;left:0;width:42%;height:1px;opacity:0;
  background:linear-gradient(90deg,rgba(190,255,210,0),rgba(210,255,225,.95),rgba(190,255,210,0));
  transform:translateX(-110%);
}
.hxl-bn-in{position:relative;padding:16px 20px 16px}
.hxl-bn-top{display:flex;align-items:center;justify-content:space-between}
.hxl-bn-clock{margin-left:10px}
.hxl-bn-kick{display:inline-flex;align-items:center;font:700 10px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.24em;color:var(--hxl-g2);white-space:nowrap}
.hxl-bn-dot{flex:0 0 auto;margin-right:9px;width:7px;height:7px;border-radius:50%;background:var(--hxl-g2);box-shadow:0 0 0 3px rgba(48,209,88,.16),0 0 10px 1px rgba(48,209,88,.8)}
.hxl-bn-clock{font:400 9.5px/1 'Space Mono',ui-monospace,Menlo,monospace;letter-spacing:.14em;color:var(--hxl-faint);white-space:nowrap}
.hxl-bn-row{display:flex;align-items:flex-end;justify-content:space-between;margin-top:8px}
.hxl-bn-facts{margin-left:14px}
.hxl-bn-pct{display:flex;align-items:flex-start;font-weight:700;font-size:70px;line-height:1;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums}
.hxl-bn-num{display:block}
.hxl-bn-sign{font-size:.46em;margin:.3em 0 0 .06em;letter-spacing:0;color:var(--hxl-g2)}
.hxl-bn-pct.is-hit{filter:drop-shadow(0 0 22px rgba(48,209,88,.5)) drop-shadow(0 0 1px rgba(220,255,230,.45))}
.hxl-bn-facts{flex:1 1 auto;text-align:right;min-width:0;padding-bottom:12px}
.hxl-bn-pct{flex:0 0 auto}
.hxl-bn-rev{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hxl-bn-of{margin-top:5px;font-size:11.5px;color:var(--hxl-dim);font-variant-numeric:tabular-nums}
.hxl-bn-bar{position:relative;height:4px;margin-top:10px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.hxl-bn-fill{
  position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:inherit;transform-origin:0 50%;
  background:linear-gradient(90deg,#1c8f3f 0%,#30d158 62%,#8dffb2 100%);
  box-shadow:0 0 12px rgba(48,209,88,.45);
}
.hxl-bn-head{
  position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:radial-gradient(circle,#effff3 0,#7dffa6 32%,rgba(48,209,88,.35) 55%,rgba(48,209,88,0) 72%);
}
.hxl-bn-by{margin-top:12px;font-size:12.5px;line-height:1.35;color:var(--hxl-dim)}
/* uang & nama tidak pernah patah di dalam ('Rp' tetap menempel pada angkanya) */
.hxl-nw{white-space:nowrap}
.hxl-bn-by b{color:var(--hxl-txt);font-weight:600}
.hxl-bn-by em{font-style:normal;color:var(--hxl-g);font-weight:600;font-variant-numeric:tabular-nums}
@media(min-width:769px){
  .hxl-banner{border-radius:30px}
  .hxl-bn-in{padding:20px 28px 20px}
  .hxl-bn-pct{font-size:96px}
  .hxl-bn-rev{font-size:22px}
  .hxl-bn-of{font-size:12.5px}
  .hxl-bn-by{font-size:13.5px}
}
/* HP sempit (iPhone SE 320px, Android kecil): jam tanpa 'HARI INI ·',
   angka sedikit lebih kecil, kolom kanan lebih lebar. Semua tetap di
   dalam banner. */
@media(max-width:360px){
  .hxl-bn-in{padding:15px 16px 15px}
  .hxl-bn-kick{letter-spacing:.2em}
  .hxl-bn-dot{margin-right:8px}
  .hxl-bn-today{display:none}
  .hxl-bn-pct{font-size:54px}
  .hxl-bn-facts{margin-left:10px;padding-bottom:9px}
  .hxl-bn-rev{font-size:15px}
  .hxl-bn-of{font-size:11px}
  .hxl-bn-by{font-size:12px}
}

/* pembaca layar */
.hxl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* "Kurangi transparansi": kaca jadi padat penuh (sudah tanpa blur) */
@media (prefers-reduced-transparency:reduce){
  .hxl-glass,.hxl-bloom,.hxl-bn-grid,.hxl-bn-bloom{display:none}
  .hxl-glyph{background:#2c2c2e}
  .hxl-cap,.hxl-mid{background:#1c1c1e}
  .hxl-bn-bg{background:#1c1c1e}
}