/* ============================================================
   nasabah.css — TEMA aplikasi NASABAH (mobile banking).

   Satu tempat untuk bentuk yang dipakai BERULANG di layar nasabah:
   judul halaman, kartu, baris kunci-nilai, kartu saldo, pintasan,
   kartu aksi, badge, kotak pesan, baris mutasi.

   Sebelumnya setiap halaman menyalin bentuk yang sama di blok <style>
   sendiri (nbr- / nbt- / nms- / npf- / …), jadi satu perubahan tema harus
   diulang di 13 berkas dan hasilnya mudah berbeda antar layar.

   ATURAN BERKAS INI
   1. SEMUA warna dari token tema (--accent, --surface, --border-light,
      --text-*, --radius-card, --shadow-card, --table-stripe). Tidak ada
      warna keras buatan sendiri: tema terang/gelap/MC perangkat harus
      tetap benar tanpa berkas kedua.
   2. Kelas di sini hanya berawalan `nb-`. Halaman nasabah MEMAKAI kelas
      ini; gaya yang hanya dipakai satu halaman boleh tetap di <style>
      halaman itu (awalan halamannya, mis. `npf-`).
   3. Dimuat PALING AKHIR di index.html (sesudah mobile.css).

   Versi di index.html: naikkan `nasabah.css?v=` setiap berkas ini diubah,
   kalau tidak browser/WebView yang sudah pernah membuka aplikasi akan
   memakai versi lamanya (gaya baru tidak sampai).
   ============================================================ */

/* ── 1. Judul halaman & kepala ───────────────────────────────────────── */

.nb-judul {
    margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: -.2px;
}
.nb-sub {
    margin: 3px 0 0; font-size: 12px; color: var(--text-tertiary); line-height: 1.45;
}
.nb-kepala {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px;
}
.nb-bagian {
    margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.nb-sebar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ── 1b. Kepala hero (dipakai layar pra-login: Masuk · Daftar) ───────── */

/* Pembungkus layar pra-login: isinya diletakkan di tengah tinggi layar. */
.nb-bungkus { display: flex; flex-direction: column; justify-content: center; min-height: 100%; }

.nb-hero {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    border-radius: calc(var(--radius-card) + 2px);
    padding: 20px 16px 18px; margin-bottom: 14px;
    text-align: center; color: #fff; box-shadow: var(--shadow-card);
}
/* Pelat logo: logo apa pun tetap terbaca karena latarnya opaque, sedangkan gradien di
   belakangnya mengikuti warna tema lembaga (terang/gelap/MC). */
.nb-hero-plat {
    width: 72px; height: 72px; border-radius: 50%; padding: 9px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center; background: var(--surface-solid);
}
.nb-hero-plat img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nb-hero-judul { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.nb-hero-sub { margin: 4px 0 0; font-size: 12.5px; opacity: .9; }

/* Isian ber-tombol di kanan (mis. mata pada PIN). WAJIB dipasang pada elemen yang juga
   ber-kelas `input-trailing-wrapper`: m3-outline.js hanya mengenali pembungkus baku itu,
   jadi nama kelas bikinan sendiri membuat kotak isiannya kehilangan gaya M3 (label tidak
   mengambang) tanpa error apa pun. Ruang kanannya perlu dilebarkan agar teks tidak masuk
   ke bawah tombolnya. */
.nb-sandi .sp-input { padding-right: 46px; }

/* ── 2. Kartu ────────────────────────────────────────────────────────── */

.nb-kartu {
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); padding: 13px 14px;
}
.nb-kartu + .nb-kartu { margin-top: 12px; }
.nb-kartu-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nb-kartu-judul {
    display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent);
}
.nb-kartu-judul .material-symbols-rounded { font-size: 17px; }
.nb-kartu-ket {
    margin: 8px 0 0; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5;
}
.nb-tumpuk { display: flex; flex-direction: column; gap: 12px; }

/* ── 3. Baris kunci–nilai (identitas, limit, ringkasan) ──────────────── */

.nb-baris {
    display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
    border-bottom: 1px dashed var(--border-subtle);
}
.nb-baris:last-child { border-bottom: none; }
.nb-baris-kunci { font-size: 12px; color: var(--text-tertiary); flex: 0 0 auto; }
.nb-baris-nilai {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    text-align: right; overflow-wrap: anywhere;
}

/* ── 4. Kartu SALDO (hero) ───────────────────────────────────────────── */

.nb-saldo {
    position: relative; overflow: hidden; margin-bottom: 14px;
    border-radius: calc(var(--radius-card) + 2px); padding: 16px 16px 14px;
    color: #fff; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
    box-shadow: var(--shadow-card);
}
/* Hiasan lembut di sudut — memberi kesan berdimensi tanpa gambar/aset. */
.nb-saldo::after {
    content: ""; position: absolute; right: -46px; top: -64px; width: 176px; height: 176px;
    border-radius: 50%; background: rgba(255, 255, 255, .10); pointer-events: none;
}
.nb-saldo-kepala {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    position: relative; z-index: 1;
}
.nb-saldo-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .85;
}
.nb-saldo-nilai {
    margin-top: 4px; font-size: 30px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}
.nb-saldo-sembunyi { letter-spacing: 3px; }
.nb-saldo-norek {
    margin-top: 6px; font-family: var(--font-mono); font-size: 12px; opacity: .92; letter-spacing: .4px;
}
.nb-saldo-catatan {
    margin-top: 8px; font-size: 11px; line-height: 1.45; opacity: .85; position: relative; z-index: 1;
}
.nb-saldo-mata {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-family: inherit;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
}
.nb-saldo-mata .material-symbols-rounded { font-size: 18px; }
.nb-saldo-kaki {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22);
    position: relative; z-index: 1;
}
.nb-saldo-kaki-item {
    flex: 1 1 0; min-width: 0; font-size: 11px; opacity: .9;
}
.nb-saldo-kaki-item b {
    display: block; font-size: 13.5px; font-weight: 700; opacity: 1;
    font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* ── 5. Kartu rekening ───────────────────────────────────────────────── */

.nb-rek {
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); padding: 13px 14px;
}
.nb-rek + .nb-rek { margin-top: 10px; }
.nb-rek.tutup { opacity: .72; }
.nb-rek-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nb-rek-jenis {
    font-size: 11px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: .5px;
}
.nb-rek-norek {
    font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); margin-top: 4px;
}
.nb-rek-saldo-label { font-size: 11px; color: var(--text-tertiary); margin-top: 8px; }
.nb-rek-saldo {
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    font-variant-numeric: tabular-nums; margin-top: 2px; line-height: 1.15;
}

/* ── 6. Baris aksi (tombol di dalam kartu) ───────────────────────────── */

.nb-aksi { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.nb-aksi .sp-btn { flex: 1 1 auto; justify-content: center; font-size: 12.5px; padding: 8px 10px; }

/* ── 7. Pintasan ikon (satu baris, membungkus 2×2 di layar sempit) ───── */

.nb-pintasan {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 6px; margin: 12px 0 4px;
}
.nb-pintasan a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border-radius: 12px; text-decoration: none; text-align: center;
    background: var(--table-stripe); border: 1px solid var(--border-light);
    color: var(--text-secondary); font-size: 10.5px; font-weight: 600; line-height: 1.15;
}
.nb-pintasan a:active { background: var(--accent-light); }
.nb-pintasan .material-symbols-rounded { font-size: 19px; color: var(--accent); }
.nb-pintasan-nama { overflow-wrap: anywhere; }

/* ── 8. Kisi kartu aksi (menu layanan, 2 kolom) ──────────────────────── */

.nb-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-aksi-kartu {
    display: flex; flex-direction: column; gap: 6px; min-height: 104px;
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); padding: 14px 13px;
    text-decoration: none; color: inherit;
}
.nb-aksi-kartu:active { background: var(--table-stripe); }
.nb-aksi-ikon { font-size: 27px; color: var(--accent); line-height: 1; }
.nb-aksi-nama { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.nb-aksi-ket { font-size: 11.5px; color: var(--text-tertiary); line-height: 1.35; }

/* Kisi layanan ringkas (Beranda → "Layanan lainnya") */
.nb-layanan { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.nb-layanan a {
    display: flex; flex-direction: column; gap: 4px; min-height: 84px;
    background: var(--surface); border: 1px solid var(--border-light);
    border-radius: var(--radius-card); padding: 11px 10px;
    text-decoration: none; color: inherit;
}
.nb-layanan a:active { background: var(--table-stripe); }
.nb-layanan .material-symbols-rounded { font-size: 22px; color: var(--accent); line-height: 1; }
.nb-layanan-nama { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.nb-layanan-ket { font-size: 11px; color: var(--text-tertiary); line-height: 1.3; }

/* ── 9. Baris mutasi / transaksi terakhir ────────────────────────────── */

.nb-mutasi-baris {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border-subtle);
}
.nb-mutasi-baris:last-child { border-bottom: none; padding-bottom: 0; }
.nb-mutasi-teks { min-width: 0; }
.nb-mutasi-tgl { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.nb-mutasi-uraian {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nb-mutasi-nilai {
    font-size: 13px; font-weight: 700; white-space: nowrap;
    font-variant-numeric: tabular-nums; text-align: right;
}
.nb-mutasi-masuk { color: var(--accent-green); }
.nb-mutasi-keluar { color: var(--accent-red); }

/* ── 10. Badge & kotak pesan ─────────────────────────────────────────── */

.nb-badge {
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--table-stripe); color: var(--text-tertiary);
}
.nb-badge-ok { background: var(--accent-light); color: var(--accent-dark); }

.nb-info, .nb-ok, .nb-galat {
    display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.45; margin-bottom: 12px;
}
.nb-info { background: var(--accent-light); border: 1px solid var(--border-light); color: var(--text-primary); }
.nb-ok { background: var(--accent-light); border: 1px solid var(--border-light); color: var(--accent-dark); }
.nb-galat {
    background: rgba(196, 82, 74, .10); border: 1px solid rgba(196, 82, 74, .35); color: var(--accent-red);
}
.nb-info .material-symbols-rounded,
.nb-ok .material-symbols-rounded,
.nb-galat .material-symbols-rounded { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }

/* ── 11. Kaki halaman, tautan, utilitas ──────────────────────────────── */

.nb-kaki {
    margin: 14px 0 0; font-size: 11.5px; color: var(--text-tertiary);
    line-height: 1.5; text-align: center;
}
.nb-tautan { color: var(--accent); font-weight: 700; text-decoration: none; }
.nb-tautan:hover { text-decoration: underline; }
.nb-uang { font-variant-numeric: tabular-nums; }
.nb-mono { font-family: var(--font-mono); }
.nb-pemisah { height: 1px; background: var(--border-light); margin: 14px 0; border: none; }
.nb-catatan {
    margin: 10px 0 0; font-size: 11.5px; color: var(--text-tertiary); line-height: 1.5;
}