/* ── Variables ── */
:root {
  --bg:       #090E1A;
  --surface:  #111827;
  --surface2: #1A2235;
  --border:   rgba(129,212,250,0.10);
  --accent:   #81D4FA;
  --accent2:  rgba(129,212,250,0.12);
  --white:    #F0F4F8;
  --muted:    #8A9AAD;
  --danger:   #F87171;
  --success:  #34D399;
  --sans:     'Inter', system-ui, sans-serif;
  --mono:     'JetBrains Mono', monospace;
  --r:        6px;
  --t:        160ms ease;
  --sw:       220px;
  --th:       52px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--bg); color: var(--white); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
img { display: block; max-width: 100%; }
* { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(129,212,250,0.2); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 2px; }

/* ── Fade-in animation (ringan) ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.fade-up { animation: fadeUp 0.22s ease both; }