/* US-12 dan US-19: halaman Donasi. Hanya token dari tokens-v2.css. */
[data-isi="donasi"] h2, [data-isi="laporan-donasi"] h2, .donasi-catatan h2 { margin: 0 0 var(--jarak-4); }
#rekening, #qris, #laporan { scroll-margin-top: 6rem; }

.donasi-kisi { display: grid; gap: var(--jarak-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container halaman (min-width: 55.5em) { .donasi-kisi { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--jarak-10); } }

/* Kartu rekening: pita hijau untuk bank, nomor besar di bawahnya */
.rekening-daftar { display: grid; gap: var(--jarak-5); }
.rekening {
  background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar);
  box-shadow: var(--bayang-kartu); overflow: hidden;
}
.rekening--belum { padding: var(--jarak-3); }
.rekening--belum .belum-ada { margin: 0; }
.rekening__kepala { background: var(--warna-latar-pekat); padding: var(--jarak-3) var(--jarak-5); }
.rekening__bank { margin: 0; font-size: var(--teks-l); color: var(--warna-teks-di-pekat-putih); }
.rekening__badan { display: grid; gap: var(--jarak-3); padding: var(--jarak-5); }
.rekening__label { display: block; margin: 0; font-size: var(--teks-s); color: var(--warna-teks-lembut); font-weight: var(--tebal-tegas); }
.rekening__nomor {
  margin: calc(-1 * var(--jarak-2)) 0 0; font-family: var(--huruf-judul); font-weight: var(--tebal-judul);
  font-size: var(--teks-xl); line-height: 1.2; letter-spacing: .04em; color: var(--warna-teks);
  user-select: all; overflow-wrap: anywhere;
}
@container halaman (min-width: 35.5em) { .rekening__nomor { font-size: var(--teks-2xl); } }
.rekening__atas-nama { margin: 0; display: grid; gap: 0; }
.rekening__atas-nama strong { font-size: var(--teks-l); font-weight: var(--tebal-tegas); }
.rekening__salin { width: 100%; min-width: 0; min-height: 64px; font-size: var(--teks-l); }
@container halaman (min-width: 35.5em) { .rekening__salin { width: auto; min-width: 20rem; justify-self: start; } }
.rekening .salin__status { min-height: 0; color: var(--warna-bahaya); }
.rekening .salin__status:empty { display: none; }

/* QRIS */
.qris { margin: 0; display: grid; gap: var(--jarak-3); justify-items: center; }
.qris__bingkai { background: var(--warna-latar-kartu); padding: var(--jarak-3); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar); box-shadow: var(--bayang-kartu); max-width: 360px; width: 100%; }
.qris__gambar { display: block; width: 100%; height: auto; }
.qris__ket { font-size: var(--teks-s); color: var(--warna-teks-lembut); text-align: center; }
.qris__perbesar { margin-top: var(--jarak-4); width: 100%; max-width: 360px; display: flex; margin-inline: auto; }

.qris-dialog { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; overflow: visible; }
.qris-dialog::backdrop { background: var(--warna-tirai); }
.qris-dialog__isi {
  box-sizing: border-box; display: grid; gap: var(--jarak-4); justify-items: center; background: var(--warna-latar-kartu); color: var(--warna-teks);
  width: min(92vw, 560px); max-height: 96dvh; overflow: auto; padding: var(--jarak-5); border-radius: var(--radius-besar);
}
.qris-dialog__judul { margin: 0; }
.qris-dialog__gambar { display: block; width: 100%; max-height: 62dvh; object-fit: contain; }
.qris-dialog__ket { margin: 0; text-align: center; }
.qris-dialog .tombol { width: 100%; }

.donasi-catatan { margin-top: var(--jarak-8); padding: var(--jarak-5); background: var(--warna-latar-muda); border-left: 6px solid var(--warna-merek); border-radius: var(--radius-sedang); }
.donasi-catatan p { margin: 0; }

/* Laporan donasi */
.laporan-daftar { display: grid; gap: var(--jarak-4); }
.laporan { background: var(--warna-latar-kartu); border: 1px solid var(--warna-garis); border-radius: var(--radius-besar); box-shadow: var(--bayang-kartu); }
.laporan--baru { padding: var(--jarak-5); display: grid; gap: var(--jarak-4); }
.laporan__periode { margin: 0; font-size: var(--teks-xl); color: var(--warna-teks-merek); }
.angka-daftar { margin: 0; display: grid; gap: var(--jarak-3); grid-template-columns: minmax(0, 1fr); }
@container halaman (min-width: 35.5em) { .angka-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.angka { padding: var(--jarak-3) var(--jarak-4); background: var(--warna-latar-tint); border-radius: var(--radius-sedang); border-left: 6px solid var(--warna-merek); }
.angka--salur { border-left-color: var(--warna-biru-gelap); }
.angka__label { font-size: var(--teks-s); font-weight: var(--tebal-tegas); color: var(--warna-teks-lembut); }
.angka__nilai { margin: 0; font-family: var(--huruf-judul); font-weight: var(--tebal-judul); font-size: var(--teks-xl); overflow-wrap: anywhere; }
.laporan__uraian h4 { margin: 0 0 var(--jarak-2); font-size: var(--teks-m); }
.laporan__uraian p, .laporan__uraian ul { margin: 0 0 var(--jarak-3); max-width: var(--lebar-baris-maks); }
.laporan__uraian ul { padding-left: 1.25em; }
.laporan__lampiran-baris { margin: 0; }
@container halaman (max-width: 35.49em) { .laporan__lampiran { width: 100%; } }

.laporan--lama > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-3); min-height: var(--sentuh-besar);
  padding: var(--jarak-2) var(--jarak-5); cursor: pointer; list-style: none; border-radius: var(--radius-besar);
}
.laporan--lama > summary::-webkit-details-marker { display: none; }
.laporan--lama .laporan__periode { font-size: var(--teks-l); min-width: 0; }
@container halaman (max-width: 35.49em) { .laporan--lama > summary { padding-inline: var(--jarak-4); } .laporan--lama .laporan__periode { font-size: var(--teks-m); } }
.laporan__aksi::before { content: "Lihat rincian"; font-weight: var(--tebal-tegas); color: var(--warna-teks-merek); margin-right: var(--jarak-2); }
.laporan__aksi { display: inline-flex; align-items: center; flex: none; white-space: nowrap; }
.laporan__aksi::after { content: ""; width: 10px; height: 10px; border-right: 3px solid var(--warna-teks-merek); border-bottom: 3px solid var(--warna-teks-merek); transform: rotate(45deg) translate(-2px, -2px); }
.laporan--lama[open] .laporan__aksi::before { content: "Sembunyikan"; }
.laporan--lama[open] .laporan__aksi::after { transform: rotate(-135deg); }
.laporan--lama[open] > summary { border-bottom: 1px solid var(--warna-garis-halus); border-radius: var(--radius-besar) var(--radius-besar) 0 0; }
.laporan__badan { display: grid; gap: var(--jarak-4); padding: var(--jarak-5); }
.laporan__lebih { margin-top: var(--jarak-5); width: 100%; }
@container halaman (min-width: 35.5em) { .laporan__lebih { width: auto; } }

.kosong { padding: var(--jarak-5); background: var(--warna-latar-kartu); border: 2px dashed var(--warna-garis); border-radius: var(--radius-besar); }
.kosong p { margin: 0; }
.kosong__judul { font-size: var(--teks-l); font-weight: var(--tebal-judul); font-family: var(--huruf-judul); margin-bottom: var(--jarak-2) !important; }