/* Halaman masuk Panel Admin (siteman), tampilan baru. Hanya dimuat oleh admin/auth/index.blade.php (bukan Layanan Mandiri). */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fonts/admin-modern/plus-jakarta-sans-latin.woff2) format("woff2"); }

:root {
  --bg: #F4F6FB; --card: #FFFFFF; --text: #0F1B2D; --muted: #5D6B82; --line: #E3E8F0;
  --input: #EAF0FC; --input-focus: #FFFFFF; --brand: #1F9D7A; --brand2: #2A6BE0; --aksi: #0B7A57; --aksi-hover: #096A4B; --on-aksi: #FFFFFF; --danger: #D93F4C; --ok-bg: #E3F5EE; --ok-ink: #0B6B50;
  --shadow: 0 20px 60px rgba(15, 27, 45, .12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1220; --card: #131C2E; --text: #EEF2FA; --muted: #93A1BA; --line: #243049;
    --input: #1A2740; --input-focus: #0F192C; --aksi: #34D3A1; --aksi-hover: #5FE0B8; --on-aksi: #08130F; --ok-bg: #12352C; --ok-ink: #8FE0C3; --shadow: 0 20px 60px rgba(0, 0, 0, .5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1220; --card: #131C2E; --text: #EEF2FA; --muted: #93A1BA; --line: #243049;
  --input: #1A2740; --input-focus: #0F192C; --aksi: #34D3A1; --aksi-hover: #5FE0B8; --on-aksi: #08130F; --ok-bg: #12352C; --ok-ink: #8FE0C3; --shadow: 0 20px 60px rgba(0, 0, 0, .5); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body.pnl { height: 100%; margin: 0; }
body.pnl { font: 400 14px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
.pnl-page { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100%; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ===== panel kiri ===== */
.pnl-hero { position: relative; overflow: hidden; color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(150deg, #0F6B4F 0%, #1F9D7A 38%, #2F86B8 72%, #3B63D6 100%); }
.pnl-hero svg.pnl-terasering { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.pnl-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 20% 90%, rgba(0, 0, 0, .35), transparent 70%); pointer-events: none; }
.pnl-hero > * { position: relative; z-index: 1; }
.pnl-kembali { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: #fff; text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px); transition: .2s; }
.pnl-kembali:hover, .pnl-kembali:focus-visible { background: rgba(255, 255, 255, .24); transform: translateX(-2px); color: #fff; text-decoration: none; }
.pnl-chips { display: flex; flex-wrap: wrap; gap: 12px; margin: auto 0 28px; }
.pnl-chip { padding: 14px 18px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(10px); min-width: 118px; }
.pnl-chip b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pnl-chip span { font-size: 12px; opacity: .85; }
.pnl-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); margin-bottom: 16px; }
.pnl-hero h1 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; max-width: 560px; margin: 0; }
.pnl-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; margin: 18px 0 0; opacity: .9; }
.pnl-copy svg { flex: none; }

/* ===== panel kanan ===== */
.pnl-side { display: flex; align-items: center; justify-content: center; padding: 32px; position: relative; }
.pnl-tema { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pnl-tema:hover { color: var(--text); }
.pnl-tema .terang { display: none; }
:root[data-theme="dark"] .pnl-tema .gelap { display: none; }
:root[data-theme="dark"] .pnl-tema .terang { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pnl-tema .gelap { display: none; } :root:not([data-theme="light"]) .pnl-tema .terang { display: block; } }
.pnl-card { width: 100%; max-width: 440px; background: var(--card); border-radius: 28px; padding: 36px; box-shadow: var(--shadow); border: 1px solid var(--line); animation: pnl-naik .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pnl-naik { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pnl-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; color: inherit; text-decoration: none; }
.pnl-brand:hover { text-decoration: none; color: inherit; }
.pnl-logo { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #FDE68A, #F59E0B); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(245, 158, 11, .3); flex: none; overflow: hidden; }
.pnl-logo img { width: 42px; height: 42px; object-fit: contain; }
.pnl-brand strong { display: block; font-size: 15px; font-weight: 700; }
.pnl-brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.pnl-bsre { height: 30px; width: auto; margin-left: auto; }
.pnl-card h2 { font-size: 28px; letter-spacing: -.03em; font-weight: 800; margin: 0 0 6px; line-height: 1.2; }
.pnl-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

/* ===== isian ===== */
.pnl .form-group { margin: 0 0 14px; }
.pnl-f { position: relative; margin-bottom: 14px; }
.pnl-f > svg.ic { position: absolute; left: 16px; top: 25px; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.pnl input[type="text"], .pnl input[type="password"], .pnl input[type="email"], .pnl input[type="number"], .pnl .form-control {
  width: 100%; height: 50px; border: 1.5px solid transparent; border-radius: 14px; background: var(--input); color: var(--text);
  font: inherit; font-size: 14px; padding: 0 16px; outline: none; transition: .18s; box-shadow: none; }
.pnl-f input[type="text"], .pnl-f input[type="password"] { padding: 0 48px 0 46px; }
.pnl input::placeholder { color: var(--muted); opacity: 1; }
.pnl input:focus, .pnl .form-control:focus { background: var(--input-focus); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31, 157, 122, .18); }
.pnl input.error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(217, 63, 76, .14); }
.pnl input[readonly] { opacity: .75; }
.pnl input:disabled { opacity: .6; cursor: not-allowed; }
.pnl label.error { display: block; color: var(--danger); font-size: 12.5px; font-weight: 600; margin: 6px 2px 0; }
.pnl-mata { position: absolute; right: 8px; top: 25px; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 10px; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.pnl-mata:hover { background: rgba(127, 127, 127, .15); color: var(--text); }
.pnl-mata svg { width: 18px; height: 18px; }
.pnl-mata .tutup { display: none; }
.pnl-mata[aria-pressed="true"] .buka { display: none; }
.pnl-mata[aria-pressed="true"] .tutup { display: block; }

/* captcha: gambar + muat ulang | isian kode */
.pnl-captcha { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-bottom: 14px; }
.pnl-cap-img { display: flex; align-items: center; gap: 4px; height: 50px; border-radius: 14px; border: 0; background: #fff; padding: 0 6px 0 8px; overflow: hidden; }
.pnl-cap-img img { height: 30px; width: auto; display: block; }
.pnl-muat { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #EEF1F6; color: #4A5870; cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; }
.pnl-muat svg { width: 16px; height: 16px; transition: .4s; }
.pnl-muat:hover svg { transform: rotate(180deg); }
.pnl-captcha input { padding: 0 12px 0 16px; }
/* captcha pada halaman lain (lupa sandi) yang memakai #captcha biasa */
.pnl #captcha { height: 50px; width: auto; border-radius: 14px; border: 0; background: #fff; padding: 10px; }
.pnl .g-recaptcha { margin-bottom: 14px; }

.pnl-baris { display: flex; justify-content: flex-end; margin: 4px 0 18px; }
.pnl-baris a, .pnl-tautan a { color: var(--brand); font-weight: 700; font-size: 13.5px; text-decoration: none; }
.pnl-baris a:hover, .pnl-tautan a:hover { text-decoration: underline; }
.pnl-tautan { text-align: center; margin-top: 14px; }

/* ===== tombol ===== */
.pnl .btn, .pnl button[type="submit"] { width: 100%; min-height: 50px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: .2s; padding: 0 18px; text-decoration: none;
  background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.pnl .btn:hover { border-color: var(--brand); background: rgba(31, 157, 122, .06); color: var(--text); text-decoration: none; }
.pnl button[type="submit"], .pnl .btn.pnl-utama { color: var(--on-aksi); border-color: transparent; background: var(--aksi); box-shadow: 0 10px 24px rgba(11, 122, 87, .26); }
.pnl button[type="submit"]:hover, .pnl .btn.pnl-utama:hover { color: var(--on-aksi); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(11, 122, 87, .34); background: var(--aksi-hover); }
.pnl button[type="submit"]:active { transform: none; }
.pnl button[type="submit"][disabled] { opacity: .7; cursor: not-allowed; transform: none; }
.pnl .pnl-putar { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, currentColor 40%, transparent); border-top-color: currentColor; animation: pnl-putar .7s linear infinite; display: none; }
.pnl .memuat .pnl-putar { display: block; }
.pnl .pnl-ikon { width: 24px; height: 24px; flex: none; }
.pnl .memuat .pnl-ikon { display: none; }
.pnl .memuat { cursor: progress !important; }
@keyframes pnl-putar { to { transform: rotate(360deg); } }
.pnl .sj-atau { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: 12px; font-weight: 600; }
.pnl .sj-atau::before, .pnl .sj-atau::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.pnl #sjTombol { border-color: transparent; background: #F6B352; color: #10242A; box-shadow: 0 10px 24px rgba(214, 138, 32, .26); }
.pnl #sjTombol:hover:not([disabled]) { background: #EFA53C; color: #10242A; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(214, 138, 32, .34); }
.pnl #sjTombol:active { transform: none; }
.pnl #sjTombol svg { width: 24px; height: 24px; color: currentColor; flex: none; }
.pnl #sjTombol[disabled] { opacity: .7; cursor: progress; }
.pnl #sjPesan:empty { display: none; }
.pnl #sjMasuk { margin: 0; }

/* ===== pesan ===== */
.pnl .alert, .pnl .callout { border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; font-size: 13.5px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 9%, var(--card)); color: var(--text); text-align: left; }
.pnl .alert p, .pnl .callout p { margin: 0; }
.pnl .alert p + p { margin-top: 4px; }
.pnl .alert h5 { font-size: 13.5px; margin: 0 0 6px; }
.pnl .alert a { color: var(--brand); font-weight: 700; }
.pnl .alert-success, .pnl .alert-info, .pnl .callout-info { border-color: color-mix(in srgb, var(--brand) 30%, transparent); background: var(--ok-bg); }
.pnl .callout p:first-child { font-size: 16px !important; font-weight: 700; }
.pnl .text-muted { color: var(--muted); }
.pnl-info { display: flex; gap: 8px; align-items: flex-start; margin: -10px 0 20px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); font-size: 13px; line-height: 1.5; }
.pnl-info svg { flex: none; margin-top: 1px; }
.pnl .mt-4 { margin-top: 0; }
.pnl br:first-child:has(+ .alert) { display: none; }

.pnl-kaki { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 12px; }
.pnl-kaki a { color: inherit; text-decoration: none; }
.pnl-kaki a:hover { text-decoration: underline; }

/* SweetAlert mengikuti huruf halaman */
.pnl .swal2-popup { font-family: inherit; border-radius: 20px; }

/* ===== responsif ===== */
@media (max-width: 900px) {
  .pnl-page { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pnl-hero { padding: 24px 24px 56px; gap: 28px; }
  .pnl-chips { display: none; }
  .pnl-hero h1 { font-size: 26px; }
  .pnl-copy { margin-top: 12px; font-size: 12px; }
  .pnl-tag { margin-bottom: 10px; }
  .pnl-side { padding: 0 16px 32px; align-items: flex-start; }
  .pnl-card { margin-top: -36px; padding: 28px 22px; position: relative; z-index: 1; }
  .pnl-tema { display: none; }
}
@media (max-width: 360px) { .pnl-captcha { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pnl *, .pnl *::before, .pnl *::after { animation: none !important; transition: none !important; } }