/* app.css — mobile-first, ditulis tangan. Rancang 360px dulu. */

:root {
  --hijau: #0b6b3a;
  --hijau-muda: #e6f3ec;
  --kuning: #b8860b;
  --kuning-muda: #fdf3d8;
  --merah: #b3261e;
  --merah-muda: #fce8e6;
  --abu: #64748b;
  --abu-muda: #f1f5f9;
  --teks: #17202a;
  --teks-lemah: #5b6773;
  --garis: #dfe5ec;
  --latar: #f6f8fa;
  --putih: #ffffff;
  --radius: 10px;
  --bayang: 0 1px 3px rgba(16, 24, 40, .09);
  --sentuh: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--teks);
  background: var(--latar);
}
body.app { padding-bottom: 68px; }   /* ruang untuk nav bawah */

a { color: var(--hijau); text-decoration: none; }
h1 { font-size: 1.35rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
h3 { font-size: .98rem; margin: 1rem 0 .4rem; }

/* ---------- kerangka ---------- */
.bar-atas {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: .6rem;
  height: 52px; padding: 0 .75rem;
  background: var(--hijau); color: #fff;
}
.merek { color: #fff; font-weight: 700; letter-spacing: .2px; }
.merek span { font-weight: 400; opacity: .8; }
.tombol-menu {
  background: none; border: 0; color: #fff; font-size: 1.3rem;
  width: var(--sentuh); height: var(--sentuh); cursor: pointer;
}
.akun { margin-left: auto; text-align: right; line-height: 1.15; }
.akun-nama { display: block; font-size: .82rem; }
.lencana-peran { font-size: .68rem; opacity: .85; }

.samping {
  position: fixed; top: 52px; left: 0; bottom: 0; width: 232px; z-index: 40;
  background: var(--putih); border-right: 1px solid var(--garis);
  padding: .5rem 0; overflow-y: auto;
  transform: translateX(-100%); transition: transform .18s ease;
}
.samping.buka { transform: none; }
.samping a {
  display: block; padding: .78rem 1rem; color: var(--teks);
  min-height: var(--sentuh);
}
.samping a.aktif { background: var(--hijau-muda); color: var(--hijau); font-weight: 600; }
.samping hr { border: 0; border-top: 1px solid var(--garis); margin: .5rem 0; }

.isi { padding: .85rem; max-width: 1180px; margin: 0 auto; }
body.tamu .isi { padding: 0; max-width: none; }

.bawah {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: var(--putih); border-top: 1px solid var(--garis);
  padding-bottom: env(safe-area-inset-bottom);
}
.bawah a {
  flex: 1; text-align: center; padding: .45rem 0 .5rem;
  font-size: .7rem; color: var(--teks-lemah); min-height: var(--sentuh);
}
.bawah a span { display: block; font-size: 1.05rem; line-height: 1.2; }
.bawah a.aktif { color: var(--hijau); font-weight: 600; }

/* ---------- komponen ---------- */
.kartu {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: .8rem; margin-bottom: .7rem;
  box-shadow: var(--bayang);
}
.kartu-judul { font-weight: 600; margin-bottom: .3rem; }
.kartu-baris { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; }
.kartu-baris dt { color: var(--teks-lemah); }
.lemah { color: var(--teks-lemah); font-size: .85rem; }

.lencana {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: var(--abu-muda); color: var(--abu);
}
.t-hijau  { background: var(--hijau-muda); color: var(--hijau); }
.t-kuning { background: var(--kuning-muda); color: var(--kuning); }
.t-merah  { background: var(--merah-muda); color: var(--merah); }
.t-abu    { background: var(--abu-muda); color: var(--abu); }

.notif { padding: .65rem .8rem; border-radius: var(--radius); margin-bottom: .7rem; font-size: .9rem; }
.notif-sukses { background: var(--hijau-muda); color: var(--hijau); }
.notif-galat { background: var(--merah-muda); color: var(--merah); }
.notif-ingat { background: var(--kuning-muda); color: var(--kuning); }

/* ---------- form ---------- */
label { display: block; font-size: .82rem; color: var(--teks-lemah); margin: .6rem 0 .18rem; }
input, select, textarea {
  width: 100%; min-height: var(--sentuh); padding: .55rem .65rem;
  border: 1px solid var(--garis); border-radius: 8px; font: inherit;
  background: var(--putih); color: var(--teks);
}
textarea { min-height: 84px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--hijau); border-color: var(--hijau); }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--sentuh); padding: .55rem 1rem; border: 0; border-radius: 8px;
  background: var(--hijau); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.tombol-lain { background: var(--putih); color: var(--teks); border: 1px solid var(--garis); }
.tombol-bahaya { background: var(--merah); }
.tombol-kecil { min-height: 34px; padding: .3rem .7rem; font-size: .82rem; }
.tombol-penuh { width: 100%; }
.aksi { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.aksi-lengket {
  position: sticky; bottom: 68px; background: var(--latar);
  padding: .6rem 0; border-top: 1px solid var(--garis);
}

.saring { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.saring .penuh { grid-column: 1 / -1; }

/* ---------- tabel (desktop) ---------- */
.tabel-bungkus { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--putih); font-size: .87rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { background: var(--abu-muda); font-size: .78rem; text-transform: uppercase; letter-spacing: .3px; color: var(--teks-lemah); }
td.angka, th.angka { text-align: right; }

.hanya-desktop { display: none; }
.hanya-mobile { display: block; }

/* ---------- statistik & funnel ---------- */
.petak { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
.petak .kartu { margin: 0; }
.petak-nilai { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.petak-label { font-size: .76rem; color: var(--teks-lemah); }

.corong-baris { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .85rem; }
.corong-nama { flex: 0 0 42%; }
.corong-bar { flex: 1; height: 16px; background: var(--abu-muda); border-radius: 999px; overflow: hidden; }
.corong-isi { height: 100%; background: var(--hijau); }
.corong-nilai { flex: 0 0 2.4rem; text-align: right; font-weight: 600; }

/* ---------- timeline ---------- */
.linimasa { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--garis); }
.linimasa li { position: relative; padding: 0 0 .9rem .3rem; }
.linimasa li::before {
  content: ""; position: absolute; left: -1.45rem; top: .35rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--hijau);
}
.linimasa li.kendala::before { background: var(--merah); }
.linimasa li.mundur::before { background: var(--kuning); }

.paginasi { display: flex; gap: .4rem; justify-content: center; margin: 1rem 0; flex-wrap: wrap; }
.paginasi a, .paginasi span { padding: .45rem .7rem; border-radius: 8px; background: var(--putih); border: 1px solid var(--garis); }
.paginasi .kini { background: var(--hijau); color: #fff; border-color: var(--hijau); }

/* ---------- halaman masuk ---------- */
.masuk-layar {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 380px at 50% -8%, var(--hijau-muda), transparent 70%),
    var(--latar);
}

.masuk-kartu {
  width: 100%; max-width: 380px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 14px; padding: 1.5rem 1.25rem 1.35rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 28px -14px rgba(16, 24, 40, .22);
}

.masuk-kepala { text-align: center; margin-bottom: 1.25rem; }
.masuk-lambang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: .7rem;
  border-radius: 15px; background: var(--hijau); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(11, 107, 58, .6);
}
.masuk-kepala h1 {
  font-size: 1.16rem; line-height: 1.3; margin: 0 0 .2rem;
  letter-spacing: -.2px;
}
.masuk-sub { margin: 0; font-size: .82rem; color: var(--teks-lemah); }

.masuk-galat { margin-bottom: 1rem; border-left: 3px solid var(--merah); }

.masuk-medan { margin-bottom: .85rem; }
.masuk-medan label { margin: 0 0 .3rem; font-weight: 600; color: var(--teks); }
.masuk-kartu input[type="text"], .masuk-kartu input:not([type]),
.masuk-kartu input[type="password"] {
  border-radius: 9px; background: var(--putih);
}
.masuk-kartu input:focus {
  outline: none; border-color: var(--hijau);
  box-shadow: 0 0 0 3px rgba(11, 107, 58, .16);
}
/* Autofill Chrome jangan mengecat kolom jadi kuning. */
.masuk-kartu input:-webkit-autofill {
  -webkit-text-fill-color: var(--teks);
  box-shadow: 0 0 0 40px var(--putih) inset;
}

.masuk-sandi { position: relative; }
.masuk-sandi input { padding-right: 4.9rem; }
.masuk-lihat {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  min-height: 36px; padding: 0 .6rem; border: 0; border-radius: 7px;
  background: none; color: var(--hijau); font: inherit; font-size: .8rem;
  font-weight: 600; cursor: pointer;
}
.masuk-lihat:hover { background: var(--hijau-muda); }
.masuk-lihat:focus-visible { outline: 2px solid var(--hijau); outline-offset: 1px; }

.masuk-petunjuk { margin: .35rem 0 0; font-size: .78rem; color: var(--kuning); }

.masuk-form .tombol { margin-top: 1.15rem; }

.masuk-kaki {
  margin: 0; max-width: 380px; text-align: center;
  font-size: .78rem; color: var(--teks-lemah);
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  body.app { padding-bottom: 0; }
  .samping { transform: none; }
  body.app .isi { margin-left: 232px; padding: 1.2rem 1.5rem; max-width: none; }
  .masuk-kartu { padding: 1.7rem 1.5rem 1.5rem; }
  .bawah, .tombol-menu { display: none; }
  .hanya-desktop { display: block; }
  .hanya-mobile { display: none; }
  .saring { grid-template-columns: repeat(4, 1fr); }
  .petak { grid-template-columns: repeat(4, 1fr); }
  .aksi-lengket { position: static; border: 0; }
}

@media print {
  .bar-atas, .samping, .bawah, .aksi, .saring { display: none !important; }
  body { background: #fff; padding: 0; }
  .isi { margin: 0; }
}

/* ---------- submenu master ---------- */
.sub-nav {
  display: flex; gap: .35rem; overflow-x: auto; margin: 0 0 .9rem;
  padding-bottom: .3rem; -webkit-overflow-scrolling: touch;
}
.sub-nav a {
  flex: 0 0 auto; padding: .45rem .8rem; border-radius: 999px;
  background: var(--putih); border: 1px solid var(--garis);
  color: var(--teks-lemah); font-size: .85rem; white-space: nowrap;
}
.sub-nav a.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; font-weight: 600; }