/* 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: 40px; height: 40px; border-radius: 12px; background: var(--cyan-muda); color: var(--biru-tombol); font-size: 22px; }
.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; }
.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); }