/*
 * SNJ login theme — mengikuti desain portal.snj.id
 * (neutral-950, glass card white/5, border white/10, aksen emas #D4AF37).
 */
:root {
  --snj-gold: #d4af37;
  --snj-gold-dark: #b59226;
  --snj-bg: #0a0a0a;
  --snj-text: #fafafa;
  --snj-text-soft: #e5e5e5;
  --snj-muted: #d4d4d4;
  --snj-subtle: #a3a3a3;
  --snj-border: rgba(255, 255, 255, 0.1);
  --snj-glass: rgba(255, 255, 255, 0.05);
  --snj-input-bg: rgba(23, 23, 23, 0.55);
  --snj-input-border: rgba(82, 82, 82, 0.55);
  --snj-danger: #fca5a5;
  --snj-radius: 12px;
  --snj-radius-lg: 16px;
  --snj-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

body.snj-body {
  font-family: var(--snj-font);
  background: var(--snj-bg);
  color: var(--snj-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--snj-gold); color: #000; }

/* ---------- Background (sama dengan portal) ---------- */
.snj-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../img/background.jpg") center / cover no-repeat;
  animation: snj-bg-in 1.5s ease-out both;
}
.snj-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.3);
  backdrop-filter: blur(1px);
}
.snj-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 45%, rgba(10, 10, 10, 0.75) 100%),
    linear-gradient(to left, rgba(10, 10, 10, 0.5) 0%, transparent 55%);
}

/* ---------- Layout ---------- */
.snj-login {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 80rem;
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
}

.snj-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: snj-drop .6s ease-out both;
}

.snj-brand { display: flex; align-items: center; gap: 12px; }
.snj-brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.snj-brand-name {
  display: block;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.025em;
}
.snj-brand-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--snj-muted);
}

.snj-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 40px 0;
}

.snj-hero { display: none; }

@media (min-width: 1024px) {
  .snj-main { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; }
  .snj-hero { display: block; animation: snj-slide-in .7s ease-out .2s both; }
}

.snj-hero-title {
  margin: 0 0 20px;
  font-size: 54px;
  font-weight: 600;
  line-height: 1.1;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.snj-gold {
  color: var(--snj-gold);
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.snj-hero-desc {
  max-width: 420px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--snj-text-soft);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- Card ---------- */
.snj-card {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 32px;
  border-radius: var(--snj-radius-lg);
  background: var(--snj-glass);
  border: 1px solid var(--snj-border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  animation: snj-rise .7s ease-out .3s both;
}
@media (max-width: 480px) {
  .snj-login { padding: 24px 16px 16px; }
  .snj-card { padding: 24px 20px; }
}

#kc-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.snj-card-subtitle {
  margin: 6px 0 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--snj-muted);
}
.snj-card-header { margin-bottom: 4px; }
.snj-card-header + #kc-content .snj-alert:first-child,
.snj-card-header + #kc-content form:first-child { margin-top: 20px; }

.snj-required-note { margin: 0 0 8px; font-size: 12px; color: var(--snj-subtle); }
.required { color: var(--snj-danger); }

/* Username yang sedang login (halaman lanjutan, mis. ganti password) */
.snj-username {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--snj-radius);
  background: var(--snj-input-bg);
  border: 1px solid var(--snj-input-border);
  font-size: 14px;
}
.snj-username-label { color: var(--snj-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.snj-username-value { flex: 1; font-weight: 500; }

/* ---------- Form ---------- */
.snj-field { margin-bottom: 18px; }
.snj-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--snj-text-soft);
}

.snj-input-icon-wrap, .snj-input-group { position: relative; }
.snj-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--snj-subtle);
  pointer-events: none;
  transition: color .2s;
}
.snj-input-icon-wrap:focus-within .snj-input-icon { color: var(--snj-gold); }

.snj-input {
  width: 100%;
  padding: 13px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--snj-text);
  background: var(--snj-input-bg);
  border: 1px solid var(--snj-input-border);
  border-radius: var(--snj-radius);
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.snj-input.snj-input-with-icon { padding-left: 46px; }
.snj-input-group .snj-input { padding-right: 50px; }
.snj-input::placeholder { color: var(--snj-subtle); }
.snj-input:hover { border-color: rgba(115, 115, 115, 0.8); }
.snj-input:focus {
  background: rgba(23, 23, 23, 0.75);
  border-color: rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}
.snj-input[aria-invalid="true"] { border-color: rgba(248, 113, 113, 0.7); }
.snj-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.25); }
.snj-input:-webkit-autofill {
  -webkit-text-fill-color: var(--snj-text);
  -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset;
  caret-color: var(--snj-text);
}

.snj-field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--snj-danger);
}

/* Tombol show/hide password */
.snj-eye-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--snj-subtle);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.snj-eye-btn:hover { color: var(--snj-text); background: rgba(255, 255, 255, 0.06); }
.snj-eye-btn:focus-visible { outline: 2px solid var(--snj-gold); outline-offset: 1px; }

/* Remember me + link */
.snj-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 22px;
  font-size: 13px;
  color: var(--snj-muted);
}
.snj-checkbox, .checkbox label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--snj-muted);
  cursor: pointer;
  user-select: none;
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  display: inline-grid;
  place-content: center;
  border-radius: 4px;
  border: 1px solid rgba(115, 115, 115, 0.8);
  background: rgba(23, 23, 23, 0.6);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
input[type="checkbox"]:checked { background: var(--snj-gold); border-color: var(--snj-gold); }
input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  transform: translateY(-1px) rotate(-45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--snj-gold); outline-offset: 2px; }

.snj-options, .snj-options-wrap { margin-bottom: 16px; }

.snj-link, #kc-content a:not(.snj-btn):not(.snj-social-btn) {
  color: var(--snj-gold);
  text-decoration: none;
  font-weight: 500;
}
.snj-link:hover, #kc-content a:not(.snj-btn):not(.snj-social-btn):hover { text-decoration: underline; }

.snj-hint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--snj-subtle);
}
.snj-center { text-align: center; font-size: 13px; }

/* ---------- Buttons ---------- */
.snj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--snj-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s, box-shadow .2s, filter .2s, background-color .2s;
}
.snj-btn-block { width: 100%; }
.snj-btn-lg { padding: 14px 20px; }
.snj-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.snj-btn:hover svg { transform: translateX(2px); }

.snj-btn-primary {
  color: #0a0a0a;
  background: linear-gradient(to right, rgba(212, 175, 55, 0.95), rgba(181, 146, 38, 0.95));
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.snj-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); }
.snj-btn-primary:active { transform: scale(0.98); }
.snj-btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.snj-btn-primary:disabled { opacity: .7; cursor: progress; }

.snj-btn-secondary {
  color: var(--snj-text);
  background: rgba(38, 38, 38, 0.6);
  border-color: rgba(64, 64, 64, 0.8);
}
.snj-btn-secondary:hover { background: rgba(64, 64, 64, 0.8); }

.snj-form-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.snj-form-buttons .snj-btn { flex: 1 1 auto; }

/* ---------- Alerts ---------- */
.snj-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: var(--snj-radius);
  font-size: 13.5px;
  line-height: 1.5;
  backdrop-filter: blur(8px);
}
.snj-alert .snj-icon { margin-top: 1px; }
.alert-error { background: rgba(127, 29, 29, 0.35); border-color: rgba(248, 113, 113, 0.35); color: #fecaca; }
.alert-warning { background: rgba(120, 53, 15, 0.35); border-color: rgba(251, 191, 36, 0.35); color: #fde68a; }
.alert-success { background: rgba(20, 83, 45, 0.35); border-color: rgba(74, 222, 128, 0.35); color: #bbf7d0; }
.alert-info { background: rgba(30, 58, 138, 0.35); border-color: rgba(96, 165, 250, 0.35); color: #bfdbfe; }

/* ---------- Social / Google (tahap berikutnya) ---------- */
.snj-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--snj-subtle);
}
.snj-divider::before, .snj-divider::after { content: ""; flex: 1; height: 1px; background: var(--snj-border); }
.snj-social-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.snj-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--snj-radius);
  border: 1px solid var(--snj-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--snj-text);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.snj-social-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.snj-social-btn-disabled { opacity: .6; pointer-events: none; }
.snj-social-icon { width: 18px; height: 18px; }

/* ---------- Info area & halaman bawaan lain ---------- */
.snj-info {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--snj-border);
  text-align: center;
  font-size: 13px;
  color: var(--snj-muted);
}
.instruction, #kc-error-message p, #kc-info-message p { color: var(--snj-muted); font-size: 14px; line-height: 1.6; }

/* ---------- Locale switcher ---------- */
.snj-locale { position: relative; }
.snj-locale-dropdown { position: relative; }
.snj-locale-dropdown > button {
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--snj-muted);
  background: rgba(38, 38, 38, 0.6);
  border: 1px solid rgba(64, 64, 64, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.snj-locale-dropdown > button:hover { color: var(--snj-text); }
.snj-locale-list {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 10;
  min-width: 150px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: rgba(23, 23, 23, 0.95);
  border: 1px solid rgba(64, 64, 64, 0.8);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.snj-locale-list::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.snj-locale-dropdown:hover .snj-locale-list,
.snj-locale-dropdown:focus-within .snj-locale-list { display: block; }
.snj-locale-item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--snj-muted);
  text-decoration: none;
}
.snj-locale-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--snj-text); }

/* ---------- Footer ---------- */
.snj-footer {
  padding-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--snj-subtle);
}

/* ---------- Icons (lucide, via CSS mask) ---------- */
.snj-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--snj-i) center / contain no-repeat;
  mask: var(--snj-i) center / contain no-repeat;
}
.snj-icon-eye { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.snj-icon-eye-off { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); }
.snj-icon-error { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); }
.snj-icon-warning { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.snj-icon-success { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E"); }
.snj-icon-info { --snj-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }

/* ---------- Motion (mengikuti animasi framer-motion di portal) ---------- */
@keyframes snj-bg-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@keyframes snj-drop { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: none; } }
@keyframes snj-slide-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes snj-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Konfirmasi tautkan akun (link-idp-action.ftl) ---------- */
#kc-link-text { margin: 10px 0 22px; font-size: 14px; line-height: 1.6; color: var(--snj-muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-actions .snj-btn { flex: 1 1 140px; }

/* ---------- OTP email perangkat baru (snj-device-otp.ftl, snj-email-setup.ftl) ---------- */
.snj-otp-input {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
}
.snj-otp-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
}
.snj-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--snj-gold);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.snj-link-button:hover { text-decoration: underline; }
.snj-link-button:focus-visible { outline: 2px solid var(--snj-gold); outline-offset: 2px; border-radius: 4px; }