/* =====================================================================
   Kopdit Obormas — Halaman Statistik Perkembangan (FR-30)
   Dipakai bersama css/styles.css + css/page.css.
   Berisi: banner "data contoh", grid kartu statistik besar, dan
   grafik batang per tahun berbasis CSS murni (tanpa pustaka chart).
   Setiap batang menyimpan nilainya di custom property --h dan tumbuh
   dari 0 saat kartu ber-reveal — animasi cukup pakai .reveal.in (main.js).
   ===================================================================== */

/* ---------- Banner pemberitahuan: angka masih contoh (§26.3) ---------- */
.notice{display:flex;align-items:flex-start;gap:12px;max-width:880px;margin:0 0 32px;
  padding:14px 18px;background:var(--gold-50);border:1px solid var(--gold);
  border-radius:var(--r);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.notice svg{width:20px;height:20px;flex-shrink:0;color:var(--gold-700);margin-top:1px}
.notice b{color:var(--ink)}

/* ---------- Grid kartu statistik besar (ringkasan terkini) ---------- */
/* Dipakai dengan id="stats" agar animasi angka [data-count] di main.js aktif */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 16px}
/* Konten kartu di-center vertikal (atas–bawah); perataan kiri-kanan tetap kiri
   seperti semula. */
.statcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 24px;overflow:hidden;container-type:inline-size;
  display:flex;flex-direction:column;justify-content:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.statcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.statcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.statcard .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  background:var(--gold-50);color:var(--gold-700);margin-bottom:16px}
.statcard .ic svg{width:23px;height:23px}
.statcard .num{font-family:"Sora",sans-serif;font-size:clamp(28px,3.2vw,40px);font-weight:800;
  color:var(--ink);line-height:1;letter-spacing:-.02em}
.statcard .num .s{font-size:.5em;color:var(--gold-700);font-weight:700;margin-left:2px}
/* Nilai rupiah penuh (mis. "Rp 124.000.000.000"). Ukurannya relatif LEBAR KARTU
   (cqi), bukan viewport, jadi selalu muat satu baris & tak pernah terpotong/
   bablas — termasuk saat grid masih 4 kolom di layar sempit. "Rp" (.s) sedikit
   lebih besar. */
.statcard .num.money{font-size:clamp(12px,8cqi,22px);white-space:nowrap}
.statcard .num.money .s{font-size:.62em}
/* ch-now: nilai penuh di header grafik — jaga satu baris, jangan dorong judul. */
.chart-card .ch-now{white-space:nowrap}
.statcard .lbl{font-size:14px;color:var(--slate);margin-top:10px}

/* ---------- Bagian grafik per tahun ---------- */
.charts{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px}
.chart-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 24px 20px}
.chart-card .ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.chart-card h3{font-family:"Sora",sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin:0}
.chart-card .ch-now{font-family:"Sora",sans-serif;font-size:14px;font-weight:700;color:var(--gold-700)}
.chart-card .ch-sub{font-size:13px;color:var(--slate);margin:0 0 22px}

/* Plot: kolom-kolom batang dengan garis dasar */
.chart{display:flex;align-items:flex-end;gap:clamp(8px,3vw,22px);height:200px;
  padding-top:22px;border-bottom:2px solid var(--line)}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart .bar{position:relative;width:100%;max-width:46px;height:0;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--gold),var(--gold-700));
  transition:height .9s var(--ease);will-change:height}
.chart-card.reveal.in .bar{height:var(--h)}
.chart .bar .v{position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:"Sora",sans-serif;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;
  opacity:0;transition:opacity .4s ease .6s}
.chart-card.reveal.in .bar .v{opacity:1}
.chart .bar:last-child{background:linear-gradient(180deg,#FFC21A,var(--gold))} /* tahun terkini ditonjolkan */
.ch-x{display:flex;gap:clamp(8px,3vw,22px);margin-top:10px}
.ch-x span{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--slate)}

@media (prefers-reduced-motion:reduce){
  .chart .bar{transition:none}
  .chart .bar .v{transition:none;opacity:1}
}

/* ---------- Responsif ---------- */
@media (max-width:880px){
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}
}
@media (max-width:480px){
  .statgrid{grid-template-columns:1fr}
  .chart{height:170px}
}