/* Galipat Amanah — dipakai di HP, sering sambil berdiri.
   Sasaran sentuh besar, kontras tinggi, tanpa hiasan yang memperlambat. */

:root {
  --kertas:   #F3F5F4;
  --permukaan:#FFFFFF;
  --tinta:    #14201E;
  --lembut:   #5E706C;
  --garis:    #DBE3E1;
  --aksen:    #0E6E63;
  --aksen-mu: #E2EFEC;
  --awas:     #A8443A;
  --awas-mu:  #F6E7E4;
  --radius:   12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kertas: #0D1412; --permukaan: #151F1D; --tinta: #E4EBE9; --lembut: #90A29E;
    --garis: #253330; --aksen: #35A79A; --aksen-mu: #10302C;
    --awas: #DD8478; --awas-mu: #2E1B18;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--kertas); color: var(--tinta);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------------ rangka */
.atas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
}
.merek { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.merek-tanda {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: var(--aksen); color: #fff; font-size: 17px; line-height: 1;
}
.merek-tanda.besar { width: 46px; height: 46px; font-size: 26px; border-radius: 13px; }
.atas-kanan { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.kelompok { color: var(--lembut); }
.keluar { color: var(--aksen); text-decoration: none; font-weight: 600; }

.isi { max-width: 640px; margin: 0 auto; padding: 18px 16px 96px; }

.bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--permukaan); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom);
}
.bawah a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; color: var(--lembut); text-decoration: none;
  font-size: 11px; font-weight: 600; text-align: center; line-height: 1.2;
}
.bawah a.aktif { color: var(--aksen); }
.bawah .ikon { font-size: 19px; line-height: 1; }

/* ------------------------------------------------------------------- teks */
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: .82rem; margin: 0 0 10px; text-transform: uppercase;
     letter-spacing: .09em; color: var(--lembut); }
.kepala-halaman { margin-bottom: 16px; }
.lembut { color: var(--lembut); margin: 4px 0 0; }
.kecil { font-size: .87rem; }
.tengah { text-align: center; }
.blok { margin: 26px 0; }
.kembali { display: inline-block; margin-bottom: 12px; color: var(--aksen);
           text-decoration: none; font-weight: 600; font-size: .92rem; }

/* ------------------------------------------------------------------ kartu */
.kartu-besar {
  background: var(--aksen); color: #fff; border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px;
}
.kartu-label { font-size: .8rem; opacity: .85; letter-spacing: .05em; text-transform: uppercase; }
.kartu-angka { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.ringkas-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.ringkas {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 3px;
}
.ringkas.perhatian { border-color: var(--awas); background: var(--awas-mu); }
.ringkas-angka { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ringkas-angka .dari { font-size: .95rem; font-weight: 500; color: var(--lembut); }
.ringkas-label { font-size: .78rem; color: var(--lembut); }

.lencana {
  display: inline-block; background: var(--awas); color: #fff; border-radius: 99px;
  padding: 1px 8px; font-size: .72rem; vertical-align: middle;
}

/* ----------------------------------------------------------------- tabel */
.tabel { width: 100%; border-collapse: collapse; background: var(--permukaan);
         border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; }
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--garis); }
.tabel tr:last-child td { border-bottom: 0; }
.tingkat-sel { text-transform: capitalize; }
.angka { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.daftar-sederhana { list-style: none; margin: 0; padding: 0;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); overflow: hidden; }
.daftar-sederhana li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--garis);
}
.daftar-sederhana li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------- pencarian */
.cari-bungkus { position: sticky; top: 53px; z-index: 10; background: var(--kertas);
                padding: 4px 0 8px; }
.cari {
  width: 100%; padding: 13px 15px; font-size: 16px;
  border: 1px solid var(--garis); border-radius: var(--radius);
  background: var(--permukaan); color: var(--tinta);
}
.cari:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: transparent; }

.daftar-jamaah { list-style: none; margin: 8px 0 0; padding: 0;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); overflow: hidden; }
.baris-jamaah { border-bottom: 1px solid var(--garis); }
.baris-jamaah:last-child { border-bottom: 0; }
.baris-jamaah a,
.baris-jamaah .baris-isi {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  padding: 14px; color: var(--tinta); text-decoration: none; min-height: 52px;
}
.baris-jamaah .tanda { color: var(--aksen); font-weight: 700; }
.baris-jamaah .nama { font-weight: 500; }
.baris-jamaah .nilai { font-size: .85rem; color: var(--lembut);
                       font-variant-numeric: tabular-nums; }
.baris-jamaah.sudah .nilai { color: var(--aksen); font-weight: 600; }

/* ------------------------------------------------------------------ borang */
.borang { display: flex; flex-direction: column; gap: 14px; }
.borang label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem;
                font-weight: 600; color: var(--lembut); }
.borang input {
  padding: 13px 15px; font-size: 16px; border: 1px solid var(--garis);
  border-radius: var(--radius); background: var(--permukaan); color: var(--tinta);
}
.borang input:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: transparent; }

.petunjuk {
  background: var(--aksen-mu); border-left: 3px solid var(--aksen);
  padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: .9rem; margin-bottom: 16px;
}
.petunjuk.sudah { background: var(--awas-mu); border-left-color: var(--awas); }

.tingkat { margin-bottom: 22px; }
.tingkat-judul { text-transform: uppercase; }
.pos-daftar { background: var(--permukaan); border: 1px solid var(--garis);
              border-radius: var(--radius); overflow: hidden; }
.pos {
  display: grid; grid-template-columns: 1fr 138px; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--garis); min-height: 50px;
}
.pos:last-child { border-bottom: 0; }
.pos-nama { font-size: .93rem; }
.pos.ada-nilai .pos-nama { font-weight: 600; }
.pos-isian { display: flex; align-items: center; gap: 6px;
             border: 1px solid var(--garis); border-radius: 9px; padding: 0 9px;
             background: var(--kertas); }
.pos.ada-nilai .pos-isian { border-color: var(--aksen); background: var(--aksen-mu); }
.pos-isian .rp { font-size: .78rem; color: var(--lembut); }
.pos-isian input {
  width: 100%; border: 0; background: transparent; color: var(--tinta);
  padding: 10px 0; font-size: 16px; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.pos-isian input:focus { outline: none; }
.pos-isian:focus-within { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* --------------------------------------------------------- jumlah menempel */
.jumlah-tempel {
  position: sticky; bottom: 58px; z-index: 15;
  display: flex; align-items: center; gap: 12px;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 12px 14px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.07);
}
.jumlah-teks { display: flex; flex-direction: column; flex: 1; }
.jumlah-label { font-size: .74rem; color: var(--lembut); text-transform: uppercase;
                letter-spacing: .07em; }
.jumlah-angka { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- tombol */
.tombol {
  display: inline-block; padding: 14px 22px; border: 0; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; cursor: pointer; text-align: center;
  text-decoration: none; min-height: 48px;
}
.tombol.utama { background: var(--aksen); color: #fff; }
.tombol.utama:active { filter: brightness(.92); }
.tombol.lebar { display: block; width: 100%; margin-top: 8px; }
.tombol:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }

/* ------------------------------------------------------------------ masuk */
.masuk-bungkus { min-height: 82vh; display: grid; place-items: center; }
.masuk-kartu {
  width: 100%; max-width: 380px; background: var(--permukaan);
  border: 1px solid var(--garis); border-radius: 16px; padding: 28px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.masuk-merek { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.masuk-merek h1 { font-size: 1.3rem; }
.galat { background: var(--awas-mu); color: var(--awas); border-radius: 9px;
         padding: 11px 14px; margin: 0; font-size: .9rem; font-weight: 600; }

/* ------------------------------------------------------------ siap setor */
.vonis { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
         display: flex; flex-direction: column; gap: 5px; border: 1px solid transparent; }
.vonis-judul { font-weight: 700; font-size: 1.05rem; }
.vonis-teks { font-size: .9rem; }
.vonis.aman { background: var(--aksen-mu); border-color: var(--aksen); color: var(--aksen); }
.vonis.awas { background: var(--awas-mu); border-color: var(--awas); color: var(--awas); }

.naik { color: var(--aksen); font-weight: 600; }
.turun { color: var(--awas); font-weight: 600; }
.lembut-lencana { background: var(--lembut); }
.baris-jumlah td { background: var(--aksen-mu); }
.tabel.rapat td { padding: 7px 10px; font-size: .88rem; }
.tabel.rapat tr.kosong td { opacity: .5; }
.daftar-sederhana a { color: var(--aksen); text-decoration: none; font-weight: 500; }

/* ----------------------------------------------------------- pendaftaran */
.masuk-kartu.lebar-sedang { max-width: 460px; }
.pemisah { border: 0; border-top: 1px solid var(--garis); margin: 4px 0; }
.masuk-kartu a { color: var(--aksen); font-weight: 600; }
.kode-nilai {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .05em;
  user-select: all;
}
.kode-nilai.mati { text-decoration: line-through; opacity: .5; }
.daftar-sederhana li form { flex: none; }

/* ---------------------------------------------------------------- kelola */
.kelola-baris > details > summary {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 14px; cursor: pointer; list-style: none; min-height: 52px;
  justify-content: center;
}
.kelola-baris > details > summary::-webkit-details-marker { display: none; }
.kelola-baris > details > summary::after {
  content: "Ubah ›"; position: absolute; right: 14px;
  color: var(--aksen); font-size: .8rem; font-weight: 600;
}
.kelola-baris > details { position: relative; }
.kelola-baris > details[open] > summary::after { content: "Tutup ›"; }
.kelola-baris > details[open] { background: var(--kertas); }
.kelola-baris.nonaktif > details > summary .nama { opacity: .55; }
.kelola-baris .nama { padding-right: 66px; }

.borang.rapat { padding: 0 14px 14px; gap: 11px; }
.borang.rapat select, .borang.rapat input[type="number"] {
  padding: 13px 15px; font-size: 16px; border: 1px solid var(--garis);
  border-radius: var(--radius); background: var(--permukaan); color: var(--tinta);
}
.centang { flex-direction: row !important; align-items: flex-start; gap: 10px !important;
           color: var(--tinta) !important; font-weight: 500 !important; }
.centang input { margin-top: 3px; width: 20px; height: 20px; flex: none; }

.hapus-borang { display: flex; flex-direction: column; gap: 6px;
                padding: 0 14px 16px; align-items: flex-start; }

.sandi-sekali {
  background: var(--aksen-mu); border: 1.5px solid var(--aksen);
  border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.sandi-judul { font-weight: 700; color: var(--aksen); }
.sandi-nilai {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .06em;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: 9px; padding: 12px 14px; user-select: all; overflow-wrap: anywhere;
}

.geser { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tombol.garis { background: transparent; color: var(--aksen);
                border: 1.5px solid var(--aksen); }
.tombol.garis:active { background: var(--aksen-mu); }

/* -------------------------------------------------------------- buku kas */
.kabar { background: var(--aksen-mu); color: var(--aksen); border-radius: 9px;
         padding: 11px 14px; margin: 0 0 14px; font-size: .9rem; font-weight: 600; }

.baris-jamaah .nilai.minus { color: var(--awas); font-weight: 700; }

.lipat { background: var(--permukaan); border: 1px solid var(--garis);
         border-radius: var(--radius); padding: 0 14px; margin: 18px 0; }
.lipat > summary { padding: 14px 0; font-weight: 700; cursor: pointer;
                   color: var(--aksen); list-style: none; }
.lipat > summary::-webkit-details-marker { display: none; }
.lipat > summary::before { content: "＋ "; }
.lipat[open] > summary::before { content: "− "; }
.lipat[open] { padding-bottom: 16px; }
.lipat select {
  padding: 13px 15px; font-size: 16px; border: 1px solid var(--garis);
  border-radius: var(--radius); background: var(--permukaan); color: var(--tinta);
}

.kolom { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.borang-label { padding: 0; font-size: .88rem; font-weight: 600; color: var(--lembut); }
.pilih-arah { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.arah { flex-direction: row !important; align-items: center; gap: 8px !important;
        border: 1px solid var(--garis); border-radius: var(--radius);
        padding: 12px 14px; background: var(--kertas); color: var(--tinta) !important;
        font-weight: 600; min-height: 48px; cursor: pointer; }
.arah:has(input:checked) { border-color: var(--aksen); background: var(--aksen-mu); }

.buku { list-style: none; margin: 8px 0 0; padding: 0;
        background: var(--permukaan); border: 1px solid var(--garis);
        border-radius: var(--radius); overflow: hidden; }
.baris-kas {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--garis);
}
.baris-kas:last-child { border-bottom: 0; }
.kas-kiri { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kas-ket { font-size: .93rem; font-weight: 500; overflow-wrap: anywhere; }
.kas-kanan { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
             white-space: nowrap; }
.kas-nominal { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.kas-nominal.masuk { color: var(--aksen); }
.kas-nominal.keluar { color: var(--awas); }

.baris-kas.pembuka { background: var(--kertas); }
.baris-kas.batal .kas-ket,
.baris-kas.batal .kas-nominal { text-decoration: line-through; opacity: .55; }
.dibatalkan { color: var(--awas); font-weight: 600; }

.batalkan { grid-column: 1 / -1; }
.batalkan > summary { font-size: .8rem; color: var(--lembut); cursor: pointer; }
.batalkan form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.batalkan input {
  flex: 1 1 160px; padding: 10px 12px; font-size: 16px;
  border: 1px solid var(--garis); border-radius: 9px;
  background: var(--kertas); color: var(--tinta);
}
.kecil-tombol { padding: 10px 16px; font-size: .88rem; min-height: 42px;
                background: var(--awas-mu); color: var(--awas); }

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