/* =====================================================================
   BAKTI by Bunda Kandung — sistem tampilan bersama (BAKTI, E-Rapor, Beranda)
   "Kaca cair": permukaan tembus pandang dengan blur, tepi berkilau tipis,
   bayangan berlapis, sudut besar, gerak singkat dengan easing kuat.
   Satu sumber token supaya ketiga aplikasi tampak satu keluarga.
   Font: Plus Jakarta Sans (judul, angka) + Inter (isi, tabel, formulir),
   dua-duanya disimpan lokal (tanpa internet).
   Warna dalam hex agar sama dengan sistem lama; kontras diukur, bukan ditebak.
   ===================================================================== */
@font-face { font-family: "BK Jakarta"; src: url("../fonts/jakarta-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "BK Inter"; src: url("../fonts/inter-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --font-display: "BK Jakarta", "Segoe UI", system-ui, sans-serif;
  --font-ui: "BK Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font: var(--font-ui);

  /* Tinta: ink-300 digelapkan (#8e9bb8 hanya 2,7:1) agar teks sekunder terbaca */
  --ink-900: #0c1a3a; --ink-800: #17284d; --ink-700: #2b3b60;
  --ink-500: #4a5877; --ink-300: #5f6d8c; --ink-100: #d9e2f3; --ink-50: #eaf0fb;
  --paper: #eef3fb; --card: #ffffff;

  /* Aksen utama (biru "Langit") + hangat dari logo (kuning, hijau) hanya sebagai cahaya latar */
  --gold-700: #1245ab; --gold-600: #1558d6; --gold-500: #1d66e4; --gold-400: #578ef5; --gold-100: #e3edff; --gold-50: #f1f6ff;
  --blue-700: #1245ab; --blue-600: #1558d6; --blue-500: #1d66e4; --blue-100: #e3edff; --blue-50: #f1f6ff;
  --brand-fill: #1d66e4;
  --cyan-500: #65d0f4; --sun-500: #f2f7a0; --leaf-500: #3f9863;

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;

  /* Kaca */
  --glass: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .72);
  --glass-hair: rgba(18, 52, 120, .10);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --glass-shadow: 0 1px 1px rgba(12, 26, 58, .04), 0 10px 32px rgba(18, 52, 120, .10);
  --glass-shadow-lift: 0 2px 2px rgba(12, 26, 58, .05), 0 18px 44px rgba(18, 52, 120, .16);
  --glass-blur: blur(22px) saturate(1.7);

  --shadow-xs: 0 1px 2px rgba(18, 52, 120, .06);
  --shadow-sm: var(--glass-shadow); --shadow-md: var(--glass-shadow); --shadow-lg: var(--glass-shadow-lift);
  --sh-sm: var(--glass-shadow); --sh-md: var(--glass-shadow); --sh-lg: var(--glass-shadow-lift);
  --hard-shadow-sm: var(--glass-shadow); --hard-shadow-md: var(--glass-shadow); --hard-shadow-gold: var(--glass-shadow);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-spring: cubic-bezier(.23, 1, .32, 1);
}

/* Latar: cahaya lembut dari warna logo, tetap di tempat saat menggulir */
html { background: #eef3fb; }
body {
  font-family: var(--font-ui);
  color: var(--ink-900);
  background:
    radial-gradient(52vmax 44vmax at 6% -8%, rgba(101, 208, 244, .55), transparent 62%),
    radial-gradient(48vmax 40vmax at 104% 2%, rgba(87, 142, 245, .42), transparent 62%),
    radial-gradient(46vmax 38vmax at 96% 108%, rgba(242, 247, 160, .75), transparent 62%),
    radial-gradient(40vmax 36vmax at -6% 104%, rgba(63, 152, 99, .20), transparent 62%),
    #eef3fb;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, .page-head h2, .modal-head h3, .brand-title, .stat-value { font-family: var(--font-display); }
::selection { background: rgba(29, 102, 228, .22); }
* { scrollbar-width: thin; scrollbar-color: rgba(18, 52, 120, .28) transparent; }

/* Tanpa dukungan blur: pakai permukaan hampir buram agar tetap terbaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .94); --glass-strong: rgba(255, 255, 255, .97); }
}

@keyframes bkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes bkPop { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}