/* Dirapiin: gaya "Rapi & Wangi". Tanpa build step, cukup satu file CSS. */
:root {
  --linen: #F7F9FB;
  --uap: #E3EAF2;
  --denim: #1F2B45;
  --denim-2: #34425F;
  --kuningan: #B08D57;
  --kuningan-muda: #E2C796;
  --mint: #1E6B50;
  --mint-bg: #E7F2EC;
  --kunyit: #8A5A0E;
  --kunyit-bg: #FBEFD9;
  --garis: #DCE3EC;
  --garis-tebal: #C9D2DE;
  --redup: #4C5973;
  --putih: #FFFFFF;
  --galat: #B3261E;
  --galat-bg: #FCECEA;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--denim);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3, p { margin: 0; }
a { color: var(--denim); }
:focus-visible { outline: 3px solid var(--kuningan); outline-offset: 2px; }

.judul { font-family: 'Newsreader', Georgia, serif; font-weight: 600; letter-spacing: -0.2px; }
.h-besar { font-size: 28px; }
.h-sedang { font-size: 20px; font-family: inherit; font-weight: 700; }
.redup { color: var(--redup); font-size: 15px; }
.kecil { font-size: 13px; }

/* ---------- Tombol dan isian ---------- */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  border: 1.5px solid var(--denim); background: var(--putih); color: var(--denim);
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
}
.tombol-utama { background: var(--denim); color: var(--putih); }
.tombol-utama:hover { background: #162038; }
.tombol-bahaya { border-color: var(--galat); color: var(--galat); background: var(--putih); }
.tombol-penuh { width: 100%; }
.tombol-polos {
  background: none; border: none; font: inherit; color: inherit; cursor: pointer;
  text-align: left; padding: 0;
}

.form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.medan { display: flex; flex-direction: column; gap: 6px; }
.medan label, .label { font-size: 15px; font-weight: 600; }
.isian {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--garis-tebal); background: var(--putih); color: var(--denim);
  font: inherit; font-size: 16px;
}
select.isian { padding-right: 8px; }
.galat { color: var(--galat); font-size: 14px; }
.info {
  background: var(--mint-bg); color: var(--mint); border-radius: 12px;
  padding: 12px 16px; font-size: 15px; font-weight: 500; margin-bottom: 16px;
}

/* ---------- Halaman tamu (daftar, masuk, buat outlet) ---------- */
.tamu-isi { max-width: 460px; margin: 0 auto; padding: 32px 16px 48px; }
.merek { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.merek-nama { font-size: 34px; }
.merek-sub { font-size: 14px; color: var(--redup); }
.kartu {
  background: var(--putih); border: 1px solid var(--garis); border-radius: 20px; padding: 24px 20px;
}
.kartu-lebar { max-width: 620px; }
.tamu-isi:has(.kartu-lebar) { max-width: 620px; }
.tamu-bawah { text-align: center; margin-top: 20px; font-size: 15px; color: var(--redup); }
.tamu-bawah a { font-weight: 600; }

/* Kartu pilihan jenis laundry */
.pilihan { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; }
.pilihan legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.pilih { position: relative; display: block; }
.pilih input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pilih-isi {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 1px solid var(--garis-tebal); border-radius: 14px; background: var(--putih);
}
.pilih-isi strong { font-size: 16px; }
.pilih-isi span { font-size: 14px; color: var(--redup); }
.pilih input:checked + .pilih-isi { border: 2px solid var(--denim); background: #EEF2F8; padding: 13px 15px; }
.pilih input:focus-visible + .pilih-isi { outline: 3px solid var(--kuningan); outline-offset: 2px; }

/* ---------- Rangka aplikasi ---------- */
.rangka { min-height: 100vh; display: flex; }
.samping { display: none; }
.utama { flex: 1; min-width: 0; }
.kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 16px 0;
}
.kepala-merek { display: flex; flex-direction: column; }
.kepala-outlet { font-size: 22px; line-height: 1.2; }
.lencana {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--kunyit-bg); color: var(--kunyit);
}
.lencana-mint { background: var(--mint-bg); color: var(--mint); }
.konten { padding: 20px 16px 120px; max-width: 920px; }
.konten > * + * { margin-top: 16px; }

/* Navigasi bawah (HP) */
.bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center;
  background: var(--putih); border-top: 1px solid var(--uap); padding: 6px 8px 10px;
}
.bawah a, .bawah button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; justify-content: center;
  text-decoration: none; color: var(--redup); font: inherit; font-size: 12.5px; font-weight: 500;
  background: none; border: 0; cursor: pointer;
}
.bawah .aktif { color: var(--denim); font-weight: 700; }
.bawah svg, .menu-link svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Beranda ---------- */
.paket { background: var(--denim); color: var(--putih); border-radius: 20px; padding: 20px; }
.paket-label { font-size: 14px; color: #C9D3E3; }
.paket-nama { font-size: 24px; margin-top: 2px; }
.paket-sisa { margin-top: 10px; font-size: 15px; color: #E5EBF5; }
.paket-sisa strong { color: var(--kuningan-muda); font-size: 22px; }
.statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px; }
.stat-angka { font-size: 26px; font-weight: 700; display: block; }
.stat-nama { font-size: 13px; color: var(--redup); }
.langkah { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.langkah li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.langkah .tanda {
  width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--garis-tebal); background: var(--putih);
}
.langkah .selesai .tanda { background: var(--mint); border-color: var(--mint); }
.langkah .tanda svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.panel { background: var(--putih); border: 1px solid var(--garis); border-radius: 20px; padding: 20px; }

/* ---------- Layanan ---------- */
.baris-layanan {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px;
}
.baris-layanan .nama { grid-column: 1 / -1; }
.baris-layanan .medan label { font-size: 13px; color: var(--redup); font-weight: 500; }
.centang { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; }
.centang input { width: 22px; height: 22px; accent-color: var(--denim); }
.aksi { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.aksi .tombol { min-height: 44px; padding: 0 16px; font-size: 15px; }
.nonaktif { opacity: 0.8; }

/* ---------- Umum tahap 2 ---------- */
.sr-saja { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ikon-kecil { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.tombol-besar { min-height: 56px; font-size: 17px; }
.judul-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.teks-mint { color: var(--mint); font-weight: 600; }
.teks-kunyit { color: var(--kunyit); font-weight: 600; }
.kosong { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 28px 20px; }
.kembali { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--redup); }
.galat-kotak { background: var(--galat-bg); color: var(--galat); border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 500; }

/* Menu bawah: tombol Terima di tengah */
.bawah .tambah { color: var(--denim); font-weight: 700; }
.bawah .bulat {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-top: -26px;
  border-radius: 50%; background: var(--denim); color: var(--putih); border: 4px solid var(--putih);
}
.bawah .bulat svg { stroke-width: 2.6; }

/* Beranda */
.stat-link { display: block; text-decoration: none; color: inherit; }
.stat-link:hover { border-color: var(--garis-tebal); }
.stat-peringatan { border-color: var(--kunyit); }
.stat-peringatan .stat-angka { color: var(--kunyit); }
.uang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px;
}
.uang strong { font-size: 24px; }

/* ---------- Tag cucian (tanda khas Dirapiin) ---------- */
.daftar-tag { display: grid; gap: 10px; }
.tag {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); text-decoration: none; color: inherit;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; overflow: hidden;
}
.tag:hover { border-color: var(--garis-tebal); }
.tag-kiri {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px 4px;
  border-right: 2px dashed var(--garis-tebal); background: #FBFCFD;
}
.tag-lubang { width: 14px; height: 14px; border-radius: 50%; background: var(--linen); border: 1.5px solid var(--kuningan); }
.tag-no { font-size: 16px; }
.tag-isi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.tag-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tag-nama { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tag-ringkas { font-size: 14px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-kecil { font-size: 13px; color: var(--redup); }

/* Cap status */
.cap {
  display: inline-block; border: 1.5px solid; border-radius: 8px; padding: 2px 10px; font-size: 13px; font-weight: 700;
  white-space: nowrap; transform: rotate(-2deg);
}
.cap-besar { font-size: 15px; padding: 4px 14px; }
.cap-diterima { color: var(--denim); border-color: var(--denim); background: var(--putih); }
.cap-diproses { color: var(--denim); border-color: var(--denim-2); background: #EEF2F8; }
.cap-siap { color: #6F5226; border-color: var(--kuningan); background: #FBF5EA; }
.cap-diambil { color: var(--mint); border-color: var(--mint); background: var(--mint-bg); }
.cap-terlambat { color: var(--kunyit); border-color: var(--kunyit); background: var(--kunyit-bg); }

/* Daftar cucian */
.cari { display: flex; gap: 10px; }
.cari .isian { flex: 1; min-width: 0; }
.saring { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.saring a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--garis-tebal); background: var(--putih); color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 600;
}
.saring a.aktif { background: var(--denim); border-color: var(--denim); color: var(--putih); }
.halaman { display: flex; gap: 10px; justify-content: center; }

/* ---------- Form terima cucian ---------- */
.terima { display: flex; flex-direction: column; gap: 16px; }
.pilih-layanan { margin-top: 8px; }
.layanan-baris { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--uap); }
.layanan-baris:last-child { border-bottom: 0; padding-bottom: 0; }
.layanan-info { display: flex; flex-direction: column; }
.layanan-nama { font-size: 16px; font-weight: 600; }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px 32px; gap: 8px; align-items: center; }
.langkah-tombol {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--denim); background: var(--putih); color: var(--denim);
  font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.langkah-tombol:active { background: #EEF2F8; }
.jumlah-isi { text-align: center; font-size: 18px; font-weight: 600; -moz-appearance: textfield; }
.jumlah-isi::-webkit-outer-spin-button, .jumlah-isi::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.satuan-teks { color: var(--redup); font-size: 14px; }
.bayar-baris { display: flex; gap: 10px; }
.bayar-baris .isian { flex: 1; min-width: 0; }
.bar-simpan {
  position: sticky; bottom: 76px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--putih); border: 1.5px solid var(--denim); border-radius: 18px; padding: 10px 10px 10px 18px;
}
.bar-total { display: flex; flex-direction: column; line-height: 1.2; }
.bar-total strong { font-size: 24px; }

/* ---------- Nota ---------- */
.nota-tata { display: grid; gap: 16px; align-items: start; }
.nota {
  position: relative; background: var(--putih); border: 1px solid var(--garis-tebal); border-radius: 18px;
  padding: 44px 22px 22px; max-width: 460px; width: 100%;
}
.nota-lubang {
  position: absolute; top: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: var(--linen); border: 2px solid var(--kuningan);
}
.nota-kepala { text-align: center; padding-bottom: 14px; border-bottom: 2px dashed var(--garis-tebal); }
.nota-outlet { font-size: 22px; }
.nota-no { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 2px dashed var(--garis-tebal); }
.nota-kode { font-size: 30px; line-height: 1.1; }
.nota-data { margin: 0; padding: 14px 0; display: grid; gap: 8px; border-bottom: 2px dashed var(--garis-tebal); }
.nota-data div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; font-size: 15px; }
.nota-data dt { color: var(--redup); }
.nota-data dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.nota-item { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 15px; }
.nota-item th { text-align: left; font-size: 13px; color: var(--redup); font-weight: 500; padding: 8px 0; }
.nota-item td { padding: 8px 0; vertical-align: top; border-top: 1px solid var(--uap); }
.nota-item .kanan { text-align: right; white-space: nowrap; padding-left: 12px; }
.nota-rinci { display: block; }
.nota-jumlah { margin-top: 8px; padding-top: 12px; border-top: 2px dashed var(--garis-tebal); display: grid; gap: 6px; font-size: 15px; }
.nota-jumlah div { display: flex; justify-content: space-between; gap: 12px; }
.nota-jumlah .nota-total strong { font-size: 20px; }
.nota-kaki { margin-top: 16px; text-align: center; }
.nota-merek { margin-top: 8px; text-align: center; color: var(--kuningan); font-weight: 600; }
.tindakan { display: grid; gap: 12px; max-width: 460px; width: 100%; }
.bayar-kotak { display: grid; gap: 8px; padding: 16px; border-radius: 16px; }
.tautan-kecil { text-decoration: underline; font-size: 14px; color: var(--redup); min-height: 44px; width: 100%; text-align: center; }

/* ---------- Laporan ---------- */
.ringkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.angka-kartu {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px;
}
.angka-kartu strong { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.angka-utama { grid-column: 1 / -1; background: var(--denim); border-color: var(--denim); color: var(--putih); border-radius: 20px; padding: 18px 20px; }
.angka-utama .redup { color: #C9D3E3; }
.angka-utama strong { font-size: 32px; }
.grafik-bungkus { margin: 12px 0 0; }
.grafik { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 1.5px solid var(--garis-tebal); }
.batang { flex: 1; min-width: 2px; background: var(--denim-2); border-radius: 3px 3px 0 0; }
.grafik.rapat { gap: 1px; }
.grafik.rapat .batang { min-width: 0; border-radius: 1px 1px 0 0; }
.rentang-form {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 16px;
}
.rentang-form .medan { min-width: 0; }
.rentang-form .tombol { width: 100%; }
/* Isian tanggal di HP: ikut lebar kolom, tidak melebar sendiri */
input[type="date"].isian {
  display: block; min-width: 0; max-width: 100%; height: 48px; text-align: left;
  -webkit-appearance: none; appearance: none;
}
input[type="date"].isian::-webkit-date-and-time-value { text-align: left; }
.rentang-galat { grid-column: 1 / -1; }
.batang.hari-ini { background: var(--kuningan); }
.grafik-sumbu { display: flex; justify-content: space-between; margin-top: 6px; }
.rinci { margin-top: 12px; }
.rinci summary { cursor: pointer; font-size: 14px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.tabel-rinci { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel-rinci th { text-align: left; font-weight: 500; color: var(--redup); padding: 6px 0; }
.tabel-rinci td { padding: 6px 0; border-top: 1px solid var(--uap); }
.tabel-rinci .kanan { text-align: right; }
.terlaris { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--uap); }
.terlaris:last-child { border-bottom: 0; padding-bottom: 0; }
.terlaris-atas { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.terlaris-bar { height: 8px; background: var(--uap); border-radius: 999px; overflow: hidden; }
.terlaris-bar span { display: block; height: 100%; background: var(--kuningan); border-radius: 999px; }
.piutang {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px 16px;
}
.piutang strong { font-size: 24px; }
.stat-kecil { font-size: 17px !important; overflow-wrap: anywhere; }

/* ---------- Pelanggan dan menu Lainnya ---------- */
.baris-pelanggan {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 12px 14px;
}
.baris-pelanggan:hover { border-color: var(--garis-tebal); }
.avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--uap); color: var(--denim); font-size: 20px;
}
.pel-isi { display: flex; flex-direction: column; min-width: 0; }
.pel-isi strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.daftar-menu { display: grid; gap: 10px; }
.daftar-menu a {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; text-decoration: none; color: inherit;
  background: var(--putih); border: 1px solid var(--garis); border-radius: 16px;
}
.daftar-menu a:hover { border-color: var(--garis-tebal); }
.daftar-menu span { flex: 1; display: flex; flex-direction: column; font-weight: 600; }
.daftar-menu small { font-weight: 400; color: var(--redup); font-size: 13px; }
.daftar-menu svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.daftar-menu a > svg:last-child { width: 18px; height: 18px; color: var(--redup); }

/* ---------- Karyawan ---------- */
.hak-daftar { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.hak-daftar li { display: flex; gap: 10px; align-items: flex-start; }
.hak-daftar li span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; line-height: 1; }
.hak-daftar .boleh span { background: var(--mint-bg); color: var(--mint); }
.hak-daftar .tidak span { background: var(--galat-bg); color: var(--galat); }
.kartu-kasir { background: var(--putih); border: 1px solid var(--garis); border-radius: 16px; padding: 14px; display: grid; gap: 12px; }
.kartu-kasir.nonaktif { background: #FBFCFD; }
.kasir-atas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kasir-aksi { display: flex; gap: 10px; flex-wrap: wrap; }
.kasir-aksi .tombol { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* ---------- Langganan ---------- */
.paket-tombol { margin-top: 14px; }
.tombol-terang { background: var(--kuningan-muda); border-color: var(--kuningan-muda); color: var(--denim); }
.tombol-terang:hover { background: #EBD6AE; }
.lencana { text-decoration: none; }
.lencana small, .saring small { font-weight: 500; opacity: 0.8; margin-left: 4px; }
.paket-grid { display: grid; gap: 12px; }
.paket-kartu {
  display: flex; flex-direction: column; gap: 8px; background: var(--putih); border: 1px solid var(--garis);
  border-radius: 20px; padding: 18px;
}
.paket-utama { border: 2px solid var(--denim); }
.paket-segera { background: #FBFCFD; }
.paket-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.paket-judul { font-size: 24px; }
.harga { font-size: 30px; line-height: 1.1; }
.harga .per { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: var(--redup); }
.fitur { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.fitur li { position: relative; padding-left: 24px; }
.fitur li::before {
  content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 12px;
  border: solid var(--mint); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0.8); transform-origin: center;
}
.riwayat-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--uap); }
.riwayat-baris:first-of-type { margin-top: 8px; }
.riwayat-isi { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.riwayat-aksi { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.riwayat-aksi .tombol { min-height: 44px; padding: 0 16px; font-size: 15px; }

/* ---------- Halaman hukum ---------- */
.dokumen-bungkus { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.dokumen-kepala { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px dashed var(--garis-tebal); }
.dokumen-merek { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.dokumen-menu { display: flex; gap: 8px; flex-wrap: wrap; }
.dokumen-menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--garis-tebal); background: var(--putih); color: var(--redup); text-decoration: none; font-size: 14px; font-weight: 600; }
.dokumen-menu a[aria-current="page"] { background: var(--denim); border-color: var(--denim); color: var(--putih); }
.dokumen { padding-top: 28px; }
.dokumen > * + * { margin-top: 12px; }
.dokumen h1 { font-size: 34px; line-height: 1.2; }
.dokumen h2 { font-size: 20px; font-weight: 700; margin-top: 32px; }
.dokumen p, .dokumen li { font-size: 16px; line-height: 1.75; max-width: 68ch; }
.dokumen ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.dokumen-kaki { margin-top: 48px; padding-top: 16px; border-top: 2px dashed var(--garis-tebal); }
.tautan-hukum a { color: inherit; }

/* ---------- Halaman error ---------- */
.halaman-galat { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px 16px; }
.tag-galat { position: relative; width: 100%; max-width: 420px; background: var(--putih); border: 1px solid var(--garis-tebal); border-radius: 18px; padding: 44px 24px 28px; text-align: center; display: grid; gap: 10px; }
.tag-galat-lubang { position: absolute; top: 14px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--linen); border: 2px solid var(--kuningan); }
.kode-galat { font-size: 64px; line-height: 1; color: var(--kuningan); }
.tag-galat h1 { font-size: 24px; }
.tag-galat-aksi { margin-top: 8px; display: flex; justify-content: center; }

/* ---------- Layar lebar ---------- */
@media (min-width: 720px) {
  .layanan-baris { grid-template-columns: minmax(0, 1fr) 280px; align-items: center; }
  .baris-layanan { grid-template-columns: 2fr 90px 130px 110px; align-items: end; }
  .baris-layanan .nama { grid-column: auto; }
  .aksi { grid-column: 1 / -1; align-items: center; }
  .tamu-isi { padding-top: 56px; }
}
@media (min-width: 600px) {
  .rentang-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rentang-form .tombol { grid-column: 1 / -1; width: auto; justify-self: start; }
}
@media (min-width: 720px) {
  .rentang-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .rentang-form .tombol { grid-column: auto; justify-self: stretch; }
}
@media (min-width: 900px) {
  .paket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ringkas { grid-template-columns: 1.4fr 1fr 1fr; }
  .angka-utama { grid-column: auto; }
  .bar-simpan { bottom: 16px; }
  .nota-tata { grid-template-columns: 460px minmax(0, 340px); gap: 24px; }
  .samping {
    display: flex; flex-direction: column; width: 240px; flex: none; gap: 24px;
    padding: 28px 16px; background: var(--putih); border-right: 1px solid var(--uap);
    position: sticky; top: 0; height: 100vh;
  }
  .samping-merek { display: flex; flex-direction: column; padding: 0 12px; }
  .menu { display: flex; flex-direction: column; gap: 4px; }
  .menu-link {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 12px;
    text-decoration: none; color: var(--redup); font-weight: 600; font-size: 15px;
  }
  .menu-link:hover { background: var(--linen); }
  .menu-link.aktif { background: #EEF2F8; color: var(--denim); }
  .samping-bawah { margin-top: auto; }
  .samping-bawah .menu-link { width: 100%; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
  .bawah { display: none; }
  .kepala { padding: 28px 40px 0; }
  .kepala-merek .merek-nama { display: none; }
  .konten { padding: 24px 40px 56px; }
}

@media print {
  .samping, .bawah, .kepala, .tanpa-cetak, .info { display: none !important; }
  body { background: #fff; }
  .rangka { display: block; }
  .konten { padding: 0; max-width: none; }
  .nota-tata { display: block; }
  .nota { border: 0; max-width: none; padding-top: 28px; }
  .nota-lubang { display: none; }
  .cap { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Pilihan cetak struk */
.struk-pilih { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Pengeluaran dan ringkasan laporan 5 kartu */
.bulan-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bulan-nav .tombol { flex: 0 0 auto; }
.keluar-baris { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 16px; }
.keluar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.keluar-baris form { flex: 0 0 auto; }
@media (min-width: 900px) {
  .ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .angka-utama { grid-column: 1 / -1; }
}

.aksi-laporan { display: flex; flex-wrap: wrap; gap: 10px; }
.aksi-laporan .tombol { flex: 1 1 180px; }
@media print {
  .saring, .rentang-form, .aksi-laporan, .tombol { display: none !important; }
  .panel, .angka-kartu { break-inside: avoid; }
  .angka-utama { background: #fff !important; color: #000 !important; border: 1.5px solid #000; }
  .angka-utama .redup { color: #333 !important; }
}

.logo-kecil { display: inline-block; width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-right: 0.35em; }