/* Go Econd · aplikasi baru · rangka layar & halaman pelengkap (G0).
   Semua warna/jarak dari token katalog (ge/tokens.css). Gaya halaman diambil dari lembar Paket 4 Pelengkap (DIKUNCI 4 Nov 2026). */
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }   /* v110: tanpa jeda "zoom 2 ketuk" */
html, body { min-height: 100%; }
body { overscroll-behavior-y: none; }
#app { min-height: 100vh; min-height: 100dvh; }
[hidden] { display: none !important; }
html[data-ukuran="besar"] body { zoom: 1.12; }

/* ---------- layar pembuka (krom + logo 3D) ---------- */
.pembuka { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px;
  background: linear-gradient(160deg, var(--krom-terang) 0%, var(--krom-tengah) 55%, var(--krom-gelap) 100%); }
.pembuka img { width: 78vw; max-width: 320px; height: auto; filter: drop-shadow(0 10px 18px rgba(16, 32, 46, .16)); }
.pembuka p { margin: 0; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.pembuka-garis { width: 120px; height: 4px; border-radius: 2px; background: var(--biru-es-garis); overflow: hidden; }
.pembuka-garis i { display: block; width: 45%; height: 100%; border-radius: 2px; background: var(--cyan); animation: pembuka-jalan 1.4s ease-in-out infinite; }
@keyframes pembuka-jalan { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .pembuka-garis i { animation: none; } }

/* ---------- rangka HP (tim di semua layar; admin di layar < 1024 px) ---------- */
.akar-hp { position: relative; max-width: 560px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: var(--latar); }
@media (min-width: 600px) { .akar-hp { border-left: 1px solid var(--garis); border-right: 1px solid var(--garis); } }
.akar-hp > .ge-kepala, .akar-hp > .ge-kh { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); }
.akar-hp > .ge-sinyal { top: var(--tinggi-kepala); }
.akar-hp > .ge-kepala ~ .ge-sinyal { top: 88px; }
.akar-hp .isi { flex: 1; padding: var(--jarak-4) var(--jarak-4) calc(var(--tinggi-menu-bawah) + var(--jarak-6) + env(safe-area-inset-bottom, 0px)); outline: none; }
.akar-hp.tanpa-menu .isi { padding-bottom: var(--jarak-6); }
.akar-hp > .ge-mb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; max-width: 560px; margin: 0 auto; box-sizing: border-box; }
@media (min-width: 600px) { .akar-hp > .ge-mb { border-left: 1px solid var(--garis); border-right: 1px solid var(--garis); } }

/* ---------- rangka laptop admin (≥ 1024 px): menu samping + kepala laptop ---------- */
.akar-lp { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.akar-lp > .ge-ms { height: 100%; }
.akar-lp .tombol-buat { margin: 0 0 var(--jarak-3); width: 100%; }
.lp-kanan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-kanan > .ge-sinyal { position: static; }
.lp-kanan .isi { flex: 1; min-height: 0; overflow-y: auto; padding: var(--jarak-6); outline: none; }
.lp-kanan .isi > .hal, .lp-kanan .isi > .sub-baris { max-width: 1180px; }
.sub-baris { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--jarak-4); margin-bottom: var(--jarak-4); }
.sub-baris > div { display: grid; gap: 2px; min-width: 0; }
.judul-hal { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--navy); }
.p-ket { font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.p-ket:empty { display: none; }

/* ---------- halaman umum ---------- */
.hal { display: grid; gap: var(--jarak-4); align-content: start; }
.hal > * { min-width: 0; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); padding: var(--jarak-4); }
.kartu > h2, .judul-kecil { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .04em; }
.pita-uji { display: inline-flex; align-items: center; gap: 6px; justify-self: center; margin: 0; padding: 4px 12px; border-radius: var(--sudut-penuh); background: var(--oranye-muda); font-size: 13px; line-height: 18px; color: var(--teks); }
.pita-uji .ge-i { font-size: 18px; color: var(--oranye); }
.uang-samar { font-variant-numeric: tabular-nums; letter-spacing: .08em; color: var(--teks-redup); }
.daftar-kartu { display: grid; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); overflow: hidden; }
.daftar-kartu > .ge-baris + .ge-baris { border-top: 1px solid var(--garis); }

/* ---------- masuk ---------- */
.akar-masuk { min-height: 100vh; min-height: 100dvh; display: grid; justify-items: center; background: var(--latar); }
.masuk { width: 100%; max-width: 420px; box-sizing: border-box; display: grid; align-content: start; gap: 16px; padding: calc(40px + env(safe-area-inset-top, 0px)) 24px 32px; }
.masuk-logo { justify-self: center; width: 150px; height: auto; }
.masuk h1 { margin: 6px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--navy); text-align: center; }
.masuk > p { margin: 0; font-size: 13px; line-height: 19px; color: var(--teks-redup); text-align: center; }
.masuk .versi { margin-top: 8px; }
.masuk .tautan-email { justify-self: center; }
.mata-sandi { flex: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; color: var(--teks-redup); cursor: pointer; display: grid; place-items: center; border-radius: var(--sudut-penuh); }
.mata-sandi .ge-i { font-size: 22px; }

/* ---------- menu kotak ikon per urusan ---------- */
.menu-grup { display: grid; gap: 8px; }
.menu-grup h2 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .04em; }
.menu-kisi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 6px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.menu-kisi button { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 76px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; line-height: 16px; color: var(--teks); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-kisi button:hover, .menu-kisi button:active { background: var(--latar); }
.menu-kisi button > .ge-i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--kartu); border: 1.5px solid var(--biru-es-garis); color: var(--biru-tombol); font-size: 24px; box-shadow: 0 2px 0 rgba(10, 118, 168, .18), 0 2px 6px rgba(16, 32, 46, .08); transition: transform .08s, box-shadow .08s; }
.menu-kisi button:active > .ge-i { transform: translateY(2px); box-shadow: none; }
.menu-kisi button { font-weight: 600; color: var(--navy); }
.menu-kisi button.belum > .ge-i { background: var(--abu-muda); color: var(--abu-teks); }
.menu-kisi .ge-bulat { position: absolute; top: 2px; right: calc(50% - 28px); }
@media (min-width: 1024px) { .menu-kisi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.menu-daftar { display: grid; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.menu-daftar > button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 56px; padding: 6px 12px; border: 0; border-top: 1px solid var(--garis); background: none; font: inherit; text-align: left; color: var(--teks); cursor: pointer; }
.menu-daftar > button:first-child { border-top: 0; }
.menu-daftar > button > .ge-i:first-child { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cyan-muda); color: var(--biru-tombol); font-size: 20px; }
.menu-daftar > button > .ge-i:last-child { color: var(--teks-redup); }
.menu-daftar b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; }
.menu-daftar small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.menu-ket { margin: 0; font-size: 13px; line-height: 18px; color: var(--teks-redup); }

/* ---------- akun ---------- */
.profil { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.profil b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--navy); }
.profil small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.profil-ikon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--biru-es); color: var(--biru-tombol); }
.profil-ikon .ge-i { font-size: 30px; }
.kotak-akun { display: grid; padding: 0 12px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.kotak-akun > * + * { border-top: 1px solid var(--garis); }
.ukuran { display: grid; gap: 8px; padding: 10px 0 12px; }
.ukuran > b { font-size: 15px; line-height: 22px; font-weight: 600; }
.notif-hp { display: grid; gap: 4px; padding-bottom: 4px; }
.notif-hp > .ge-btn { justify-self: start; margin-bottom: 10px; }
.notif-rekap { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.notif-rekap b { font-size: 20px; line-height: 28px; }
.antre-baris { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--garis); }
.antre-baris:first-of-type { border-top: 0; }
.antre-baris b { font-size: 15px; line-height: 22px; font-weight: 600; }
.antre-baris small { font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.antre-baris .tombol-baris { display: flex; gap: 8px; flex-wrap: wrap; }
.versi { margin: 0; font-size: 13px; line-height: 18px; color: var(--teks-redup); text-align: center; }

/* ---------- pengaturan ---------- */
.atur { display: grid; gap: var(--jarak-4); align-items: start; }
@media (min-width: 1024px) { .atur { grid-template-columns: 240px minmax(0, 1fr); gap: 20px; } }
.atur-kiri { display: grid; gap: 2px; padding: 8px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.atur-kiri button { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 48px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; text-align: left; color: var(--teks); cursor: pointer; }
.atur-kiri button[aria-current="true"] { background: var(--biru-es); color: var(--navy); font-weight: 600; }
.atur-kiri .ge-i { font-size: 20px; color: var(--teks-redup); }
.atur-kiri small { font-size: 13px; color: var(--teks-redup); font-variant-numeric: tabular-nums; }
.atur-kanan { display: grid; gap: 12px; min-width: 0; }
.atur-info { margin: 0; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--biru-es); font-size: 13px; line-height: 19px; }
.atur-info .ge-i { font-size: 20px; color: var(--biru-tombol); }
.atur-kotak { display: grid; padding: 4px 16px; background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); }
.atur-kotak > h3 { margin: 12px 0 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--teks-redup); text-transform: uppercase; letter-spacing: .04em; }
.atur-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--garis); }
.atur-kotak > h3 + .atur-baris, .atur-kotak > .atur-baris:first-child { border-top: 0; }
.atur-baris > span:first-child b { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; font-weight: 600; }
.atur-baris > span:first-child b .ge-i { font-size: 16px; color: var(--teks-redup); }
.atur-baris > span:first-child small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.atur-baris .urusan-asal { color: var(--biru-tombol); }
.atur-nilai { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.atur-nilai > b { font-size: 16px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.atur-nilai > b.teks { white-space: normal; min-width: 0; font-size: 15px; font-weight: 400; overflow-wrap: anywhere; }
.atur-nilai .ge-status { white-space: nowrap; }
.atur-jejak { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.atur-jejak > small { font-size: 13px; line-height: 18px; color: var(--teks-redup); font-variant-numeric: tabular-nums; }
.atur-riwayat { grid-column: 1 / -1; display: grid; gap: 0; padding: 4px 12px; border-radius: 10px; background: var(--latar); }
.atur-riwayat > div { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--garis); font-size: 13px; line-height: 19px; }
.atur-riwayat > div:first-child { border-top: 0; }
.atur-riwayat b { font-weight: 600; }
.atur-riwayat s { color: var(--teks-redup); }
.atur-riwayat .ge-btn { justify-self: start; }
@media (max-width: 420px) { .atur-baris { grid-template-columns: minmax(0, 1fr); } .atur-nilai { justify-content: space-between; } }
.isian-atur { display: grid; gap: var(--jarak-3); margin: var(--jarak-2) 0; }
.isian-atur .sekarang { margin: 0; font-size: 13px; line-height: 18px; color: var(--teks-redup); }

.sakelar-baris { grid-template-columns: minmax(0, 1fr); padding: 4px 0; }
.sakelar-baris .ge-sakelar { min-height: 56px; }
.kunci-baris { grid-column: 1 / -1; }
.kunci-baris .ge-kunci, .sakelar-baris .ge-kunci { margin: 0; }

/* ---------- kabar ---------- */
.notif-atas { align-items: center; margin: 0; min-height: 36px; }
[data-dibaca] .ge-baris-isi > b { font-weight: 400; }
[data-dibaca] .ge-baris-ikon { background: var(--abu-muda); color: var(--abu-teks); }

/* ---------- G1 · job hari ini & lapor ---------- */
.judul-baris { display: flex; align-items: baseline; justify-content: space-between; gap: var(--jarak-2); margin: 0 0 var(--jarak-2); }
.hal-beranda > section { display: grid; gap: var(--jarak-3); }
.job-daftar { display: grid; gap: var(--jarak-3); }
.job-ringkas { margin: 0; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.lapor-atas { display: grid; gap: 2px; }
.lapor-atas b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--navy); }
.lapor-atas span { font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.lapor-isi { display: grid; gap: var(--jarak-4); }
.hal-lapor .ge-bilah { margin: 0 calc(-1 * var(--jarak-4)); padding-bottom: calc(var(--jarak-3) + env(safe-area-inset-bottom, 0px)); }
.akar-hp.tanpa-menu .hal-lapor { padding-bottom: 0; }
.akar-hp.tanpa-menu:has(.hal-lapor) .isi { padding-bottom: 0; }
.stok-pakai .stok-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: center; padding: var(--jarak-3) var(--jarak-4); }
.stok-pakai .stok-baris + .stok-baris { border-top: 1px solid var(--garis); }
.stok-baris b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; }
.stok-baris small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.stok-baris .ge-isian > .ge-label, .stok-baris .ge-ket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cek-lapor { display: grid; gap: 0; padding: 4px var(--jarak-4); }
.cek-lapor > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--jarak-3); padding: 10px 0; border-top: 1px solid var(--garis); }
.cek-lapor > div:first-child { border-top: 0; }
.cek-lapor span { font-size: 13px; line-height: 20px; color: var(--teks-redup); }
.cek-lapor b { font-size: 15px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
/* g1-5: part beli luar, part yang perlu dipesan, pasang AC (paritas app lama) */
[data-stok] { display: grid; gap: var(--jarak-4); }
[data-stok]:empty { display: none; }
.lapor-part { display: grid; gap: var(--jarak-3); }
.lapor-part > .ge-btn, [data-grup="butuh"] > .ge-btn { justify-self: start; }
.luar-item { display: grid; gap: var(--jarak-3); padding: var(--jarak-3) var(--jarak-4); }
.luar-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-2); }
.luar-kepala b { font-size: 15px; line-height: 22px; font-weight: 600; }
.luar-angka, .dua-isian { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--jarak-3); }
.luar-angka > .ge-isian:first-child { grid-column: 1 / -1; justify-self: start; }
.butuh-tambah { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: start; }
.baris-hapus .baris-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: center; padding: var(--jarak-2) var(--jarak-4); }
.baris-hapus .baris-item + .baris-item { border-top: 1px solid var(--garis); }
.baris-item b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.baris-item small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
/* tombol Lanjut / Kirim menempel di bawah layar walau isi pendek (keputusan 1A) */
.akar-hp.tanpa-menu:has(.hal-lapor) .isi { display: flex; flex-direction: column; }
.hal-lapor { flex: 1; display: flex; flex-direction: column; gap: var(--jarak-4); }
.hal-lapor > .ge-bilah { margin-top: auto; }

/* ===== G1 bagian 2 (5 Nov 2026) ===== */
.foto-sudah { display: grid; place-items: center; gap: 2px; width: 100%; height: 100%; font-size: 13px; font-weight: 600; color: var(--hijau); background: var(--hijau-muda); text-align: center; }
.foto-sudah .ge-i { font-size: 28px; }
.persiapan-daftar { display: grid; gap: var(--jarak-3); }
.keluar-isi .ge-bilah, .hal > .ge-bilah { margin: 0; }
.cepat-6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-2); }
.cepat-6 button { display: grid; justify-items: center; gap: 4px; min-height: 76px; padding: 10px 4px; box-sizing: border-box; border: 1.5px solid var(--biru-es-garis); border-radius: var(--sudut-kartu); background: var(--kartu); font: inherit; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--navy); text-align: center; cursor: pointer; box-shadow: 0 2px 0 rgba(10, 118, 168, .16), 0 2px 6px rgba(16, 32, 46, .07); -webkit-tap-highlight-color: transparent; transition: transform .08s, box-shadow .08s; }
.cepat-6 button:active { transform: translateY(2px); box-shadow: none; }
.cepat-6 button .ge-i { font-size: 26px; color: var(--biru-tombol); }
.cepat-6 button.belum .ge-i { color: var(--abu); }
.ishoma { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: center; }
.ishoma > .ge-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--biru-es); color: var(--biru-tombol); }
.ishoma b { display: block; font-size: 15px; line-height: 20px; color: var(--navy); }
.ishoma small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.ishoma.jalan { border-color: var(--biru-tombol); background: var(--biru-es); }
.ishoma.jalan > .ge-i { background: var(--biru-tombol); color: var(--on-tombol); }
.ishoma-aksi { grid-column: 1 / -1; display: flex; gap: var(--jarak-2); flex-wrap: wrap; }
.catatan-pribadi textarea { min-height: 50vh; }
.tambah-layanan { display: grid; gap: var(--jarak-2); }
.tambah-pilih { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: center; width: 100%; min-height: 56px; padding: 8px 14px; box-sizing: border-box; border: 1.5px solid var(--garis-isian); border-radius: var(--sudut-kartu); background: var(--kartu); font: inherit; text-align: left; color: var(--teks); cursor: pointer; box-shadow: 0 2px 0 rgba(16, 32, 46, .10); }
.tambah-pilih[aria-pressed="true"] { border: 2px solid var(--biru-tombol); background: var(--biru-es); }
.tambah-pilih b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--navy); }
.tambah-pilih small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.tambah-pilih .harga { font-weight: 600; color: var(--navy); white-space: nowrap; }
.ucapan { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--jarak-3); align-items: center; border-color: var(--hijau); background: var(--hijau-muda); }
.ucapan b { display: block; font-size: 16px; line-height: 22px; color: var(--navy); }
.ucapan p { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--teks); }
.skedul { display: grid; gap: var(--jarak-3); }
.skedul .ge-tab-pil { justify-content: stretch; }
.skedul .ge-tab-pil > button { flex: 1 1 0; }
.skedul-tgl { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--navy); }
.skedul-beres, .skedul-kunci { display: flex; gap: 6px; align-items: flex-start; }
.skedul-beres .ge-i { font-size: 18px; color: var(--hijau); }
.skedul-kunci .ge-i { font-size: 16px; color: var(--abu); margin-top: 1px; }
.tiga-hari { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-2); }
.hari3 { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 1.5px solid var(--garis-isian); border-radius: var(--sudut-kartu); background: var(--kartu); font: inherit; color: var(--navy); cursor: pointer; box-shadow: 0 2px 0 rgba(16, 32, 46, .12); transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent; }
.hari3:active { transform: translateY(2px); box-shadow: none; }
.hari3 b { font-size: 16px; line-height: 22px; }
.hari3 small { font-size: 13px; line-height: 16px; color: var(--teks-redup); }
.hari3.terisi { background: var(--hijau-muda); border-color: #8cc59d; }
.hari3.hampir { background: var(--oranye-muda); border-color: #e2b07a; }
.hari3.penuh { background: var(--merah-muda); border-color: #e09a94; }
.hari3[aria-pressed="true"] { border: 2px solid var(--biru-tombol); box-shadow: 0 0 0 1px var(--biru-tombol); }
.job-daftar > .ge-btn-tulisan { justify-self: center; }

/* ---------- R1-1 (g1-6): rekap & setoran, talangan, kunci pagi ---------- */
.kunci-pagi { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--jarak-3); align-items: start; border-color: #e09a94; background: var(--merah-muda); }
.kunci-pagi > .ge-i { font-size: 24px; color: var(--merah); }
.kunci-pagi b { display: block; font-size: 16px; line-height: 22px; color: var(--navy); }
.kunci-pagi p, .kunci-pagi ul { margin: 4px 0 8px; font-size: 14px; line-height: 20px; color: var(--teks); }
.kunci-pagi ul { padding-left: 18px; }
.kunci-pagi .p-ket { margin: 8px 0 0; }
.atur-info.awas { background: var(--oranye-muda); }
.atur-info.awas .ge-i { color: var(--oranye); }
.rekap-talangan-rinci { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 19px; color: var(--teks-redup); }
.rekap-talangan-rinci .ge-i { font-size: 18px; color: var(--emas); }
.rekap-kendala { display: grid; gap: var(--jarak-3); }
.rekap-kendala .ge-boleh { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rekap-tambah { display: grid; gap: var(--jarak-3); }
.ge-pilih-asli { width: 100%; min-height: var(--tinggi-isian); padding: 0 12px; border: 1.5px solid var(--garis-isian); border-radius: 10px; background: var(--kartu); font: inherit; font-size: 16px; color: var(--teks); }
.talangan-baris { display: grid; gap: var(--jarak-2); }
.talangan-aksi { display: flex; flex-wrap: wrap; gap: var(--jarak-2); justify-content: flex-end; }
.daftar-kartu > .talangan-baris + .talangan-baris { border-top: 1px solid var(--garis); }
.talangan-baris { padding-bottom: var(--jarak-3); }
.talangan-baris:not(:has(.talangan-aksi)) { padding-bottom: 0; }
.talangan-aksi { padding: 0 var(--jarak-3); }
.ge-rekap .rekap-kendala { padding: var(--jarak-3) var(--jarak-4) 0; }
.ge-rekap-hitung .rekap-talangan-rinci { padding: 6px 12px 0; }

/* ===== R1-2 (5 Nov 2026): nota otomatis + lampu + harga sepakat ===== */
.akar-hp.tanpa-menu:has(.hal-nota) .isi { display: flex; flex-direction: column; padding-bottom: 0; }
.hal-nota { flex: 1; display: flex; flex-direction: column; gap: var(--jarak-4); }
.hal-nota > .ge-bilah { margin: auto calc(-1 * var(--jarak-4)) 0; padding-bottom: calc(var(--jarak-3) + env(safe-area-inset-bottom, 0px)); }
.akar-lp .hal-nota > .ge-bilah { margin: auto 0 0; border-radius: var(--sudut-kartu); border: 1px solid var(--garis); }
.nota-lampu { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: var(--sudut-kartu); border: 1.5px solid var(--garis); font-size: 14px; line-height: 20px; color: var(--teks); }
.nota-lampu b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.nota-lampu .ge-i { font-size: 24px; }
.lampu-hijau { background: var(--hijau-muda); border-color: var(--hijau); }
.lampu-hijau .ge-i, .lampu-hijau b { color: var(--hijau); }
.lampu-kuning { background: var(--emas-muda); border-color: var(--emas-garis); }
.lampu-kuning .ge-i { color: var(--emas); }
.lampu-menunggu { background: var(--oranye-muda); border-color: var(--oranye); }
.lampu-menunggu .ge-i, .lampu-menunggu b { color: var(--oranye); }
.lampu-merah { background: var(--merah-muda); border-color: var(--merah); }
.lampu-merah .ge-i, .lampu-merah b { color: var(--merah); }
.lampu-terbit { background: var(--biru-es); border-color: var(--biru-es-garis); }
.lampu-terbit .ge-i, .lampu-terbit b { color: var(--biru-tombol); }
.nota-bag { display: grid; gap: var(--jarak-3); }
.nota-bag > .ge-btn, .nota-bag > .ge-chips { justify-self: start; }
.nota-item { display: grid; gap: var(--jarak-2); padding: var(--jarak-3) var(--jarak-4); }
.nota-item + .nota-item { border-top: 1px solid var(--garis); }
.nota-item-atas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--jarak-3); align-items: start; }
.nota-item-atas b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.nota-item-atas small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.nota-rp { white-space: nowrap; }
.nota-item-ubah { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--jarak-3); }
.nota-item-ubah .ge-isian:has(.ge-jumlah) > .ge-label, .nota-item-ubah .ge-isian:has(.ge-jumlah) .ge-ket { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nota-item-ubah .ge-isian:has([data-ge-uang]) { flex: 1 1 150px; min-width: 0; }
.nota-item-ubah > .ge-btn { margin-left: auto; align-self: center; }
.nota-total { display: grid; gap: 6px; }
.nota-total > div { display: flex; justify-content: space-between; gap: var(--jarak-3); font-size: 14px; line-height: 20px; color: var(--teks-redup); }
.nota-total b { color: var(--teks); font-weight: 600; white-space: nowrap; }
.nota-total .nota-grand { padding-top: 8px; border-top: 1px solid var(--garis); font-size: 16px; color: var(--navy); }
.nota-total .nota-grand b { font-size: 18px; line-height: 24px; color: var(--navy); }
.nota-total .nota-uang { font-size: 13px; }
.nota-total .nota-uang b { white-space: normal; text-align: right; }
.nota-sepakat { display: grid; gap: var(--jarak-3); }
.nota-sepakat .menu-ket { margin: 0; }
.nota-gambar { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-kartu); padding: var(--jarak-2); }
.nota-gambar img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 10px; }
.nota-simpan { text-decoration: none; margin-top: var(--jarak-3); box-sizing: border-box; }
.sepakat-bag { display: grid; gap: var(--jarak-3); }
.hal-sepakat { display: grid; gap: var(--jarak-4); }
.sepakat-kartu { display: grid; gap: var(--jarak-3); }
.sepakat-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--jarak-3); }
.sepakat-kepala b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.sepakat-kepala small { display: block; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.sepakat-angka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--jarak-2); }
.sepakat-angka div { display: grid; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--biru-es); }
.sepakat-angka span { font-size: 12px; line-height: 16px; color: var(--teks-redup); }
.sepakat-angka b { font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }
.sepakat-angka .turun { background: var(--oranye-muda); }
.sepakat-alasan { margin: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 20px; }
.sepakat-alasan .ge-i { font-size: 18px; color: var(--teks-redup); }
.sepakat-baris { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 18px; color: var(--teks-redup); }
.sepakat-baris li { display: flex; justify-content: space-between; gap: var(--jarak-3); }
@media (min-width: 1024px) { .hal-sepakat .sepakat-bag { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .hal-sepakat .sepakat-bag > h2 { grid-column: 1 / -1; } }

/* R1-4: Ubah alamat di kartu job (tulisan kecil di bawah alamat) */
.kj-ubah-alamat { margin: -6px 0 -4px; }
.kj-ubah-alamat > .ge-btn { padding-left: 0; padding-right: var(--jarak-2); }