/* Galaksi: langit malam, nebula, bintang berkelip */
:root {
  --n1: #1a1038; --n2: #3b1d5e; --accent: #f3c86b;
  --bg: #140d2b; --bg-alt: #1a1236; --card: #211845; --ink: #f1ecff; --muted: #b5a9d6;
  --accent-ink: #140d2b;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --stars: radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent) 0 0 / 120px 120px,
           radial-gradient(1px 1px at 70px 80px, color-mix(in srgb, #fff 80%, transparent), transparent) 0 0 / 120px 120px,
           radial-gradient(1.6px 1.6px at 100px 20px, color-mix(in srgb, var(--accent) 90%, #fff), transparent) 0 0 / 160px 160px,
           radial-gradient(1px 1px at 40px 110px, #fff, transparent) 0 0 / 90px 90px;
  --cover-bg: var(--stars), radial-gradient(ellipse at 70% 20%, color-mix(in srgb, var(--n2) 90%, var(--accent) 10%) 0%, transparent 55%), radial-gradient(ellipse at 20% 90%, var(--n2) 0%, transparent 50%), var(--n1);
  --cover-ink: var(--ink);
  --f-display: "Raleway", system-ui, sans-serif;
  --f-script: "Forum", Georgia, serif;
  --f-body: "Raleway", system-ui, sans-serif;
  --title-size: clamp(3rem, 13vw, 4.4rem);
  --r: 18px;
  color-scheme: dark;
}
.inv-title { letter-spacing: .04em; text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.inv-label { letter-spacing: .4em; color: var(--accent); font-weight: 500; }
.inv-cover-inner, .inv-aside-inner { padding: 30px 24px; }
.inv-guest { background: color-mix(in srgb, var(--card) 60%, transparent); backdrop-filter: blur(6px); border-color: var(--line); }
.inv-sec { background: var(--stars), var(--bg); }
.inv-sec:nth-of-type(even) { background: var(--stars), radial-gradient(ellipse at 80% 0, color-mix(in srgb, var(--n2) 60%, transparent), transparent 60%), var(--bg-alt); }
.inv-name, .inv-sec-title { color: var(--ink); }
.inv-card { background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(4px); }
.inv-form input[type="text"], .inv-form select, .inv-form textarea { background: var(--bg); }
.inv-avatar { box-shadow: 0 0 0 2px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 50%, transparent); border-color: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .inv-cover { animation: inv-twinkle 6s ease-in-out infinite alternate; }
  @keyframes inv-twinkle { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 6px 4px, -4px 6px, 3px -5px, -6px -3px, 0 0, 0 0, 0 0; } }
}