/* Halaman masuk koneksi.jawarapajak.com (9router). Token dan komponen dari JawaraPajak UI di /jp-aset/. */
@font-face { font-family: "Anybody"; src: url("/jp-aset/fonts/Anybody.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/jp-aset/fonts/PlusJakartaSans.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

html, body { margin: 0; }
body.masuk { min-height: 100vh; min-height: 100dvh; background: var(--bg-page); color: var(--ink); font-family: var(--font-sans); }
.masuk__isi { box-sizing: border-box; min-height: 100vh; min-height: 100dvh; max-width: 420px; margin: 0 auto; padding: var(--space-6) var(--space-4);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
.masuk__logo { display: block; height: 40px; width: auto; align-self: flex-start; }
.masuk__kartu { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.masuk__judul { margin: 0; font: 800 24px/30px var(--font-display); letter-spacing: -0.02em; }
.masuk__ket { margin: calc(-1 * var(--space-2)) 0 0; color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.masuk__form { display: flex; flex-direction: column; gap: var(--space-4); }
.masuk__sandi { position: relative; }
.masuk__sandi .jp-input { width: 100%; box-sizing: border-box; padding-right: 72px; }
.masuk__lihat { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: var(--bg-subtle); color: var(--ink); font: 600 13px/1 var(--font-sans); cursor: pointer; }
.masuk__lihat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.masuk__kaki { margin: 0; color: var(--ink-subtle); font-size: 12px; line-height: 16px; text-align: center; }
[data-kirim][disabled] { opacity: 0.7; cursor: progress; }
/* .jp-alert memakai display: flex, jadi atribut hidden perlu ditegaskan. */
.masuk [hidden] { display: none !important; }
@media (min-width: 600px) {
  .masuk__logo { align-self: center; }
  .masuk__kartu { padding: var(--space-6); }
}