/* ============================================================
   TEMA MEMBER — palet indigo/biru modern, beda dari admin (hijau)
   Hanya berlaku pada body.tema-member (tidak mengganggu admin)
   ============================================================ */
.tema-member {
  --m-primer: #1e3a8a;      /* biru tua */
  --m-primer-tua: #172554;
  --m-aksen: #ec4899;       /* pink */
  --m-bg: #f3f5fb;
  --m-kartu: #ffffff;
  --m-tinta: #1e293b;
  --m-tinta-muda: #64748b;
  --m-garis: #e2e8f0;
  background: var(--m-bg);
  color: var(--m-tinta);
}

/* Topbar member: gradasi indigo */
.tema-member .topbar {
  background: linear-gradient(120deg, #1e3a8a 0%, #3b5bdb 50%, #ec4899 120%);
}
.tema-member .topbar nav a { color: #dbe4ff; }
.tema-member .topbar nav a:hover { color: #fff; }
.tema-member .saldo-chip {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35);
  color: #fff !important;
}
.tema-member a { color: var(--m-primer); }
.tema-member .btn { background: linear-gradient(120deg, #1e3a8a, #be2d78); color: #fff; box-shadow: 0 4px 14px rgba(30,58,138,0.35); }
.tema-member .btn:hover { background: var(--m-primer-tua); color: #fff; }
.tema-member .btn-garis { border: 2px solid var(--m-primer); color: var(--m-primer); background: transparent; box-shadow: none; }
.tema-member .btn-garis:hover { background: var(--m-primer); color: #fff; }
.tema-member .kartu { background: var(--m-kartu); border: 1px solid var(--m-garis); border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,0.04); }
.tema-member input, .tema-member select { border-radius: 12px; border: 1px solid var(--m-garis); }
.tema-member input:focus, .tema-member select:focus { outline: 2px solid var(--m-aksen); border-color: var(--m-aksen); }

/* HERO: sapaan + saldo */
.m-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #1e3a8a 0%, #5b3a9e 55%, #ec4899 115%); color: #fff;
  border-radius: 20px; padding: 24px 28px; margin-top: 22px;
  box-shadow: 0 10px 30px rgba(30,58,138,0.3);
}
.m-hero-sapa span { opacity: 0.8; font-size: 0.95rem; }
.m-hero-sapa h1 { margin: 2px 0 0; font-size: 1.9rem; color: #fff; }
.m-saldo { text-align: right; }
.m-saldo span { display: block; opacity: 0.85; font-size: 0.8rem; }
.m-saldo b { font-size: 1.7rem; letter-spacing: -0.02em; }
.m-topup {
  display: inline-block; margin-top: 8px; background: #fff; color: var(--m-primer) !important;
  padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; text-decoration: none;
}

/* KARTU STATISTIK */
.m-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 18px 0; }
.m-stat { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 18px; border: 1px solid var(--m-garis); box-shadow: 0 1px 3px rgba(16,24,40,0.04); }
.m-stat-ikon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.m-stat b { display: block; font-size: 1.5rem; line-height: 1.1; }
.m-stat span { font-size: 0.78rem; color: var(--m-tinta-muda); }
.m-stat-sukses .m-stat-ikon { background: #dcfce7; color: #16a34a; }
.m-stat-pending .m-stat-ikon { background: #fef9c3; color: #ca8a04; }
.m-stat-gagal .m-stat-ikon { background: #fee2e2; color: #dc2626; }
.m-stat-pakai .m-stat-ikon { background: #fce7f3; color: #ec4899; }

/* TAB */
.m-tab-nav { display: flex; gap: 8px; margin: 8px 0 16px; }
.m-tab-btn {
  flex: 1; background: #fff; border: 1px solid var(--m-garis); border-radius: 12px; padding: 12px;
  cursor: pointer; font-family: inherit; font-size: 0.98rem; font-weight: 700; color: var(--m-tinta-muda);
}
.m-tab-btn.aktif { background: linear-gradient(120deg, #1e3a8a, #be2d78); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(30,58,138,0.3); }

/* KARTU BRAND (indigo default sudah dari inline) */
.tema-member .kartu-brand { border-radius: 16px; box-shadow: 0 4px 14px rgba(16,24,40,0.1); }
.tema-member .kat { border-radius: 14px; border: 1px solid var(--m-garis); background: #fff; }
.tema-member .ikon-kat { background: linear-gradient(135deg, #dbeafe, #fce7f3); color: var(--m-primer); }
.tema-member .kartu-produk { border-radius: 14px; border: 1px solid var(--m-garis); }
.tema-member .kartu-produk.aktif { border-color: var(--m-aksen); box-shadow: 0 0 0 3px rgba(236,72,153,0.18); }
.tema-member .jejak a { color: var(--m-primer); }
.tema-member .item-grup { border-radius: 12px; }
.tema-member .item-grup:hover { border-color: var(--m-primer); }

/* DAFTAR TRANSAKSI */
.m-trx-list { display: flex; flex-direction: column; gap: 10px; }
.m-trx { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--m-garis); border-radius: 14px; background: #fff; }
.m-trx-kiri { display: flex; flex-direction: column; gap: 2px; }
.m-trx-kiri small { color: var(--m-tinta-muda); font-size: 0.8rem; }
.m-trx-sn { color: var(--m-primer) !important; word-break: break-all; }
.m-trx-kanan { text-align: right; white-space: nowrap; }
.m-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; margin-bottom: 4px; }
.m-badge-ok { background: #dcfce7; color: #16a34a; }
.m-badge-gagal { background: #fee2e2; color: #dc2626; }
.m-badge-pending { background: #fef9c3; color: #ca8a04; }

@media (max-width: 520px) {
  .m-hero { flex-direction: column; align-items: flex-start; }
  .m-saldo { text-align: left; }
}

/* ===== Kartu produk berwarna (harga besar + sorot kuota) ===== */
.tema-member .grid-produk { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tema-member .kartu-produk {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  border: none; border-radius: 16px; padding: 0; overflow: hidden; cursor: pointer;
  background: #fff; box-shadow: 0 3px 12px rgba(16,24,40,0.1); transition: transform .12s ease, box-shadow .12s ease;
  font-family: inherit; color: var(--m-tinta);
}
.tema-member .kartu-produk:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(16,24,40,0.16); }
.tema-member .kartu-produk.aktif { outline: 3px solid var(--m-aksen); outline-offset: 1px; }

/* pita atas berwarna brand: label + sorot kuota */
.tema-member .kp-atas {
  background: linear-gradient(120deg, var(--kp-warna), color-mix(in srgb, var(--kp-warna) 60%, #ec4899));
  color: var(--kp-tinta); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.tema-member .kp-label { font-size: 0.68rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.03em; }
.tema-member .kp-sorot { font-size: 1.35rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.tema-member .kp-durasi { font-size: 0.8rem; font-weight: 600; opacity: 0.9; }

/* isi bawah: nama + harga besar */
.tema-member .kp-nama { padding: 0 12px; font-size: 0.82rem; color: var(--m-tinta-muda); line-height: 1.3; min-height: 2.2em; }
.tema-member .kp-harga { padding: 4px 12px 14px; font-size: 1.25rem; font-weight: 800; color: var(--m-primer); letter-spacing: -0.02em; }

/* ===== Halaman Transaksi & Mutasi ===== */
.m-judul { margin: 22px 0 16px; font-size: 1.6rem; }
.m-filter-status { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.m-fchip { text-decoration: none; padding: 8px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 600;
  background: #fff; border: 1px solid var(--m-garis); color: var(--m-tinta-muda); }
.m-fchip b { margin-left: 4px; }
.m-fchip.aktif { background: linear-gradient(120deg, #1e3a8a, #be2d78); color: #fff; border-color: transparent; }
.m-fs-ok.aktif { background: #16a34a; }
.m-fs-pending.aktif { background: #ca8a04; }
.m-fs-gagal.aktif { background: #dc2626; }

.m-trx-kartu { border-radius: 14px; box-shadow: 0 1px 3px rgba(16,24,40,0.05); }
.m-trx-ref { color: var(--m-tinta-muda); font-size: 0.72rem; opacity: 0.7; }
.m-trx-pesan { color: #dc2626; }

.m-mutasi-list { display: flex; flex-direction: column; gap: 8px; }
.m-mutasi { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--m-garis);
  border-radius: 14px; padding: 12px 16px; }
.m-mut-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; flex-shrink: 0; }
.m-mut-ikon.plus { background: #dcfce7; color: #16a34a; }
.m-mut-ikon.minus { background: #fce7f3; color: #ec4899; }
.m-mut-isi { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-mut-isi span { font-size: 0.9rem; }
.m-mut-isi small { color: var(--m-tinta-muda); font-size: 0.78rem; }
.m-mut-nilai { text-align: right; white-space: nowrap; }
.m-mut-nilai b { display: block; font-size: 1rem; }
.m-mut-nilai b.plus { color: #16a34a; }
.m-mut-nilai b.minus { color: #ec4899; }
.m-mut-nilai small { color: var(--m-tinta-muda); font-size: 0.72rem; }

.m-paging { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; color: var(--m-tinta-muda); font-size: 0.9rem; }

/* ===== Dashboard summary + halaman transaksi/mutasi ===== */
.m-judul { margin: 22px 0 16px; font-size: 1.6rem; }
.m-cta-beli {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(120deg, #1e3a8a, #be2d78); color: #fff; text-decoration: none;
  border-radius: 16px; padding: 18px 22px; margin: 16px 0; box-shadow: 0 8px 24px rgba(30,58,138,0.25);
  transition: transform .12s ease;
}
.m-cta-beli:hover { transform: translateY(-2px); }
.m-cta-beli b { font-size: 1.15rem; display: block; }
.m-cta-beli small { opacity: 0.85; font-size: 0.85rem; }
.m-cta-panah { font-size: 1.6rem; }

/* filter chip (transaksi & mutasi) */
.m-filter-status { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.m-fchip { text-decoration: none; background: #fff; border: 1px solid var(--m-garis); border-radius: 999px;
  padding: 8px 16px; font-size: 0.88rem; font-weight: 600; color: var(--m-tinta-muda); }
.m-fchip b { margin-left: 4px; }
.m-fchip.aktif { background: var(--m-primer); color: #fff; border-color: var(--m-primer); }
.m-fchip.m-fs-ok.aktif { background: #16a34a; border-color: #16a34a; }
.m-fchip.m-fs-gagal.aktif { background: #dc2626; border-color: #dc2626; }
.m-fchip.m-fs-pending.aktif { background: #ca8a04; border-color: #ca8a04; }

.m-trx-kartu { background: #fff; }
.m-trx-ref { color: #94a3b8 !important; font-size: 0.72rem !important; }
.m-trx-pesan { color: #dc2626 !important; }

/* daftar mutasi */
.m-mutasi-list { display: flex; flex-direction: column; gap: 10px; }
.m-mutasi { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--m-garis);
  border-radius: 14px; padding: 14px 16px; }
.m-mut-ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; font-weight: 800; flex-shrink: 0; }
.m-mut-ikon.plus { background: #dcfce7; color: #16a34a; }
.m-mut-ikon.minus { background: #fce7f3; color: #ec4899; }
.m-mut-isi { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.m-mut-isi small { color: var(--m-tinta-muda); font-size: 0.8rem; }
.m-mut-nilai { text-align: right; }
.m-mut-nilai b.plus { color: #16a34a; }
.m-mut-nilai b.minus { color: #ec4899; }
.m-mut-nilai small { display: block; color: var(--m-tinta-muda); font-size: 0.72rem; }

.m-paging { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; }
.m-paging span { color: var(--m-tinta-muda); font-size: 0.9rem; }

/* ===== Tabel member (riwayat & mutasi) ===== */
.tema-member .m-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tema-member .m-tabel th { text-align: left; background: #f1f5fb; color: var(--m-tinta-muda);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 12px 14px; white-space: nowrap; }
.tema-member .m-tabel th.angka, .tema-member .m-tabel td.angka { text-align: right; }
.tema-member .m-tabel td { padding: 12px 14px; border-top: 1px solid var(--m-garis); vertical-align: top; }
.tema-member .m-tabel tr:hover td { background: #f8faff; }
.tema-member .m-tabel small { color: var(--m-tinta-muda); font-size: 0.75rem; }
.tema-member .m-nowrap { white-space: nowrap; }
.tema-member .m-abu { color: #94a3b8 !important; }
.tema-member .m-hijau { color: #16a34a; font-weight: 600; }
.tema-member .m-merah { color: #ec4899; font-weight: 600; }
.tema-member .m-sn { color: var(--m-primer) !important; word-break: break-all; }

/* ===== Overlay "memproses transaksi" ===== */
.m-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.55); z-index: 999;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.m-overlay[hidden] { display: none !important; }
.m-overlay-kotak { background: #fff; border-radius: 18px; padding: 30px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.m-overlay-kotak b { font-size: 1.1rem; color: var(--m-primer); }
.m-overlay-kotak span { font-size: 0.85rem; color: var(--m-tinta-muda); }
.m-spinner { width: 46px; height: 46px; border: 4px solid #e0e7ff; border-top-color: var(--m-primer);
  border-radius: 50%; animation: m-putar 0.8s linear infinite; margin-bottom: 6px; }
@keyframes m-putar { to { transform: rotate(360deg); } }

/* Pilihan nominal token PLN */
.m-token-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.m-token-opsi { display:flex; flex-direction:column; gap:2px; border:2px solid var(--m-garis); border-radius:12px; padding:12px; cursor:pointer; text-align:center; }
.m-token-opsi:hover { border-color:var(--m-primer); }
.m-token-opsi input { display:none; }
.m-token-opsi:has(input:checked) { border-color:var(--m-primer); background:#eef2ff; }
.m-token-nom { font-weight:800; font-size:1.1rem; color:var(--m-primer); }
.m-token-opsi small { color:var(--m-tinta-muda); }

/* Token opsi terpilih (versi button klik) */
.m-token-opsi { font-family:inherit; background:#fff; }
.m-token-opsi.terpilih { border-color:var(--m-primer); background:#eef2ff; }

/* Isi cepat via prefix nomor */
.tema-member .m-prefix-kartu { border:2px solid var(--m-aksen); background:linear-gradient(135deg,#fff,#fdf2f8); }
.tema-member .m-prefix-kartu input { font-size:1.15rem; padding:14px; letter-spacing:0.05em; }
.tema-member .m-prefix-btn { background:var(--m-primer); color:#fff; border-radius:10px; padding:10px 18px; font-size:0.95rem; }

/* Grup produk (accordion) di mode prefix */
.tema-member .m-grup-prefix { border:1px solid var(--m-garis); border-radius:14px; margin-bottom:10px; overflow:hidden; background:#fff; }
.tema-member .m-grup-judul { width:100%; display:flex; align-items:center; gap:10px; padding:14px 16px; background:linear-gradient(120deg,#eef2ff,#fdf2f8);
  border:none; cursor:pointer; font-family:inherit; font-size:1rem; font-weight:700; color:var(--m-primer); text-align:left; }
.tema-member .m-grup-judul small { color:var(--m-tinta-muda); font-weight:500; margin-left:auto; }
.tema-member .m-grup-panah { transition:transform .2s; }
.tema-member .m-grup-prefix.buka .m-grup-panah { transform:rotate(180deg); }
.tema-member .m-grup-isi { display:none; padding:12px; }
.tema-member .m-grup-prefix.buka .m-grup-isi { display:grid; }

/* Kartu pilih grup di mode prefix (tampil dulu sebelum produk) */
.tema-member .m-grup-pilih { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.tema-member .m-grup-kartu { display:flex; flex-direction:column; gap:4px; align-items:flex-start; text-align:left;
  background:linear-gradient(120deg,#1e3a8a,#5b3a9e); color:#fff; border:none; border-radius:14px; padding:16px 18px;
  cursor:pointer; font-family:inherit; box-shadow:0 4px 14px rgba(30,58,138,0.25); transition:transform .12s; }
.tema-member .m-grup-kartu:hover { transform:translateY(-3px); }
.tema-member .m-grup-kartu.aktif { outline:3px solid var(--m-aksen); outline-offset:2px; background:linear-gradient(120deg,#be2d78,#ec4899); }
.tema-member .m-grup-nama { font-size:1.05rem; font-weight:800; line-height:1.2; }
.tema-member .m-grup-kartu small { opacity:0.85; font-size:0.78rem; }

/* Judul + kotak cari mini di kanan */
.m-judul-baris { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:22px 0 16px; }
.m-cari-mini input { border-radius:999px; padding:10px 16px; min-width:220px; font-size:0.9rem; border:1px solid var(--m-garis); background:#fff; }
.m-cari-mini input:focus { outline:2px solid var(--m-aksen); border-color:var(--m-aksen); }

/* ===== Banner layanan (dashboard member) ===== */
.m-banner { background:linear-gradient(135deg,#fff 0%,#f8f5ff 100%); border:1px solid var(--m-garis); border-radius:20px;
  padding:20px 22px; margin:16px 0; box-shadow:0 2px 10px rgba(16,24,40,0.05); }
.m-banner-judul { font-weight:800; font-size:1.05rem; color:var(--m-primer); margin-bottom:14px; }
.m-banner-baris { display:flex; flex-direction:column; gap:14px; }
.m-banner-grup small { display:block; color:var(--m-tinta-muda); font-weight:600; margin-bottom:8px; font-size:0.8rem; }
.m-logo-row { display:flex; flex-wrap:wrap; gap:8px; }
.m-logo { display:inline-flex; align-items:center; background:var(--lg,#94a3b8); color:var(--lt,#fff);
  padding:8px 16px; border-radius:999px; font-weight:800; font-size:0.85rem; letter-spacing:0.01em;
  box-shadow:0 3px 10px rgba(0,0,0,0.12); transition:transform .12s; }
.m-logo:hover { transform:translateY(-2px) scale(1.04); }

/* Banner sebagai tombol beli (link) */
.m-banner-link { display:block; text-decoration:none; color:inherit; cursor:pointer; border:2px solid transparent; transition:transform .12s, box-shadow .12s, border-color .12s; }
.m-banner-link:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(30,58,138,0.18); border-color:var(--m-aksen); color:inherit; }
.m-banner-link .m-banner-judul { background:linear-gradient(120deg,#1e3a8a,#be2d78); color:#fff; padding:12px 16px; border-radius:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:1.05rem; }
.m-banner-panah { font-size:1.3rem; }

/* ===== Statistik dashboard + banner ringkas (update) ===== */
.m-stat-judul { display:flex; align-items:baseline; justify-content:space-between; margin:18px 2px -6px; font-weight:800; color:var(--m-tinta); }
.m-stat-judul small { font-weight:600; font-size:0.8rem; color:var(--m-tinta-muda); }
.m-statgrid { grid-template-columns: repeat(4, 1fr); }
.m-stat-rp { font-size:1.1rem !important; white-space:nowrap; }
.m-mutasi-hari { display:flex; gap:10px; flex-wrap:wrap; margin:-4px 0 14px; }
.m-mutasi-hari span { flex:1; min-width:150px; background:#fff; border:1px solid var(--m-garis); border-radius:12px;
  padding:10px 14px; font-size:0.82rem; color:var(--m-tinta-muda); display:flex; justify-content:space-between; gap:8px; }
.m-masuk { color:#16a34a; } .m-keluar { color:#dc2626; }

@media (max-width: 700px) {
  .m-statgrid { grid-template-columns: repeat(2, 1fr); gap:10px; margin:14px 0; }
  .m-stat { padding:12px; gap:10px; }
  .m-stat-ikon { width:38px; height:38px; font-size:1.05rem; }
  .m-stat b { font-size:1.25rem; }
}