/* Halaman masuk dan pemasangan. Warna mengikuti dashboard Kurma Group. */
:root {
  --bg: #f3f5f2; --surface: #fcfdfb; --ink: #121613; --ink-2: #47504a; --muted: #6b756d; --line: #dde3dc; --line-strong: #c2cbc2;
  --accent: #17694a; --accent-ink: #ffffff; --crit-ink: #a52828; --crit-bg: #fbe3e1; --good-ink: #0b6b0b; --good-bg: #dff3df;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0e110f; --surface: #181b19; --ink: #f2f5f1; --ink-2: #c3cac2; --muted: #8d968e; --line: #2b302c; --line-strong: #3c433d;
    --accent: #4fc294; --accent-ink: #06231a; --crit-ink: #f29a98; --crit-bg: #3b1716; --good-ink: #4fd04f; --good-bg: #12301a; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 440px; margin: 0 auto; padding: clamp(28px, 9vh, 88px) 20px 48px; display: flex; flex-direction: column; gap: 14px; }
.eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
h2 { margin: 10px 0 0; font-size: 15px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--ink-2); font-size: 14px; }
.form { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
input, textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; min-height: 42px; width: 100%; }
textarea.code { font: 12.5px/1.5 ui-monospace, Menlo, monospace; min-height: 200px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn { display: inline-block; align-self: flex-start; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; padding: 11px 20px; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.note { border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.note-bad { background: var(--crit-bg); color: var(--crit-ink); }
.note-ok { background: var(--good-bg); color: var(--good-ink); }
.list { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }