/* ══ Ilustrasi 3D Datealarm ═══════════════════════════════════
   Dipakai BERSAMA landing (index) dan aplikasi (home, topup).
   Berkas sendiri, bukan blok yang disalin ke landing.css +
   beranda.css + topup.css: tiga salinan aturan yang sama akan
   berangsur melenceng, dan yang melenceng adalah ukuran — satu
   ilustrasi 96px di satu layar dan 120px di layar sebelahnya
   membuat set ini berhenti terlihat seperti satu set. Polanya
   sama dengan verif-banner.css dan nav.css.

   Di-link SESUDAH tokens.css tapi SEBELUM stylesheet halaman,
   supaya halaman tetap bisa menimpanya tanpa !important.

   Sumbernya assets/illustrations/*.webp — latar transparan,
   burgundy + emas + pink yang sama dengan --brand-*. Jangan
   dicampur sebaris dengan ikon emoji atau ikon garis Lucide:
   bobot visualnya jauh berbeda, dan yang campur terbaca sebagai
   antarmuka yang belum selesai. Alasan yang sama dengan aturan
   "jangan ubah stroke per-ikon" di assets/CREDITS-ikon.md. */

.ilus {
  display: block;
  width: var(--ilus-ukuran, 104px);
  height: auto;
  margin-inline: auto;
  /* Ilustrasinya sudah punya bayangan sendiri di dalam gambar.
     Menambah drop-shadow CSS di atasnya menghasilkan dua bayangan
     dengan arah cahaya yang berbeda. */
  user-select: none;
  -webkit-user-drag: none;
}

/* Jebakan CSS #1 di CLAUDE.md: `display` bawaan [hidden] kalah
   spesifisitas dari aturan kelas di atas, jadi elemen yang
   di-`hidden` dari JS tetap terlihat. Sudah dua kali kejadian di
   repo ini (.br-segmen dan .btn). */
.ilus[hidden] { display: none; }

/* Ukuran per tempat. Modifier, bukan angka di HTML — supaya
   mengubah semua "ilustrasi di kepala section" cukup satu baris. */
.ilus-hero   { --ilus-ukuran: 132px; margin-bottom: 20px; }
.ilus-head   { --ilus-ukuran: 96px; margin-bottom: 14px; }
.ilus-kosong { --ilus-ukuran: 108px; margin-bottom: 14px; }
.ilus-sukses { --ilus-ukuran: 96px; }
.ilus-saldo  { --ilus-ukuran: 58px; margin-inline: 0; }

/* Ikon koin kecil (navbar, story, chip saldo acak, badge filter).
   Asetnya sama dengan kartu saldo di /topup, diperkecil. Halaman
   boleh menimpa ukurannya — .ilus-koin cuma angka bawaan. */
.ilus-koin { --ilus-ukuran: 20px; margin: 0; height: 20px; object-fit: contain; }

/* Modifier berdasarkan peran, supaya halaman tidak membuat angka
   ukuran sendiri-sendiri untuk benda yang sama. */
.ilus-card   { --ilus-ukuran: 68px; margin: 0 0 8px; }
.ilus-panel  { --ilus-ukuran: 116px; margin: 0 0 17px; }
.ilus-kunci  { --ilus-ukuran: 126px; margin-bottom: 8px; }
.ilus-sheet  { --ilus-ukuran: 78px; margin-bottom: 12px; }
.ilus-status { --ilus-ukuran: 142px; margin-bottom: 20px; }
.ilus-mini   { --ilus-ukuran: 64px; }

@media (max-width: 560px) {
  .ilus-hero   { --ilus-ukuran: 108px; }
  .ilus-head   { --ilus-ukuran: 84px; }
  .ilus-kosong { --ilus-ukuran: 92px; }
  .ilus-panel  { --ilus-ukuran: 102px; }
  .ilus-kunci  { --ilus-ukuran: 108px; }
  .ilus-status { --ilus-ukuran: 118px; }
}