/* HIPPOCAMP — token warna, huruf, dan komponen piksel bersama */

:root {
  /* laut dalam */
  --ink-0: #040a18;
  --ink-1: #08142c;
  --ink-2: #0d1f42;
  --ink-3: #142c5a;
  --line: #22437a;
  --line-2: #2f5a9c;
  /* aksen */
  --coral: #ff6f59;
  --coral-dk: #b83c34;
  --coral-lt: #ff9a86;
  --pearl: #f6d98b;
  --pearl-dk: #a8833c;
  --glow: #7ef0ff;
  --kelp: #57c48a;
  /* teks */
  --foam: #e8f4ff;
  --mist: #9fb6d6;
  --mist-2: #6d86ad;
  --shadow: #02050d;

  --f-pixel: 'Pixelify Sans', ui-monospace, monospace;
  --f-label: 'Silkscreen', ui-monospace, monospace;
  --f-body: 'Outfit', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink-0); color: var(--foam);
  font: 400 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
::selection { background: var(--coral); color: var(--ink-0); }

/* label kecil berhuruf piksel */
.eyebrow { font: 400 12px/1.4 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--pearl); }
.label { font: 400 11px/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.pix { font-family: var(--f-pixel); }

/* judul piksel dengan bayangan bertumpuk */
.title {
  font: 700 clamp(34px, 5vw, 60px)/1.02 var(--f-pixel); margin: 0; color: var(--foam);
  text-shadow: 0 3px 0 var(--ink-3), 0 6px 0 var(--shadow);
}

/* ---------- tombol piksel ---------- */
.btn {
  --bg: var(--coral); --bd: var(--coral-dk); --fg: #1a0806;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px 16px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 13px/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); background: var(--bg);
  box-shadow: inset 0 -5px 0 var(--bd), 0 0 0 3px var(--shadow), 4px 4px 0 3px var(--shadow);
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: inset 0 -5px 0 var(--bd), 0 0 0 3px var(--shadow), 6px 6px 0 3px var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset 0 -2px 0 var(--bd), 0 0 0 3px var(--shadow), 1px 1px 0 3px var(--shadow); }
.btn:focus-visible { outline: 3px solid var(--glow); outline-offset: 5px; }
.btn[disabled] { filter: grayscale(.7) brightness(.7); cursor: not-allowed; transform: none; }
.btn.pearl { --bg: var(--pearl); --bd: var(--pearl-dk); --fg: #1a1204; }
.btn.ghost { --bg: var(--ink-2); --bd: var(--ink-1); --fg: var(--foam); }
.btn.sm { padding: 10px 14px 12px; font-size: 11px; }

/* ---------- panel piksel (bingkai berundak) ---------- */
.panel {
  position: relative; background: var(--ink-1);
  box-shadow: 0 0 0 3px var(--line), 0 0 0 6px var(--shadow), 6px 6px 0 6px rgba(2, 5, 13, .55);
}
.panel.pearl { box-shadow: 0 0 0 3px var(--pearl-dk), 0 0 0 6px var(--shadow), 6px 6px 0 6px rgba(2, 5, 13, .55); }
.panel.coral { box-shadow: 0 0 0 3px var(--coral), 0 0 0 6px var(--shadow), 6px 6px 0 6px rgba(2, 5, 13, .55); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 8px;
  font: 400 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase;
  background: var(--ink-2); color: var(--foam); box-shadow: 0 0 0 2px var(--line), 0 0 0 4px var(--shadow);
}
.chip i { width: 8px; height: 8px; background: var(--kelp); box-shadow: 0 0 8px var(--kelp); display: inline-block; }

.el-dot { display: inline-block; width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--shadow); }

input, select, textarea {
  font: 500 16px/1.3 var(--f-body); color: var(--foam); background: var(--ink-0);
  border: 0; padding: 12px 14px; width: 100%;
  box-shadow: inset 0 0 0 2px var(--line), 0 0 0 2px var(--shadow);
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--glow), 0 0 0 2px var(--shadow); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* atribut hidden selalu menang atas display milik komponen */
[hidden] { display: none !important; }