/* ================================================================
   angka-kinerja.css - section Angka Kinerja (Revisi 26; Revisi 29:
   kartu diringkas 2x2 + CTA Pengaduan berjajar di kanan)
   Semua kelas berawalan "angka-".

   Susunan Revisi 29: .angka-papan = kisi dua kolom; kiri empat kartu
   angka ringkas (2x2), kanan kartu CTA Pengaduan berlatar aksen pekat.
   Ilustrasi kartu dibaca dari assets/kinerja/ (lihat
   assets/kinerja/TARUH-ILUSTRASI-DI-SINI.md); selama belum ada,
   ikon garis tampil sebagai cadangan (.angka-ikon.cadangan).

   SEMUA ANGKA MASIH CONTOH - lihat catatan di partial & BACA-DULU.md.
   ================================================================ */
.angka{position:relative;padding:clamp(46px,5.5vw,72px) 0;background:var(--soft);
  overflow:hidden}

/* ---- dekorasi garis arus ---- */
.angka-deko{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  fill:none;pointer-events:none}
.angka-arus{stroke:var(--accent);stroke-width:1.25;stroke-linecap:round;opacity:.15;
  stroke-dasharray:1600 1600;stroke-dashoffset:1600}
.angka.tampil .angka-arus{animation:angka-travel 8s cubic-bezier(.45,0,.3,1) infinite}
.angka.tampil .angka-arus.a2{animation-delay:2s;animation-duration:9s;opacity:.1;stroke-width:1}
@keyframes angka-travel{
  0%{stroke-dashoffset:1600}42%{stroke-dashoffset:0}
  56%{stroke-dashoffset:0}98%{stroke-dashoffset:-1600}100%{stroke-dashoffset:-1600}}
.angka-node{fill:var(--accent);opacity:0}
.angka.tampil .angka-node{opacity:.4;animation:angka-denyut 2.8s ease-in-out infinite}
@keyframes angka-denyut{0%,100%{opacity:.4}50%{opacity:.14}}
.angka .wrap{position:relative;z-index:1}

/* ---- kepala section ---- */
.angka-kepala{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,56px);margin-bottom:clamp(18px,2.4vw,28px)}
.angka-eyebrow{display:block;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}
.angka-judul{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.4px;
  font-size:clamp(26px,3vw,40px);line-height:1.04;color:var(--ink)}
.angka-ket{margin:0;max-width:44ch;font-size:13px;line-height:1.6;color:var(--ink2)}

/* ---- papan dua kolom: kartu angka kiri, CTA kanan ---- */
.angka-papan{display:grid;grid-template-columns:1.55fr 1fr;
  gap:clamp(12px,1.5vw,18px);align-items:stretch}
.angka-grid{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.2vw,14px);list-style:none;margin:0;padding:0}

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

/* ---- kartu angka ringkas ---- */
.angka-kartu{position:relative;overflow:hidden;display:grid;
  grid-template-columns:1fr clamp(148px,14vw,192px);align-items:stretch;padding:0;
  border-radius:var(--r-lg);background:var(--canvas);border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease}
.angka-kartu:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);
  border-color:var(--accent-line)}

/* isi kiri kartu */
.angka-isi{min-width:0;padding:clamp(14px,1.6vw,18px)}

/* panel ilustrasi setinggi kartu di kanan; .cadangan = ikon garis lama */
.angka-ikon{position:relative;overflow:hidden;display:grid;place-items:center;
  background:var(--accent-soft);border-left:1px solid var(--accent-line)}
.angka-ikon img{position:relative;width:88%;height:auto;max-height:90%;
  object-fit:contain;transition:transform .35s var(--ease)}
.angka-kartu:hover .angka-ikon img{transform:translateY(-2px) scale(1.07)}

/* cincin orbit di belakang ilustrasi: satu diam, satu putus-putus
   berputar pelan (mati di reduced-motion) */
.angka-cincin{position:absolute;inset:0;width:100%;height:100%;fill:none;
  pointer-events:none}
.angka-cincin circle{stroke:var(--accent-line);stroke-width:1}
.angka-cincin .putar{stroke:var(--accent);opacity:.45;stroke-dasharray:4 7;
  transform-origin:50% 50%;animation:angka-putar 26s linear infinite}
@keyframes angka-putar{to{transform:rotate(360deg)}}

.angka-ikon .angka-ikon-garis{display:none;position:relative;width:22px;height:22px;
  stroke:var(--accent-strong);fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.angka-ikon.cadangan img{display:none}
.angka-ikon.cadangan .angka-ikon-garis{display:block}

.angka-nilai{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;font-family:var(--font-mono);color:var(--ink)}
.angka-hitung{font-size:clamp(22px,2vw,30px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.angka-satuan{font-size:11.5px;font-weight:700;color:var(--accent-strong);
  letter-spacing:.4px}
.angka-nama{margin:5px 0 0;font-size:12.5px;font-weight:800;
  color:var(--ink)}
.angka-kartu .angka-ket{margin-top:2px;font-size:11px;line-height:1.55;
  color:var(--ink3);max-width:none}

/* garis tren mini - tergambar mengikuti durasi hitungan; DATA CONTOH */
.angka-tren{display:block;width:100%;height:20px;margin-top:9px;fill:none}
.angka-tren polyline{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;opacity:.55;stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,.61,.36,1)}
.angka-kartu.terisi .angka-tren polyline{stroke-dashoffset:0}

/* garis takar di dasar kartu (JS menambah .terisi saat hitungan mulai) */
.angka-garis{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.angka-kartu.terisi .angka-garis{transform:scaleX(1)}

/* ---- kartu CTA Pengaduan (kolom kanan) ---- */
.angka-cta{position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:center;gap:9px;padding:clamp(20px,2.4vw,30px);
  border-radius:var(--r-xl);background:var(--accent-strong);color:#fff;
  box-shadow:var(--shadow-2)}
.angka-cta::after{content:"";position:absolute;z-index:0;right:-38px;bottom:-68px;
  width:190px;aspect-ratio:876/1914;background:url("../ornament/wm-bambu.svg") right bottom/contain no-repeat;
  opacity:.12;filter:brightness(0) invert(1);transform:rotate(-18deg);transform-origin:bottom right;pointer-events:none}
.angka-cta-deko{position:absolute;inset:0;width:100%;height:100%;fill:none;
  pointer-events:none}
.angka-cta-arus{stroke:#fff;stroke-width:1.2;stroke-linecap:round;opacity:.16;
  stroke-dasharray:1200 1200;stroke-dashoffset:1200}
.angka.tampil .angka-cta-arus{animation:angka-travel 8.5s cubic-bezier(.45,0,.3,1) infinite;
  animation-delay:1.2s}
.angka-cta-sudut{position:absolute;width:40px;height:40px;
  border:2px solid rgba(255,255,255,.35);pointer-events:none}
.angka-cta-sudut.s1{top:10px;left:10px;border-right:0;border-bottom:0;
  border-top-left-radius:13px}
.angka-cta-sudut.s2{bottom:10px;right:10px;border-left:0;border-top:0;
  border-bottom-right-radius:13px}
.angka-cta-eyebrow{position:relative;display:block;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(255,255,255,.72);z-index:1}
.angka-cta-judul{position:relative;margin:0;font-family:var(--font-display);
  font-weight:400;letter-spacing:.3px;font-size:clamp(22px,2.3vw,31px);
  line-height:1.08;color:#fff;z-index:1}
.angka-cta-ket{position:relative;margin:0;font-size:12.5px;line-height:1.65;
  color:rgba(255,255,255,.82);max-width:40ch;z-index:1}
.angka-cta-aksi{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-top:9px;z-index:1}
.angka-cta-tombol{display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;padding:11px 17px;border-radius:999px;
  background:#fff;color:var(--accent-strong);text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s ease,background .25s ease}
.angka-cta-tombol:hover{transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.2)}
.angka-cta-tombol svg{width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.angka-cta-tombol.garis{background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.55)}
.angka-cta-tombol.garis:hover{background:rgba(255,255,255,.12);box-shadow:none}

/* ---- catatan sumber data ---- */
.angka-catatan{margin-top:14px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--ink3)}

/* ---- susun ulang ---- */
@media (max-width:1100px){
  .angka-papan{grid-template-columns:1fr}
  .angka-cta{padding:clamp(22px,4vw,30px)}
}
@media (max-width:900px){
  .angka-kepala{flex-direction:column;align-items:flex-start;gap:12px}}
@media (max-width:520px){
  .angka-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .angka .angka-anim{opacity:1!important;transform:none!important;transition:none!important}
  .angka-arus,.angka-cta-arus{stroke-dasharray:none!important;stroke-dashoffset:0!important;
    animation:none!important}
  .angka-node{opacity:.35!important;animation:none!important}
  .angka-kartu,.angka-garis,.angka-cta-tombol{transition:none!important}
  .angka-kartu:hover,.angka-cta-tombol:hover{transform:none}
  .angka-kartu.terisi .angka-garis{transform:scaleX(1)}
  .angka-tren polyline{transition:none!important;stroke-dashoffset:0!important}
  .angka-cincin .putar{animation:none!important}
  .angka-ikon img{transition:none!important}
  .angka-kartu:hover .angka-ikon img{transform:none}
}