/* ==========================================================
   Lacak Cuan — gaya tampilan hijau sage-hutan
   Kartu putih gading + aksen hijau hutan di atas latar sage,
   tipografi editorial (angka besar + teks mikro kapital).
   Mobile-first: gaya dasar untuk HP, media query untuk laptop.
   ========================================================== */

/* ---------- 1. Token warna & ukuran ---------- */
:root {
  --hitam: #1F2A22;
  --putih: #FFFFFF;
  --biru: #2F6B45;            /* aksen utama (hijau hutan) */
  --biru-muda: #DDE7DA;
  --gradasi-biru: linear-gradient(135deg, #1F3A2A 0%, #2F5D3A 45%, #4E8A5E 100%);
  --pasir: #A9BBA5;
  --pasir-muda: #E4EADF;

  --kaca: rgba(246, 244, 238, 0.86);
  --kaca-hover: rgba(250, 249, 244, 0.97);
  --kaca-input: #F2F1EA;
  --garis: rgba(255, 255, 255, 0.75);
  --garis-halus: rgba(31, 42, 34, 0.08);
  --lapis: #ECEDE4;       /* permukaan putih tipis di atas kaca */

  --teks: #1F2A22;
  --teks-2: #56635A;
  --teks-3: #8E998F;

  --hijau: #2F8F57;
  --hijau-bg: #DCEFD9;
  --merah: #C2553F;
  --merah-bg: #F6DED6;
  --kuning: #B7791F;
  --kuning-bg: rgba(200, 140, 30, 0.15);

  --radius: 28px;
  --radius-kecil: 999px;      /* tombol & input berbentuk pil */
  --bayangan: 0 12px 32px rgba(31, 42, 34, 0.12), 0 2px 6px rgba(31, 42, 34, 0.05);
  --bayangan-angkat: 0 22px 48px rgba(31, 42, 34, 0.2);

  --pegas: cubic-bezier(0.34, 1.56, 0.64, 1);
  --halus: cubic-bezier(0.22, 1, 0.36, 1);

  --font-angka: 'Big Shoulders Display', 'Plus Jakarta Sans', sans-serif;
}

/* ---------- 2. Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--teks);
  /* Langit senja: abu kebiruan → jingga pucat di cakrawala → pasir */
  background:
    linear-gradient(180deg, #D3DCCF 0%, #B9C6B5 30%, #95A792 62%, #5E705F 85%, #3E4C40 100%) fixed;
  background-color: #B9C6B5;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
  color-scheme: light;
}
body.modal-terbuka { overflow: hidden; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { line-height: 1.15; }
svg.lucide { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; }

/* Teks mikro kapital ala katalog fashion */
.mikro {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teks-2);
}

/* ---------- 3. Latar: matahari, awan, bukit pasir ---------- */
.latar { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.matahari {
  position: absolute; left: 62%; top: 44%; width: 520px; height: 260px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 214, 170, 0.85), rgba(255, 190, 140, 0.35) 40%, transparent 70%);
  filter: blur(10px);
  animation: berpendar 9s ease-in-out infinite alternate;
}
@keyframes berpendar { to { opacity: 0.75; transform: translate(-50%, -50%) scale(1.08); } }

.awan {
  position: absolute; height: 18px; border-radius: 50%;
  background: rgba(255, 225, 205, 0.55); filter: blur(8px);
  animation: hanyut 60s linear infinite alternate;
}
.a1 { width: 420px; top: 14%; left: -5%; }
.a2 { width: 300px; top: 22%; left: 45%; opacity: 0.6; animation-duration: 80s; }
.a3 { width: 520px; top: 31%; left: 15%; height: 12px; opacity: 0.5; animation-duration: 70s; }
@keyframes hanyut { to { transform: translateX(120px); } }

.bukit { position: absolute; border-radius: 50%; filter: blur(2px); }
.k1 { width: 120%; height: 380px; left: -40%; bottom: -200px; background: linear-gradient(180deg, #B98A68, #8C6449); }
.k2 { width: 90%; height: 300px; right: -30%; bottom: -170px; background: linear-gradient(180deg, #C9A07E, #9A7254); }
.k3 { width: 70%; height: 220px; left: 20%; bottom: -150px; background: linear-gradient(180deg, #D7B392, #A98263); opacity: 0.9; }

/* ---------- 4. Kaca ---------- */
.kaca {
  background: var(--kaca);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayangan), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.kaca-pekat {
  background: rgba(238, 233, 228, 0.82);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border: 1px solid var(--garis);
  box-shadow: var(--bayangan-angkat);
}

/* ---------- 5. Layout (HP) ---------- */
.konten {
  padding: 16px 14px calc(120px + env(safe-area-inset-bottom));
  max-width: 1240px; margin: 0 auto;
  display: grid; gap: 16px;
}

/* Logo "LC®" */
.logo-tanda {
  font-family: var(--font-angka); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.02em; line-height: 1;
  color: var(--putih);
}
.logo-tanda sup { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.42em; font-weight: 600; margin-left: 1px; vertical-align: super; }

/* Kepala halaman bergaya katalog: nomor besar + judul + info */
.kepala {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 6px 16px;
  padding: 18px 20px; position: relative;
}
.kepala .logo-hp { position: absolute; top: 16px; right: 20px; color: var(--hitam); font-size: 1.4rem; }
.kepala-nomor {
  grid-row: span 2;
  font-family: var(--font-angka); font-weight: 700; font-size: 5.2rem; line-height: 0.8; letter-spacing: -0.02em;
  color: var(--hitam);
}
.kepala-nomor.ganti { animation: fade-rise 0.6s ease-out both; }
.kepala-teks h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.kepala-teks { min-width: 0; padding-right: 44px; }
.kepala-teks .mikro { margin-bottom: 2px; }
.kepala-meta {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--garis-halus);
}
.kepala-meta div { min-width: 0; }
.kepala-meta dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teks-3); }
.kepala-meta dd { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Navigasi: pil di bawah layar (HP) */
.sidebar {
  position: fixed; z-index: 40;
  left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  padding: 6px; border-radius: 999px;
  background: rgba(70, 66, 66, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--bayangan);
}
.sidebar .logo, .sidebar .nav-meta, .sidebar .btn-tambah-sidebar { display: none; }

.nav { position: relative; display: flex; justify-content: space-around; }
.nav-item {
  position: relative; z-index: 1; flex: 1; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border-radius: 999px;
  color: rgba(255, 255, 255, 0.72); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  transition: color 0.3s;
}
.nav-item svg { width: 21px; height: 21px; transition: transform 0.4s var(--pegas); }
.nav-item:hover svg { transform: translateY(-2px); }
.nav-item.aktif { color: var(--hitam); }
.nav-item.aktif svg { transform: scale(1.08); }

/* Penanda menu aktif berupa pil putih yang bergeser */
.nav-penanda {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
  border-radius: 999px; background: var(--putih);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.45s var(--pegas), width 0.45s var(--pegas), height 0.45s var(--pegas);
}

/* Tombol tambah melayang: lingkaran hitam */
.fab {
  position: fixed; z-index: 41; right: 18px; bottom: calc(96px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--hitam); color: var(--putih);
  box-shadow: 0 12px 30px rgba(20, 18, 16, 0.4);
  transition: transform 0.35s var(--pegas), box-shadow 0.3s;
  animation: muncul-fab 0.6s var(--pegas) both 0.3s;
}
.fab svg { width: 26px; height: 26px; stroke-width: 2.2; transition: transform 0.4s var(--pegas); }
.fab:hover { transform: scale(1.03); }
.fab:hover svg { transform: rotate(90deg); }
.fab:active { transform: scale(0.92); }
@keyframes muncul-fab { from { transform: scale(0) rotate(-90deg); opacity: 0; } }

/* ---------- 6. Halaman & animasi masuk ---------- */
@keyframes fade-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes naik { from { opacity: 0; transform: translateY(20px); } }
.animate-fade-rise { animation: fade-rise 0.8s ease-out both; }
.animate-fade-rise-delay { animation: fade-rise 0.8s ease-out 0.2s both; }
.animate-fade-rise-delay-2 { animation: fade-rise 0.8s ease-out 0.4s both; }

.hal { display: none; }
.hal.aktif { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.hal.aktif > * { animation: fade-rise 0.8s ease-out both; }
.hal.aktif > *:nth-child(2) { animation-delay: 0.2s; }
.hal.aktif > *:nth-child(3) { animation-delay: 0.4s; }
.hal.aktif > *:nth-child(4) { animation-delay: 0.6s; }
.hal.aktif .grid-ringkasan > *, .hal.aktif .grid-grafik > * { animation: fade-rise 0.8s ease-out both; }
.hal.aktif .grid-ringkasan > *:nth-child(2), .hal.aktif .grid-grafik > *:nth-child(2) { animation-delay: 0.2s; }
.hal.aktif .grid-ringkasan > *:nth-child(3) { animation-delay: 0.4s; }

/* ---------- 7. Kartu ---------- */
.kartu { padding: 20px; transition: transform 0.35s var(--halus), box-shadow 0.35s, background 0.3s; }
.kartu:hover { transform: translateY(-3px); box-shadow: var(--bayangan-angkat); }
.kartu.kaca:hover { background: var(--kaca-hover); }

.kartu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kartu-head small { color: var(--teks-3); font-weight: 600; }
.kartu-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.kartu-judul h3 { font-size: 0.98rem; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.kartu-judul small { color: var(--teks-3); }

.ikon-bulat {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lapis); color: var(--hitam); border: 1px solid var(--garis);
  transition: transform 0.45s var(--pegas);
}
.kartu:hover .ikon-bulat { transform: rotate(-12deg) scale(1.08); }
.ikon-bulat.hijau { background: var(--hijau-bg); color: var(--hijau); border-color: transparent; }
.ikon-bulat.merah { background: var(--merah-bg); color: var(--merah); border-color: transparent; }

.nominal-besar {
  font-family: var(--font-angka); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: 0;
  margin: 14px 0 10px; word-break: break-word;
}
.nominal-besar.minus { color: var(--merah); }
.nominal-sedang { font-family: var(--font-angka); font-weight: 700; font-size: 2.1rem; line-height: 1; margin: 14px 0 10px; }
.teks-hijau { color: var(--hijau); }
.teks-merah { color: var(--merah); }
.ket { color: var(--teks-2); font-size: 0.84rem; }

.grid-ringkasan, .grid-grafik, .grid-lainnya { display: grid; gap: 16px; }
.grid-ringkasan > *, .grid-grafik > *, .grid-lainnya > *, .filter-baris > * { min-width: 0; }

/* Kartu saldo: dompet putih dengan jahitan & tutup hitam */
.kartu-saldo {
  position: relative; overflow: hidden;
  padding: 22px 22px 18px;
  background: linear-gradient(150deg, #FFFFFF 0%, #F6F1EC 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 30px 30px 24px 24px;
  box-shadow: 0 16px 44px rgba(40, 30, 25, 0.25);
}
.kartu-saldo:hover { background: linear-gradient(150deg, #FFFFFF 0%, #FBF7F3 100%); }
.kartu-saldo::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1.5px dashed rgba(20, 18, 16, 0.14); border-radius: 23px 23px 18px 18px;
}
.dompet-flap {
  position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
  width: 62px; height: 58px; border-radius: 999px 0 0 999px;
  background: var(--hitam);
  box-shadow: -6px 6px 16px rgba(20, 18, 16, 0.3);
  transition: transform 0.45s var(--pegas), width 0.45s var(--pegas);
}
.dompet-flap::after {
  content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--putih); box-shadow: inset 0 0 0 4px var(--pasir-muda);
}
.kartu-saldo:hover .dompet-flap { width: 72px; transform: translateY(-50%) translateX(-4px); }
.kartu-saldo > *:not(.dompet-flap) { position: relative; padding-right: 62px; }
.kartu-saldo .sparkline { padding-right: 70px; }
.kartu-saldo .ind.netral { background: #F1ECE6; }

.sparkline { height: 56px; margin-top: 10px; }

/* Indikator naik/turun */
.indikator { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 26px; }
.ind {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 99px; font-size: 0.76rem; font-weight: 700;
  animation: pop 0.5s var(--pegas) both 0.2s;
}
.ind svg { width: 14px; height: 14px; }
.ind.baik { background: var(--hijau-bg); color: var(--hijau); }
.ind.buruk { background: var(--merah-bg); color: var(--merah); }
.ind.netral { background: var(--lapis); color: var(--teks-2); font-weight: 600; }
.ind-ket { font-size: 0.74rem; color: var(--teks-3); }
.ind.kecil { padding: 2px 8px; font-size: 0.7rem; }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } }

/* ---------- 8. Grafik ---------- */
.wadah-donat { position: relative; height: 220px; }
.wadah-garis { position: relative; height: 260px; }
.tengah-donat { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.tengah-donat small { color: var(--teks-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.tengah-donat strong { font-family: var(--font-angka); font-size: 1.8rem; font-weight: 800; line-height: 1; }

.legenda { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.legenda li {
  display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; font-size: 0.84rem;
  animation: naik 0.5s var(--halus) both;
}
.legenda .titik { width: 10px; height: 10px; border-radius: 50%; }
.legenda .persen { color: var(--teks-3); font-size: 0.76rem; min-width: 42px; text-align: right; }

/* ---------- 9. Banner tabungan (gaya "NEW · COSMIC SET 23↗") ---------- */
.banner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
  padding: 12px 14px 12px 12px; border-radius: 999px;
  transition: transform 0.35s var(--halus), background 0.3s;
}
.banner:hover { transform: translateY(-3px); background: var(--kaca-hover); }
.banner-foto {
  position: relative; width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, color-mix(in srgb, var(--warna) 45%, #E8D5C0));
  border: 1px solid var(--garis);
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.08);
}
.banner-foto svg { width: 30px; height: 30px; color: color-mix(in srgb, var(--warna) 70%, #000); }
.banner-foto .lup {
  position: absolute; right: -4px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--hitam); color: var(--putih);
}
.banner-foto .lup svg { width: 14px; height: 14px; color: var(--putih); }
.banner-judul {
  font-size: 1.3rem; font-weight: 500; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--putih); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
}
.banner-judul b { font-weight: 500; color: var(--hitam); text-shadow: none; }
.banner-meta { display: none; gap: 28px; }
.banner-meta span { display: block; }
.banner-panah {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.8); color: var(--putih);
  transition: transform 0.4s var(--pegas), background 0.3s, color 0.3s;
}
.banner-panah svg { width: 24px; height: 24px; stroke-width: 1.5; }
.banner:hover .banner-panah { background: var(--putih); color: var(--hitam); transform: rotate(45deg); }

/* ---------- 10. Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font-weight: 700; font-size: 0.86rem; white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform 0.25s var(--pegas), box-shadow 0.25s, background 0.25s;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.95); }
.btn svg { transition: transform 0.35s var(--pegas); }
.btn:hover svg { transform: scale(1.12); }
.btn[data-aksi^="tambah"]:hover svg { transform: rotate(90deg); }

/* Pil hitam (seperti "Add to cart") */
.btn-utama { background: var(--hitam); color: var(--putih); box-shadow: 0 8px 20px rgba(20, 18, 16, 0.25); }
.btn-utama:hover { box-shadow: 0 12px 26px rgba(20, 18, 16, 0.35); }
/* Pil putih (seperti "Log in") */
.btn-kaca { background: var(--putih); color: var(--hitam); box-shadow: 0 6px 16px rgba(40, 30, 25, 0.1); }
.btn-kaca:hover { background: #FBF8F5; }
.btn-bahaya { background: var(--merah); color: var(--putih); }
.btn-bahaya:hover { background: #9E3B24; }
.btn-kecil { padding: 8px 14px; font-size: 0.78rem; }

/* Pil dengan ikon bulat di kanan: "Tambah (+)" */
.btn-ikon-bulat { padding: 5px 5px 5px 20px; gap: 14px; }
.btn-ikon-bulat .bulat {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Efek riak saat tombol diklik */
.riak {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0); animation: riak 0.6s ease-out forwards;
}
.btn-kaca .riak, .ikon-btn .riak, .tombol-backup .riak, .nav-item.aktif .riak { background: rgba(20, 18, 16, 0.12); }
@keyframes riak { to { transform: scale(4); opacity: 0; } }

.ikon-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--teks-2); position: relative; overflow: hidden;
  transition: background 0.2s, color 0.2s, transform 0.3s var(--pegas);
}
.ikon-btn:hover { background: var(--putih); color: var(--hitam); transform: scale(1.08); }
.ikon-btn:active { transform: scale(0.88); }
.ikon-btn.bahaya:hover { background: var(--merah-bg); color: var(--merah); }
.ikon-btn.bahaya:hover svg, .ikon-btn[data-aksi^="edit"]:hover svg { animation: goyang 0.4s ease-in-out; }
@keyframes goyang { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }

.link { display: inline-flex; align-items: center; gap: 2px; color: var(--hitam); font-weight: 700; font-size: 0.8rem; }
.link svg { width: 16px; height: 16px; transition: transform 0.3s var(--pegas); }
.link:hover svg { transform: translateX(4px); }

.tombol-grup { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
:focus-visible { outline: 2px solid var(--hitam); outline-offset: 2px; }

/* ---------- 11. Input ---------- */
.input {
  width: 100%; min-width: 0; padding: 12px 18px;
  background: var(--kaca-input); border: 1px solid var(--garis); border-radius: 999px;
  color: var(--teks); font: inherit; font-size: 0.92rem;
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.input::placeholder { color: var(--teks-3); }
.input:focus { outline: none; border-color: var(--hitam); background: var(--putih); box-shadow: 0 0 0 4px rgba(20, 18, 16, 0.08); }
.input.salah { border-color: var(--merah); animation: getar 0.4s; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F2A22' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.input-nominal { font-family: var(--font-angka); font-size: 2rem; font-weight: 800; padding: 12px 22px; border-radius: 22px; }

@keyframes getar { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.field { display: grid; gap: 6px; }
.field > span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teks-2); padding-left: 4px; }
.pesan-error { color: var(--merah); font-size: 0.78rem; min-height: 1em; font-weight: 600; padding-left: 4px; }
.pratinjau { font-size: 0.84rem; color: var(--teks-2); padding: 12px 16px; border-radius: 18px; background: var(--lapis); }

/* Toggle jenis transaksi dengan penanda pil geser */
.toggle-jenis {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px; background: var(--lapis); border: 1px solid var(--garis);
}
.toggle-jenis::before {
  content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--hitam);
  transition: transform 0.4s var(--pegas);
}
.toggle-jenis[data-jenis="masuk"]::before { transform: translateX(100%); }
.toggle-jenis button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; font-weight: 700; font-size: 0.84rem; color: var(--teks-2); transition: color 0.3s;
}
.toggle-jenis[data-jenis="keluar"] [data-jenis="keluar"] { color: #FFB8A6; }
.toggle-jenis[data-jenis="masuk"] [data-jenis="masuk"] { color: #9EE6C0; }

/* Chip kategori */
.chip-kategori { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 99px;
  background: var(--lapis); border: 1px solid var(--garis);
  font-size: 0.8rem; font-weight: 600;
  transition: transform 0.3s var(--pegas), background 0.2s, color 0.2s;
  animation: pop 0.35s var(--pegas) both;
}
.chip svg { width: 16px; height: 16px; color: color-mix(in srgb, var(--warna) 75%, #000); transition: transform 0.35s var(--pegas); }
.chip:hover { transform: scale(1.03); background: var(--putih); }
.chip:hover svg { transform: rotate(-12deg) scale(1.15); }
.chip.aktif { background: var(--hitam); color: var(--putih); border-color: var(--hitam); transform: scale(1.04); }
.chip.aktif svg { color: var(--warna); }

/* Pemilih ikon & warna */
.pilih-ikon, .pilih-warna { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }
.pilih-ikon button {
  display: grid; place-items: center; height: 42px; border-radius: 50%;
  background: var(--lapis); border: 1px solid transparent;
  transition: transform 0.3s var(--pegas), background 0.2s;
}
.pilih-ikon button:hover { transform: scale(1.12); background: var(--putih); }
.pilih-ikon button.aktif { background: var(--hitam); color: var(--putih); transform: scale(1.08); }
.pilih-warna button {
  height: 34px; border-radius: 50%; background: var(--warna); border: 3px solid transparent;
  transition: transform 0.3s var(--pegas), border-color 0.2s;
}
.pilih-warna button:hover { transform: scale(1.15); }
.pilih-warna button.aktif { border-color: var(--putih); transform: scale(1.15); box-shadow: 0 0 0 2px var(--hitam); }

/* ---------- 12. Daftar transaksi ---------- */
.list-trx { display: grid; gap: 4px; }
.item-trx {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 10px; border-radius: 22px;
  transition: background 0.2s, transform 0.3s var(--halus);
}
.item-trx:hover { background: var(--lapis); transform: translateX(4px); }
.item-trx .info { min-width: 0; }
.item-trx .info strong { display: block; font-size: 0.9rem; }
.item-trx .info small { display: block; color: var(--teks-3); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-trx .nominal { font-weight: 800; font-size: 0.9rem; text-align: right; white-space: nowrap; }
.nominal.masuk { color: var(--hijau); }
.nominal.keluar { color: var(--merah); }
.item-trx .aksi { display: flex; gap: 2px; }

/* Di HP tombol edit/hapus turun ke bawah nominal */
.item-trx.dengan-aksi { grid-template-rows: auto auto; row-gap: 0; }
.item-trx.dengan-aksi .ikon-kat, .item-trx.dengan-aksi .info { grid-row: 1 / 3; }
.item-trx.dengan-aksi .aksi { grid-column: 3; justify-content: flex-end; margin-right: -6px; }
.item-trx.dengan-aksi .aksi .ikon-btn { width: 30px; height: 30px; }

.ikon-kat {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--warna) 22%, rgba(255, 255, 255, 0.6));
  color: color-mix(in srgb, var(--warna) 72%, #000);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.4s var(--pegas);
}
.item-trx:hover .ikon-kat, .baris-kategori:hover .ikon-kat, .kartu:hover > .tabungan-head .ikon-kat { transform: rotate(-10deg) scale(1.08); }

.baru { animation: muncul-baru 0.9s var(--pegas) both; }
@keyframes muncul-baru {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.95); background: rgba(255, 255, 255, 0.9); }
  50%  { opacity: 1; transform: none; background: rgba(255, 255, 255, 0.7); }
  100% { background: transparent; }
}
.keluar-hapus { animation: hilang 0.35s ease-in forwards; }
@keyframes hilang { to { opacity: 0; transform: translateX(40px) scale(0.95); } }

.grup-tanggal { padding: 12px; margin-bottom: 12px; animation: naik 0.5s var(--halus) both; }
.grup-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--garis-halus);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teks-2);
}

/* Filter */
.filter { display: grid; gap: 10px; padding: 14px; }
.filter:hover { transform: none; }
.cari { position: relative; display: block; }
.cari svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--teks-3); transition: color 0.2s, transform 0.3s var(--pegas); }
.cari .input { padding-left: 44px; }
.cari:focus-within svg { color: var(--hitam); transform: translateY(-50%) scale(1.15); }
.filter-baris { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filter-baris select:first-child { grid-column: 1 / -1; }

.ringkas-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.pil {
  padding: 6px 14px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--kaca); border: 1px solid var(--garis);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pil.hijau { color: var(--hijau); }
.pil.merah { color: var(--merah); }

/* ---------- 13. Anggaran & tabungan ---------- */
.bar-atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bar-atas .ket { color: var(--putih); font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2); }
.pilih-bulan {
  display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 999px;
  background: var(--kaca); border: 1px solid var(--garis);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pilih-bulan strong { min-width: 130px; text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

.daftar-anggaran { display: grid; gap: 12px; }
.anggaran-item { display: grid; gap: 12px; }
.anggaran-atas { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; }
.anggaran-atas .info strong { display: block; }
.anggaran-atas .info small { color: var(--teks-3); font-size: 0.78rem; }
.anggaran-bawah { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--teks-2); flex-wrap: wrap; }
.status { font-weight: 700; }
.status.aman { color: var(--hijau); }
.status.waspada { color: var(--kuning); }
.status.lewat { color: var(--merah); }

.bar { height: 8px; border-radius: 99px; background: rgba(20, 18, 16, 0.08); overflow: hidden; }
.bar > span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--hijau);
  transition: width 1s var(--halus), background 0.4s;
  position: relative; overflow: hidden;
}
.bar > span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%); animation: kilau-bar 2.4s ease-in-out infinite;
}
@keyframes kilau-bar { to { transform: translateX(100%); } }
.bar.waspada > span { background: #D09030; }
.bar.lewat > span { background: var(--merah); animation: kedip 1.6s ease-in-out infinite; }
.bar.besar { height: 12px; }
.bar.besar > span { background: var(--hitam); }
.bar.besar.aman > span { background: var(--hijau); }
.bar.besar.waspada > span { background: #D09030; }
.bar.besar.lewat > span { background: var(--merah); }
@keyframes kedip { 50% { opacity: 0.7; } }

.grid-tabungan { display: grid; gap: 16px; }
.tabungan-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin-bottom: 16px; }
.tabungan-head strong { display: block; }
.tabungan-head small { color: var(--teks-3); font-size: 0.78rem; }
.tabungan-angka { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tabungan-angka strong { font-family: var(--font-angka); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.tabungan-angka span { color: var(--teks-2); font-size: 0.82rem; font-weight: 600; }
.tabungan-bawah { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.8rem; color: var(--teks-2); }
.tabungan-tombol { display: flex; gap: 8px; margin-top: 16px; }
.tabungan-tombol .btn { flex: 1; }
.lencana {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 99px;
  background: var(--hijau-bg); color: var(--hijau); font-size: 0.72rem; font-weight: 700;
  animation: pop 0.5s var(--pegas) both, goyang-pelan 2.5s ease-in-out infinite 1s;
}
@keyframes goyang-pelan { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-6deg); } 96% { transform: rotate(6deg); } }

/* ---------- 14. Halaman Lainnya ---------- */
.list-kategori { display: grid; gap: 6px; }
.baris-kategori {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
  padding: 8px; border-radius: 22px; transition: background 0.2s;
  animation: naik 0.5s var(--halus) both;
}
.baris-kategori:hover { background: var(--lapis); }
.baris-kategori small { display: block; color: var(--teks-3); font-size: 0.76rem; }
.tag { font-size: 0.6rem; padding: 2px 8px; border-radius: 99px; background: var(--hitam); color: var(--putih); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-left: 6px; vertical-align: middle; }

.info-saldo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.info-saldo div { padding: 14px 16px; border-radius: 22px; background: var(--lapis); }
.info-saldo small { display: block; color: var(--teks-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.info-saldo strong { font-family: var(--font-angka); font-size: 1.6rem; font-weight: 800; line-height: 1.1; }

.grid-backup { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tombol-backup {
  display: grid; justify-items: start; gap: 2px; padding: 16px; border-radius: 22px; text-align: left;
  background: var(--lapis); border: 1px solid var(--garis);
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--pegas), background 0.2s;
}
.tombol-backup svg { width: 22px; height: 22px; margin-bottom: 8px; transition: transform 0.4s var(--pegas); }
.tombol-backup span { font-weight: 700; font-size: 0.86rem; }
.tombol-backup small { color: var(--teks-3); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tombol-backup:hover { transform: scale(1.03); background: var(--putih); }
.tombol-backup:hover svg { transform: translateY(-3px) scale(1.15); }
.tombol-backup:active { transform: scale(0.96); }

/* ---------- 15. Empty state ---------- */
.kosong { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 16px; }
.kosong-ikon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--lapis); border: 1px solid var(--garis); margin-bottom: 6px;
  animation: ambang 3s ease-in-out infinite;
}
.kosong-ikon svg { width: 30px; height: 30px; }
.kosong h4 { font-size: 1rem; }
.kosong p { color: var(--teks-2); font-size: 0.84rem; max-width: 300px; }
.kosong .btn { margin-top: 8px; }
.kosong.mini { padding: 20px 8px; height: 100%; align-content: center; }
.kosong.mini .kosong-ikon { width: 54px; height: 54px; }
.kosong.mini .kosong-ikon svg { width: 22px; height: 22px; }
@keyframes ambang { 50% { transform: translateY(-8px) rotate(4deg); } }

/* ---------- 16. Modal ---------- */
.modal-latar {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(40, 30, 25, 0.35);
  opacity: 0; transition: opacity 0.25s;
}
.modal-latar.tampil { opacity: 1; }
/* Modal yang disembunyikan tidak boleh menghalangi klik */
.modal-latar[hidden] { display: none; }
[hidden] { display: none !important; }
.modal {
  width: 100%; max-height: 92vh; overflow-y: auto;
  border-radius: 30px 30px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.4s var(--halus);
}
.modal-latar.tampil .modal { transform: none; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-head h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.modal-isi { display: grid; gap: 16px; }
.modal-isi > * { animation: naik 0.45s var(--halus) both; }
.modal-isi > *:nth-child(2) { animation-delay: 0.05s; }
.modal-isi > *:nth-child(3) { animation-delay: 0.1s; }
.modal-isi > *:nth-child(4) { animation-delay: 0.15s; }
.modal-isi > *:nth-child(5) { animation-delay: 0.2s; }
.modal-aksi { display: flex; gap: 10px; margin-top: 22px; }
.modal-aksi .btn { flex: 1; padding: 13px 20px; }

.modal-kecil { text-align: center; }
.modal-kecil h3 { margin-bottom: 6px; }
.konf-ikon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--merah-bg); color: var(--merah);
}
.modal-latar.tampil .konf-ikon { animation: goyang 0.5s ease-in-out 0.25s; }
.konf-ikon svg { width: 26px; height: 26px; }

/* ---------- 17. Toast ---------- */
.toast-wadah {
  position: fixed; z-index: 200; left: 50%; top: 16px; transform: translateX(-50%);
  display: grid; gap: 8px; width: min(92vw, 380px); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  background: var(--hitam); color: var(--putih);
  box-shadow: var(--bayangan-angkat);
  font-size: 0.84rem; font-weight: 600;
  animation: toast-masuk 0.45s var(--pegas) both;
}
.toast.sukses svg { color: #9EE6C0; }
.toast.gagal svg { color: #FFB8A6; }
.toast.keluar { animation: toast-keluar 0.3s ease-in forwards; }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(-20px) scale(0.9); } }
@keyframes toast-keluar { to { opacity: 0; transform: translateY(-12px) scale(0.95); } }

/* ---------- 18. Tablet ---------- */
@media (min-width: 600px) {
  .kepala { grid-template-columns: auto 1fr auto; padding: 22px 26px; }
  .kepala-nomor { font-size: 6.5rem; }
  .kepala-teks h1 { font-size: 1.9rem; }
  .kepala-meta { grid-column: 3; grid-row: 1 / 3; grid-template-columns: repeat(2, minmax(110px, auto)); padding-top: 0; margin-top: 0; border-top: 0; gap: 12px 28px; }
  .kepala .logo-hp { display: none; }
  .kepala-teks { padding-right: 0; }

  .grid-ringkasan { grid-template-columns: repeat(2, 1fr); }
  .kartu-saldo { grid-column: 1 / -1; }
  .grid-tabungan { grid-template-columns: repeat(2, 1fr); }
  .filter-baris { grid-template-columns: repeat(3, 1fr); }
  .filter-baris select:first-child { grid-column: auto; }
  .grid-backup { grid-template-columns: repeat(4, 1fr); }

  .banner { padding: 14px 18px 14px 14px; gap: 24px; }
  .banner-foto { width: 92px; height: 92px; }
  .banner-judul { font-size: 2rem; }
  .banner-panah { width: 68px; height: 68px; }

  .item-trx.dengan-aksi { grid-template-columns: 44px 1fr auto auto; grid-template-rows: auto; }
  .item-trx.dengan-aksi .ikon-kat, .item-trx.dengan-aksi .info { grid-row: auto; }
  .item-trx.dengan-aksi .aksi { grid-column: auto; margin-right: 0; }
  .item-trx.dengan-aksi .aksi .ikon-btn { width: 36px; height: 36px; }

  .modal-latar { align-items: center; padding: 20px; }
  .modal { max-width: 480px; border-radius: 30px; transform: translateY(24px) scale(0.96); opacity: 0; transition: transform 0.35s var(--pegas), opacity 0.25s; }
  .modal-kecil { max-width: 380px; }
  .modal-latar.tampil .modal { opacity: 1; }
}

/* ---------- 19. Laptop: navbar pil di atas ---------- */
@media (min-width: 900px) {
  .konten { padding: 108px 32px 56px; }
  .fab { display: none; }

  .sidebar {
    top: 20px; bottom: auto; left: 0; right: 0; margin-inline: auto;
    width: min(1176px, calc(100% - 64px));
    display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 24px;
    animation: fade-rise 0.8s ease-out both;
  }
  .sidebar .logo, .sidebar .nav-meta { display: flex; }
  .sidebar .btn-tambah-sidebar { display: inline-flex; }
  .nav { flex: 1; justify-content: flex-start; gap: 4px; }
  .nav-item { flex: 0 0 auto; flex-direction: row; gap: 8px; padding: 10px 16px; font-size: 0.8rem; letter-spacing: 0.01em; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
  .nav-item svg { width: 17px; height: 17px; }
  .nav-item:hover { color: var(--putih); }
  .nav-item.aktif:hover { color: var(--hitam); }
  .nav-meta { flex-direction: column; align-items: flex-end; line-height: 1.35; color: rgba(255, 255, 255, 0.85); font-size: 0.58rem; }
  .btn-tambah-sidebar { background: var(--putih); color: var(--hitam); }
  .btn-tambah-sidebar .bulat { background: var(--hitam); color: var(--putih); border: 0; }

  .kepala { padding: 26px 32px; }
  .kepala-nomor { font-size: 8rem; }
  .kepala-teks h1 { font-size: 2.3rem; }
  .kepala-meta { grid-template-columns: repeat(3, minmax(110px, auto)); }

  .grid-ringkasan { grid-template-columns: 1.45fr 1fr 1fr; }
  .kartu-saldo { grid-column: auto; }
  .grid-grafik { grid-template-columns: 1fr 1.6fr; }
  .grid-lainnya { grid-template-columns: 1fr 1fr; }
  .span-penuh { grid-column: 1 / -1; }
  .grid-tabungan { grid-template-columns: repeat(3, 1fr); }
  .daftar-anggaran { grid-template-columns: 1fr 1fr; }
  .wadah-garis { height: 300px; }

  .banner-meta { display: flex; }
  .banner-judul { font-size: 2.4rem; }
}

/* Hormati pengguna yang ingin animasi minimal */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================
   20. Tema biru-putih: penyesuaian komponen
   ========================================================== */
/* Latar: kisi halus + cahaya biru lembut */
.latar {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 70%);
}
.matahari { left: 80%; top: 8%; width: 640px; height: 420px;
  background: radial-gradient(ellipse at center, rgba(252, 248, 228, 0.7), transparent 65%); filter: blur(30px); }
.awan { background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFD6CC 70%); height: auto; aspect-ratio: 1; border-radius: 50%; filter: none; opacity: 0.85;
  box-shadow: 0 18px 30px rgba(31, 42, 34, 0.18); animation: melayang-batu 9s ease-in-out infinite alternate; }
@keyframes melayang-batu { to { transform: translateY(-24px) rotate(8deg); } }
.a1 { width: 54px; top: 9%; left: 6%; }
.a2 { width: 80px; top: 30%; left: 90%; animation-duration: 12s; }
.a3 { width: 36px; top: 62%; left: 3%; animation-duration: 7s; }
.bukit { display: none; }

/* Kepala halaman = hero biru bergradasi */
.kepala {
  background: var(--gradasi-biru); color: var(--putih); border: 0; overflow: hidden;
  box-shadow: 0 18px 40px rgba(47, 93, 58, 0.28);
}
.kepala::before, .kepala::after {
  content: ""; position: absolute; pointer-events: none; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06);
  transform: rotate(-18deg);
}
.kepala::before { width: 180px; height: 180px; right: -40px; bottom: -90px; }
.kepala::after { width: 130px; height: 130px; right: 120px; top: -80px; }
.kepala > * { position: relative; z-index: 1; }
.kepala .logo-hp { position: absolute; }
.kepala-nomor, .kepala .logo-hp { color: var(--putih); }
.kepala .mikro, .kepala-meta dt { color: rgba(255, 255, 255, 0.72); }
.kepala-meta { border-top-color: rgba(255, 255, 255, 0.2); }

/* Navigasi: pil putih, menu aktif pil biru */
.sidebar { background: rgba(255, 255, 255, 0.88); border: 1px solid var(--garis); box-shadow: var(--bayangan-angkat); }
.nav-item { color: var(--teks-2); }
.nav-item.aktif, .nav-item.aktif:hover { color: var(--putih); }
.nav-penanda { background: var(--gradasi-biru); box-shadow: 0 6px 16px rgba(47, 93, 58, 0.35); }
.sidebar .logo-tanda { color: var(--biru); }
@media (min-width: 900px) {
  .nav-item { color: var(--teks-2); }
  .nav-item:hover { color: var(--biru); }
  .nav-item.aktif:hover { color: var(--putih); }
  .nav-meta { color: var(--teks-3); }
  .btn-tambah-sidebar { background: var(--hitam); color: var(--putih); }
  .btn-tambah-sidebar .bulat { background: var(--gradasi-biru); }
}

/* Tombol */
.btn-utama { background: var(--gradasi-biru); color: var(--putih); box-shadow: 0 8px 20px rgba(47, 93, 58, 0.3); }
.btn-utama:hover { box-shadow: 0 12px 26px rgba(47, 93, 58, 0.4); }
.btn-kaca { background: var(--putih); color: var(--hitam); border: 1px solid var(--garis); box-shadow: 0 4px 12px rgba(47, 93, 58, 0.06); }
.btn-kaca:hover { background: var(--putih); color: var(--biru); }
.fab { background: var(--gradasi-biru); box-shadow: 0 12px 30px rgba(47, 93, 58, 0.45); }
.link { color: var(--biru); }
:focus-visible { outline-color: var(--biru); }
.ikon-btn:hover { background: var(--biru-muda); color: var(--biru); }
.ikon-bulat { background: var(--biru-muda); color: var(--biru); border-color: transparent; }

/* Kartu saldo: dompet putih, tutup biru */
.kartu-saldo { background: var(--putih); border-color: var(--garis); box-shadow: 0 18px 44px rgba(47, 93, 58, 0.14); }
.kartu-saldo:hover { background: var(--putih); }
.kartu-saldo::before { border-color: rgba(47, 93, 58, 0.18); }
.dompet-flap { background: var(--gradasi-biru); box-shadow: -6px 6px 16px rgba(47, 93, 58, 0.35); }
.kartu-saldo .ind.netral { background: var(--lapis); }

/* Input & pilihan */
.input:focus { border-color: var(--biru); box-shadow: 0 0 0 4px rgba(47, 93, 58, 0.12); }
.toggle-jenis::before { background: var(--gradasi-biru); }
.toggle-jenis[data-jenis="keluar"] [data-jenis="keluar"],
.toggle-jenis[data-jenis="masuk"] [data-jenis="masuk"] { color: var(--putih); }
.chip.aktif { background: var(--biru); border-color: var(--biru); }
.chip.aktif svg { color: var(--putih); }
.pilih-ikon button.aktif { background: var(--biru); }
.pilih-warna button.aktif { box-shadow: 0 0 0 2px var(--biru); }
.tag { background: var(--biru-muda); color: var(--biru); }
.cari:focus-within svg { color: var(--biru); }

/* Progress */
.bar { background: #E3E7DC; }
.bar.besar > span { background: var(--gradasi-biru); }

/* Banner tabungan = CTA biru */
.banner { background: var(--gradasi-biru); border: 0; box-shadow: 0 18px 40px rgba(47, 93, 58, 0.3); }
.banner:hover { background: var(--gradasi-biru); }
.banner-judul b { color: var(--putih); font-weight: 700; }
.banner .mikro { color: rgba(255, 255, 255, 0.8); }
.banner-foto { border-color: rgba(255, 255, 255, 0.6); }
.banner:hover .banner-panah { color: var(--biru); }

/* Lain-lain */
.bar-atas .ket { color: var(--teks-2); text-shadow: none; }
.modal-latar { background: rgba(15, 27, 61, 0.3); }
.kaca-pekat { background: rgba(255, 255, 255, 0.97); }
.toast.sukses svg { color: #4ADE80; }
.toast.gagal svg { color: #FB7185; }
.btn-kaca .riak, .ikon-btn .riak, .tombol-backup .riak { background: rgba(47, 93, 58, 0.15); }
.tombol-backup svg { color: var(--biru); }
.kosong-ikon { color: var(--biru); background: var(--biru-muda); border-color: transparent; }

/* ---------- 21. Semua kartu berwarna cokelat (kecuali kartu saldo & bagian tabungan) ---------- */
.kartu.kaca:not(.kartu-tabungan), .grup-tanggal {
  /* Variabel warna diganti di dalam kartu agar teks & komponen tetap terbaca */
  --teks: #FFFFFF;
  --teks-2: rgba(255, 255, 255, 0.8);
  --teks-3: rgba(255, 255, 255, 0.62);
  --lapis: rgba(255, 255, 255, 0.14);
  --garis: rgba(255, 255, 255, 0.22);
  --garis-halus: rgba(255, 255, 255, 0.16);
  --kaca-input: rgba(255, 255, 255, 0.14);
  --hijau: #86EFAC;
  --hijau-bg: rgba(134, 239, 172, 0.2);
  --merah: #FECACA;
  --merah-bg: rgba(254, 202, 202, 0.2);
  --kuning: #FDE68A;
  --biru: #FFFFFF;
  --biru-muda: rgba(255, 255, 255, 0.18);
  --gradasi-kartu: linear-gradient(135deg, #5C3A21 0%, #8B5A2B 50%, #C08A5B 100%);
  background: var(--gradasi-kartu);
  color: var(--teks);
  border: 0; position: relative; overflow: hidden;
  box-shadow: 0 18px 40px rgba(92, 58, 33, 0.28);
}
.kartu.kaca:not(.kartu-tabungan):hover { background: var(--gradasi-kartu); box-shadow: 0 22px 46px rgba(92, 58, 33, 0.38); }
.kartu-keluar { --gradasi-kartu: linear-gradient(135deg, #3E2614 0%, #6B4423 50%, #A0693D 100%); }
.grup-tanggal { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Hiasan kotak transparan di sudut kartu ringkasan */
.kartu-masuk::after, .kartu-keluar::after {
  content: ""; position: absolute; width: 140px; height: 140px; right: -40px; bottom: -60px;
  border-radius: 28px; transform: rotate(-18deg); pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.07);
}

/* Komponen di dalam kartu cokelat */
.kartu.kaca:not(.kartu-tabungan) .ikon-bulat { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .ind.baik { background: #DCFCE7; color: #15803D; }
.kartu.kaca:not(.kartu-tabungan) .ind.buruk { background: #FFE4E6; color: #BE123C; }
.kartu.kaca:not(.kartu-tabungan) .link { color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .input { color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .input:focus { background: rgba(255, 255, 255, 0.24); border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15); }
.kartu.kaca:not(.kartu-tabungan) select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.kartu.kaca:not(.kartu-tabungan) select.input option { color: #1F2A22; background: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .cari:focus-within svg { color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .bar { background: rgba(255, 255, 255, 0.2); }
.kartu.kaca:not(.kartu-tabungan) .bar.besar > span { background: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .bar.besar.aman > span { background: #86EFAC; }
.kartu.kaca:not(.kartu-tabungan) .bar.besar.waspada > span { background: #FDE68A; }
.kartu.kaca:not(.kartu-tabungan) .bar.besar.lewat > span { background: #FCA5A5; }
.kartu.kaca:not(.kartu-tabungan) .bar.waspada > span { background: #FDE68A; }
.kartu.kaca:not(.kartu-tabungan) .bar.lewat > span { background: #FCA5A5; }
.kartu.kaca:not(.kartu-tabungan) .bar > span { background: #86EFAC; }
.kartu.kaca:not(.kartu-tabungan) .tombol-backup:hover { background: rgba(255, 255, 255, 0.26); }
.kartu.kaca:not(.kartu-tabungan) .tombol-backup svg { color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .tag { background: rgba(255, 255, 255, 0.22); color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .kosong-ikon { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .ikon-btn:hover, .grup-tanggal .ikon-btn:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .ikon-btn.bahaya:hover, .grup-tanggal .ikon-btn.bahaya:hover { background: rgba(254, 202, 202, 0.25); color: #FECACA; }
.kartu.kaca:not(.kartu-tabungan) .item-trx:hover, .grup-tanggal .item-trx:hover, .kartu.kaca:not(.kartu-tabungan) .baris-kategori:hover { background: rgba(255, 255, 255, 0.12); }
.kartu.kaca:not(.kartu-tabungan) .ikon-kat, .grup-tanggal .ikon-kat {
  background: color-mix(in srgb, var(--warna) 35%, #FFFFFF); border-color: rgba(255, 255, 255, 0.6);
}
/* Tombol di dalam kartu: putih dengan teks cokelat */
.kartu.kaca:not(.kartu-tabungan) .btn-utama { background: #FFFFFF; color: #6B4423; box-shadow: 0 8px 20px rgba(60, 35, 15, 0.25); }
.kartu.kaca:not(.kartu-tabungan) .btn-kaca { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.kartu.kaca:not(.kartu-tabungan) .btn-kaca:hover { background: rgba(255, 255, 255, 0.26); color: #FFFFFF; }
.kartu.kaca:not(.kartu-tabungan) .riak, .grup-tanggal .riak { background: rgba(255, 255, 255, 0.35); }

/* ---------- 22. Pilihan jenis transaksi: merah = pengeluaran, hijau = pemasukan ---------- */
.toggle-jenis::before { background: linear-gradient(135deg, #B42318, #E5484D); box-shadow: 0 6px 14px rgba(180, 35, 24, 0.3); }
.toggle-jenis[data-jenis="masuk"]::before { background: linear-gradient(135deg, #15803D, #22C55E); box-shadow: 0 6px 14px rgba(21, 128, 61, 0.3); }
.toggle-jenis button { font-size: 0.9rem; }
/* Tombol simpan transaksi berwarna sesuai jenis */
#modalSimpan[data-jenis="keluar"] { background: linear-gradient(135deg, #B42318, #E5484D); box-shadow: 0 8px 20px rgba(180, 35, 24, 0.3); }
#modalSimpan[data-jenis="masuk"] { background: linear-gradient(135deg, #15803D, #22C55E); box-shadow: 0 8px 20px rgba(21, 128, 61, 0.3); }

/* ---------- 23. Layar login ---------- */
body.belum-login .sidebar, body.belum-login .fab, body.belum-login .konten { display: none; }
.login {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center; padding: 20px; overflow-y: auto;
}
.login-kartu {
  width: 100%; max-width: 420px; padding: 30px 26px 24px;
  background: rgba(255, 255, 255, 0.94); color: #1F2A22;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 30px;
  box-shadow: 0 24px 60px rgba(31, 42, 34, 0.28);
  animation: fade-rise 0.8s ease-out both;
}
.login-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-logo .logo-tanda { color: var(--biru); font-size: 2rem; }
.login-kartu h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; animation: fade-rise 0.8s ease-out 0.1s both; }
.login-kartu .ket { margin-top: 4px; animation: fade-rise 0.8s ease-out 0.2s both; }

.login-tab {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 20px 0 18px;
  padding: 4px; border-radius: 999px; background: var(--lapis); border: 1px solid var(--garis);
}
.login-tab::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 999px; background: var(--gradasi-biru); transition: transform 0.4s var(--pegas);
}
.login-kartu[data-mode="daftar"] .login-tab::before { transform: translateX(100%); }
.login-tab button { position: relative; z-index: 1; padding: 10px; font-weight: 700; font-size: 0.88rem; color: var(--teks-2); transition: color 0.3s; }
.login-tab button.aktif { color: #FFFFFF; }

#loginForm { display: grid; gap: 14px; }
#loginForm > * { animation: naik 0.5s var(--halus) both; }
.login-input { position: relative; }
.login-input > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--teks-3); pointer-events: none; z-index: 1; }
.login-input .input { padding-left: 44px; }
.login-input .lihat-sandi { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.login-input .lihat-sandi:hover { transform: translateY(-50%) scale(1.08); }
.login-input .input:focus { background: #FFFFFF; }
.ingat { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--teks-2); cursor: pointer; padding-left: 4px; }
.ingat input { width: 18px; height: 18px; accent-color: var(--biru); }
#loginPesan:empty { display: none; }
.login-tombol { width: 100%; padding: 14px 20px; font-size: 0.95rem; margin-top: 4px; }
.login-catatan { margin-top: 16px; text-align: center; font-size: 0.75rem; color: var(--teks-3); }

/* ---------- 24. Admin, layar memuat, & pelengkap login server ---------- */
.pemuat { position: fixed; inset: 0; z-index: 160; display: grid; place-content: center; justify-items: center; gap: 14px; }
.pemuat-bulat { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.4); border-top-color: var(--biru); animation: putar 0.8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
body:not(.belum-login) .pemuat { display: none; }
body { }
.login-catatan strong { color: var(--teks-2); }
.login-tombol:disabled { opacity: 0.7; cursor: wait; transform: none; }

.grid-admin-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.grid-admin-ringkas .kartu { padding: 16px; }
.grid-admin-ringkas .nominal-sedang { margin: 8px 0 0; }
.cari-admin { margin-bottom: 12px; }
.baris-pengguna {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px; border-radius: 22px; text-align: left;
  transition: background 0.2s, transform 0.3s var(--halus);
  animation: naik 0.5s var(--halus) both;
}
.baris-pengguna:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(4px); }
.baris-pengguna .info { min-width: 0; }
.baris-pengguna .info strong { display: block; font-size: 0.9rem; }
.baris-pengguna .info small { display: block; color: var(--teks-3); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); color: #FFFFFF; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em;
}
.angka-pengguna { text-align: right; }
.angka-pengguna strong { display: block; font-size: 0.9rem; white-space: nowrap; }
.angka-pengguna small { color: var(--teks-3); font-size: 0.74rem; }
.teks-kecil { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 0.86rem !important; font-weight: 700; word-break: break-word; }
.modal-lebar .modal { max-width: 640px; }
.admin-trx { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.baris-sederhana { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--lapis); font-size: 0.86rem; }
@media (max-width: 420px) { .grid-admin-ringkas .nominal-sedang { font-size: 1.6rem; } .grid-admin-ringkas .kartu { padding: 12px; } }
/* Navbar PC: sembunyikan teks kecil saat ruang sempit (misal ada menu Admin) */
@media (min-width: 900px) and (max-width: 1320px) {
  .sidebar .nav-meta { display: none; }
  .nav-item { padding: 10px 12px; }
}
.sidebar .btn-tambah-sidebar { flex-shrink: 0; }

/* Tombol hapus akun di detail admin */
.aksi-admin { display: flex; flex-wrap: wrap; gap: 10px; }
.aksi-admin .btn { flex: 1; min-width: 150px; }

/* ==========================================================
   25. Layar login bertema lampu gantung + robot
   (lampu mati → tarik tali → sorot hijau menyala)
   ========================================================== */
.login {
  --hijau-nyala: #2EE6A6;
  --hijau-nyala-2: #2DD4BF;
  --teks-login: #EAFBF4;
  background-color: #0B0E0D;
  /* tekstur titik-titik air */
  background-image:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.10) 0 3px, rgba(0, 0, 0, 0.35) 4px 7px, transparent 8px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.07) 0 5px, rgba(0, 0, 0, 0.30) 6px 11px, transparent 12px),
    radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.05) 0 2px, transparent 3px),
    radial-gradient(ellipse at center, #2A302F 0%, #0B0D0D 75%);
  background-size: 46px 52px, 83px 71px, 29px 33px, 100% 100%;
}
.login-adegan {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 14px;
  width: min(880px, 100%); padding: 14px; border-radius: 34px;
  background: linear-gradient(145deg, rgba(20, 60, 48, 0.55), rgba(8, 20, 18, 0.88));
  border: 1px solid rgba(110, 255, 200, 0.15);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(46, 230, 166, 0.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade-rise 0.8s ease-out both;
  transition: box-shadow 0.8s;
}
.login.menyala .login-adegan { box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 120px rgba(46, 230, 166, 0.16); }

/* ----- Ilustrasi kiri ----- */
.login-ilustrasi {
  position: relative; min-height: 250px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(46, 230, 166, 0.10), transparent 60%), linear-gradient(180deg, #0E2A22, #061210);
  border: 1px solid rgba(110, 255, 200, 0.12);
}
.lampu { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.lampu-kabel { position: absolute; left: -1px; top: 0; width: 2px; height: 46px; background: #111; }
.lampu-kap {
  position: absolute; top: 40px; left: -48px; width: 96px; height: 48px;
  background: linear-gradient(180deg, #4A5A54, #1D2622);
  clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%);
}
.lampu-kap::before { content: ""; position: absolute; left: 40%; top: 0; width: 20%; height: 8px; background: #111; }
.lampu-bohlam {
  position: absolute; top: 84px; left: -16px; width: 32px; height: 16px; border-radius: 0 0 20px 20px;
  background: #2B3A35; transition: background 0.4s, box-shadow 0.4s;
}
.lampu-cahaya {
  position: absolute; top: 92px; left: -190px; width: 380px; height: 460px; pointer-events: none;
  background: linear-gradient(180deg, rgba(46, 230, 166, 0.55), rgba(46, 230, 166, 0.14) 55%, transparent 90%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0; transition: opacity 0.6s; filter: blur(2px);
}
.login.menyala .lampu-bohlam { background: #E6FFF5; box-shadow: 0 0 18px 6px var(--hijau-nyala), 0 0 60px 22px rgba(46, 230, 166, 0.55); }
.login.menyala .lampu-cahaya { opacity: 1; animation: kedip-lampu 0.7s ease-out; }
@keyframes kedip-lampu { 0% { opacity: 0; } 15% { opacity: 0.9; } 25% { opacity: 0.2; } 40% { opacity: 1; } 55% { opacity: 0.5; } 100% { opacity: 1; } }

/* Tali lampu yang bisa ditarik */
.lampu-tali {
  position: absolute; top: 88px; left: calc(50% + 38px); width: 26px; height: 92px;
  display: flex; flex-direction: column; align-items: center; cursor: grab; z-index: 2;
  transform-origin: top center;
  animation: ayun-tali 3s ease-in-out infinite;
}
.lampu-tali:active { cursor: grabbing; }
.tali-garis { width: 2px; flex: 1; background: linear-gradient(180deg, #555, #BFE9DA); }
.tali-pegangan {
  width: 14px; height: 18px; border-radius: 7px; background: #DFF7EE;
  box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.25); transition: box-shadow 0.3s;
}
.lampu-tali:hover .tali-pegangan { box-shadow: 0 0 0 5px rgba(46, 230, 166, 0.4), 0 0 14px rgba(46, 230, 166, 0.6); }
.lampu-tali.ditarik { animation: tarik-tali 0.5s var(--pegas); }
@keyframes ayun-tali { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
@keyframes tarik-tali { 0% { transform: translateY(0); } 40% { transform: translateY(22px); } 100% { transform: translateY(0); } }

.petunjuk-tali {
  position: absolute; top: 186px; left: calc(50% + 22px); margin: 0;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(234, 251, 244, 0.7);
  animation: ambang 1.6s ease-in-out infinite; transition: opacity 0.4s;
}
.login.menyala .petunjuk-tali { opacity: 0; }

/* Robot maskot */
.robot {
  position: absolute; bottom: 34px; left: 50%; width: 112px; height: 96px; margin-left: -56px;
  animation: robot-melayang 3.2s ease-in-out infinite;
}
@keyframes robot-melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.robot-wajah {
  position: absolute; inset: 0 6px; border-radius: 46%;
  background: radial-gradient(circle at 40% 30%, #3B4F49, #121B19);
  border: 3px solid #2A4A40; transition: border-color 0.5s, box-shadow 0.5s;
}
.login.menyala .robot-wajah { border-color: var(--hijau-nyala); box-shadow: 0 0 22px rgba(46, 230, 166, 0.55), inset 0 0 18px rgba(46, 230, 166, 0.25); }
.robot-telinga {
  position: absolute; top: 26px; width: 16px; height: 40px; border-radius: 8px;
  background: #2A4A40; transition: background 0.5s;
}
.robot-telinga.kiri { left: 0; }
.robot-telinga.kanan { right: 0; }
.login.menyala .robot-telinga { background: var(--hijau-nyala); }
.robot-mata {
  position: absolute; top: 26px; width: 26px; height: 26px; border-radius: 50%; background: #FFFFFF;
  display: grid; place-items: center; overflow: hidden;
  transform: scaleY(0.15); opacity: 0.6;                /* lampu mati: robot tidur */
  transition: transform 0.35s var(--pegas), opacity 0.35s;
}
.robot-mata:nth-of-type(1) { left: 20px; }
.robot-mata:nth-of-type(2) { right: 20px; }
.login.menyala .robot-mata { transform: scaleY(1); opacity: 1; animation: kedip-mata 4s infinite 1s; }
.login .robot.tutup .robot-mata { transform: scaleY(0.12); animation: none; }
@keyframes kedip-mata { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.robot-pupil {
  width: 12px; height: 12px; border-radius: 50%; background: #0B1A16;
  transform: translate(var(--px, 0), var(--py, 0)); transition: transform 0.08s linear;
}
.robot-mulut {
  position: absolute; bottom: 16px; left: 50%; width: 34px; height: 14px; margin-left: -17px;
  border-bottom: 4px solid #FFFFFF; border-radius: 0 0 30px 30px; opacity: 0.6; transition: opacity 0.4s, height 0.3s;
}
.login.menyala .robot-mulut { opacity: 1; height: 16px; }
.robot.tutup .robot-mulut { height: 6px; }
.robot-bayangan {
  position: absolute; bottom: 18px; left: 50%; width: 90px; height: 12px; margin-left: -45px; border-radius: 50%;
  background: rgba(46, 230, 166, 0.25); filter: blur(6px); animation: bayangan-robot 3.2s ease-in-out infinite;
}
@keyframes bayangan-robot { 50% { transform: scaleX(0.8); opacity: 0.6; } }

/* ----- Kartu login kanan (kaca gelap) ----- */
.login .login-kartu {
  max-width: none; padding: 30px 28px 24px; color: var(--teks-login);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; box-shadow: none;
  transition: filter 0.7s;
}
.login:not(.menyala) .login-kartu { filter: brightness(0.6) saturate(0.6); }
.login .login-logo .logo-tanda { color: var(--hijau-nyala); }
.login .mikro { color: rgba(234, 251, 244, 0.6); }
.login .login-kartu h2 { color: #FFFFFF; font-size: 2rem; letter-spacing: -0.02em; }
.login .login-kartu h2 .sorot { color: var(--hijau-nyala); text-shadow: 0 0 18px rgba(46, 230, 166, 0.45); }
.login .login-kartu .ket { color: rgba(234, 251, 244, 0.65); }

.login .login-tab { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.12); }
.login .login-tab::before { background: linear-gradient(135deg, #34D399, var(--hijau-nyala-2)); box-shadow: 0 0 14px rgba(46, 230, 166, 0.4); }
.login .login-tab button { color: rgba(234, 251, 244, 0.6); }
.login .login-tab button.aktif { color: #06281D; }

.login .field > span { color: rgba(234, 251, 244, 0.75); }
.login .input {
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(110, 255, 200, 0.35); color: #FFFFFF; border-radius: 12px;
}
.login .input::placeholder { color: rgba(234, 251, 244, 0.38); }
.login .input:focus, .login .login-input .input:focus {
  background: rgba(0, 0, 0, 0.38); border-color: var(--hijau-nyala);
  box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18), 0 0 18px rgba(46, 230, 166, 0.25);
}
.login .login-input > svg { color: #7FF5C9; }
.login .lihat-sandi { color: rgba(234, 251, 244, 0.7); }
.login .lihat-sandi:hover { background: rgba(46, 230, 166, 0.15); color: #FFFFFF; }
.login .ingat { color: rgba(234, 251, 244, 0.75); }
.login .ingat input { accent-color: var(--hijau-nyala); }
.login .pesan-error { color: #FCA5A5; }
.login .login-tombol {
  background: linear-gradient(90deg, #34E3A6, var(--hijau-nyala-2)); color: #06281D;
  border-radius: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  box-shadow: 0 0 24px rgba(46, 230, 166, 0.45);
}
.login .login-tombol:hover { box-shadow: 0 0 34px rgba(46, 230, 166, 0.7); }
.login .login-catatan { color: rgba(234, 251, 244, 0.5); }
.login .login-catatan strong { color: #7FF5C9; }

@media (min-width: 760px) {
  .login-adegan { grid-template-columns: 340px minmax(0, 1fr); }
  .login-ilustrasi { min-height: 100%; }
  .robot { bottom: 46px; }
}
@media (max-width: 759px) {
  .login { align-items: start; }
  .login-ilustrasi { min-height: 300px; }
  .robot { bottom: 20px; }
  .lampu-tali { height: 78px; }
  .petunjuk-tali { top: 172px; }
  .robot-bayangan { bottom: 8px; }
  .lampu-cahaya { width: 300px; left: -150px; }
  .login .login-kartu { padding: 24px 20px 20px; }
  .login .login-kartu h2 { font-size: 1.65rem; }
}

/* ==========================================================
   26. Pilihan tema: Pink, Merah, Biru (masing-masing + putih)
   Tema "Asli" (hijau sage + kartu cokelat) = tanpa atribut data-tema.
   ========================================================== */
.kartu.kaca.kartu-keluar { --gradasi-kartu: linear-gradient(135deg, #3E2614 0%, #6B4423 50%, #A0693D 100%); }

:root[data-tema="pink"] {
  --t1: #BE185D; --t2: #DB2777; --t3: #F9A8D4;
  --tk1: #831843; --tk2: #BE185D; --tk3: #F472B6;
  --t-bg: #FFF0F7; --t-muda: #FCE7F3; --t-lapis: #FDF2F8; --t-teks: #3A1028; --t-rgb: 219, 39, 119;
}
:root[data-tema="merah"] {
  --t1: #B91C1C; --t2: #DC2626; --t3: #FCA5A5;
  --tk1: #7F1D1D; --tk2: #B91C1C; --tk3: #F87171;
  --t-bg: #FFF1F1; --t-muda: #FEE2E2; --t-lapis: #FEF2F2; --t-teks: #3A0D0D; --t-rgb: 220, 38, 38;
}
:root[data-tema="biru"] {
  --t1: #1D4ED8; --t2: #2563EB; --t3: #93C5FD;
  --tk1: #1E3A8A; --tk2: #1D4ED8; --tk3: #60A5FA;
  --t-bg: #EAF1FD; --t-muda: #DBEAFE; --t-lapis: #F1F5FD; --t-teks: #0F1B3D; --t-rgb: 37, 99, 235;
}

:root[data-tema] {
  --biru: var(--t2);
  --biru-muda: var(--t-muda);
  --gradasi-biru: linear-gradient(135deg, var(--t1) 0%, var(--t2) 45%, var(--t3) 100%);
  --teks: var(--t-teks);
  --hitam: var(--t-teks);
  --teks-2: color-mix(in srgb, var(--t-teks) 72%, #FFFFFF);
  --teks-3: color-mix(in srgb, var(--t-teks) 45%, #FFFFFF);
  --kaca: rgba(255, 255, 255, 0.88);
  --kaca-hover: #FFFFFF;
  --kaca-input: var(--t-lapis);
  --lapis: var(--t-lapis);
  --garis: rgba(255, 255, 255, 0.9);
  --garis-halus: rgba(0, 0, 0, 0.07);
  --bayangan: 0 12px 32px rgba(var(--t-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  --bayangan-angkat: 0 22px 48px rgba(var(--t-rgb), 0.2);
}
:root[data-tema] body { background: linear-gradient(180deg, var(--t-bg) 0%, #FFFFFF 70%) fixed; background-color: #FFFFFF; }
:root[data-tema] .latar {
  background-image:
    linear-gradient(rgba(var(--t-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--t-rgb), 0.06) 1px, transparent 1px);
}
:root[data-tema] .matahari { background: radial-gradient(ellipse at center, rgba(var(--t-rgb), 0.22), transparent 65%); }
:root[data-tema] .awan { background: radial-gradient(circle at 35% 30%, #FFFFFF, var(--t-muda) 70%); box-shadow: 0 18px 30px rgba(var(--t-rgb), 0.15); }

/* Kepala halaman, banner, tombol utama ikut warna tema */
:root[data-tema] .kepala { box-shadow: 0 18px 40px rgba(var(--t-rgb), 0.28); }
:root[data-tema] .banner { box-shadow: 0 18px 40px rgba(var(--t-rgb), 0.3); }
:root[data-tema] .nav-penanda { box-shadow: 0 6px 16px rgba(var(--t-rgb), 0.35); }
:root[data-tema] .btn-utama { box-shadow: 0 8px 20px rgba(var(--t-rgb), 0.3); }
:root[data-tema] .fab { box-shadow: 0 12px 30px rgba(var(--t-rgb), 0.45); }
:root[data-tema] .dompet-flap { box-shadow: -6px 6px 16px rgba(var(--t-rgb), 0.35); }
:root[data-tema] .kartu-saldo { box-shadow: 0 18px 44px rgba(var(--t-rgb), 0.14); }
:root[data-tema] .kartu-saldo::before { border-color: rgba(var(--t-rgb), 0.2); }
:root[data-tema] .sidebar { background: rgba(255, 255, 255, 0.92); }

/* Kartu berwarna (bukan saldo & tabungan) */
:root[data-tema] .kartu.kaca:not(.kartu-tabungan), :root[data-tema] .grup-tanggal {
  --gradasi-kartu: linear-gradient(135deg, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%);
  box-shadow: 0 18px 40px rgba(var(--t-rgb), 0.28);
}
:root[data-tema] .kartu.kaca.kartu-keluar { --gradasi-kartu: linear-gradient(135deg, var(--tk1) 0%, var(--tk2) 50%, var(--tk3) 100%); }
:root[data-tema] .kartu.kaca:not(.kartu-tabungan):hover { box-shadow: 0 22px 46px rgba(var(--t-rgb), 0.38); }
:root[data-tema] .kartu.kaca:not(.kartu-tabungan) .btn-utama { color: var(--t1); }
/* Di dalam kartu berwarna, warna "aksen" kembali putih agar terbaca */
:root[data-tema] .kartu.kaca:not(.kartu-tabungan), :root[data-tema] .grup-tanggal { --biru: #FFFFFF; --biru-muda: rgba(255, 255, 255, 0.18); }

/* ----- Pemilih tema di halaman Lainnya ----- */
.pilih-tema { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.opsi-tema {
  display: grid; gap: 8px; justify-items: center; padding: 12px 8px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.12); border: 2px solid transparent;
  font-size: 0.78rem; font-weight: 700; color: inherit;
  transition: transform 0.3s var(--pegas), border-color 0.2s, background 0.2s;
}
.opsi-tema:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.2); }
.opsi-tema.aktif { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.24); }
.contoh-tema {
  position: relative; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0.8);
}
.contoh-tema::before, .contoh-tema::after { content: ""; position: absolute; inset: 0; }
.contoh-tema::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); background: #FFFFFF; }
.contoh-tema.asli::before { background: linear-gradient(135deg, #2F5D3A, #4E8A5E); }
.contoh-tema.asli::after { background: linear-gradient(135deg, #8B5A2B, #C08A5B); }
.contoh-tema.pink::before { background: linear-gradient(135deg, #DB2777, #F9A8D4); }
.contoh-tema.merah::before { background: linear-gradient(135deg, #B91C1C, #F87171); }
.contoh-tema.biru::before { background: linear-gradient(135deg, #1D4ED8, #93C5FD); }
.opsi-tema .centang { display: none; }
.opsi-tema.aktif .centang { display: inline; }
@media (max-width: 420px) { .contoh-tema { width: 42px; height: 42px; } .opsi-tema { font-size: 0.72rem; padding: 10px 4px; } }

/* Tema baru: kartu kepala halaman putih, tulisan mengikuti warna tema */
:root[data-tema] .kepala { background: #FFFFFF; color: var(--t-teks); border: 1px solid rgba(var(--t-rgb), 0.12); box-shadow: 0 18px 40px rgba(var(--t-rgb), 0.14); }
:root[data-tema] .kepala-nomor { background: var(--gradasi-biru); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-tema] .kepala .logo-hp { color: var(--t2); }
:root[data-tema] .kepala-teks h1 { color: var(--t1); }
:root[data-tema] .kepala .mikro, :root[data-tema] .kepala-meta dt { color: color-mix(in srgb, var(--t2) 65%, #FFFFFF); }
:root[data-tema] .kepala-meta dd { color: var(--t-teks); }
:root[data-tema] .kepala-meta { border-top-color: rgba(var(--t-rgb), 0.15); }
:root[data-tema] .kepala::before, :root[data-tema] .kepala::after { border-color: rgba(var(--t-rgb), 0.18); background: rgba(var(--t-rgb), 0.05); }

/* ==========================================================
   27. Login "double slider": form & panel bergambar bertukar tempat
   (menggantikan tampilan lampu + robot di bagian 25)
   ========================================================== */
.login {
  --toska: #4FA3A5;
  --toska-muda: #7CC7C3;
  --teks-form: #1F2A22;
  background: radial-gradient(ellipse at top, #3A3F4A 0%, #1F2229 70%);
}
#loginTab { display: none; }   /* pindah mode lewat tombol di panel geser */

.login-geser {
  position: relative; width: min(880px, 100%); min-height: 680px;
  background: #FFFFFF; border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  animation: fade-rise 0.8s ease-out both;
}

/* ----- Panel form (putih) ----- */
.login .login-kartu {
  position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow-y: auto; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px; color: var(--teks-form);
  background: #FFFFFF; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; filter: none !important;
  transition: transform 0.6s ease-in-out;
  animation: form-muncul-a 0.6s both;
}
.login-geser[data-mode="daftar"] .login-kartu { transform: translateX(100%); animation-name: form-muncul-b; }
/* Form memudar di tengah perpindahan, lalu muncul lagi di sisi baru */
@keyframes form-muncul-a { 0%, 49.99% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes form-muncul-b { 0%, 49.99% { opacity: 0; } 50%, 100% { opacity: 1; } }

.login .login-logo .logo-tanda { color: var(--toska); }
.login .mikro { color: #6B7280; }
.login .login-kartu h2 { color: var(--teks-form); font-size: 2rem; letter-spacing: -0.02em; }
.login .login-kartu h2 .sorot { color: var(--toska); text-shadow: none; }
.login .login-kartu .ket { color: #6B7280; margin-bottom: 18px; }
.login .field > span { color: #4B5563; }
.login .input, .login .login-input .input {
  background: #EEF1F1; border: 1px solid transparent; color: var(--teks-form); border-radius: 10px;
}
.login .input::placeholder { color: #9CA3AF; }
.login .input:focus, .login .login-input .input:focus {
  background: #FFFFFF; border-color: var(--toska); box-shadow: 0 0 0 4px rgba(79, 163, 165, 0.15);
}
.login .login-input > svg { color: #6B9E9C; }
.login .lihat-sandi { color: #6B7280; }
.login .lihat-sandi:hover { background: rgba(79, 163, 165, 0.12); color: var(--toska); }
.login .ingat { color: #4B5563; }
.login .ingat input { accent-color: var(--toska); }
.login .pesan-error { color: #DC2626; }
.login .login-tombol {
  background: linear-gradient(90deg, var(--toska), var(--toska-muda)); color: #FFFFFF;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800;
  box-shadow: 0 10px 24px rgba(79, 163, 165, 0.35);
}
.login .login-tombol:hover { box-shadow: 0 14px 30px rgba(79, 163, 165, 0.45); }

/* ----- Panel geser bergambar (air & perahu) ----- */
.login-overlay {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; z-index: 3;
  color: #FFFFFF; transition: transform 0.6s ease-in-out;
}
.login-geser[data-mode="daftar"] .login-overlay { transform: translateX(-100%); }

.overlay-latar {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.25), transparent 40%),
    radial-gradient(ellipse at 80% 85%, rgba(20, 80, 85, 0.35), transparent 50%),
    linear-gradient(160deg, #6FBFBC 0%, #4FA3A5 45%, #3B8A8F 100%);
}
/* Riak air bergerak pelan */
.riak-air {
  position: absolute; border: 2px solid rgba(255, 255, 255, 0.28); border-radius: 50%;
  animation: riak-gerak 7s ease-in-out infinite alternate;
}
.r1 { width: 260px; height: 90px; top: 12%; left: -20%; }
.r2 { width: 320px; height: 110px; top: 58%; left: 30%; animation-duration: 9s; }
.r3 { width: 180px; height: 60px; top: 82%; left: -10%; animation-duration: 6s; opacity: 0.7; }
@keyframes riak-gerak { to { transform: translateX(40px) scale(1.08); } }
/* Perahu sederhana dari CSS */
.perahu {
  position: absolute; right: 12%; bottom: 14%; width: 120px; height: 46px;
  background: linear-gradient(180deg, #F5F1E8, #D9D2C3); border-radius: 50% 50% 46% 46% / 30% 30% 70% 70%;
  box-shadow: 0 14px 0 -6px rgba(20, 70, 75, 0.35); transform: rotate(-24deg);
  animation: perahu-ayun 4s ease-in-out infinite;
}
.perahu::before {
  content: ""; position: absolute; inset: 8px 14px; border-radius: inherit; background: #C45C4A;
}
.perahu-dayung {
  position: absolute; left: 30px; top: -30px; width: 4px; height: 90px; background: #E9E4D8; border-radius: 4px;
  transform: rotate(60deg); transform-origin: center;
}
@keyframes perahu-ayun { 0%, 100% { transform: rotate(-24deg) translateY(0); } 50% { transform: rotate(-20deg) translateY(-6px); } }

.overlay-isi {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 40px; text-align: center;
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}
.overlay-isi h2 { font-size: 2.4rem; font-weight: 800; line-height: 1.1; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.15); }
.overlay-isi p { max-width: 280px; font-size: 0.92rem; opacity: 0.92; }
.overlay-ke-masuk { transform: translateX(-20%); opacity: 0; pointer-events: none; }
.login-geser[data-mode="daftar"] .overlay-ke-daftar { transform: translateX(20%); opacity: 0; pointer-events: none; }
.login-geser[data-mode="daftar"] .overlay-ke-masuk { transform: none; opacity: 1; pointer-events: auto; }
.btn-garis {
  margin-top: 6px; padding: 12px 46px; border-radius: 999px;
  border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF;
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  transition: transform 0.25s var(--pegas), background 0.25s, color 0.25s;
}
.btn-garis:hover { transform: scale(1.03); background: #FFFFFF; color: var(--toska); }
.btn-garis:active { transform: scale(0.96); }

/* ----- Tombol & pita mode demo ----- */
.pemisah-demo { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: #9CA3AF; font-size: 0.78rem; }
.pemisah-demo::before, .pemisah-demo::after { content: ""; flex: 1; height: 1px; background: #E5E7EB; }
.btn-demo {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 12px 20px; border-radius: 999px; border: 2px dashed var(--toska, #4FA3A5);
  background: rgba(79, 163, 165, 0.08); color: #2F7F82; font-weight: 800; font-size: 0.9rem;
  transition: transform 0.25s var(--pegas), background 0.25s;
}
.btn-demo:hover { transform: scale(1.03); background: rgba(79, 163, 165, 0.16); }
.btn-demo svg { width: 18px; height: 18px; }
.ket-demo { margin-top: 8px; text-align: center; font-size: 0.75rem; color: #9CA3AF; }

.pita-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-radius: 20px;
  background: linear-gradient(90deg, #FEF3C7, #FDE68A); color: #78350F;
  border: 1px solid rgba(180, 120, 20, 0.25); box-shadow: 0 8px 20px rgba(180, 120, 20, 0.15);
  font-size: 0.86rem; animation: fade-rise 0.6s ease-out both;
}
.pita-demo[hidden] { display: none; }
.pita-demo-teks { display: inline-flex; align-items: center; gap: 6px; }
.pita-demo-teks svg { width: 18px; height: 18px; }
.pita-demo-aksi { display: flex; gap: 8px; }
.pita-demo .btn-kaca { background: rgba(255, 255, 255, 0.7); color: #78350F; border-color: rgba(120, 53, 15, 0.2); }

/* ----- Layar langganan (pilih paket & bayar QRIS) ----- */
.langganan {
  position: fixed; inset: 0; z-index: 150; overflow-y: auto; padding: 24px 16px;
  display: flex; justify-content: center; align-items: flex-start;
  background: radial-gradient(ellipse at top, #3A3F4A 0%, #1F2229 70%);
  --toska: #4FA3A5; --toska-muda: #7CC7C3;
}
.langganan[hidden] { display: none; }
.lg-kartu {
  width: min(880px, 100%); background: #FFFFFF; color: #1F2A22; border-radius: 26px;
  padding: 28px 32px 30px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  display: grid; gap: 16px; animation: fade-rise 0.8s ease-out both;
}
.lg-atas { display: flex; justify-content: space-between; align-items: center; }
.lg-kartu .logo-tanda { color: var(--toska); }
.lg-kartu .mikro { color: #6B7280; }
.lg-keluar { display: inline-flex; align-items: center; gap: 6px; color: #6B7280; font-weight: 700; font-size: 0.84rem; padding: 8px 12px; border-radius: 999px; }
.lg-keluar:hover { background: #F3F4F6; color: #1F2A22; }
.lg-kartu h2 { font-size: 2rem; letter-spacing: -0.02em; color: #1F2A22; }
.lg-kartu h2 .sorot { color: var(--toska); }
.lg-kartu .ket { color: #6B7280; }
.lg-status { display: block; padding: 12px 16px; border-radius: 16px; background: #FEF3C7; color: #78350F; font-size: 0.9rem; }
.lg-status.aktif { background: #DCFCE7; color: #166534; }
.lg-status svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.lg-manfaat { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 0.88rem; color: #374151; }
.lg-manfaat li { display: flex; align-items: center; gap: 8px; }
.lg-manfaat svg { color: var(--toska); width: 18px; height: 18px; }

.lg-paket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lg-opsi {
  position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 18px;
  border: 2px solid #E5E7EB; border-radius: 20px; background: #FFFFFF;
  transition: transform 0.3s var(--pegas), border-color 0.2s, box-shadow 0.3s;
}
.lg-opsi:hover { transform: translateY(-3px); border-color: var(--toska-muda); box-shadow: 0 14px 30px rgba(79, 163, 165, 0.15); }
.lg-opsi.terbaik { border-color: var(--toska); background: linear-gradient(180deg, #F0FAFA, #FFFFFF); }
.lg-pita { position: absolute; top: -12px; right: 16px; padding: 4px 12px; border-radius: 999px; background: var(--toska); color: #FFFFFF; font-size: 0.72rem; font-weight: 800; }
.lg-opsi h4 { font-size: 1rem; }
.lg-harga { font-family: var(--font-angka); font-size: 2.2rem; font-weight: 800; line-height: 1; color: #1F2A22; }
.lg-per { font-size: 0.8rem; color: #6B7280; }
.lg-hemat { font-size: 0.8rem; font-weight: 700; color: #15803D; }
.lg-opsi .btn { margin-top: 8px; width: 100%; }
.lg-kartu .btn-utama { background: linear-gradient(90deg, var(--toska), var(--toska-muda)); color: #FFFFFF; box-shadow: 0 10px 24px rgba(79, 163, 165, 0.35); }
.lg-kartu .btn-kaca { background: #FFFFFF; color: #1F2A22; border: 1px solid #D1D5DB; box-shadow: none; }

.lg-bayar { padding: 20px; border-radius: 20px; background: #F8FAFA; border: 1px solid #E5E7EB; display: grid; gap: 10px; }
.lg-bayar h3, .lg-riwayat h3 { font-size: 1.1rem; }
.lg-kode { font-family: ui-monospace, monospace; letter-spacing: 0.06em; color: #1F2A22; }
.lg-bayar-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.lg-qris-kol { display: grid; gap: 8px; }
.lg-qris img { width: 100%; border-radius: 14px; border: 1px solid #E5E7EB; background: #FFFFFF; display: block; }
.lg-catatan { font-size: 0.75rem; color: #6B7280; }
.lg-langkah { display: grid; gap: 14px; padding-left: 20px; }
.lg-langkah li { display: grid; gap: 4px; }
.lg-langkah span { font-size: 0.84rem; color: #6B7280; }
.lg-langkah .btn { justify-self: start; margin-top: 4px; }
.lg-nominal { color: var(--toska); }
.lg-kartu a.btn { text-decoration: none; }
/* Lupa kata sandi */
.baris-ingat { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-lupa { color: var(--toska, #4FA3A5); font-weight: 700; font-size: 0.82rem; padding: 2px 0; }
.link-lupa:hover { text-decoration: underline; }
.link-lupa[hidden] { display: none; }
.modal .link-lupa { color: #2F7F82; justify-self: start; }
.modal a.btn { text-decoration: none; }
.sandi-sementara { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--lapis); }
.sandi-sementara code { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.12em; }
/* Dialog & notifikasi harus di atas layar langganan/login */
#modal, #konfirmasi { z-index: 170; }
.toast-wadah { z-index: 200; }
.btn-wa { background: #25D366; color: #FFFFFF; }
.btn-wa:hover { background: #1EBE5A; }
.lg-riwayat { display: grid; gap: 8px; }
.lg-pesanan { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #F8FAFA; font-size: 0.86rem; }
.lg-pesanan small { display: block; color: #6B7280; font-size: 0.76rem; }
.lg-lencana { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #F3F4F6; color: #4B5563; }
.lg-lencana.hijau { background: #DCFCE7; color: #166534; }
.lg-lencana.merah { background: #FEE2E2; color: #B91C1C; }
.lg-bawah { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-bawah .btn-demo { flex: 1; }
.lg-bawah .btn-demo[hidden], .lg-bawah .btn[hidden] { display: none; }

/* Pesanan di halaman admin */
.baris-pesanan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px; border-radius: 18px; }
.baris-pesanan:hover { background: rgba(255, 255, 255, 0.1); }
.baris-pesanan .info strong { display: block; font-size: 0.88rem; }
.baris-pesanan .info small { color: var(--teks-3); font-size: 0.76rem; }
.aksi-pesanan { grid-column: 1 / -1; display: flex; gap: 8px; }
.tag.tag-dicek { background: #FEF3C7 !important; color: #92400E !important; }
.tag.tag-lunas { background: #DCFCE7 !important; color: #166534 !important; }
.tag.tag-batal { background: #FEE2E2 !important; color: #B91C1C !important; }

@media (max-width: 759px) {
  .lg-kartu { padding: 22px 18px 24px; }
  .lg-kartu h2 { font-size: 1.6rem; }
  .lg-manfaat { grid-template-columns: 1fr; }
  .lg-paket { grid-template-columns: 1fr; }
  .lg-bayar-grid { grid-template-columns: 1fr; }
  .lg-qris-kol { max-width: 260px; }
}

/* ----- HP: panel gambar di atas, form di bawah ----- */
@media (max-width: 759px) {
  .login { align-items: start; padding: 14px; }
  .login-geser { display: flex; flex-direction: column; min-height: 0; }
  .login-overlay { position: relative; left: 0; width: 100%; height: 210px; transform: none !important; }
  .login .login-kartu { position: relative; width: 100%; height: auto; padding: 26px 22px 24px; transform: none !important; }
  .overlay-isi { padding: 20px; gap: 8px; }
  .overlay-isi h2 { font-size: 1.7rem; }
  .overlay-isi p { font-size: 0.84rem; }
  .btn-garis { padding: 10px 36px; }
  .perahu { width: 90px; height: 34px; right: 6%; bottom: 10%; }
  .login .login-kartu h2 { font-size: 1.6rem; }
}