/* ================================================================
   hari-besar.css - kartu hitung mundur hari besar nasional (Revisi 28)
   Semua kelas berawalan "hbesar-". Satu kartu ramping di antara hero dan
   Aplikasi Terkait; SELALU tampil dan otomatis membidik hari besar
   TERDEKAT (hari-besar.js). Di hari-H hitungan diganti teks ucapan.
   ================================================================ */
.hbesar{padding:clamp(24px,3vw,40px) 0 0}
.hbesar-kartu{position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:space-between;gap:clamp(16px,3vw,40px);
  padding:clamp(18px,2.4vw,28px) clamp(20px,3vw,36px);
  border-radius:var(--r-xl);background:var(--canvas);border:1px solid var(--line);
  box-shadow:var(--shadow-1)}

/* garis arus tunggal di latar kartu, bahasa yang sama dengan section lain */
.hbesar-deko{position:absolute;inset:0;width:100%;height:100%;fill:none;
  pointer-events:none}
.hbesar-arus{stroke:var(--accent);stroke-width:1.2;stroke-linecap:round;opacity:.14;
  stroke-dasharray:1200 1200;stroke-dashoffset:1200}
.hbesar.tampil .hbesar-arus{animation:hbesar-travel 7.5s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hbesar-travel{
  0%{stroke-dashoffset:1200}44%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}98%{stroke-dashoffset:-1200}100%{stroke-dashoffset:-1200}}

/* bingkai dua sudut, meminjam bahasa .app-garis */
.hbesar-sudut{position:absolute;width:44px;height:44px;border:2px solid var(--accent-line);
  pointer-events:none}
.hbesar-sudut.s1{top:10px;left:10px;border-right:0;border-bottom:0;
  border-top-left-radius:14px}
.hbesar-sudut.s2{bottom:10px;right:10px;border-left:0;border-top:0;
  border-bottom-right-radius:14px}

.hbesar-kiri{position:relative;min-width:0}
.hbesar-eyebrow{display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.hbesar-nama{margin:0;font-family:var(--font-display);font-weight:400;
  letter-spacing:.3px;font-size:clamp(19px,2.1vw,28px);line-height:1.1;color:var(--ink)}
.hbesar-tanggal{display:inline-block;margin-top:9px;font-family:var(--font-mono);
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent-strong);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:999px;padding:4px 11px}

/* ---- hitung mundur: empat kotak angka ---- */
.hbesar-hitung{position:relative;display:flex;gap:clamp(7px,1vw,12px);flex:none}
/* Revisi 36: label di LUAR kotak (di bawahnya) - kotak kini hanya
   membungkus angka sehingga angka dan label bisa lebih besar. */
.hbesar-kotak{display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:clamp(60px,6.6vw,84px);text-align:center}
.hbesar-kotak b{display:grid;place-items:center;width:100%;padding:13px 8px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-md);font-family:var(--font-mono);font-weight:700;
  font-size:clamp(27px,3vw,42px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hbesar-kotak i{font-family:var(--font-mono);font-style:normal;font-size:10.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--ink2)}
/* denyut halus tiap kali angka detik berganti (JS memicu kelas .denyut) */
.hbesar-kotak.denyut b{animation:hbesar-denyut .45s var(--ease)}
@keyframes hbesar-denyut{0%{transform:scale(1)}35%{transform:scale(1.09)}100%{transform:scale(1)}}

/* ---- mode hari-H: hitungan diganti ucapan ---- */
.hbesar-ucapan{display:none;position:relative;margin:0;text-align:right;
  font-family:var(--font-display);font-weight:400;letter-spacing:.3px;
  font-size:clamp(19px,2.3vw,30px);line-height:1.15;color:var(--accent-strong)}
.hbesar.hb-hari-h .hbesar-hitung{display:none}
.hbesar.hb-hari-h .hbesar-ucapan{display:block}

/* ---- animasi masuk ---- */
.hbesar .hbesar-anim{opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hbesar.tampil .hbesar-anim{opacity:1;transform:none}

/* ---- susun ulang ---- */
@media (max-width:760px){
  .hbesar-kartu{flex-direction:column;align-items:flex-start;gap:16px}
  .hbesar-ucapan{text-align:left}
  .hbesar-hitung{width:100%;justify-content:space-between}
  .hbesar-kotak{flex:1;min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .hbesar .hbesar-anim{opacity:1!important;transform:none!important;transition:none!important}
  .hbesar-arus{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
  .hbesar-kotak.denyut b{animation:none!important}
}

/* ================================================================
   REVISI 70 - mode hari-H dipertegas

   Empat hal, dan SEMUANYA hanya hidup ketika <section id="hari-besar">
   sudah punya kelas .hb-hari-h (dipasang hari-besar.js). Di hari biasa
   tidak ada satu pun aturan di bawah ini yang berlaku, jadi tampilan
   hitung mundur sehari-hari sama persis seperti sebelumnya.

   1. lencana "ke-N" sebagai pengganti kotak angka
   2. teks hari-H masuk bertahap
   3. garis arus tunggal jadi tiga pita berkibar
   4. sapuan cahaya sekali jalan
   ================================================================ */

/* ---- 1. lencana pengganti kotak angka ----------------------------
   Kotak angka disembunyikan pada hari-H (aturan Revisi 28 di atas).
   Tempatnya diisi satu pil tegas berisi angka peringatan. Pil hanya
   muncul bila JS memberi kelas .ada, yaitu ketika hari besar itu punya
   'lencana' di DAFTAR. Hari Pahlawan misalnya tidak punya, jadi kartunya
   cukup menampilkan ucapan tanpa pil. */
.hbesar-lencana{display:none;flex:none;position:relative;
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(12px,1.35vw,16px);letter-spacing:1.8px;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  padding:12px 20px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent-strong) 100%);
  box-shadow:0 8px 22px rgba(39,131,222,.28)}
.hbesar.hb-hari-h .hbesar-lencana.ada{display:block}
/* ucapan mengisi ruang sisa supaya pil tetap menempel di kanan */
.hbesar.hb-hari-h .hbesar-ucapan{flex:1 1 auto;min-width:0}

/* ---- 2. teks hari-H masuk bertahap -------------------------------
   Pemicunya .tampil, kelas yang dipasang IntersectionObserver saat kartu
   masuk layar. Jadi urutannya ikut gulir pengunjung, bukan langsung habis
   di atas layar. Jeda 0.10s lalu 0.26s memberi kesan bertahap. */
@keyframes hbesar-masuk{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}
.hbesar.tampil.hb-hari-h .hbesar-ucapan{
  animation:hbesar-masuk .62s var(--ease) .10s both}
.hbesar.tampil.hb-hari-h .hbesar-lencana.ada{
  animation:hbesar-masuk .62s var(--ease) .26s both}

/* ---- 3. tiga pita berkibar ---------------------------------------
   Garis b dan c ikut ada di markah sejak awal tetapi tidak terlihat di
   hari biasa (opacity 0). Pada hari-H ketiganya menyala dan mendapat dua
   animasi sekaligus: hbesar-travel yang sudah ada (garis berjalan) dan
   hbesar-kibar yang baru (naik turun pelan). Jeda negatif dipakai supaya
   ketiganya tidak bergerak serempak. */
.hbesar-arus.b,.hbesar-arus.c{opacity:0}
@keyframes hbesar-kibar{
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-5px)}
  65%{transform:translateY(3px)}}
.hbesar.tampil.hb-hari-h .hbesar-arus{opacity:.2;
  animation:hbesar-travel 7.5s cubic-bezier(.45,0,.3,1) infinite,
            hbesar-kibar 5.4s ease-in-out infinite}
.hbesar.tampil.hb-hari-h .hbesar-arus.b{opacity:.15;
  animation-delay:-1.1s,-1.8s}
.hbesar.tampil.hb-hari-h .hbesar-arus.c{opacity:.11;
  animation-delay:-2.2s,-3.6s}

/* ---- 4. sapuan cahaya sekali jalan -------------------------------
   Lapisan tipis di atas kartu yang menyapu dari kiri ke kanan satu kali
   lalu berhenti selamanya (hitungan animasi 1, fill both). Kartu sudah
   overflow:hidden jadi sapuannya terpotong rapi di tepi.

   PENTING - lapisan ini sengaja HANYA dibuat di dalam .hb-hari-h.
   Versi pertama menaruhnya di .hbesar-kartu::after tanpa syarat. Walau
   sudah opacity:0, kehadiran transform membuat peramban mengangkat
   kartu ke lapisan komposit tersendiri sepanjang tahun, sehingga
   penghalusan huruf di kartu jadi goyah pada hari biasa (terukur
   98.717 piksel berubah antar-render pada uji ulang). Dengan dikurung
   begini, di hari biasa pseudo-element-nya tidak lahir sama sekali dan
   kartu kembali dirender persis seperti sebelum Revisi 70. */
.hbesar.hb-hari-h .hbesar-kartu::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 32%,
    rgba(39,131,222,.10) 45%,rgba(255,255,255,.78) 50%,
    rgba(39,131,222,.10) 55%,transparent 68%)}
@keyframes hbesar-sapu{
  0%{transform:translateX(-120%);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateX(120%);opacity:0}}
.hbesar.tampil.hb-hari-h .hbesar-kartu::after{
  animation:hbesar-sapu 1.5s cubic-bezier(.4,0,.2,1) .35s 1 both}

/* ---- susun ulang layar kecil ---- */
@media (max-width:760px){
  .hbesar-lencana{align-self:flex-start}
  .hbesar.hb-hari-h .hbesar-ucapan{flex:none}
}

/* ---- hormati "kurangi gerakan" -----------------------------------
   Pengunjung yang menyalakan pengaturan ini tetap mendapat ucapan dan
   lencana secara utuh, hanya tanpa gerakan. */
@media (prefers-reduced-motion:reduce){
  .hbesar.tampil.hb-hari-h .hbesar-arus,
  .hbesar.tampil.hb-hari-h .hbesar-arus.b,
  .hbesar.tampil.hb-hari-h .hbesar-arus.c{animation:none!important}
  .hbesar.tampil.hb-hari-h .hbesar-ucapan,
  .hbesar.tampil.hb-hari-h .hbesar-lencana.ada{
    animation:none!important;opacity:1!important;transform:none!important}
  .hbesar.tampil.hb-hari-h .hbesar-kartu::after{
    animation:none!important;opacity:0!important}
}