/* ==========================================================================
   gerak.css — lapisan "modern & dinamis" di atas app.css (permintaan Tonny 2026-10-03).
   app.css dari paket desain dibiarkan utuh; semua penyesuaian ada di sini.
   Prinsip: gerak memberi ARTI (sesuatu muncul, tersimpan, berpindah), bukan hiasan.
   Semua gerak dimatikan untuk prefers-reduced-motion.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;  /* lebih modern; dibuat desainer Indonesia */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-pegas: cubic-bezier(.34, 1.56, .64, 1);
  --dur: 220ms;
  --angkat: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent),
            0 10px 28px -12px color-mix(in oklch, var(--ink) 22%, transparent);
}
/* --------------------------------------------------------------------------
   TEMA: WARM NEUTRAL EDITORIAL (pilihan Tonny 2026-10-03, menggantikan tema naga hijau
   yang dinilai terlalu warna-warni). Palet terang dari Tonny: #FAFAF8 #F5F0EB #1C1917 #57534E
   #0369A1 #C2410C #166534 #D6D3D1. Mode gelap diturunkan dari palet yang sama.

   Prinsip: WARNA = MAKNA, dan hanya 4 makna yang diberi warna:
     biru      → bisa ditekan (tombol, tautan) + transfer
     terakota  → minta perhatian / sedang dipilih (perlu diputuskan, badge kotak masuk, chip aktif)
     hijau     → uang masuk, cocok dengan bank
     merah bata→ angka negatif
   Titipan/utang/piutang/tabungan TIDAK punya warna sendiri lagi: labelnya sudah menjelaskan.
   Kotak ikon semuanya netral: ikon itu penunjuk arah, bukan status.
   Keputusan sadar di luar palet: kartu memakai putih hangat #FFFEFC (bukan #F5F0EB) supaya
   ada lapisan kartu-di-atas-kanvas; #F5F0EB dipakai sidebar, kepala tabel, zebra, kotak ikon.
   Garis dalam kartu memakai #E7E2DB (lebih lembut dari #D6D3D1) agar tabel/ledger tidak ramai.
   -------------------------------------------------------------------------- */
:root {
  --bg: #FAFAF8; --surface: #FFFEFC; --surface-sunk: #F5F0EB;
  --line: #E7E2DB; --line-strong: #D6D3D1;
  --ink: #1C1917; --ink-2: #57534E; --ink-3: #78716C;
  --accent: #0369A1; --accent-bg: #E9F2F8; --on-accent: #FFFFFF;
  --terakota: #C2410C; --terakota-bg: #FCEFE7;
  --netral-ico: #57534E; --netral-ico-bg: #F5F0EB;

  --c-masuk: #166534;   --c-masuk-bg: #EAF3EC;  --c-konfirmasi: #166534;
  --c-neg: #B42318;     --c-neg-bg: #FBEDEA;
  --c-transfer: #0369A1; --c-transfer-bg: #E9F2F8;
  --c-putuskan: #C2410C; --c-putuskan-bg: #FCEFE7;
  --c-titipan: #57534E; --c-titipan-bg: #F5F0EB;
  --c-utang: #57534E;   --c-utang-bg: #F5F0EB;
  --c-piutang: #57534E; --c-piutang-bg: #F5F0EB;
  --c-tabung: #57534E;  --c-tabung-bg: #F5F0EB;
  --c-sementara: #78716C; --c-sementara-bg: #F5F0EB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1917; --surface: #23201D; --surface-sunk: #2A2622;
    --line: #36312D; --line-strong: #4A443F;
    --ink: #F5F0EB; --ink-2: #D6D3D1; --ink-3: #A8A29E;
    --accent: #5AB0E0; --accent-bg: #15293A; --on-accent: #0B1822;
    --terakota: #F0915A; --terakota-bg: #3A2316;
    --netral-ico: #D6D3D1; --netral-ico-bg: #2E2925;
    --c-masuk: #6CC08B; --c-masuk-bg: #172A1E; --c-konfirmasi: #6CC08B;
    --c-neg: #F0897A; --c-neg-bg: #3A1D19;
    --c-transfer: #5AB0E0; --c-transfer-bg: #15293A;
    --c-putuskan: #F0915A; --c-putuskan-bg: #3A2316;
    --c-titipan: #D6D3D1; --c-titipan-bg: #2E2925; --c-utang: #D6D3D1; --c-utang-bg: #2E2925;
    --c-piutang: #D6D3D1; --c-piutang-bg: #2E2925; --c-tabung: #D6D3D1; --c-tabung-bg: #2E2925;
    --c-sementara: #A8A29E; --c-sementara-bg: #2A2622;
  }
}
:root[data-theme="dark"] {
  --bg: #1C1917; --surface: #23201D; --surface-sunk: #2A2622;
  --line: #36312D; --line-strong: #4A443F;
  --ink: #F5F0EB; --ink-2: #D6D3D1; --ink-3: #A8A29E;
  --accent: #5AB0E0; --accent-bg: #15293A; --on-accent: #0B1822;
  --terakota: #F0915A; --terakota-bg: #3A2316;
  --netral-ico: #D6D3D1; --netral-ico-bg: #2E2925;
  --c-masuk: #6CC08B; --c-masuk-bg: #172A1E; --c-konfirmasi: #6CC08B;
  --c-neg: #F0897A; --c-neg-bg: #3A1D19;
  --c-transfer: #5AB0E0; --c-transfer-bg: #15293A;
  --c-putuskan: #F0915A; --c-putuskan-bg: #3A2316;
  --c-titipan: #D6D3D1; --c-titipan-bg: #2E2925; --c-utang: #D6D3D1; --c-utang-bg: #2E2925;
  --c-piutang: #D6D3D1; --c-piutang-bg: #2E2925; --c-tabung: #D6D3D1; --c-tabung-bg: #2E2925;
  --c-sementara: #A8A29E; --c-sementara-bg: #2A2622;
}

/* Kotak ikon: netral semua (kecuali error & perlu perhatian) */
.ico, .ico--accent, .ico--masuk, .ico--transfer, .ico--titipan, .ico--utang, .ico--piutang, .ico--tabung, .ico--sementara {
  background: var(--netral-ico-bg); color: var(--netral-ico); border: 0; }
.ico--putuskan { background: var(--terakota-bg); color: var(--terakota); }
.ico--neg, .state-msg--error .ico { background: var(--c-neg-bg); color: var(--c-neg); }

/* Permukaan */
.sidebar { background: var(--surface-sunk); border-right-color: var(--line); }
.tabbar { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.card--hero { background: var(--surface); border-color: var(--line-strong); }
.card--hero .ledger > * { border-top-color: var(--line); }
.table thead th, .table-wrap thead th { background: var(--surface-sunk); }

/* "Dipilih" = terakota lembut, tenang */
.sidebar__item[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--terakota); }
.sidebar__item[aria-current="page"] [data-lucide], .sidebar__item[aria-current="page"] .lucide { color: var(--terakota); }
.tabbar__item[aria-current="page"] { color: var(--ink); }
.tabbar__item[aria-current="page"]::before { background: var(--terakota); }
.chip[aria-pressed="true"] { background: var(--terakota-bg); color: var(--terakota); border-color: color-mix(in srgb, var(--terakota) 45%, transparent); }
.count { background: var(--terakota); color: #fff; }

/* Meter: netral; hanya "masuk" yang hijau */
.meter__fill, .meter__fill--utang { background: var(--ink-2) !important; }
.meter__fill--masuk { background: var(--c-masuk) !important; }

/* Merek: maskot kecil tanpa kotak ungu */
.sidebar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.sidebar__brand img { width: 30px; height: 30px; object-fit: contain; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent), black 12%); }

body { font-feature-settings: 'tnum' 1, 'cv11' 1; }
.num, .money, .ledger__amt, .acct__bal { font-variant-numeric: tabular-nums; }
.hero__value { font-weight: 800; letter-spacing: -0.02em; }
.h2, .topbar__title { font-weight: 700; letter-spacing: -0.01em; }

/* Perpindahan halaman halus (Chrome/Edge/Safari baru; browser lain langsung pindah) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both pudar-keluar; }
::view-transition-new(root) { animation: 260ms var(--ease) both naik-masuk; }

/* Kartu muncul bergiliran saat halaman dibuka */
.muncul > * { animation: naik-masuk 420ms var(--ease) both; }
.muncul > *:nth-child(2) { animation-delay: 50ms; }
.muncul > *:nth-child(3) { animation-delay: 100ms; }
.muncul > *:nth-child(4) { animation-delay: 150ms; }
.muncul > *:nth-child(5) { animation-delay: 200ms; }
.muncul > *:nth-child(n+6) { animation-delay: 240ms; }

/* Kartu yang bisa diklik terangkat sedikit — penanda "ini bisa ditekan" */
a.card, .card--klik { display: block; color: inherit; text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
a.card:hover, .card--klik:hover { transform: translateY(-2px); box-shadow: var(--angkat); border-color: var(--line-strong); }

.btn, .icon-btn, .chip, .sidebar__item, .tabbar__item {
  transition: transform 120ms var(--ease), background-color var(--dur), color var(--dur), border-color var(--dur); }
.btn:active, .icon-btn:active, .chip:active { transform: scale(.96); }

/* Meter mengisi dari kiri saat muncul */
.meter__fill { transform-origin: left; animation: isi-meter 900ms var(--ease) both 200ms; }

/* Item kotak masuk diputuskan: menyusut lalu ringkasannya muncul */
.inbox-item { transition: opacity var(--dur), transform var(--dur) var(--ease); }
.inbox-item.is-pergi { opacity: 0; transform: translateX(24px) scale(.98); }
.inbox-item--done { animation: naik-masuk 300ms var(--ease) both; }

/* Tanda "tersimpan" berdenyut sekali */
.saved.is-baru { animation: denyut 600ms var(--ease-pegas); }

/* Badge hitungan berubah: memantul */
.count.is-ubah { animation: pantul 420ms var(--ease-pegas); }

/* Maskot & ilustrasi */
.maskot { width: 132px; height: 132px; object-fit: contain; animation: melayang 4s ease-in-out infinite; }
.maskot--kecil { width: 72px; height: 72px; }
.state-msg .maskot { margin-bottom: var(--sp-2); }
img.ico__img { width: 70%; height: 70%; object-fit: contain; }

/* Notifikasi kecil (toast) */
.toast-wadah { position: fixed; left: 50%; bottom: calc(64px + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; gap: 8px; z-index: 60; width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 900px) { .toast-wadah { bottom: 24px; } }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--ink); color: var(--bg); font-size: var(--fs-sm); box-shadow: var(--angkat); animation: naik-masuk 260ms var(--ease) both; }
.toast a, .toast button { color: inherit; font-weight: 600; margin-left: auto; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.toast.is-pergi { animation: pudar-keluar 200ms var(--ease) both; }

@keyframes naik-masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pudar-keluar { to { opacity: 0; transform: translateY(-4px); } }
@keyframes isi-meter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes denyut { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes pantul { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; }
  @view-transition { navigation: none; }
}