/* Halaman masuk — desain panel Rindu Rumah (app2.css) versi hijau */
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Baloo 2'; src: url('/fonts/baloo2-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #eff7ed;
  --line: #ddebd8;
  --text: #17151f;
  --muted: #6e856a;
  --accent: #5ebb50;
  --accent-2: #46a03a;
  --ok: #0cba63;
  --bad: #e11d48;
  --r: 20px;
  --glow: 0 0 24px rgba(94, 187, 80, .28);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  font: 15px/1.5 'Baloo 2', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
.wrap { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; padding: 20px; padding-top: 9vh; }

.login-logo { width: 210px; margin: 0 auto 6px; display: block; }
.kios-label { font-weight: 800; color: var(--accent); letter-spacing: 1.5px; font-size: 15px; }
.muted { color: var(--muted); }

.card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 0 4px 18px rgba(23, 21, 31, .05);
}

.label { display: block; font-size: 13px; color: var(--text); margin: 14px 0 6px; letter-spacing: .8px; text-transform: uppercase; font-weight: 800; }
.input {
  width: 100%; padding: 12px 15px; border-radius: 12px;
  border: 2px solid var(--accent); background: #fff; color: var(--text);
  font: inherit; font-weight: 600; outline: none; transition: border .2s, box-shadow .2s;
}
.input::placeholder { color: #a3c49e; font-weight: 500; }
.input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(94, 187, 80, .18); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); color: var(--accent);
  padding: 12px 20px; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  font-family: 'Baloo 2', sans-serif;
  transition: transform .12s, box-shadow .2s, background .2s, filter .2s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { box-shadow: var(--glow); background: var(--accent-2); }
.btn-lg { padding: 15px 26px; font-size: 17px; border-radius: 16px; font-weight: 800; }

.alert { border-radius: 12px; padding: 11px 15px; font-weight: 600; font-size: 13.5px; margin-bottom: 14px; }
.alert-bad { background: #fdecef; color: var(--bad); border: 2px solid #f6c6d0; }
.alert-ok { background: #e8f8ef; color: #0a9a53; border: 2px solid #bfe9d2; }

.login-note { text-align: center; font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 14px; line-height: 1.45; }
.login-footer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 26px; }