/* Gaya tambahan (di luar Tailwind). Tema TERANG saja - tidak ada warna gelap. */
:root { color-scheme: light only; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; background: #eef3f9; color: #334155; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.pt-safe { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }

/* saldo yang bisa disembunyikan */
.saldo-mask { display: none; }
html[data-hide="1"] .saldo-val { display: none; }
html[data-hide="1"] .saldo-mask { display: inline; }

/* bottom sheet (PIN) */
.sheet-back { position: fixed; inset: 0; background: rgba(100, 116, 139, .4); z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sheet-back.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 28rem; margin: 0 auto; background: #fff;
  border-radius: 1.5rem 1.5rem 0 0; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%); transition: transform .25s ease; box-shadow: 0 -10px 40px rgba(10, 102, 184, .18); }
.sheet.open { transform: translateY(0); }

/* PIN pad */
.pin-dots { display: flex; gap: .75rem; justify-content: center; margin: 1rem 0 1.25rem; }
.pin-dot { width: .95rem; height: .95rem; border-radius: 9999px; border: 2px solid #8abcec; background: #fff; transition: all .12s; }
.pin-dot.on { background: #0a66b8; border-color: #0a66b8; transform: scale(1.1); }
.pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pin-key { height: 3.6rem; border-radius: 1rem; background: #eef6fd; color: #0a66b8; font-size: 1.5rem; font-weight: 600; }
.pin-key:active { background: #dcecfa; }
.pin-key.ghost { background: transparent; }

/* modal tengah (pengumuman) */
.modal-back { position: fixed; inset: 0; background: rgba(100, 116, 139, .45); z-index: 70; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.modal-back.open { display: flex; }

/* struk + watermark logo (seperti DANA) */
.struk { position: relative; background: #fff; border-radius: 1.25rem; box-shadow: 0 8px 30px rgba(10, 102, 184, .14); overflow: hidden; }
.struk .wm { position: absolute; inset: 0; background-repeat: repeat; background-size: 96px 96px; opacity: .07; pointer-events: none; }
.struk > *:not(.wm) { position: relative; }

@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .4s ease both; }

/* SweetAlert selaras tema */
.swal2-popup { border-radius: 1.25rem !important; font-family: inherit !important; }
.swal2-styled.swal2-confirm { border-radius: .75rem !important; }
.swal2-styled.swal2-cancel { border-radius: .75rem !important; }

/* cetak */
.print-only { display: none; }
@media print {
  body { background: #fff !important; }
  .no-print, nav, header.app-bar, aside, .sheet, .sheet-back, .swal2-container { display: none !important; }
  .print-area { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  main { padding: 0 !important; margin: 0 !important; }
  main > div { padding: 0 !important; }
  table { font-size: 11px; }
  .print-only { display: block !important; }
  .screen-only { display: none !important; }
  @page { size: A4; margin: 12mm; }
}

@view-transition { navigation: auto; }

/* =====================================================================
   LAPISAN APLIKASI MOBILE (layar < 1024px) - terasa seperti app native
   Cetak & desktop tidak terpengaruh.
   ===================================================================== */
@media screen and (max-width: 1023.98px) { /* mobile */
  :root { --bg: #f1f4f9; --ink: #1e293b; --muted: #8492a6; --line: #e8edf4; --brand: #0a66b8; }
  html { background: var(--bg); scroll-behavior: auto; }
  body { background: var(--bg) !important; color: var(--ink); font-size: 15px; line-height: 1.4; letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  /* teks yang memang perlu disalin/diisi tetap bisa dipilih */
  input, textarea, select, [data-salin], .selectable { -webkit-user-select: text; user-select: text; }
  img { -webkit-user-drag: none; }
  a, button, label, summary { -webkit-tap-highlight-color: transparent; }
  .tabnum, .text-3xl, .text-2xl, td, .font-extrabold { font-variant-numeric: tabular-nums; }

  /* transisi halaman halus ala app */
  main, .app-shell { animation: halaman .22s ease-out both; }
  @keyframes halaman { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---------- tipografi */
  h1 { letter-spacing: -.02em; }
  main h1.text-2xl { font-size: 1.3rem !important; line-height: 1.25; font-weight: 800; }
  .text-3xl { font-size: 1.75rem !important; line-height: 1.15; letter-spacing: -.02em; }
  .text-2xl { font-size: 1.4rem; }
  .text-sm { font-size: .875rem; }
  .text-xs { font-size: .78rem; }
  .text-\[11px\] { font-size: .72rem !important; }

  /* ---------- kartu: datar, lembut, tanpa garis tepi */
  body .card { border: 0 !important; border-radius: 18px !important; padding: 14px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.05) !important; }
  body .card.\!p-0, body .card.\!py-1, body .card.\!px-2 { }
  .space-y-4 > * + * { margin-top: .75rem !important; }
  .space-y-3 > * + * { margin-top: .625rem !important; }

  /* ---------- form */
  body .input { font-size: 16px !important; height: 50px; padding: 0 14px !important; border-radius: 14px !important;
    background: #f5f7fb !important; border: 1.5px solid transparent !important; color: var(--ink); box-shadow: none !important; }
  body textarea.input { height: auto; padding: 12px 14px !important; }
  body select.input { appearance: none; -webkit-appearance: none; padding-right: 38px !important;
    background: #f5f7fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 24 24' stroke='%238492a6' stroke-width='2.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center !important; }
  body .input:focus { background-color: #fff !important; border-color: var(--brand) !important; box-shadow: 0 0 0 4px rgba(10,102,184,.12) !important; }
  body .input::placeholder { color: #b3bdcc; }
  body .input.text-lg { font-size: 1.125rem !important; height: 54px; }
  input[type=date].input { min-height: 50px; }
  body .label { font-size: .78rem; font-weight: 600; color: #64748b; margin-bottom: 6px; padding-left: 2px; }

  /* ---------- tombol: besar, mudah dijangkau */
  body .btn { min-height: 50px; border-radius: 14px; padding: 0 18px; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
  body .btn-primary { background: linear-gradient(180deg, #1470c4, #0a66b8); box-shadow: 0 6px 16px rgba(10,102,184,.28); }
  body .btn:active { transform: scale(.97); filter: brightness(.96); }
  body .btn-sm { min-height: 38px; font-size: .82rem; border-radius: 12px; padding: 0 14px; }
  body .btn:disabled, body .btn[disabled] { background: #d5dde8; color: #fff; box-shadow: none; opacity: 1; }
  .btn-primary.w-full, .btn-soft.w-full, .btn-danger.w-full, .btn-ok.w-full { width: 100%; }
  a:active, button:active { opacity: .85; }
  .card:is(a):active, a.card:active { transform: scale(.985); transition: transform .08s; }

  /* ---------- chip, badge, tab */
  body .badge { font-size: .68rem; padding: 3px 9px; }
  body .tab, body .tab-on { min-height: 36px; font-size: .82rem; padding: 0 14px; }

  /* ---------- bilah atas ala app */
  header.app-bar { box-shadow: none; }
  header.app-bar h1 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
  .bar-blue { background: linear-gradient(135deg, #0a66b8, #1f7fd1); color: #fff; }
  .bar-blue .bar-in { height: 54px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 0 10px; }
  .bar-blue h1 { text-align: center; font-size: 1.05rem; font-weight: 700; }
  .bar-btn { width: 40px; height: 40px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
  .bar-btn:active { background: rgba(255,255,255,.22); }

  /* ---------- menu bawah (tab bar) */
  nav.tabbar { background: rgba(255,255,255,.94) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(15,23,42,.06) !important; box-shadow: none !important; }
  nav.tabbar a, nav.tabbar button { min-height: 58px; font-size: .66rem !important; font-weight: 600; justify-content: center; gap: 2px !important; color: #94a3b8; }
  nav.tabbar .ti { width: 56px; height: 30px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background .2s, transform .15s; position: relative; }
  nav.tabbar .on .ti { background: #e3f0fc; color: var(--brand); }
  nav.tabbar .on { color: var(--brand) !important; }
  nav.tabbar a:active .ti, nav.tabbar button:active .ti { transform: scale(.9); }

  /* tombol Scan QR bulat di tengah menu bawah */
  nav.tabbar { overflow: visible; }
  nav.tabbar a.tab-scan { position: relative; justify-content: flex-end !important; padding-bottom: 6px; }
  nav.tabbar .scan-btn { position: absolute; top: -22px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center; color: #fff; border: 4px solid #fff;
    background: linear-gradient(135deg, #0a66b8, #2f95dc); box-shadow: 0 6px 16px rgba(10,102,184,.35); transition: transform .15s; }
  nav.tabbar a.tab-scan:active .scan-btn { transform: scale(.92); }
  nav.tabbar a.tab-scan .scan-lbl { position: relative; z-index: 1; }

  /* ---------- daftar bergaya iOS grouped list */
  .card.\!py-1 > a { padding-top: 12px; padding-bottom: 12px; }
  .list-row:active { background: #f5f7fb; }

  /* ---------- tabel kecil: padat & rapi, geser bila perlu */
  .card.overflow-hidden { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .th { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; background: #f8fafc; padding: 10px 12px; }
  .td { padding: 12px; font-size: .84rem; }
  tr[data-href]:active { background: #eef6fd; }

  /* tabel lebar (>5 kolom) -> kartu bertumpuk, diberi class oleh app.js */
  table.tbl-stack, table.tbl-stack tbody { display: block; width: 100%; }
  table.tbl-stack thead { display: none; }
  table.tbl-stack tr { display: block; padding: 10px 14px; border-top: 1px solid var(--line); }
  table.tbl-stack tr:first-child { border-top: 0; }
  table.tbl-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: 0 !important; padding: 4px 0 !important; text-align: right !important; max-width: none !important; white-space: normal !important; }
  table.tbl-stack td::before { content: attr(data-label); color: #94a3b8; font-size: .72rem; font-weight: 600; text-align: left; flex-shrink: 0; }
  table.tbl-stack td[data-label=""]::before, table.tbl-stack td:not([data-label])::before { display: none; }
  table.tbl-stack td:empty { display: none; }

  /* ---------- lembar bawah (PIN) & pop-up jadi bottom sheet */
  .sheet { max-width: none; border-radius: 24px 24px 0 0; }
  .sheet-back { background: rgba(15,23,42,.45); }
  .pin-key { height: 3.4rem; font-size: 1.45rem; border-radius: 9999px; width: 4.2rem; margin: 0 auto; background: #f1f5fb; }
  .pin-key.ghost { background: transparent; }
  .pin-dot { width: 14px; height: 14px; }

  .swal2-container.swal2-top { align-items: flex-start !important; padding: calc(env(safe-area-inset-top,0px) + 8px) 12px 0 !important; }
  .swal2-popup.swal2-toast { border-radius: 9999px !important; box-shadow: 0 8px 30px rgba(15,23,42,.18) !important; padding: 10px 16px !important; }
  @keyframes naik { from { transform: translateY(100%); } to { transform: none; } }
  .modal-back { align-items: flex-end; padding: 0; }
  .modal-back > div { max-width: none !important; border-radius: 26px 26px 0 0 !important; padding-bottom: env(safe-area-inset-bottom,0px); }

  /* struk */
  .struk { border-radius: 22px; }

  /* kolom kunci angka: PIN */
  input[data-digits] { letter-spacing: .5em; text-align: center; font-weight: 700; }

  /* muat di layar kecil */
  .max-w-md { max-width: 100%; }
  .overflow-x-auto { scrollbar-width: none; } .overflow-x-auto::-webkit-scrollbar { display: none; }

  /* hapus efek hover situs web pada layar sentuh */
  @media (hover: none) { .hover\:bg-blue-50:hover, .hover\:bg-blue-100:hover, .hover\:bg-blue-700:hover, .hover\:bg-slate-50:hover { background-color: revert-layer; } }
}

/* efek kaca halus untuk kartu saldo */
.saldo-card { position: relative; overflow: hidden; background: linear-gradient(135deg, #0a66b8 0%, #1f7fd1 55%, #4f9ae0 100%) !important; color: #fff; }
.saldo-card::before, .saldo-card::after { content: ""; position: absolute; border-radius: 9999px; background: rgba(255,255,255,.09); pointer-events: none; }
.saldo-card::before { width: 180px; height: 180px; right: -50px; top: -70px; }
.saldo-card::after { width: 120px; height: 120px; right: 40px; bottom: -70px; }
.saldo-card > * { position: relative; }

/* kontrol segmen (pilih mode) */
.seg { display: flex; background: #eef2f7; border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; height: 40px; border-radius: 11px; font-size: .875rem; font-weight: 600; color: #64748b; transition: all .15s; }
.seg button.on { background: #fff; color: #0a66b8; box-shadow: 0 1px 4px rgba(15,23,42,.12); }

/* ---------- login ala m-banking */
.auth-hero { background: radial-gradient(120% 90% at 85% -10%, #2f95dc 0%, rgba(47,149,220,0) 55%), linear-gradient(160deg, #0a4f94 0%, #0a66b8 60%, #1495a8 130%); }
.auth-hero::before, .auth-hero::after { content: ""; position: absolute; border-radius: 9999px; background: rgba(255,255,255,.07); pointer-events: none; }
.auth-hero::before { width: 220px; height: 220px; left: -80px; top: 90px; }
.auth-hero::after { width: 160px; height: 160px; right: -50px; top: -40px; }
.bio-btn { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: #f3f8fe; border: 1.5px solid #dcecfa; transition: transform .1s, background .15s; }
.bio-btn:active { transform: scale(.98); background: #e8f2fc; }
.bio-ico { width: 48px; height: 48px; border-radius: 9999px; background: #0a66b8; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 14px rgba(10,102,184,.3); }
.bio-btn.bio-ready { border-color: #0a66b8; }
.bio-btn.busy .bio-ico { animation: pl-pulse 1s ease-in-out infinite; }
@media (min-width: 1024px) { .auth-sheet { background: #fff; } }

/* ---------- beranda ala myBCA */
.mb-top { background: radial-gradient(110% 80% at 100% 0%, #2f95dc 0%, rgba(47,149,220,0) 55%), linear-gradient(165deg, #083f78 0%, #0a66b8 70%, #0f8aa8 140%); }
.acct-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(8,63,120,.22); }
.acct-strip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; color: #fff; background: linear-gradient(90deg, #0d9aa5, #1fb5a8); }
.acct-chip { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.25); border-radius: 9999px; padding: 2px 9px; flex-shrink: 0; }
.acct-links { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #edf1f6; }
.acct-links a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; font-size: 13px; font-weight: 600; color: #0a66b8; }
.acct-links a + a { border-left: 1px solid #edf1f6; }
.acct-links a:active { background: #f3f8fe; }
.mico { width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.mico-blue { background: #e3f0fc; color: #0a66b8; } .mico-amber { background: #fff3d6; color: #c98100; }
.mico-teal { background: #d9f3f0; color: #0b8f86; } .mico-violet { background: #ece8fd; color: #6a4fe0; }
.mico-sky { background: #def1fb; color: #1b8fc4; } .mico-rose { background: #fde4e8; color: #d8374f; }
.mico-emerald { background: #dcf5e8; color: #17915c; } .mico-orange { background: #ffe9d9; color: #e0661a; }
a:active .mico { transform: scale(.92); transition: transform .1s; }

/* ---------- pop up pengumuman: selalu di tengah layar (HP & desktop) */
.modal-back.modal-pop { align-items: center !important; justify-content: center !important; padding: 1.25rem !important; background: rgba(15, 23, 42, .55); }
.modal-back.modal-pop > div { width: 100%; max-width: 21rem !important; border-radius: 20px !important; padding-bottom: 0 !important; animation: pop-in .22s ease-out; }
@keyframes pop-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.pop-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 9999px; background: rgba(15, 23, 42, .45); color: #fff; display: flex; align-items: center; justify-content: center; }
.pop-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: #1e293b; text-align: center; }
.pop-text { font-size: 13px; line-height: 1.55; color: #64748b; text-align: center; white-space: pre-line; }

/* ---------- pop up konfirmasi (SweetAlert): ringkas ala mobile banking, di tengah layar */
.swal2-container:not(.swal2-top):not(.swal2-top-end):not(.swal2-top-start) { align-items: center !important; padding: 1rem !important; }
.swal2-popup:not(.swal2-toast) { width: min(20rem, 100%) !important; max-width: 20rem !important; margin: 0 !important; padding: 18px 16px 14px !important;
  border-radius: 18px !important; box-shadow: 0 16px 48px rgba(15, 23, 42, .28) !important; }
.swal2-popup:not(.swal2-toast) .swal2-icon { font-size: .66rem !important; margin: 2px auto 10px !important; }
.swal2-popup:not(.swal2-toast) .swal2-title { font-size: 1rem !important; font-weight: 700 !important; line-height: 1.3 !important; padding: 0 !important; margin: 0 !important; color: #1e293b; }
.swal2-popup:not(.swal2-toast) .swal2-html-container { font-size: .8125rem !important; line-height: 1.5 !important; color: #64748b; margin: 8px 0 0 !important; padding: 0 !important; }
.swal2-popup:not(.swal2-toast) .swal2-actions { width: 100% !important; flex-wrap: nowrap !important; gap: 8px !important; margin: 16px 0 0 !important; }
.swal2-popup:not(.swal2-toast) .swal2-styled { flex: 1 !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; font-size: .875rem !important; font-weight: 600 !important; border-radius: 12px !important; }
.swal2-popup:not(.swal2-toast) .swal2-input, .swal2-popup:not(.swal2-toast) .swal2-textarea { font-size: .875rem !important; height: 2.6rem !important; margin: 12px 0 0 !important; width: 100% !important; box-sizing: border-box !important; }
.swal2-popup:not(.swal2-toast) .swal2-validation-message { font-size: .75rem !important; margin: 8px 0 0 !important; padding: 8px 10px !important; }
.swal2-popup:not(.swal2-toast) .swal2-close { font-size: 1.6rem !important; width: 36px !important; height: 36px !important; }