/* =========================================================
   NALARITMA v3 - TEMA (light ceria putih-hijau-kuning + dark)
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-soft: #f4f9f5;
  --bg-card: #ffffff;
  --border: #e3ece5;
  --text: #14201a;
  --text-dim: #5c6b62;
  --green: #16a34a;
  --green-strong: #15803d;
  --green-soft: #dcfce7;
  --yellow: #facc15;
  --yellow-soft: #fef9c3;
  --orange: #f97316;
  --red: #ef4444;
  --red-soft: #fee2e2;
  --blue: #3b82f6;
  --blue-soft: #dbeafe;
  --shadow: 0 6px 24px rgba(20, 60, 35, .08);
  --shadow-lg: 0 14px 44px rgba(20, 60, 35, .14);
  --radius: 18px;
  --radius-sm: 12px;
  --font-display: 'Space Grotesk', sans-serif;
}
[data-theme="dark"] {
  --bg: #0b0f0c;
  --bg-soft: #10150f;
  --bg-card: #141a15;
  --border: #263028;
  --text: #ecf5ee;
  --text-dim: #93a89a;
  --green: #22c55e;
  --green-strong: #4ade80;
  --green-soft: #14351f;
  --yellow: #fde047;
  --yellow-soft: #33301a;
  --orange: #fb923c;
  --red: #f87171;
  --red-soft: #3a1a1a;
  --blue: #60a5fa;
  --blue-soft: #16233d;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  transition: background .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.25; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--yellow); color: #111; }

/* ---------- Boot splash ---------- */
.boot-splash {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; color: var(--text-dim);
  background: radial-gradient(circle at 50% 36%, var(--green-soft), transparent 62%), var(--bg);
}
.boot-logo { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.boot-logo img {
  width: 82px; height: 82px;
  animation: pulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 22px rgba(22, 163, 74, .28));
}
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 42%, var(--yellow) 56%, var(--orange) 72%, var(--green) 88%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: boot-spin 1.1s linear infinite;
}
.boot-word { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .3px; color: var(--text); }
.boot-bar { width: min(220px, 56vw); height: 8px; border-radius: 999px; overflow: hidden; background: var(--border); }
.boot-bar span {
  display: block; height: 100%; width: 45%; border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--yellow), var(--orange));
  animation: boot-slide 1.15s ease-in-out infinite;
}
.boot-msg { font-size: 14px; margin-top: -6px; }

@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@keyframes boot-slide { 0%{transform:translateX(-110%)} 100%{transform:translateX(230%)} }

@media (prefers-reduced-motion: reduce) {
  .boot-logo img { animation: none; }
  .boot-ring { animation: none; transform: rotate(45deg); }
  .boot-bar span { animation: none; width: 70%; opacity: .7; }
}