/* ============================================================
   KZ Data Vault — Lapisan Desain Modern ("kuningan brankas")
   ------------------------------------------------------------
   Dimuat PALING AKHIR di setiap halaman, setelah design-system,
   components, dan responsive. Tidak ada struktur HTML yang diubah:
   semua perubahan tampilan terjadi lewat token & aturan di sini,
   jadi berlaku seragam di halaman pengguna, admin, dan publik.

   Animasi lama (Gulp, spinner .btn-loading, modalIn, toastIn,
   dropIn, shimmer, slotShake) TIDAK disentuh.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN
   ------------------------------------------------------------ */
:root {
  --font-family:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Kuningan — satu keluarga warna emas logo, disetel ulang */
  --gold-dark:    #A36F00;
  --gold-main:    #CC9107;
  --gold-medium:  #E2A81E;
  --gold-light:   #F3CB5E;
  --brass-hi:     #F7D46C;   /* pantulan terang di puncak pelat */
  --brass-ink:    #231800;   /* teks di atas kuningan: kontras ±9:1 */

  /* Latar terang: putih-kertas sejuk (bukan krem) */
  --bg-warm:      #F4F5F7;
  --bg-white:     #FFFFFF;
  --bg-section:   #F1F2F5;
  --bg-surface:   #F1F2F5;
  --border:       #E3E5EA;
  --border-light: #EDEEF1;
  --text-dark:    #12151B;
  --text-body:    #353B46;
  --text-muted:   #5E6573;
  --text-light:   #8B91A0;

  /* Alias yang dipakai beberapa halaman tapi dulu tidak pernah
     didefinisikan (teks "Nonaktif" jadi tanpa warna) */
  --danger:       var(--error);

  --radius-xs:  8px;
  --radius-sm:  11px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-2xl: 28px;

  --shadow-xs:   0 1px 2px rgba(18, 21, 27, .05);
  --shadow-sm:   0 1px 2px rgba(18, 21, 27, .05), 0 4px 12px -4px rgba(18, 21, 27, .08);
  --shadow-card: 0 1px 2px rgba(18, 21, 27, .04), 0 8px 24px -12px rgba(18, 21, 27, .12);
  --shadow-md:   0 2px 4px rgba(18, 21, 27, .05), 0 14px 32px -12px rgba(18, 21, 27, .18);
  --shadow-lg:   0 4px 8px rgba(18, 21, 27, .06), 0 28px 60px -20px rgba(18, 21, 27, .28);
  --shadow-gold: 0 8px 22px -10px rgba(204, 145, 7, .65);

  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --focus-ring:  0 0 0 3px var(--bg-white), 0 0 0 5px var(--gold-main);
}

[data-theme="dark"] {
  /* Grafit kebiruan seperti baja brankas */
  --bg-warm:      #0E1115;
  --bg-white:     #161A20;
  --bg-section:   #1D222A;
  --bg-surface:   #1D222A;
  --bg-muted:     #232932;
  --border:       #2A313B;
  --border-light: #222831;
  --text-dark:    #F2F4F7;
  --text-body:    #CDD2DA;
  --text-muted:   #98A0AD;
  --text-light:   #6E7683;
  --gold-pale:    #2F2714;
  --gold-ultra:   #231E12;

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .5);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-md:   0 14px 34px -12px rgba(0, 0, 0, .7);
  --shadow-lg:   0 30px 70px -24px rgba(0, 0, 0, .85);
}

/* ------------------------------------------------------------
   2. TIPOGRAFI — teks jelas & tidak terpotong
   ------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -.003em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.page-title, .modal-title, .card-title,
.logo-text, .package-name, .package-price,
.stat-value, .text-2xl, .text-3xl, .text-xl {
  font-family: var(--font-display);
  letter-spacing: -.018em;
  font-optical-sizing: auto;
}

/* PENTING: pakai longhand "text-wrap-style", BUKAN shorthand "text-wrap".
   Shorthand ikut menyetel ulang mode lipat ke "wrap" dan membatalkan
   white-space:nowrap milik .truncate — nama panjang jadi melipat 3 baris. */
h1, h2, h3, .page-title, .modal-title { text-wrap-style: balance; line-height: 1.2; }
p, li, .text-sm, .page-subtitle { text-wrap-style: pretty; }

/* Judul halaman: skala cair, tidak meledak di ponsel */
h1.text-2xl, .page-title {
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.8rem);
  font-weight: 750;
}
.text-2xl { line-height: 1.2; }

/* Angka rapi & sejajar (statistik, harga, tabel) */
.stat-value, .package-price, .summary-price,
.admin-table td, .trash-table td, .nav-count, .badge {
  font-variant-numeric: tabular-nums;
}

/* Judul lain di halaman depan, masuk, berbagi, dan status kosong */
.hero-title, .section-title, .fc-title, .si-title, .empty-state-title,
.nav-logo-text, .brand-name, .share-brand, .footer-brand {
  font-family: var(--font-display);
  letter-spacing: -.02em;
  text-wrap-style: balance;
}
.hero-title { font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.section-title { font-weight: 750; }

/* Semua label yang dulu dipaksa HURUF KAPITAL dikembalikan ke huruf
   biasa — jauh lebih mudah dibaca, terutama di ukuran kecil. */
.table th, .section-label, .summary-eyebrow, .durasi-title, .uppercase {
  text-transform: none;
  letter-spacing: 0;
}
.section-label { font-size: 13.5px; }
.summary-eyebrow, .durasi-title { font-size: 12.5px; }
/* Jenis data brankas ("akun", "catatan") cukup huruf depan kapital */
.vault-type-badge { text-transform: capitalize; letter-spacing: 0; font-size: 11.5px; }
/* Label keamanan memakai style inline, jadi perlu !important */
#security-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 11.5px !important; }

/* Label bagian: huruf kapital paksa dibuang — lebih mudah dibaca */
.sidebar-section-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  padding-top: var(--space-4);
}

/* Teks panjang (nama berkas, judul kartu, email) dipatahkan dengan
   rapi alih-alih mendorong tata letak sampai terpotong */
.card-title, .card h3, .card h4,
.vault-card h3, .fav-card h3, .package-name,
.modal-title, .toast-title, .toast-message,
.user-email, .user-name, .doc-name, .file-name,
td strong, .spec-value {
  overflow-wrap: anywhere;
}
/* Hanya blok teks yang boleh menyusut — tombol & badge TIDAK, supaya
   labelnya tidak meluber keluar dari tombol. */
.card-header > :not(.btn):not(.badge):not(.icon-btn),
.modal-header > :not(.modal-close),
.toast-body { min-width: 0; }

img, svg, video { max-width: 100%; }

/* Daftar aktivitas: nama berkas panjang TANPA spasi (hasil scan,
   "Surat_Keputusan_..._final.pdf") dulu meluber keluar kartu.
   Sekarang dipatahkan dan dibatasi 2 baris dengan elipsis. */
.activity-info { flex: 1 1 auto; min-width: 0; }
.activity-title {
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.activity-item > :last-child:not(.activity-info) { flex-shrink: 0; }

::selection { background: color-mix(in srgb, var(--gold-light) 55%, transparent); color: var(--text-dark); }

/* ------------------------------------------------------------
   3. TOMBOL — animasi di setiap tombol
   ------------------------------------------------------------ */
.btn {
  isolation: isolate;               /* lapisan riak di bawah teks */
  min-height: 38px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.25;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform .22s var(--ease-out),
    box-shadow .22s var(--ease-out),
    background-color .2s ease, color .2s ease,
    border-color .2s ease, background-position .6s var(--ease-out),
    opacity .2s ease;
}
.btn-sm { min-height: 32px; padding: 6px 12px; border-radius: var(--radius-xs); }
.btn-lg { min-height: 48px; padding: 12px 26px; border-radius: var(--radius-md); font-size: 15.5px; }
.btn-xl { min-height: 54px; }
.btn-pill { border-radius: var(--radius-pill); }

/* Naik sedikit saat disorot, "klik" masuk saat ditekan */
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) {
  transform: translateY(0) scale(.965);
  transition-duration: .08s;
}

/* Pelat kuningan + kilau yang menyapu saat disorot */
.btn-primary {
  color: var(--brass-ink);
  background-color: var(--gold-main);
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%),
    linear-gradient(180deg, var(--brass-hi) 0%, var(--gold-medium) 42%, var(--gold-main) 72%, var(--gold-dark) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(90, 60, 0, .35),
    var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255, 240, 200, .35);
}
.btn-primary:hover:not(:disabled) {
  color: var(--brass-ink);
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%),
    linear-gradient(180deg, var(--brass-hi) 0%, var(--gold-medium) 42%, var(--gold-main) 72%, var(--gold-dark) 100%);
  background-position: -30% 0, 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(90, 60, 0, .35),
    0 14px 28px -12px rgba(204, 145, 7, .75);
}
.btn-primary:active:not(:disabled) {
  box-shadow: inset 0 2px 6px rgba(90, 60, 0, .35), 0 4px 10px -6px rgba(204, 145, 7, .6);
}

.btn-secondary, .btn-ghost {
  background: var(--bg-white);
  color: var(--text-dark);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-ghost { background: transparent; box-shadow: none; color: var(--text-body); }
.btn-secondary:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-section);
  border-color: color-mix(in srgb, var(--gold-main) 45%, var(--border));
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
}

.btn-outline { border-width: 1.5px; }
.btn-outline:hover:not(:disabled) { box-shadow: 0 8px 18px -10px rgba(204, 145, 7, .6); }

.btn-danger { box-shadow: 0 8px 18px -10px rgba(239, 68, 68, .7); }
.btn-danger:hover:not(:disabled) { box-shadow: 0 12px 24px -10px rgba(239, 68, 68, .75); }
.btn-success:hover:not(:disabled) { box-shadow: 0 12px 24px -10px rgba(16, 185, 129, .6); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* Tombol ikon: membal lembut */
.icon-btn, .modal-close, .doc-action-btn, .hamburger-btn {
  transition: transform .25s var(--ease-spring), background-color .2s ease, color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover:not(:disabled), .modal-close:hover, .doc-action-btn:hover:not(:disabled) {
  transform: scale(1.08);
  background: var(--bg-section);
  color: var(--text-dark);
}
.icon-btn:active:not(:disabled), .modal-close:active, .doc-action-btn:active:not(:disabled) {
  transform: scale(.9);
  transition-duration: .08s;
}
.modal-close:hover { transform: rotate(90deg) scale(1.05); }

/* Riak dari titik sentuh — dibuat oleh assets/js/ui-motion.js.
   Lapisannya punya overflow sendiri, jadi TOMBOL tidak perlu
   overflow:hidden (yang akan memotong huruf terbang animasi Gulp). */
.dv-ripple-layer {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.dv-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .22;
  transform: scale(0);
  animation: dv-ripple .6s var(--ease-out) forwards;
}
.btn-primary .dv-ripple { background: #fff; opacity: .45; }
@keyframes dv-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Cincin fokus keyboard yang jelas di semua elemen interaktif */
:where(a, button, .btn, .icon-btn, [role="button"], input[type="checkbox"], input[type="radio"], summary):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ------------------------------------------------------------
   4. INPUT
   ------------------------------------------------------------ */
.form-input, .form-control,
.form-group select, .form-group textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-dark);
  padding: 11px 14px;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.form-input:hover, .form-control:hover { border-color: color-mix(in srgb, var(--gold-main) 35%, var(--border)); }
.form-input:focus, .form-control:focus,
.form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--gold-main);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-main) 18%, transparent);
}
.form-label, .form-group > label { font-weight: 650; color: var(--text-body); }

.header-search input {
  border: 1.5px solid transparent;
  background: var(--bg-section);
  padding-top: 10px; padding-bottom: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.header-search input:focus {
  border-color: var(--gold-main);
  background: var(--bg-white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-main) 16%, transparent);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--gold-main); }

/* ------------------------------------------------------------
   5. RANGKA APLIKASI — sidebar & header
   ------------------------------------------------------------ */
.sidebar {
  border-right: 1px solid var(--border);
  box-shadow: none;
}
.sidebar-logo { border-bottom-color: var(--border-light); }
.sidebar-logo .logo-text { font-size: 1.15rem; font-weight: 750; }

.sidebar-nav a, .nav-item {
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 550;
  color: var(--text-muted);
  transition: background-color .2s ease, color .2s ease, box-shadow .25s var(--ease-out);
}
.sidebar-nav a .nav-icon { transition: transform .3s var(--ease-spring); }
.sidebar-nav a:hover, .nav-item:hover { background: var(--bg-section); color: var(--text-dark); }
.sidebar-nav a:hover .nav-icon { transform: translateX(2px) scale(1.08); }

/* Menu aktif: rel kuningan di kiri (menggantikan garis tepi kanan) */
.sidebar-nav a.active, .nav-item.active {
  background: var(--gold-pale);
  color: var(--text-dark);
  font-weight: 700;
  border-right: 0;
  box-shadow: inset 3px 0 0 var(--gold-main);
}
.sidebar.admin-sidebar .sidebar-nav a.active,
.sidebar.admin-sidebar .nav-item.active {
  background: var(--gold-pale);
  color: var(--text-dark);
  box-shadow: inset 3px 0 0 var(--gold-main);
}
.sidebar.admin-sidebar .sidebar-nav a:hover,
.sidebar.admin-sidebar .nav-item:hover { background: var(--bg-section); color: var(--text-dark); }

.nav-count { font-weight: 750; }

/* Slot ikon untuk menu yang memakai emoji (dibuat oleh ui-motion.js):
   lebarnya sama dengan ikon SVG, jadi semua teks menu mulai di kolom
   yang sama. */
.nav-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
#sidebar-theme-label { display: inline-flex; align-items: center; gap: var(--space-3); }

/* Header kaca buram: konten terlihat samar saat digulir */
.top-header {
  background: var(--bg-white);
  background: color-mix(in srgb, var(--bg-white) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;
}

.user-avatar {
  box-shadow: 0 0 0 2px var(--bg-white), 0 0 0 3.5px color-mix(in srgb, var(--gold-main) 60%, transparent);
  transition: transform .25s var(--ease-spring);
}
.user-avatar:hover { transform: scale(1.06); }

/* ------------------------------------------------------------
   6. KARTU, STATISTIK, PAKET
   ------------------------------------------------------------ */
.card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-header { padding: 18px 22px; }
.card-title { font-size: 1.02rem; font-weight: 700; }
.card-body { padding: 22px; }

/* Kartu yang bisa diklik: beri tanda yang jelas */
.card[onclick], .card-stat[onclick] {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s ease;
}
.card[onclick]:hover, .card-stat[onclick]:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--gold-main) 35%, var(--border-light));
}
.card[onclick]:active, .card-stat[onclick]:active { transform: translateY(-1px) scale(.99); }

.card-stat .stat-value {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2rem);
  font-weight: 750;
  letter-spacing: -.03em;
}
.card-stat .stat-label { font-weight: 550; }
.card-stat .stat-icon {
  border-radius: 13px;
  transition: transform .35s var(--ease-spring);
}
.card-stat[onclick]:hover .stat-icon { transform: rotate(-6deg) scale(1.06); }

.package-card {
  border-radius: var(--radius-xl);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .2s ease;
}
.package-name { font-size: 1.25rem; font-weight: 750; }
.package-price { letter-spacing: -.035em; }

.progress-bar-bg { border-radius: 99px; background: var(--bg-section); }
.progress-bar-fill {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold-main));
  transition: width .8s var(--ease-out);
}

/* Kartu khusus per halaman — diseragamkan dengan .card.
   Diawali "body" supaya menang atas <style> milik halaman, yang
   dimuat SETELAH berkas ini. */
body .vault-card, body .fav-card, body .settings-card, body .security-section,
body .profile-hero, body .trash-table-card, body .admin-card,
body .admin-table-card, body .pkg-admin-card, body .chart-container {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}

/* Tombol "Kembali ke Beranda" (login, daftar, verifikasi email):
   dulu background #fff mati — kotak putih menyilaukan di mode gelap */
body a.back-home-link {
  background: var(--bg-white);
  border-color: var(--border);
  color: var(--text-body);
}
/* Kartu melayang di halaman depan — sama, tidak ikut mode gelap */
[data-theme="dark"] .float-card {
  background: var(--bg-white);
  border-color: var(--border);
  color: var(--text-body);
}

/* Kotak ikon di kartu Pengaturan admin memakai warna terang inline
   (#FEF2F2 dsb.) — diredam di mode gelap seperti ikon statistik. */
[data-theme="dark"] .settings-card-icon[style*="background"] {
  background: var(--bg-section) !important;
}

/* ------------------------------------------------------------
   7. BADGE — termasuk varian yang dulu tidak punya gaya
   ------------------------------------------------------------ */
.badge {
  padding: 3px 10px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.5;
}
.badge-danger  { background: var(--error-bg);   color: var(--error-text); }   /* status "Suspended" di admin */
.badge-secondary,
.badge-muted   { background: var(--bg-section); color: var(--text-muted); border: 1px solid var(--border); }

/* ------------------------------------------------------------
   8. TABEL
   ------------------------------------------------------------ */
.admin-table th, .trash-table th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-section);
}
.admin-table td, .trash-table td { padding-top: 14px; padding-bottom: 14px; }
.admin-table tbody tr:hover, .trash-table tbody tr:hover {
  background: color-mix(in srgb, var(--gold-pale) 55%, transparent);
}
.admin-table-card, .trash-table-card, .table-scroll {
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   9. MODAL, DROPDOWN, TOAST
   ------------------------------------------------------------ */
.modal-overlay {
  background: rgba(10, 12, 16, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  max-height: 90dvh;
}
.modal-header { padding: 20px 24px; }
.modal-body   { padding: 22px 24px; }
.modal-footer { padding: 16px 24px; flex-wrap: wrap; }
.modal-title  { font-size: 1.15rem; font-weight: 750; }

.dropdown-menu {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-width: calc(100vw - 24px);
}
.dropdown-item {
  border-radius: 9px;
  transition: background-color .15s ease, color .15s ease, transform .2s var(--ease-out);
}
/* transform, bukan padding: geser tanpa mengubah lebar (tidak bisa terpotong) */
.dropdown-item:hover { transform: translateX(3px); }

.toast {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: min(300px, calc(100vw - 32px));   /* dulu 300px tetap: terpotong di ponsel kecil */
  max-width: min(420px, calc(100vw - 32px));
}
.toast-title { font-weight: 700; }

/* ------------------------------------------------------------
   10. MASUK HALAMAN — satu gerakan terorkestrasi saat dimuat
   ------------------------------------------------------------ */
@keyframes dv-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
/* fill-mode "backwards" (bukan "both"): setelah selesai, elemen kembali
   ke transform-nya sendiri — tidak ada transform:none yang menetap. */
.page-content > * { animation: dv-rise .55s var(--ease-out) backwards; }
.page-content > *:nth-child(2) { animation-delay: .05s; }
.page-content > *:nth-child(3) { animation-delay: .10s; }
.page-content > *:nth-child(4) { animation-delay: .15s; }
.page-content > *:nth-child(n+5) { animation-delay: .2s; }

/* ------------------------------------------------------------
   11. RESPONSIF — tidak ada elemen yang terpotong
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body { font-size: 14.5px; }
  .page-content { padding: 18px 16px 28px; }
  .top-header { padding: 0 14px; gap: 10px; }
  .card-header { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .card-body { padding: 16px; }
  .modal-header, .modal-body, .modal-footer { padding-left: 18px; padding-right: 18px; }

  /* 16px mencegah iOS memperbesar layar otomatis saat input disentuh */
  .form-input, .form-control, .header-search input,
  .form-group select, .form-group textarea { font-size: 16px; }

  /* Label tombol panjang boleh turun baris alih-alih terpotong */
  .btn-block, .btn-lg, .modal-footer .btn { white-space: normal; text-align: center; }
  .modal-footer .btn { flex: 1 1 auto; }
  .header-actions .btn { white-space: nowrap; }
}

/* Ponsel: statistik tetap 2 kolom dengan kartu ringkas. Dulu
   responsive.css memaksa 1 kolom — tiap kartu setinggi sepertiga layar
   hanya untuk satu angka. Diawali "html body" agar menang atas aturan itu. */
@media (max-width: 480px) {
  html body .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html body .quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-stat { padding: 14px; }
  .card-stat .stat-icon { width: 38px; height: 38px; font-size: 18px; margin-bottom: 10px; border-radius: 11px; }
  .card-stat .stat-value { font-size: 1.45rem; }
  .card-stat .stat-label { font-size: 12.5px; }
}

/* Halaman depan: strip fitur 2 kolom (±170px) terlalu sempit untuk ikon
   48px + teks — kolomnya melebar dan seluruh halaman bisa digeser
   menyamping di ponsel. Jadi 1 kolom di layar kecil. */
.feature-strip-item > div:last-child { min-width: 0; }
@media (max-width: 480px) {
  body .features-strip .container { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 380px) {
  .page-content { padding-left: 12px; padding-right: 12px; }
  .card-stat { padding: 16px; }
}

/* ------------------------------------------------------------
   12. KURANGI GERAKAN — hanya animasi dari lapisan ini
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-content > * { animation: none; }
  .dv-ripple { display: none; }
  .btn, .icon-btn, .modal-close, .doc-action-btn, .card[onclick], .card-stat[onclick],
  .package-card, .sidebar-nav a .nav-icon, .card-stat .stat-icon, .user-avatar, .dropdown-item {
    transition-duration: .01ms !important;
  }
  .btn:hover:not(:disabled), .icon-btn:hover:not(:disabled), .card[onclick]:hover,
  .card-stat[onclick]:hover, .modal-close:hover { transform: none; }
}

/* Penghitung isi catatan */
.note-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; font-size: 11px; color: var(--text-muted); }
.note-stat { background: var(--bg-section); border: 1px solid var(--border-light); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.note-stat b { color: var(--text-dark); font-weight: 700; }
.note-stats.is-over .note-stat-size { border-color: var(--error); color: var(--error); }
.note-stat-warn { flex-basis: 100%; color: var(--error); font-weight: 600; }
.note-expand-btn { border: 0; background: none; color: var(--gold-dark); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0 8px; }