/* ====== Bantu Usaha: sistem visual PWA ======
   Sistem token: satu warna aksen (hijau brand), permukaan lembut, elevasi
   nyata, mobile-first pada frame 448px, gelap lewat prefers-color-scheme.
   Sistem lama (mockup cetak-saring: 4 kotak warna, keyline tinta 2px,
   badge nomor) sudah diganti penuh oleh sistem ini.
   Radius baku: kartu 18, kontrol 14, tile ikon 12, chip 999. Gerak hanya
   transform/opacity, MATI penuh di prefers-reduced-motion. */

:root {
  color-scheme: light dark;

  --bg:#f5f7f4; --bg-app:#ffffff; --surface:#ffffff; --surface-2:#eef2ea; --surface-3:#e6ebe2;
  --line:#e2e7de; --line-2:#cfd7c9;
  --ink:#131a15; --ink-2:#4e5a52; --ink-3:#5f6960;
  --brand:#14532d; --brand-2:#0e3d21; --brand-tint:#e4efe6; --on-brand:#ffffff;
  --warn-ink:#7a4a00; --warn-tint:#fdf3d9; --warn-line:#eccf8a;
  --danger-ink:#8f1d24; --danger-tint:#fdecec; --danger-line:#efc4c4;
  --shadow-1:0 1px 2px rgba(19,26,21,.06), 0 1px 3px rgba(19,26,21,.05);
  --shadow-2:0 2px 10px rgba(19,26,21,.07), 0 1px 2px rgba(19,26,21,.05);
  --shadow-3:0 -2px 12px rgba(19,26,21,.06);
  /* App bar setengah tembus pandang: isi yang menggulir di bawahnya tidak
     boleh terlihat sebagai gumpalan warna, jadi ada dasar buram 86%. */
  --topbar-bg:rgba(255,255,255,.94);
  --r-card:18px; --r-ctrl:14px; --r-tile:12px; --r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font-display:'Montserrat MA',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d110f; --bg-app:#121815; --surface:#171e1a; --surface-2:#1d2620; --surface-3:#232e27;
    --line:#26302a; --line-2:#36423a;
    --ink:#eef2ee; --ink-2:#a8b3aa; --ink-3:#8d988f;
    --brand:#3fae76; --brand-2:#5cc48d; --brand-tint:#14261c; --on-brand:#08160e;
    --warn-ink:#f0d9a8; --warn-tint:#241d0e; --warn-line:#4a3c1a;
    --danger-ink:#f3b6b8; --danger-tint:#2a1416; --danger-line:#4d2326;
    --shadow-1:0 1px 2px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.32);
    --shadow-2:0 2px 10px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
    --shadow-3:0 -2px 12px rgba(0,0,0,.5);
    --topbar-bg:rgba(23,30,26,.94);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

[hidden] { display: none !important; }

img { display: block; max-width: 100%; }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: inherit;
}

/* Judul layar difokuskan secara programatik supaya pembaca layar mulai dari
   judul yang benar. Cincin fokus di sana tidak menambah informasi apa pun
   (seluruh layar baru saja berganti) dan pada huruf display besar terbaca
   sebagai kotak yang salah gambar. Kontrol tetap memakai cincin di atas. */
h1[tabindex="-1"]:focus-visible { outline: none; }

/* Teks bantu yang tetap ada untuk pembaca layar tapi tak terlihat. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Input berkas disembunyikan visual, tetap bisa dipanggil .click(). */
.sr-file {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ====== Kerangka aplikasi ====== */

.app {
  max-width: 448px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  position: relative;
}

section {
  padding: 20px 16px calc(84px + env(safe-area-inset-bottom));
}

#s3 { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* Percakapan mengisi tinggi layar: keadaan kosong dan gelembung di atas,
   komposer terdorong ke dasar. min-height harus memperhitungkan padding
   bawahnya (64px = tinggi tab bar), kalau tidak muncul pita kosong di antara
   komposer dan tab bar saat isinya pendek. 57px = topbar (56 + 1 garis). */
#s3:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 57px);
}
#s3 > .komposer { margin-top: auto; }

/* Layar pengisian tanpa tab bar: ruang bawah cukup untuk napas terakhir,
   bukan 84px yang menyisakan pita kosong. */
.app.tanpa-tabbar section { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Animasi masuk layar: fade + naik 6px, hanya saat section tak tersembunyi. */
#s0:not([hidden]), #s1:not([hidden]), #s2:not([hidden]),
#s3:not([hidden]), #s4:not([hidden]), #s5:not([hidden]) {
  animation: masuk 200ms var(--ease);
}

@keyframes masuk {
  from { opacity: 0; transform: translateY(6px); }
}

/* ====== Topbar ====== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .topbar {
    background: var(--topbar-bg);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
}

/* Kabut tipis di bawah app bar: isi yang menggulir dipotong tepat di garis
   batas, dan huruf yang terpotong separuh terbaca sebagai cacat gambar. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(to bottom, var(--topbar-bg), transparent);
  pointer-events: none;
}

.topbar-judul {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ikon-tombol {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: transform 140ms var(--ease);
}

.ikon-tombol:active { transform: scale(.985); }

/* ====== Tipografi layar ====== */

.salam {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 4px;
}

.salam-sub {
  color: var(--ink-2);
  font-size: 15px;
  margin: 6px 0 20px;
}

.judul-layar {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 4px;
  outline-offset: 6px;
}

.sub {
  color: var(--ink-2);
  font-size: 15px;
  margin: 6px 0 16px;
}

.judul-bagian {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 24px 2px 10px;
}

.label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.ket {
  font-size: 14px;
  color: var(--ink-2);
}

.catatan {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 14px;
  padding: 0 2px;
}

.status {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 10px;
  overflow-wrap: anywhere;
}

/* ====== Kartu ====== */

.kartu {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  padding: 16px;
  margin-bottom: 16px;
}

/* ====== Beranda: kemajuan ====== */

.kemajuan {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 12px;
}

.bilah {
  position: relative;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}

.bilah > i {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--isi, 0%);
  background: var(--brand);
  border-radius: var(--r-pill);
  /* Di atas tanda segmen: garis tanda yang memotong isian terbaca sebagai
     sambungan yang salah, jadi tanda hanya menggaris trek yang kosong. */
  z-index: 1;
  transition: width 320ms var(--ease);
}

.bilah-tanda {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--line-2);
}

.bilah-tanda:nth-of-type(1) { left: 25%; }
.bilah-tanda:nth-of-type(2) { left: 50%; }
.bilah-tanda:nth-of-type(3) { left: 75%; }

/* ====== Beranda: daftar tugas (pengganti 4 kotak mockup) ====== */

.daftar-tugas {
  list-style: none;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.daftar-tugas li:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.tugas {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 140ms var(--ease);
}

.tugas:active { transform: translateY(1px); }

.tugas-ikon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-tile);
  background: var(--surface-2);
  color: var(--ink-2);
}

.tugas-ikon svg { width: 24px; height: 24px; }
.tugas-ikon .ikon-cek { display: none; }

.tugas-teks {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tugas-judul {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tugas-ket {
  font-size: 13px;
  color: var(--ink-2);
  /* Tanpa elipsis: label status di kanan bisa memepet, dan subjudul yang
     terpotong separuh terbaca sebagai cacat, bukan sebagai kepadatan. */
}

/* Jarak label di dalam kartu pertanyaan: tanpa ini label menempel pada
   kalimat pertanyaan yang panjangnya lebih dari satu baris. */
#jawab1,
#jawab2 { margin-top: 14px; }

.tugas-kanan {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.tugas-kanan > svg {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
}

.pil {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  white-space: nowrap;
}

/* Baris tugas yang sudah terisi: tile + chip berubah ke rona brand. */
.tugas[data-terisi="1"] .tugas-ikon {
  background: var(--brand-tint);
  color: var(--brand);
}

.tugas[data-terisi="1"] .ikon-def { display: none; }
.tugas[data-terisi="1"] .ikon-cek { display: block; }

.tugas[data-terisi="1"] .pil {
  background: var(--brand-tint);
  color: var(--brand);
}

/* ====== Chip langkah (s1/s2) ====== */

.hitung {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin: 4px 0 10px;
}

/* ====== Tombol ====== */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: transform 140ms var(--ease);
}

.btn:active { transform: scale(.985); }

.btn.utama {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.btn.bahaya {
  background: var(--danger-tint);
  border-color: var(--danger-line);
  color: var(--danger-ink);
}

.btn:disabled,
.btn.utama:disabled {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-3);
  cursor: wait;
  transform: none;
}

.lebar { width: 100%; }

/* Tombol gaya teks: ulangi langkah, tanpa isian. */
.btn-teks {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 140ms var(--ease);
}

.btn-teks:hover { text-decoration: underline; }
.btn-teks:active { transform: scale(.985); }

/* ====== Form ====== */

input[type="text"],
textarea {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctrl);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 14px;
}

textarea {
  min-height: 48px;
  resize: none;
  display: block;
}

input:disabled,
textarea:disabled {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-3);
  cursor: wait;
}

/* Placeholder tunduk pada lantai kontras yang sama dengan teks biasa
   (--ink-3 = 5,3:1 di atas latar). */
input::placeholder,
textarea::placeholder { color: var(--ink-3); opacity: 1; }

@media (prefers-color-scheme: dark) {
  input::placeholder,
  textarea::placeholder { color: #8d988f; }
}

input[type="text"] { margin-bottom: 12px; }

.tanya-teks {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  /* Tinggi dicadangkan supaya kartu tidak melompat saat pertanyaan berganti,
     tapi mode konfirmasi mengosongkan elemen ini: tinggi kosong di atas
     kalimat konfirmasi terbaca sebagai ruang yang hilang. */
  min-height: 50px;
  overflow-wrap: anywhere;
}

.tanya-teks:empty { display: none; }

.konfirm-teks {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin-bottom: 14px;
}

.baris-dua {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* ====== Foto ====== */

.kartu-foto .btn { margin-top: 2px; }
.kartu-foto .ket { margin-top: 8px; }

.pratinjau {
  /* Selebar kartu, bukan 240px yang menyisakan kolom kosong dan tidak
     sebaris dengan tombol di atasnya. */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-ctrl);
  margin-top: 10px;
}

/* ====== Percakapan: fakta, kosong, muat ====== */

.fakta-blok {
  background: var(--warn-tint);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-card);
  color: var(--warn-ink);
  padding: 16px;
  margin-bottom: 12px;
}

.fakta-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 6px;
}

.fakta-kunci {
  font-size: 12.5px;
  font-weight: 700;
  opacity: .82;
}

.fakta-nilai {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fakta-blok .status { color: var(--warn-ink); }

.kosong {
  background: var(--surface-2);
  border-radius: var(--r-card);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.muat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.titik { display: flex; gap: 5px; }

.titik i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  animation: denyut 1.1s var(--ease) infinite;
}

.titik i:nth-child(2) { animation-delay: .15s; }
.titik i:nth-child(3) { animation-delay: .3s; }

@keyframes denyut {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* ====== Percakapan: log ====== */

.log {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pesan {
  max-width: 84%;
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 14px;
  overflow-wrap: anywhere;
  animation: muncul 180ms var(--ease);
}

@keyframes muncul {
  from { opacity: 0; transform: translateY(4px); }
}

.pesan.aku {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px 18px 18px 18px;
  color: var(--ink);
}

.pesan.aku::before {
  content: "Bantu Usaha";
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.pesan.pengguna {
  align-self: flex-end;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 18px 6px 18px 18px;
}

.pesan.notice {
  align-self: flex-start;
  background: var(--warn-tint);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font-weight: 600;
}

/* ====== Percakapan: kartu saran ====== */

.kartu-saran {
  box-shadow: var(--shadow-2);
  border-left: 3px solid var(--brand);
  margin-bottom: 12px;
}

.kartu-saran > p[id="saran3"] {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 4px 0 4px;
  overflow-wrap: anywhere;
}

.tanya-pil {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 2px;
}

.atau {
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  margin: 2px 0;
}

.terima {
  font-weight: 600;
  color: var(--ink);
  margin-top: 12px;
}

.galat-pilihan {
  color: var(--danger-ink);
  font-weight: 600;
  font-size: 14px;
  margin-top: 12px;
}

/* ====== Percakapan: komposer ====== */

.komposer {
  position: sticky;
  bottom: calc(64px + env(safe-area-inset-bottom));
  z-index: 10;
  margin: 12px -16px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  padding: 12px 16px 12px;
}

.galat {
  background: var(--danger-tint);
  border: 1px solid var(--danger-line);
  border-radius: var(--r-ctrl);
  color: var(--danger-ink);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.komposer .btn { margin-top: 10px; }

/* ====== Tindakan ====== */

.ber-ikon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.ikon-keadaan {
  width: 56px;
  height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-tile);
  background: var(--surface-3);
  color: var(--ink-2);
}

#teks4 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  margin: 4px 0 2px;
}

#kartu4 .btn { margin-top: 12px; }

/* ====== Setting ====== */

.atur-baris {
  /* Tanpa inset mendatar: tepi tombol dan garis pemisah harus sebaris. */
  padding: 18px 0;
}

.atur-baris + .atur-baris {
  border-top: 1px solid var(--line);
}

.b-judul {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.atur-baris .btn { margin-top: 12px; }
.atur-baris .status { margin-top: 8px; }

/* ====== Tab bar ====== */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 448px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
}

.tab {
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 140ms var(--ease), color 140ms var(--ease);
}

.tab:active { transform: translateY(1px); }

.tab-ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  border-radius: var(--r-pill);
  transition: background 140ms var(--ease);
}

.tab-ikon svg { width: 24px; height: 24px; }

.tab-aktif { color: var(--brand); }
.tab-aktif .tab-ikon { background: var(--brand-tint); }

/* ====== Desktop: bingkai, bukan telepon meregang ====== */

@media (min-width: 560px) {
  body { background: var(--surface-2); }

  .app {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }
}

/* ====== Gerak dimatikan bila pengguna memintanya ====== */

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