/* Login refresh: palette drawn from the SAKIP emblem */
:root { --sakip-navy: #002068; --sakip-blue: #0060f8; --sakip-gold: #e0a828; --sakip-ink: #14233f; }
html, body { min-height: 100%; }
body { font-family: "Open Sans", Arial, sans-serif; }
.login.p-fixed {
  position: fixed; inset: 0; z-index: 0; overflow-y: auto; display: flex;
  align-items: center; justify-content: center; padding: 32px 16px;
  background: radial-gradient(ellipse at 15% 10%, rgba(0,96,248,.45), transparent 38%),
              linear-gradient(135deg, #061b46 0%, #07377e 55%, #041631 100%) !important;
}
.login.p-fixed::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(4,19,48,.78), rgba(2,34,83,.50)); }
.login.p-fixed > .container { position: relative; z-index: 2; width: 100%; max-width: 980px; margin: auto; }
.login.p-fixed > .container > .row { justify-content: center; }
.sakip-brand { max-width: 650px; margin: 0 auto 24px; padding: 0 12px; color: #fff; }
.sakip-brand__logo { display: block; width: min(100%, 440px); height: auto; max-height: 150px; object-fit: contain; margin: 0 auto 12px; }
.sakip-brand__eyebrow { margin: 0 0 6px; color: #f2bd43; font-size: .78rem; font-weight: 800; letter-spacing: .18em; }
.sakip-brand__title { max-width: 610px; margin: 0 auto 6px; color: #fff; font-size: clamp(1.05rem, 2.5vw, 1.45rem); font-weight: 700; line-height: 1.45; letter-spacing: .025em; }
.sakip-brand__region { margin: 0; color: rgba(255,255,255,.86); font-size: .92rem; font-weight: 600; letter-spacing: .12em; }
.login-card.card-block { width: min(100%, 430px); margin: 0 auto !important; padding: 28px !important; border: 1px solid rgba(255,255,255,.6); border-top: 4px solid var(--sakip-gold); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.login-card .auth-box { width: 100%; padding: 0; }
.login-card h3.txt-primary { margin: 0; color: var(--sakip-navy) !important; font-size: 1.35rem; font-weight: 700; }
.login-card hr { margin: 16px 0 20px; border-color: #e7ebf2; }
.login-card .input-group { display: flex; margin: 0 0 14px; }
.login-card .input-group .form-control, .login-card input[name="kode"] { height: 48px; padding: 10px 14px; border: 1px solid #d6deeb; border-radius: 9px !important; background: #fff; color: var(--sakip-ink); box-shadow: none; }
.login-card .input-group .form-control:focus, .login-card input[name="kode"]:focus { border-color: var(--sakip-blue); box-shadow: 0 0 0 3px rgba(0,96,248,.12); }
.login-card input::placeholder { color: #8290a5; }
.login-card .row.ml-2 { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px !important; }
.login-card .row.ml-2 .form-floating { margin: 0 !important; }
.login-card .row.ml-2 img { max-width: 145px; height: 48px; object-fit: contain; border: 1px solid #e0e6ef; border-radius: 8px; }
.login-card .row.ml-2 input[name="kode"] { width: 100%; min-width: 0; }
.login-card .form-floating label { display: none; }
.login-card input[type="submit"].btn { height: 48px; border: 0; border-radius: 9px; background: var(--sakip-navy); color: #fff; font-size: 1rem; font-weight: 700; transition: background .2s, transform .2s; }
.login-card input[type="submit"].btn:hover { background: var(--sakip-blue); transform: translateY(-1px); }
.login-card .text-inverse { color: #59677b; font-size: .88rem; }
.login-card a { color: var(--sakip-blue) !important; font-weight: 700; }
.login-card .row > .col-md-2 img { max-width: 54px; height: auto; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:last-child { margin-top: 18px; padding: 0 !important; color: rgba(255,255,255,.72); font-size: .76rem; }
.login video { position: fixed !important; inset: 0; z-index: 0 !important; opacity: .28; }
@media (max-width: 575px) {
 .login.p-fixed { align-items: flex-start; padding: 22px 12px; }
 .sakip-brand { margin-bottom: 18px; }
 .sakip-brand__logo { width: min(100%, 330px); max-height: 105px; }
 .login-card.card-block { padding: 22px 18px !important; }
 .login-card .row.ml-2 { flex-wrap: wrap; }
}
/* Typography and action controls */
.sakip-brand, .login-card { font-family: "Open Sans", Arial, sans-serif; }
.sakip-brand__eyebrow { font-size: .72rem; line-height: 1.4; }
.sakip-brand__title { text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.24); }
.sakip-brand__region { font-size: .82rem; }
.login-card h3.txt-primary { letter-spacing: .01em; }
.login-card input[type="submit"].btn,
.login-card button[type="submit"],
.login-card .btn-primary { min-height: 48px; padding: 12px 18px; border-radius: 9px; background: var(--sakip-navy); border-color: var(--sakip-navy); color: #fff; font-size: .96rem; font-weight: 700; letter-spacing: .025em; box-shadow: 0 7px 16px rgba(0,32,104,.18); transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.login-card input[type="submit"].btn:hover,
.login-card button[type="submit"]:hover,
.login-card .btn-primary:hover { background: var(--sakip-blue); border-color: var(--sakip-blue); color: #fff; box-shadow: 0 10px 20px rgba(0,96,248,.24); transform: translateY(-1px); }
.login-card input[type="submit"].btn:focus-visible,
.login-card button[type="submit"]:focus-visible,
.login-card a:focus-visible { outline: 3px solid rgba(224,168,40,.8); outline-offset: 3px; }
.login-card input[type="submit"].btn:active,
.login-card button[type="submit"]:active { transform: translateY(0); box-shadow: 0 3px 9px rgba(0,32,104,.2); }
.login-card .text-inverse { line-height: 1.6; }
.login-card a { text-decoration: none; }
.login-card a:hover { color: var(--sakip-navy) !important; text-decoration: underline; }
.login-card input.form-control { font-size: .94rem; }
@media (prefers-reduced-motion: reduce) { .login-card input[type="submit"].btn, .login-card button[type="submit"] { transition: none; } }
/* Desktop split layout using the existing Bootstrap page structure */
.login.p-fixed > .container { max-width: 1120px; }
.login.p-fixed > .container > .row > .col-sm-12 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  grid-template-areas: "brand form" "footer footer";
  align-items: center; column-gap: clamp(36px, 7vw, 100px); row-gap: 22px;
  width: 100%; max-width: 1080px; margin: 0 auto;
}
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child {
  grid-area: brand; align-self: center; padding: 0 !important; background: transparent;
  border: 0; text-align: left;
}
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand { max-width: 560px; margin: 0; text-align: left !important; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__logo { width: min(100%, 490px); max-height: none; margin: 0 0 28px; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__eyebrow { font-size: .8rem; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__title { margin: 0 0 10px; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.3; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__region { font-size: .95rem; }
.login.p-fixed > .container > .row > .col-sm-12 > .login-card { grid-area: form; width: 100%; max-width: none; }
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:last-child { grid-area: footer; width: 100%; margin: 0; padding: 14px 0 0 !important; border-top: 1px solid rgba(255,255,255,.2); text-align: center; }
/* Bootstrap form controls and buttons */
.login-card .form-control { width: 100%; font-family: inherit; }
.login-card .btn, .login-card input[type="submit"] { display: block; width: 100%; text-align: center; }
.login-card .row { margin-left: 0; margin-right: 0; }
.login-card .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
@media (max-width: 767px) {
 .login.p-fixed { align-items: flex-start; }
 .login.p-fixed > .container > .row > .col-sm-12 {
   grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "form" "footer";
   row-gap: 16px; max-width: 460px;
 }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand { max-width: 100%; text-align: center !important; }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__logo { width: min(76%, 300px); margin: 0 auto 14px; }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__eyebrow { margin-bottom: 4px; }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__title { font-size: clamp(1.1rem, 5vw, 1.5rem); }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__region { font-size: .8rem; }
 .login.p-fixed > .container > .row > .col-sm-12 > .card-header:last-child { font-size: .7rem; }
}
/* Panel spacing repair: neutralize Bootstrap's negative row gutters inside the card */
.login-card.card-block { box-sizing: border-box; padding: 14px !important; }
.login-card form, .login-card .auth-box { box-sizing: border-box; width: 100%; min-width: 0; }
.login-card .auth-box { padding: 12px 16px 10px; }
.login-card .auth-box > .row { margin-right: 0 !important; margin-left: 0 !important; }
.login-card .auth-box > .row:first-child { padding-bottom: 12px; border-bottom: 1px solid #e7ebf2; }
.login-card .auth-box > hr { display: none; }
.login-card .auth-box > .input-group { width: 100%; }
.login-card .auth-box > .row.ml-2 { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: center; margin: 4px 0 18px !important; }
.login-card .auth-box > .row.ml-2 > .form-floating { min-width: 0; width: 100%; }
.login-card .auth-box > .row.ml-2 img,
.login-card .auth-box > .row.ml-2 input[name="kode"] { display: block; width: 100%; max-width: none; box-sizing: border-box; }
.login-card .auth-box > .row.m-t-10 { margin-top: 8px !important; }
.login-card .auth-box > .row:last-child { display: flex; align-items: center; gap: 12px; margin: 18px 0 0 !important; padding-top: 14px; border-top: 1px solid #e7ebf2; }
.login-card .auth-box > .row:last-child > .col-md-10 { flex: 1 1 auto; width: auto; min-width: 0; padding: 0; }
.login-card .auth-box > .row:last-child > .col-md-2 { flex: 0 0 52px; width: 52px; max-width: 52px; padding: 0; text-align: right; }
.login-card .auth-box > .row:last-child p { margin: 0 0 5px; font-size: .88rem; line-height: 1.5; }
.login-card .auth-box > .row:last-child p:last-child { margin-bottom: 0; }
.login-card .auth-box > .row:last-child img { width: 48px; max-width: 48px; }
@media (max-width: 575px) {
 .login-card.card-block { padding: 10px !important; }
 .login-card .auth-box { padding: 10px 8px 8px; }
 .login-card .auth-box > .row.ml-2 { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 9px; }
}
/* Preserve the original navy wordmark while giving the complete logo clear contrast */
.login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__logo {
  box-sizing: border-box;
  width: min(100%, 520px);
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 14, 48, .22);
}
@media (max-width: 767px) {
  .login.p-fixed > .container > .row > .col-sm-12 > .card-header:first-child .sakip-brand__logo {
    width: min(82%, 340px);
    margin: 0 auto 16px;
    padding: 9px 12px;
    border-radius: 12px;
  }
}