/* Selaras — app.css v1.2.0 (halaman aplikasi & admin) */

.laman-app { background: var(--kabut); }
.app-main { padding: 40px 0 80px; min-height: 60vh; }
.app-judul { font-family: var(--f-display); font-size: var(--step-4); font-weight: 800; color: var(--samudra); letter-spacing: -0.02em; }
.app-lead { margin-top: 12px; color: var(--redup); max-width: 62ch; }
.app-aksi { margin: 24px 0; }
.nav__aku { font-size: var(--step--1); font-weight: 700; color: var(--samudra); }
.foot--app { margin-top: 0; }

/* Notifikasi */
.notis { padding: 14px 18px; border-radius: var(--r-md); margin-bottom: 20px; border-left: 5px solid; background: var(--kertas); }
.notis--sukses { border-color: var(--daun); }
.notis--gagal { border-color: #C0392B; }
.notis--info { border-color: var(--kunyit); }
.notis a { font-weight: 700; }

/* Kotak tengah: login, daftar, pemasangan */
.kotak-tengah { max-width: 460px; margin: 20px auto 60px; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-lg); padding: 34px 30px; }
.kotak-tengah__judul { font-family: var(--f-display); font-size: var(--step-3); font-weight: 800; color: var(--samudra); }
.kotak-tengah__lead { margin-top: 10px; color: var(--redup); }
.kotak-tengah__kaki { margin-top: 20px; font-size: .9rem; color: var(--redup); }
.daftar-log { display: grid; gap: 6px; margin: 18px 0; color: var(--redup); }
.daftar-log li { padding-left: 20px; position: relative; }
.daftar-log li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 6px; border-left: 2.5px solid var(--daun); border-bottom: 2.5px solid var(--daun); transform: rotate(-45deg); }

/* Formulir */
.form { display: grid; gap: 16px; margin-top: 24px; }
.form label, .pengaturan label { display: grid; gap: 6px; font-size: var(--step--1); font-weight: 600; }
.form input, .pengaturan input, .pengaturan select, .pengaturan textarea, .tabel--isian input {
  width: 100%; font: 400 var(--step-0) var(--f-body); color: var(--tinta);
  background: var(--kabut); border: 2px solid transparent; border-radius: var(--r-sm); padding: 11px 12px;
}
.pengaturan textarea { resize: vertical; }
.form input:focus, .pengaturan input:focus, .pengaturan select:focus, .pengaturan textarea:focus, .tabel--isian input:focus { outline: none; border-color: var(--kunyit); }
.form__bantuan { font-weight: 400; font-size: .82rem; color: var(--redup); }
.form__galat { font-weight: 600; font-size: .84rem; color: #C0392B; }

/* Submenu admin */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; border-bottom: 1px solid var(--garis); padding-bottom: 12px; }
.subnav a { text-decoration: none; font-weight: 600; font-size: var(--step--1); color: var(--redup); padding: 8px 14px; border-radius: 999px; }
.subnav a:hover { background: var(--kertas); color: var(--samudra); }
.subnav a[aria-current="page"] { background: var(--samudra); color: var(--kabut); }

/* Kartu angka */
.kartu-angka { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 24px 0 8px; }
.kartu-angka__item { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-md); padding: 20px; }
.kartu-angka__nilai { font-family: var(--f-display); font-size: var(--step-3); font-weight: 800; color: var(--samudra); line-height: 1.1; }
.kartu-angka__label { font-size: var(--step--1); color: var(--redup); margin-top: 4px; }
.kartu-angka__item--lebar { background: var(--samudra); border-color: var(--samudra); }
.kartu-angka__item--lebar .kartu-angka__nilai { color: var(--kunyit); }
.kartu-angka__item--lebar .kartu-angka__label { color: rgba(238,243,241,.8); }

/* Tabel data */
.tabel--data { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-md); overflow: hidden; }
.tabel--data th, .tabel--data td { padding: 12px 16px; text-align: left; white-space: normal; }
.tabel--data thead th { background: var(--kabut); font-size: .8rem; }
.tabel--data td { font-weight: 500; color: var(--tinta); }
.tabel--data tbody tr:last-child th, .tabel--data tbody tr:last-child td { border-bottom: 0; }
.tabel--isian input { padding: 8px 10px; }

/* Lencana status */
.lencana { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--kabut); color: var(--redup); }
.lencana--aktif, .lencana--berhasil, .lencana--lunas { background: #DCF2E6; color: #1E5C41; }
.lencana--menunggu, .lencana--menunggu_bayar { background: #FDEFD2; color: #8A5A00; }
.lencana--dp_lunas { background: #E3ECF7; color: #1F4E79; }
.lencana--ditolak, .lencana--gagal, .lencana--batal, .lencana--dibatalkan, .lencana--kedaluwarsa, .lencana--nonaktif { background: #F8DEDA; color: #932B1E; }
.lencana--peran { background: var(--samudra); color: var(--kabut); }

/* Saringan */
.saring { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.saring__item { text-decoration: none; font-weight: 600; font-size: var(--step--1); padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--garis); color: var(--redup); background: var(--kertas); }
.saring__item.is-aktif { background: var(--samudra); border-color: var(--samudra); color: var(--kabut); }

/* Daftar pengguna */
.daftar-pengguna { display: grid; gap: 14px; }
.pengguna { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-md); padding: 20px; }
.pengguna__nama { font-family: var(--f-display); font-size: 1.25rem; color: var(--samudra); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pengguna__baris { color: var(--redup); font-size: .92rem; margin-top: 4px; }
.pengguna__baris--kecil { font-size: .82rem; }
.pengguna__aksi { display: grid; gap: 8px; align-content: start; justify-items: end; }
.sebaris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sebaris--atas { margin-top: 16px; }
.masukan-kecil { font: 400 .9rem var(--f-body); padding: 8px 10px; border: 1.5px solid var(--garis); border-radius: var(--r-sm); background: var(--kabut); color: var(--tinta); }
.masukan-kecil:focus { outline: none; border-color: var(--kunyit); }

/* Menu paket pada halaman pesanan */
.menu-paket { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.menu-paket__item { display: grid; gap: 4px; text-decoration: none; background: var(--kertas); border: 2px solid var(--garis); border-radius: var(--r-md); padding: 16px 18px; }
.menu-paket__item:hover { border-color: var(--samudra); }
.menu-paket__item.is-aktif { background: var(--samudra); border-color: var(--samudra); color: var(--kabut); }
.menu-paket__nama { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; color: var(--samudra); }
.menu-paket__item.is-aktif .menu-paket__nama { color: var(--kunyit); }
.menu-paket__harga { font-weight: 700; }
.menu-paket__meta { font-size: .84rem; color: var(--redup); }
.menu-paket__item.is-aktif .menu-paket__meta { color: rgba(238,243,241,.8); }
.plan__list--terang li::before { border-color: var(--daun); }

/* Pilihan pembayaran */
.pilihan-bayar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pilihan-bayar__item { border: 1.5px solid var(--garis); border-radius: var(--r-md); padding: 18px; }
.pilihan-bayar__label { font-weight: 700; color: var(--redup); font-size: var(--step--1); }
.pilihan-bayar__nilai { font-family: var(--f-display); font-size: var(--step-3); font-weight: 800; color: var(--samudra); margin: 4px 0 14px; }

/* Pengaturan */
.pengaturan { display: grid; gap: 20px; }
.pengaturan__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pengaturan__lebar { grid-column: 1 / -1; }
.pengaturan__uji { margin-top: 18px; }
.pengaturan > .btn { justify-self: start; }
.pengaturan label.sakelar, .sakelar { display: flex; flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
.sakelar input { width: 20px; height: 20px; accent-color: var(--samudra); }
.pay__h2--rapat { margin-top: 0; }
.kode-inline { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .86rem; background: var(--kabut); padding: 2px 8px; border-radius: 4px; }

.kosong { background: var(--kertas); border: 1px dashed var(--garis); border-radius: var(--r-md); padding: 32px; text-align: center; color: var(--redup); display: grid; gap: 16px; justify-items: center; }

@media (max-width: 860px) {
  .pengguna { grid-template-columns: 1fr; }
  .pengguna__aksi { justify-items: stretch; }
  .pengaturan__grid { grid-template-columns: 1fr; }
  .tabel--data thead { display: none; }
  .tabel--data tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--garis); }
  .tabel--data td { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 2px 0; border: 0; }
  .tabel--data td::before { content: attr(data-label); font-weight: 700; color: var(--redup); font-size: .82rem; }
  .tabel--isian td { grid-template-columns: 1fr; }
}

.kode-blok { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; background: var(--kabut); padding: 14px; border-radius: var(--r-sm); overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--tinta); }