/* =====================================================================
   AkseleraSync — Modul Zakat, Infaq, Sedekah, Wakaf & Donasi
   ---------------------------------------------------------------------
   Seluruh aturan digerbangi kelas .zis sehingga tidak ada satu pun
   selector yang bocor ke Portal Wali, Guru, Staf, atau Pimpinan.

   ATURAN BERKAS INI
   - Spacing, radius, ukuran teks, elevasi, dan gerak diambil dari
     assets/css/tokens.css. Tidak ada angka mentah baru untuk keempatnya.
   - Ukuran teks terkecil var(--fs-caption) = 12px. Tanpa pengecualian.
   - Target sentuh minimal var(--touch-min) = 44px.
   - Padding TIDAK dipaku. Modul ini dipakai portal dengan kepadatan
     berbeda, jadi seluruh permukaan mengonsumsi token kepadatan
     (--d-card-pad, --d-card-gap, --d-section-gap, --d-card-radius,
     --d-body-size, --d-row-pad, --d-page-pad).
   - Warna brand memakai var() dari index.html dengan fallback agar modul
     tetap benar saat dimuat sendirian (halaman uji, layar publik).
   - Status tidak pernah dibedakan hanya lewat warna: setiap pil, ceklis,
     dan legenda membawa bentuk penanda sendiri (centang, wajik, palang,
     lingkaran, garis) plus label teks.
   - Layout responsif memakai container query, bukan media query, karena
     modul kerap dirender di dalam bingkai ponsel pada layar lebar.

   DAFTAR ISI
     01  Token lokal & kerangka
     02  Tipografi dasar
     03  Hero & strip legalitas
     04  Tab & chip
     05  Kartu, section, KPI
     06  Pil status & tag jenis dana
     07  Progress bar & meter rasio
     08  Baris daftar
     09  Kartu kampanye & meta
     10  Formulir, toggle, stepper, opsi
     11  Ceklis bukti
     12  Kuitansi
     13  Tabel & ledger
     14  Audit, donatur, catatan
     15  Tombol
     16  Fokus & gerak
     17  Container query — layar lebar
   ===================================================================== */

/* =====================================================================
   01  TOKEN LOKAL & KERANGKA
   ===================================================================== */
.zis {
  /* Palet brand. var() pertama dipakai saat modul dimuat di dalam
     index.html; nilai kedua menjaga modul tetap benar saat berdiri
     sendiri di layar transparansi publik. */
  --zis-indigo: var(--indigo, #243B72);
  --zis-indigo-dark: var(--indigo-dark, #15244A);
  --zis-indigo-soft: var(--indigo-soft, #E9EDF6);
  --zis-emerald: var(--emerald, #087A60);
  --zis-emerald-dark: var(--emerald-dark, #075B49);
  --zis-emerald-soft: var(--emerald-soft, #E7F3EF);
  --zis-gold: var(--gold, #D7A52E);
  --zis-gold-dark: var(--gold-dark, #9A7314);
  --zis-gold-soft: var(--gold-soft, #FBF3DE);
  --zis-terracotta: var(--terracotta, #C6613B);
  --zis-terracotta-dark: var(--terracotta-dark, #9C4529);
  --zis-terracotta-soft: var(--terracotta-soft, #FBEFE9);
  --zis-sky: #2679A9;
  --zis-sky-soft: #EAF4FA;
  --zis-danger: var(--danger, #B83C4A);
  --zis-danger-soft: var(--danger-soft, #FBEAEC);

  --zis-ink: var(--ink, #15244A);
  --zis-text: var(--text, #3C4A6B);
  --zis-muted: var(--muted, #64718A);
  --zis-line: var(--line, #E7E3D9);
  --zis-sand: var(--sand, #F3F0E8);
  --zis-canvas: var(--canvas, #FCFBF7);
  --zis-surface: var(--white, #FFFFFF);

  /* Kepadatan diwarisi dari tokens.css. Nilai di bawah hanyalah jaring
     pengaman bila modul dimuat tanpa tokens.css sama sekali. */
  --zis-card-pad: var(--d-card-pad, 16px);
  --zis-card-gap: var(--d-card-gap, 12px);
  --zis-section-gap: var(--d-section-gap, 40px);
  --zis-card-radius: var(--d-card-radius, 16px);
  --zis-row-pad: var(--d-row-pad, 12px);
  --zis-page-pad: var(--d-page-pad, 16px);
  --zis-body-size: var(--d-body-size, 15px);

  container-type: inline-size;
  container-name: zis;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--zis-page-pad);
  color: var(--zis-text);
  background: var(--zis-canvas);
  font-family: inherit;
  font-size: var(--zis-body-size);
  line-height: var(--lh-normal);
  /* break-word, bukan anywhere: kata hanya dipatahkan bila memang tidak
     muat. "anywhere" sempat memotong label di tengah kata. */
  overflow-wrap: break-word;
}
.zis * { box-sizing: border-box; min-width: 0; }
.zis img, .zis svg { max-width: 100%; }

/* =====================================================================
   02  TIPOGRAFI DASAR
   ===================================================================== */
.zis :where(h2, h3, h4) { margin: 0; color: var(--zis-ink); line-height: var(--lh-snug); }
/* Ditulis dengan :where() supaya bobotnya nol. Sebagai `.zis p` aturan ini
   lebih kuat daripada setiap kelas berbobot satu, sehingga margin-top pada
   .zis-section__sub, .zis-hero__sub, .zis-kpi__value, dan .zis-bar__meta
   tidak pernah berlaku — itulah sebab judul menempel ke sub-judulnya dan
   label KPI menempel ke angkanya di seluruh layar modul ini. */
:where(.zis) :where(p) { margin: 0; }
.zis b { font-weight: var(--fw-bold); }
.zis .zis-strong { color: var(--zis-ink); font-weight: var(--fw-heavy); }
.zis .zis-mono { font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight); }
.zis .zis-fine {
  margin-top: var(--sp-3);
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.zis .zis-inline-note {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}
.zis .zis-empty {
  padding: var(--sp-6) var(--zis-card-pad);
  color: var(--zis-muted);
  background: var(--zis-surface);
  border: 1px dashed var(--zis-line);
  border-radius: var(--zis-card-radius);
  font-size: var(--fs-small);
  text-align: center;
}

/* =====================================================================
   03  HERO & STRIP LEGALITAS
   ===================================================================== */
.zis-hero {
  padding: var(--zis-card-pad);
  border-radius: var(--zis-card-radius);
  color: #fff;
  background: linear-gradient(145deg, var(--zis-indigo-dark), var(--zis-indigo));
  box-shadow: var(--elev-2);
}
.zis-hero--staf { background: linear-gradient(145deg, #0A5F4B, var(--zis-emerald)); }
.zis-hero--pimpinan { background: linear-gradient(145deg, #0c1732, var(--zis-indigo)); }
.zis-hero--publik { background: linear-gradient(145deg, var(--zis-indigo-dark), #0A5F4B); }
.zis-hero__eyebrow {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.zis-hero__title {
  margin-top: var(--sp-2);
  color: #fff;
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
}
.zis-hero__sub {
  margin-top: var(--sp-1);
  color: rgba(255, 255, 255, .86);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
/* Satu kolom lebih dulu. Dua kolom hanya bila kontainer cukup lebar,
   supaya angka rupiah tidak pernah patah di tengah. */
.zis-hero__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zis-card-gap);
  margin-top: var(--sp-4);
}
.zis-hero__stats .zis-kpi {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  box-shadow: none;
}
.zis-hero__stats .zis-kpi__label,
.zis-hero__stats .zis-kpi__meta { color: rgba(255, 255, 255, .82); }
.zis-hero__stats .zis-kpi__value { color: #fff; }

.zis-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--zis-card-gap);
  padding: var(--zis-row-pad) var(--zis-card-pad);
  background: var(--zis-surface);
  border: 1px solid var(--zis-line);
  border-left: 3px solid var(--zis-gold);
  border-radius: var(--zis-card-radius);
}
.zis-legal__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 200px;
  color: var(--zis-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.zis-legal__item b {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Penanda status modul: chip kecil di kepala tampilan wali, pengelola,
   dan pimpinan. Sekali per tampilan, tidak interaktif, tidak menutupi
   isi apa pun di bawahnya. */
.zis-preview {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  justify-self: start;
  padding: var(--sp-1) var(--sp-3);
  border: 1px dashed var(--zis-line);
  border-radius: var(--r-pill);
  color: var(--zis-muted);
  background: var(--zis-sand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.zis-preview__mark {
  width: 8px;
  height: 8px;
  flex: none;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* =====================================================================
   04  TAB & CHIP
   ===================================================================== */
.zis-tabs {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--zis-section-gap);
  padding: var(--sp-1);
  background: var(--zis-surface);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scrollbar-width: none;
  /* Gulir merapat ke awal tab terdekat supaya tab yang setengah
     terpotong tidak pernah jadi posisi berhenti. */
  scroll-snap-type: x proximity;
  /* Bayangan tepi kanan menandakan masih ada tab di luar layar.
     Diperkuat (lebih pekat dan lebih lebar) karena versi tipisnya
     luput terbaca pada kontainer 480px: "Buku kas" dan "Pengaturan"
     tersembunyi tanpa isyarat. */
  background-image:
    linear-gradient(to right, var(--zis-surface) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--zis-surface) 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(21, 36, 74, .22), rgba(21, 36, 74, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(21, 36, 74, .22), rgba(21, 36, 74, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: var(--sp-7) 100%, var(--sp-7) 100%, var(--sp-4) 100%, var(--sp-4) 100%;
  background-attachment: local, local, scroll, scroll;
}
.zis-tabs::-webkit-scrollbar { display: none; }
.zis-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 0 auto;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  color: var(--zis-muted);
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  justify-content: center;
  scroll-snap-align: start;
  scroll-margin-left: var(--sp-1);
  transition: color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.zis-tab--on { color: #fff; background: var(--zis-indigo); }
.zis-tab__count {
  display: inline-grid;
  place-items: center;
  min-width: var(--sp-5);
  padding: 0 var(--sp-1);
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--zis-terracotta);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.zis-tab--on .zis-tab__count { color: var(--zis-indigo); background: #fff; }

/* Panah kecil lengket di tepi kanan: isyarat tambahan bahwa deret tab
   masih menyimpan tab lain (mis. "Buku kas" dan "Pengaturan") di luar
   layar. Hanya dirender pada deret dengan lima tab atau lebih
   (zis-tabs--banyak), hanya tampil pada kontainer sempit, dan memudar
   saat gulir sudah mentok kanan (kelas zis-tabs--habis dipasang
   penangan scroll modul). Isyaratnya bentuk panah plus gradasi pudar,
   bukan warna semata. */
.zis-tabs__more {
  position: sticky;
  right: 0;
  display: none;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  flex: none;
  width: var(--sp-7);
  margin-left: calc(-1 * var(--sp-7));
  pointer-events: none;
  background: linear-gradient(to left, var(--zis-surface) 35%, rgba(255, 255, 255, 0));
  transition: opacity var(--motion-fast) var(--motion-ease);
}
.zis-tabs__more::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: var(--sp-2);
  border: 2px solid var(--zis-indigo);
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}
.zis-tabs--habis .zis-tabs__more { opacity: 0; }
@container zis (max-width: 639px) {
  .zis-tabs--banyak .zis-tabs__more { display: inline-flex; }
}

.zis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--zis-card-gap);
}
.zis-chip {
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-pill);
  color: var(--zis-text);
  background: var(--zis-surface);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
}
.zis-chip--on {
  color: #fff;
  background: var(--zis-indigo);
  border-color: var(--zis-indigo);
}
.zis-chips--nominal { margin-bottom: var(--sp-2); }

/* =====================================================================
   05  KARTU, SECTION, KPI
   ===================================================================== */
.zis-section { margin-bottom: var(--zis-section-gap); }
.zis-section:last-child { margin-bottom: 0; }
.zis-section__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--zis-card-gap);
}
.zis-section__headmain { min-width: 0; flex: 1 1 200px; }
.zis-section__title {
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  letter-spacing: -.012em;
}

/* ---------------------------------------------------------------------
   Anatomi header section — bar aksen + kicker (RITME SECTION OPSI B)
   Bar aksen 14x3 pill menandai awal section, warnanya warna kicker
   (default var(--kick-indigo) dari tokens.css, dengan fallback untuk
   pratinjau berdiri sendiri). Tanpa kicker bar berdiri di atas judul;
   bila kicker hadir bar pindah ke kiri kicker dan bar judul dilepas.
   ::before pada .zis-section__title dan .zis-section__kicker belum
   terpakai di mana pun — sudah diperiksa lewat grep. Hanya head anak
   langsung .zis-section yang diberi bar, jadi judul di dalam sheet
   atau kartu tidak ikut.
   ------------------------------------------------------------------- */
.zis-section > .zis-section__head .zis-section__title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo, #243B72);
}
.zis-section__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo, #243B72);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.zis-section__kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.zis-section > .zis-section__head .zis-section__kicker + .zis-section__title::before {
  content: none;
}
/* Warna kicker per domain — --gold mentah dilarang untuk teks kicker,
   pakai turunan gelap dari tokens.css yang lolos kontras teks 12px. */
.zis-section__kicker--gold { color: var(--kick-gold, #8A6A14); }
.zis-section__kicker--emerald { color: var(--kick-emerald, #087A60); }
.zis-section__kicker--terra { color: var(--kick-terra, #9C4529); }
.zis-section__sub {
  margin-top: 3px;
  color: var(--zis-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.zis-section__head .zis-btn { flex: none; width: auto; }

.zis-card {
  background: var(--zis-surface);
  border: 1px solid var(--zis-line);
  border-radius: var(--zis-card-radius);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.zis-card--pad { padding: var(--zis-card-pad); }
.zis-stack { display: flex; flex-direction: column; gap: var(--zis-card-gap); }

.zis-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--zis-card-gap);
  margin-bottom: var(--zis-card-gap);
}
.zis-kpi {
  padding: var(--zis-card-pad);
  background: var(--zis-surface);
  border: 1px solid var(--zis-line);
  border-radius: var(--zis-card-radius);
  box-shadow: var(--elev-1);
}
.zis-kpi__label {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
/* Angka KPI naik ke skala metrik hanya bila kolomnya cukup lebar
   (lihat container query di bagian 17). Pada kolom sempit ukuran
   diturunkan ke --fs-heading, bukan dibiarkan patah dua baris. */
.zis-kpi__value {
  margin-top: var(--sp-2);
  color: var(--zis-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.zis-kpi__meta {
  margin-top: var(--sp-1);
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.zis-kpi--warn { border-left: 3px solid var(--zis-terracotta); }
.zis-kpi--danger { border-left: 3px solid var(--zis-danger); }
.zis-kpi--good { border-left: 3px solid var(--zis-emerald); }

/* =====================================================================
   06  PIL STATUS & TAG JENIS DANA
   Bentuk penanda berbeda per tone supaya status terbaca tanpa warna.
   ===================================================================== */
/* Label pil boleh membungkus. Pada kontainer sempit, label panjang
   seperti "Menunggu persetujuan" harus turun baris, bukan memaksa
   induknya melebar. Di dalam tabel pil tetap satu baris karena tabel
   sudah punya gulir horizontal sendiri. */
.zis-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 100%;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: normal;
}
.zis-table .zis-pill { white-space: nowrap; }
.zis-pill__mark {
  width: 10px;
  height: 10px;
  flex: none;
  position: relative;
}
/* Baik — centang */
.zis-pill--good { color: var(--zis-emerald-dark); background: var(--zis-emerald-soft); }
.zis-pill--good .zis-pill__mark::before {
  content: "";
  position: absolute;
  left: 1px;
  top: -1px;
  width: 5px;
  height: 9px;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
/* Perhatian — wajik */
.zis-pill--warn { color: var(--zis-terracotta-dark); background: var(--zis-terracotta-soft); }
.zis-pill--warn .zis-pill__mark::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: currentColor;
  transform: rotate(45deg);
}
/* Bahaya — palang */
.zis-pill--danger { color: var(--zis-danger); background: var(--zis-danger-soft); }
.zis-pill--danger .zis-pill__mark::before,
.zis-pill--danger .zis-pill__mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.zis-pill--danger .zis-pill__mark::before { transform: rotate(45deg); }
.zis-pill--danger .zis-pill__mark::after { transform: rotate(-45deg); }
/* Informasi — lingkaran berongga */
.zis-pill--info { color: var(--zis-indigo); background: var(--zis-indigo-soft); }
.zis-pill--info .zis-pill__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
}
/* Netral — garis */
.zis-pill--neutral { color: var(--zis-muted); background: var(--zis-sand); }
.zis-pill--neutral .zis-pill__mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

/* Nominal pada kepala kartu bukan status, jadi tidak memakai pil status. */
.zis-amount {
  display: inline-block;
  color: var(--zis-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.zis-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  white-space: nowrap;
}
.zis-tag--green { color: var(--zis-emerald-dark); background: var(--zis-emerald-soft); box-shadow: inset 0 0 0 1px rgba(8, 122, 96, .18); }
.zis-tag--indigo { color: var(--zis-indigo); background: var(--zis-indigo-soft); box-shadow: inset 0 0 0 1px rgba(36, 59, 114, .18); }
.zis-tag--gold { color: var(--zis-gold-dark); background: var(--zis-gold-soft); box-shadow: inset 0 0 0 1px rgba(215, 165, 46, .32); }
.zis-tag--warm { color: var(--zis-terracotta-dark); background: var(--zis-terracotta-soft); box-shadow: inset 0 0 0 1px rgba(198, 97, 59, .22); }
.zis-tag--sky { color: var(--zis-sky); background: var(--zis-sky-soft); box-shadow: inset 0 0 0 1px rgba(38, 121, 169, .20); }

/* =====================================================================
   07  PROGRESS BAR & METER RASIO
   ===================================================================== */
.zis-bar { margin-top: var(--zis-card-gap); }
.zis-bar__track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--zis-sand);
  overflow: hidden;
}
.zis-bar__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--zis-w, 0%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--zis-emerald), #0FA37F);
  transition: width var(--motion-slow) var(--motion-ease);
}
.zis-bar__pending {
  position: absolute;
  left: var(--zis-x, 0%);
  top: 0;
  bottom: 0;
  width: var(--zis-w, 0%);
  background-image: repeating-linear-gradient(135deg, rgba(8, 122, 96, .40) 0 4px, transparent 4px 8px);
}
.zis-bar__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.zis-bar__pct {
  color: var(--zis-emerald-dark);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
}
.zis-bar__note {
  margin-top: var(--sp-1);
  color: var(--zis-terracotta-dark);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.zis-meter { margin-top: var(--zis-card-gap); }
.zis-meter__track {
  display: flex;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--zis-sand);
  overflow: hidden;
}
.zis-meter__done { width: var(--zis-w, 0%); background: var(--zis-emerald); }
.zis-meter__pending {
  width: var(--zis-w, 0%);
  background-color: var(--zis-gold-soft);
  background-image: repeating-linear-gradient(135deg, var(--zis-gold) 0 3px, transparent 3px 7px);
}
.zis-meter__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
}
.zis-legend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--zis-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.zis-legend::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: var(--r-xs);
}
.zis-legend--done::before { background: var(--zis-emerald); }
.zis-legend--pending::before {
  background-color: var(--zis-gold-soft);
  background-image: repeating-linear-gradient(135deg, var(--zis-gold) 0 3px, transparent 3px 6px);
}
.zis-legend--rest::before { background: var(--zis-sand); box-shadow: inset 0 0 0 1px var(--zis-line); }

/* =====================================================================
   08  BARIS DAFTAR
   ===================================================================== */
/* Baris membungkus: pada kontainer sempit judul mengambil satu baris
   penuh lalu nominal dan tombol turun ke baris berikutnya. Tanpa ini
   kolom judul terjepit sampai satu huruf per baris. */
.zis-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--sp-3);
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--zis-card-pad);
  border: 1px solid var(--zis-line);
  border-left: 3px solid var(--zis-indigo);
  border-radius: var(--zis-card-radius);
  background: var(--zis-surface);
  box-shadow: var(--elev-1);
  color: inherit;
  font: inherit;
  font-size: var(--zis-body-size);
  text-align: left;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.zis-row--static { cursor: default; }
.zis-row:not(.zis-row--static):active { transform: scale(.99); }
.zis-row__main { flex: 1 1 100%; min-width: 150px; display: block; }
.zis-row__title { display: block; color: var(--zis-ink); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.zis-row__meta {
  display: block;
  margin-top: 3px;
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.zis-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.zis-row__value {
  flex: 1 1 auto;
  color: var(--zis-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  text-align: left;
  line-height: var(--lh-snug);
}
.zis-row .zis-btn { flex: 0 0 auto; width: auto; margin-left: auto; }
.zis-row__chev {
  flex: none;
  width: 10px;
  height: 10px;
  border: 2px solid #AAB3C5;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

/* =====================================================================
   09  KARTU KAMPANYE & META
   ===================================================================== */
/* Kepala kartu boleh membungkus. Pada kontainer sempit, pil status turun
   ke baris sendiri sehingga tag jenis dana tidak pernah terpotong. */
.zis-kampanye__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}
.zis-kampanye__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 200px;
  min-width: 0;
}
.zis-kampanye__status { flex: 0 1 auto; }
.zis-kampanye__title { font-size: var(--fs-subhead); font-weight: var(--fw-bold); }
.zis-kampanye__ringkas {
  color: var(--zis-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.zis-kampanye__manfaat,
.zis-kampanye__peran {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--zis-sand);
  color: var(--zis-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.zis-kampanye__peran { margin-top: var(--sp-2); padding-top: 0; border-top: 0; }
.zis-kampanye__manfaat b,
.zis-kampanye__peran b {
  display: block;
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.zis-kampanye__nisab {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--zis-gold-dark);
  background: var(--zis-gold-soft);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
/* Saat nisab datang tepat setelah catatan status (.zis-note--warn),
   dua permukaan berlatar hampir sama (ΔE 2.3: terracotta lembut vs
   emas lembut) hanya berjarak 8px bawaan di atas, terbaca satu blok.
   Naikkan ke var(--sp-3) khusus pasangan ini saja. */
.zis-note + .zis-kampanye__nisab {
  margin-top: var(--sp-3);
}

.zis-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin: var(--zis-card-gap) 0 0;
  padding-top: var(--zis-card-gap);
  border-top: 1px solid var(--zis-sand);
}
.zis-meta--tight { grid-template-columns: 1fr; gap: var(--sp-2); }
/* Paragraf setelah blok meta perlu garis pemisahnya sendiri, kalau tidak
   catatan pelaksanaan menempel pada nilai terakhir dl. */
.zis-meta + .zis-kampanye__ringkas {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--zis-sand);
}
.zis-meta > div { min-width: 0; }
.zis-meta dt {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-snug);
}
.zis-meta dd {
  margin: 2px 0 0;
  color: var(--zis-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}

.zis-donasi__title { margin-top: var(--sp-2); font-size: var(--fs-heading); font-weight: var(--fw-bold); }
.zis-donasi__sub { margin-top: var(--sp-1); color: var(--zis-muted); font-size: var(--fs-small); line-height: var(--lh-normal); }
.zis-donasi__legal {
  margin-top: var(--sp-3);
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}

.zis-sum { display: flex; flex-direction: column; gap: var(--sp-3); }
.zis-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--zis-ink);
  font-size: var(--fs-small);
}
.zis-sum__row b { font-size: var(--fs-subhead); font-weight: var(--fw-heavy); text-align: right; }
.zis-sum__row--soft { color: var(--zis-muted); }
.zis-sum__row--soft b { color: var(--zis-text); font-size: var(--fs-small); font-weight: var(--fw-bold); }

/* =====================================================================
   10  FORMULIR, TOGGLE, STEPPER, OPSI
   ===================================================================== */
.zis-field { margin-bottom: var(--sp-4); }
.zis-field:last-child { margin-bottom: 0; }
.zis-field__label {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--zis-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.zis-field__hint {
  margin-top: var(--sp-2);
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.zis-input, .zis-select, .zis-textarea {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-3);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-lg);
  color: var(--zis-ink);
  background: var(--zis-surface);
  font: inherit;
  font-size: var(--fs-body);
}
.zis-textarea { min-height: calc(var(--touch-min) * 2); resize: vertical; line-height: var(--lh-normal); }
.zis-select:disabled, .zis-input:disabled { color: var(--zis-muted); background: var(--zis-sand); cursor: not-allowed; }

.zis-toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  margin-bottom: var(--sp-4);
  padding: var(--zis-row-pad);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-lg);
  background: var(--zis-surface);
  color: var(--zis-text);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}
.zis-toggle--on { border-color: var(--zis-emerald); background: var(--zis-emerald-soft); }
.zis-toggle__box {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 2px;
  border: 2px solid #C4CBD8;
  border-radius: var(--r-sm);
  background: var(--zis-surface);
}
.zis-toggle--on .zis-toggle__box { border-color: var(--zis-emerald); background: var(--zis-emerald); }
.zis-toggle--on .zis-toggle__box::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
.zis-toggle__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zis-toggle__body b { color: var(--zis-ink); font-weight: var(--fw-bold); }
.zis-toggle__body span { color: var(--zis-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }

.zis-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.zis-opt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--zis-row-pad);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-lg);
  background: var(--zis-surface);
  color: var(--zis-text);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  cursor: pointer;
}
.zis-opt--on { border-color: var(--zis-indigo); background: var(--zis-indigo-soft); }
.zis-opt__mark {
  position: relative;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border: 2px solid #C4CBD8;
  border-radius: 50%;
  background: var(--zis-surface);
}
.zis-opt--on .zis-opt__mark { border-color: var(--zis-indigo); }
.zis-opt--on .zis-opt__mark::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--zis-indigo);
}
.zis-opt__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zis-opt__body b { color: var(--zis-ink); font-weight: var(--fw-bold); }
.zis-opt__body span { color: var(--zis-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }

.zis-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-lg);
  background: var(--zis-surface);
}
.zis-stepper__btn {
  position: relative;
  width: var(--touch-min);
  height: var(--touch-min);
  flex: none;
  border: 1px solid var(--zis-line);
  border-radius: var(--r-md);
  background: var(--zis-indigo-soft);
  cursor: pointer;
}
.zis-stepper__minus, .zis-stepper__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--zis-indigo);
  transform: translate(-50%, -50%);
}
.zis-stepper__plus::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -6px;
  width: 2px;
  height: 14px;
  background: var(--zis-indigo);
}
.zis-stepper__value {
  flex: 1;
  color: var(--zis-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  text-align: center;
}

/* =====================================================================
   11  CEKLIS BUKTI
   ===================================================================== */
.zis-check {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--zis-card-gap) 0 0;
  padding: 0;
  list-style: none;
}
.zis-check__item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--zis-row-pad);
  border: 1px solid var(--zis-line);
  border-left: 3px solid var(--zis-line);
  border-radius: var(--r-md);
  background: var(--zis-surface);
}
.zis-check__item--ada { border-left-color: var(--zis-emerald); background: var(--zis-emerald-soft); }
.zis-check__item--kosong { border-left-color: var(--zis-danger); background: var(--zis-danger-soft); }
.zis-check__mark {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
}
.zis-check__item--ada .zis-check__mark { background: var(--zis-emerald); }
.zis-check__item--ada .zis-check__mark::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: 2px solid #fff;
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}
.zis-check__item--kosong .zis-check__mark { background: var(--zis-danger); }
.zis-check__item--kosong .zis-check__mark::before,
.zis-check__item--kosong .zis-check__mark::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 10px;
  height: 2px;
  background: #fff;
}
.zis-check__item--kosong .zis-check__mark::before { transform: rotate(45deg); }
.zis-check__item--kosong .zis-check__mark::after { transform: rotate(-45deg); }
/* min-width menjaga kolom teks tidak pernah terjepit sampai satu huruf
   per baris ketika tombol "Lampirkan" ikut berdiri di baris yang sama. */
.zis-check__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 150px; }
.zis-check__body b { color: var(--zis-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.zis-check__val { color: var(--zis-text); font-size: var(--fs-caption); font-weight: var(--fw-medium); }
.zis-check__hint { color: var(--zis-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }
.zis-check__state { flex: 0 0 auto; }
.zis-check__item .zis-btn { flex: 0 0 auto; width: auto; margin-left: auto; }

.zis-evidence-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--zis-card-gap);
  padding-top: var(--zis-card-gap);
  border-top: 1px solid var(--zis-sand);
}
.zis-evidence-note { color: var(--zis-muted); font-size: var(--fs-caption); }

/* =====================================================================
   12  KUITANSI
   ===================================================================== */
.zis-receipt { border-top: 4px solid var(--zis-gold); }
.zis-receipt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--zis-card-gap);
  border-bottom: 1px dashed var(--zis-line);
}
.zis-receipt__head .zis-pill { flex: 0 0 auto; white-space: nowrap; }
.zis-receipt__kind {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.zis-receipt__no {
  margin-top: var(--sp-1);
  color: var(--zis-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}
.zis-receipt__rows { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--zis-card-gap) 0 0; }
.zis-receipt__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--zis-sand);
}
.zis-receipt__rows > div:last-child { padding-bottom: 0; border-bottom: 0; }
.zis-receipt__rows dt {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.zis-receipt__rows dd {
  margin: 0;
  color: var(--zis-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}
.zis-receipt__amount { font-size: var(--fs-title) !important; font-weight: var(--fw-heavy) !important; letter-spacing: var(--ls-tight); }

/* =====================================================================
   13  TABEL & LEDGER
   ===================================================================== */
/* Bayangan tepi memberi tahu bahwa tabel masih bisa digeser. Muncul
   sendiri hanya pada sisi yang memang punya isi tersembunyi. */
.zis-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--zis-surface) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--zis-surface) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(21, 36, 74, .16), rgba(21, 36, 74, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(21, 36, 74, .16), rgba(21, 36, 74, 0)) right center;
  background-repeat: no-repeat;
  background-size: var(--sp-8) 100%, var(--sp-8) 100%, var(--sp-3) 100%, var(--sp-3) 100%;
  background-attachment: local, local, scroll, scroll;
}
.zis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.zis-table--wide { min-width: 520px; }
.zis-table th, .zis-table td {
  padding: var(--zis-row-pad) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--zis-sand);
  line-height: var(--lh-snug);
}
.zis-table thead th {
  color: var(--zis-muted);
  background: var(--zis-sand);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.zis-table tbody th { color: var(--zis-ink); font-weight: var(--fw-bold); }
.zis-table tbody tr:last-child th,
.zis-table tbody tr:last-child td { border-bottom: 0; }
.zis-cell-sub { color: var(--zis-muted); font-size: var(--fs-caption); }

/* =====================================================================
   14  AUDIT, DONATUR, CATATAN
   ===================================================================== */
.zis-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--zis-card-gap);
  padding: var(--zis-row-pad) var(--sp-3);
  border-radius: var(--r-lg);
  color: var(--zis-text);
  background: var(--zis-sand);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.zis-note__mark {
  position: relative;
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.zis-note__mark::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.zis-note__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 2px;
  height: 5px;
  background: currentColor;
}
.zis-note__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zis-note__title { color: inherit; font-weight: var(--fw-bold); }
.zis-note--info { color: var(--zis-indigo); background: var(--zis-indigo-soft); }
.zis-note--good { color: var(--zis-emerald-dark); background: var(--zis-emerald-soft); }
.zis-note--warn { color: var(--zis-terracotta-dark); background: var(--zis-terracotta-soft); }
.zis-note--danger { color: var(--zis-danger); background: var(--zis-danger-soft); }
.zis-note--warn .zis-note__mark,
.zis-note--danger .zis-note__mark { border-radius: var(--r-xs); }
.zis-note--warn .zis-note__mark::before,
.zis-note--danger .zis-note__mark::before { top: 10px; }
.zis-note--warn .zis-note__mark::after,
.zis-note--danger .zis-note__mark::after { top: 3px; height: 5px; }
.zis-note--good .zis-note__mark::before { display: none; }
.zis-note--good .zis-note__mark::after {
  left: 4px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  background: transparent;
  transform: rotate(42deg);
}

.zis-audit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--zis-row-pad) var(--zis-card-pad);
  border: 1px solid var(--zis-line);
  border-left: 3px solid var(--zis-gold);
  border-radius: var(--r-md);
  background: var(--zis-surface);
}
.zis-audit__time { color: var(--zis-muted); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.zis-audit__act { color: var(--zis-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.zis-audit__who { color: var(--zis-indigo); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.zis-audit__detail { color: var(--zis-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }

.zis-donors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--zis-card-gap);
}
.zis-donor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--zis-row-pad) var(--zis-card-pad);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-md);
  background: var(--zis-surface);
}
.zis-donor--anon { border-style: dashed; background: var(--zis-sand); }
.zis-donor__name { color: var(--zis-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.zis-donor__meta { color: var(--zis-muted); font-size: var(--fs-caption); line-height: var(--lh-snug); }
.zis-donor__amount { margin-top: var(--sp-1); color: var(--zis-emerald-dark); font-size: var(--fs-small); font-weight: var(--fw-heavy); }

/* =====================================================================
   15  TOMBOL
   ===================================================================== */
.zis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  text-align: center;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
}
.zis-btn--primary { color: #fff; background: var(--zis-emerald); box-shadow: 0 8px 18px rgba(8, 122, 96, .20); }
.zis-btn--secondary { color: var(--zis-indigo); background: var(--zis-indigo-soft); border-color: #D8E0EF; }
.zis-btn--ghost { color: var(--zis-indigo); background: transparent; border-color: var(--zis-line); }
.zis-btn--danger { color: var(--zis-danger); background: var(--zis-danger-soft); }
.zis-btn--block { width: 100%; margin-top: var(--zis-card-gap); }
.zis-btn:active:not(:disabled) { transform: scale(.985); }
.zis-btn:disabled {
  color: var(--zis-muted);
  background: var(--zis-sand);
  border-color: var(--zis-line);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .9;
}
.zis-btn-row {
  display: flex;
  flex-wrap: wrap;
  /* var(--sp-3), bukan --sp-2: saat baris membungkus di layar sempit,
     tombol sekunder berdempet dengan tombol sekunder lain (mis. status
     "Dibuka ..." nonaktif ↔ "Rincian penyaluran") — dua latar hampir
     sama (ΔE 3.5) butuh jarak kartu-ke-kartu penuh, bukan jarak baris. */
  gap: var(--sp-3);
  margin-top: var(--zis-card-gap);
}
.zis-btn-row > .zis-btn { flex: 1 1 180px; }

.zis-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  margin-bottom: var(--zis-card-gap);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border: 1px solid var(--zis-line);
  border-radius: var(--r-pill);
  color: var(--zis-indigo);
  background: var(--zis-surface);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.zis-back__mark {
  width: 10px;
  height: 10px;
  flex: none;
  border: 2px solid currentColor;
  border-right: 0;
  border-top: 0;
  transform: rotate(45deg);
}

/* =====================================================================
   16  FOKUS & GERAK
   ===================================================================== */
.zis :focus-visible {
  outline: 3px solid var(--zis-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  .zis .zis-bar__fill,
  .zis .zis-btn,
  .zis .zis-row,
  .zis .zis-tab { transition: none !important; }
}

/* =====================================================================
   17  CONTAINER QUERY — LAYAR LEBAR
   Modul kerap dirender di dalam bingkai ponsel pada layar desktop, jadi
   patokan lebar diambil dari kontainer, bukan dari viewport.
   ===================================================================== */
/* Kolom KPI cukup lebar untuk angka besar: naikkan skala metrik. */
@container zis (min-width: 480px) {
  .zis-hero__stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .zis-kpi__value { font-size: var(--fs-metric-md); }
}

@container zis (min-width: 640px) {
  .zis-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .zis-meta--tight { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
  .zis-receipt__rows > div { grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; }
  .zis-check__item { flex-wrap: nowrap; }

  /* Baris kembali sejajar: judul, nominal rata kanan, lalu chevron. */
  .zis-row__main { flex: 1 1 auto; }
  .zis-row__value { flex: 0 0 auto; max-width: 40%; font-size: var(--fs-small); text-align: right; }
  .zis-row .zis-btn { margin-left: 0; }
}

@container zis (min-width: 900px) {
  .zis { padding: var(--zis-page-pad) calc(var(--zis-page-pad) * 1.5); }
  .zis-hero { padding: calc(var(--zis-card-pad) * 1.5); }
  .zis-stack--split,
  .zis-donors { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .zis-table { min-width: 0; }
}

/* Layar transparansi publik sering ditayangkan lewat proyektor: beri
   lebar baca maksimum agar tidak melebar tak terkendali. */
@container zis (min-width: 1100px) {
  .zis--publik .zis-section,
  .zis--pimpinan .zis-section { max-width: 1080px; margin-inline: auto; }
  .zis--publik .zis-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* =====================================================================
   RITME BLOK HALAMAN — sumber tunggal jarak vertikal
   ---------------------------------------------------------------------
   Mengikuti "STANDAR JARAK ANTAR-BLOK HALAMAN" di puncak
   assets/css/portal-staff.css.

   Akar cacatnya sama persis seperti di shell bersama: di dalam satu
   .zis-section hanya sebagian blok yang punya margin. .zis-section__head
   dan .zis-kpis punya margin-bottom, .zis-note hanya punya margin-top,
   sedangkan .zis-stack dan .zis-card tidak punya apa pun. Begitu urutannya
   menjadi note -> stack, note -> kpis, atau note -> card, jaraknya nol dan
   dua blok berbeda terbaca menyatu. Ini yang terlihat pada layar
   Penyaluran, Buku Dana Sosial, dan Pengaturan.

   Perbaikannya di KONTAINER, bukan di tiap komponen, supaya komponen baru
   apa pun otomatis ikut ritme yang sama tanpa perlu ditambal lagi.
   ===================================================================== */

/* Antar-section mengikuti token ritme section (RITME SECTION OPSI B,
   pemilik produk 26 Agu 2026): 40px baku, 32px di Portal Pimpinan —
   dibaca lewat --zis-section-gap, bukan angka lokal, supaya modul ikut
   otomatis saat tokennya berubah. */
.zis {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--zis-section-gap);
}

/* Margin lama digantikan gap kontainer, agar jaraknya tidak berlipat
   dari dua sumber. */
.zis > .zis-tabs,
.zis > .zis-section,
.zis > .zis-section:last-child { margin-bottom: 0; }

/* Di dalam section: 12px antar blok — angka yang sama dengan
   "head -> isi 12px" pada standar. */
.zis-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--zis-card-gap);
}

.zis-section > .zis-section__head,
.zis-section > .zis-kpis,
.zis-section > .zis-note,
.zis-section > .zis-fine,
.zis-section > .zis-legal {
  margin-top: 0;
  margin-bottom: 0;
}

/* Blok judul -> konten mengikuti var(--sec-head-gap) 12px (RITME
   SECTION OPSI B). Gap grid section adalah --zis-card-gap yang berubah
   per kepadatan (8-16px); margin di bawah menggenapkan selisihnya
   sehingga jarak judul ke isinya selalu 12px, berapa pun kepadatannya.
   Ditulis SETELAH penolan margin di atas supaya menang kaskade. */
.zis-section > .zis-section__head {
  margin-bottom: calc(var(--sec-head-gap, var(--sp-3)) - var(--zis-card-gap));
}

/* Kompensasi lama "20px + 12px = 32px" untuk section berjudul yang
   mengikuti section tanpa judul DIHAPUS (26 Agu 2026): jarak antar
   section kini 40px dari token ritme, sudah lebih lapang daripada
   batas 32px yang dulu dikejar aturan itu. */

/* Catatan penutup halaman adalah penutup, bukan blok konten berikutnya. */
.zis > .zis-section:last-child > .zis-note:only-child {
  margin-top: var(--sp-3);
}

/* ---------------------------------------------------------------------
   Divider bermerek antar section — SoT 7.2.5
   Hanya DI ANTARA section level halaman (anak langsung .zis yang
   bertetangga); tidak pernah di dalam kartu, sheet, atau antar item
   daftar — lapisan sheet (.zis-sheetlayer) tidak punya anak
   .zis-section sehingga tidak tersentuh. Digambar absolut di TENGAH
   gap oleh pseudo pada section KEDUA sehingga tidak menambah tinggi
   layout. ::before dan ::after pada .zis-section belum terpakai di
   mana pun — sudah diperiksa lewat grep. position: relative tanpa
   z-index tidak membuat stacking context baru.

   Garis dibuat transparan selebar piring di tengah supaya terputus
   rapi: piring mark ikut opacity .55, dan piring semi transparan tidak
   bisa menutup garis di belakangnya dengan bersih. */
.zis > .zis-section + .zis-section { position: relative; }
.zis > .zis-section + .zis-section::before {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--zis-section-gap));
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--zis-line) 22%,
    var(--zis-line) calc(50% - 13px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    var(--zis-line) calc(50% + 13px),
    var(--zis-line) 78%,
    transparent);
}
.zis > .zis-section + .zis-section::after {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--zis-section-gap) - 10px);
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--zis-canvas) url("/presentasi/storage/brand/akselerasync-mark-1x1.webp") center / 13px 13px no-repeat;
  filter: grayscale(1);
  opacity: .55;
}

/* Ringkasan satu baris di bawah kartu kampanye tidak punya jarak sendiri,
   sehingga menempel ke batang kemajuan atau ke chip status di atasnya —
   terlihat jelas pada Ringkasan Portal Pimpinan. Jaraknya diberikan dari
   kartu sebagai kontainer, bukan dari komponennya, supaya versi yang berada
   di dalam .zis-kampanye__head (yang sudah punya gap flex) tidak berlipat. */
.zis-card > * + .zis-kampanye__ringkas { margin-top: var(--sp-2); }

/* Tabel lima kolom Buku Dana Sosial terlalu sempit pada lebar 520px:
   "14 Agustus 2026" patah menjadi tiga baris dan kolom Uraian terpotong di
   tepi kontainer. Lebarnya dinaikkan supaya tiap kolom terbaca utuh saat
   digulir mendatar, dan kolom tanggal serta nominal tidak boleh patah.
   Tabel tetap berada di dalam .zis-scroll sehingga halaman tidak melebar. */
.zis-table--wide { min-width: 560px; }
.zis-table--wide tbody th:first-child,
.zis-table--wide thead th:first-child { white-space: nowrap; }
.zis-table--wide td:last-child,
.zis-table--wide th:last-child { white-space: nowrap; text-align: right; }
/* Hanya tabel dengan satu kolom cerita panjang yang dilebarkan. Tabel rasio
   Portal Pimpinan kolomnya pendek-pendek, jadi tidak ikut dipaksa melebar. */
.zis-table--uraian { min-width: 720px; }
.zis-table--uraian td:nth-child(3) { min-width: 240px; }

/* Angka persentase ikut menyempit ketika nominal di sebelahnya panjang
   ("Rp 1.491.000.000 dari Rp 2.400.000.000"), sehingga "62,1%" patah menjadi
   dua baris dengan tanda persen berdiri sendiri. Angka pokok tidak boleh
   dipatahkan; yang mengalah adalah nominal di kanannya. */
.zis-bar__pct { flex: none; white-space: nowrap; }
.zis-bar__meta > span { min-width: 0; text-align: right; }

/* =====================================================================
   18  SHEET PENGAJUAN STATUS LEMBAGA
   Meminjam pola dialog keputusan modul Ujian. Lapisannya menempel ke
   body (di luar bingkai portal), sehingga ukuran dan titik patahnya
   memakai viewport, bukan container query modul. Aturan di bawah harus
   mengalahkan kerangka .zis (grid + padding + kanvas), maka selektor
   akarnya digandakan kelasnya. */
.zis.zis-sheetlayer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  justify-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
}
.zis-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 36, 74, .45);
}
.zis-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  border: 1px solid var(--zis-line);
  border-radius: var(--zis-card-radius) var(--zis-card-radius) 0 0;
  background: var(--zis-surface);
  box-shadow: var(--elev-2);
}
.zis-sheet:focus { outline: none; }
.zis-sheet__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--zis-card-pad);
  border-bottom: 1px solid var(--zis-line);
}
.zis-sheet__headmain { min-width: 0; }
.zis-sheet__title {
  color: var(--zis-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
}
.zis-sheet__sub {
  margin-top: var(--sp-1);
  color: var(--zis-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}
.zis-sheet__close {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  border: 1px solid var(--zis-line);
  border-radius: 50%;
  color: var(--zis-muted);
  background: var(--zis-surface);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}
.zis-sheet__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--zis-card-gap);
  padding: var(--zis-card-pad);
  overflow-y: auto;
}
/* Komponen bawaan membawa jarak atasnya sendiri; di dalam sheet jarak
   diberikan gap kontainer supaya tidak berlipat dari dua sumber. */
.zis-sheet__body > .zis-meta { margin-top: 0; padding-top: 0; border-top: 0; }
.zis-sheet__body > .zis-note { margin-top: 0; }
.zis-sheet__body > .zis-fine { margin-top: 0; }
.zis-sheet__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--zis-row-pad);
  border: 1px dashed var(--zis-line);
  border-radius: var(--r-lg);
  background: var(--zis-sand);
}
.zis-sheet__statusmeta {
  color: var(--zis-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.zis-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--zis-card-pad);
  border-top: 1px solid var(--zis-line);
}
.zis-sheet__foot .zis-btn { flex: 1 1 180px; }

/* Pada layar lebar, sheet berdiri di tengah seperti dialog. Lapisan ini
   menempel ke body, jadi media query viewport memang tepat di sini. */
@media (min-width: 640px) {
  .zis.zis-sheetlayer { align-content: center; padding: var(--sp-5); }
  .zis-sheet { border-radius: var(--zis-card-radius); }
}