:root{
  --red:#ed111c;
  --red-dark:#ca0b14;
  --yellow:#ffc51b;
  --blue:#126bf3;
  --navy:#0f2554;
  --ink:#12254b;
  --muted:#6c7a96;
  --line:#d9e2ef;
  --soft:#eef5ff;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{
  color:var(--ink);
  font-family:Arial,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:#edf4fb;
}
button,input{font:inherit}

/* ========================= FULL DESKTOP ========================= */
.login-page{
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  padding:0;
  overflow:hidden;
}
.login-shell{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:640px;
  display:grid;
  grid-template-columns:minmax(0,58%) minmax(420px,42%);
  overflow:hidden;
  border:0;
  border-radius:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 58%,rgba(238,247,255,.10) 100%),
    url("../images/login/cbt-login-background.webp") center center/cover no-repeat;
  box-shadow:none;
  isolation:isolate;
}
.login-shell::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  z-index:0;
  width:53%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.91) 30%,
    rgba(255,255,255,.58) 66%,
    rgba(255,255,255,0) 100%);
}
.login-visual{
  position:relative;
  z-index:2;
  min-width:0;
  min-height:640px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:54px 0 54px clamp(42px,5vw,92px);
}
.visual-brand{
  position:absolute;
  top:clamp(28px,4vh,52px);
  left:clamp(42px,5vw,92px);
  display:flex;
  align-items:center;
  gap:11px;
}
.visual-brand img{width:42px;height:48px;object-fit:contain}
.visual-brand strong{
  color:#112652;
  font-size:clamp(16px,1.25vw,22px);
  line-height:1;
  font-weight:850;
}
.visual-copy{width:min(620px,90%);margin-top:-6px}
.welcome-text{
  margin:0 0 8px;
  color:#102652;
  font-size:clamp(22px,2vw,34px);
  line-height:1.15;
  font-weight:760;
}
.visual-copy h1{
  margin:0;
  font-size:clamp(42px,4.4vw,76px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-2px;
}
.visual-copy h1 span{color:#102652;font-style:normal}
.visual-copy h1 em{color:var(--red);font-style:normal}
.campus-name{
  margin:16px 0 0;
  color:#283e66;
  font-size:clamp(14px,1.15vw,20px);
  line-height:1.55;
  font-weight:520;
}
.visual-features{
  width:min(330px,76%);
  display:grid;
  gap:12px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.visual-features li{
  min-height:72px;
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border:1px solid rgba(211,225,241,.88);
  border-radius:16px;
  background:rgba(255,255,255,.90);
  box-shadow:0 10px 26px rgba(45,95,153,.10);
  backdrop-filter:blur(9px);
}
.feature-icon{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:50%;
  color:#1168ed;background:#edf5ff;
  font-size:24px;
}
.feature-copy strong,.feature-copy small{display:block}
.feature-copy strong{color:#102650;font-size:14px;line-height:1.25;font-weight:820}
.feature-copy small{margin-top:4px;color:#5d6f8c;font-size:12px;line-height:1.4}

/* ========================= RIGHT / CARD ========================= */
.login-form-panel{
  position:relative;
  z-index:3;
  min-width:0;
  min-height:640px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,4vh,50px) clamp(28px,4vw,72px) clamp(24px,4vh,50px) 18px;
}
.login-card{
  position:relative;
  width:min(100%,455px);
  min-height:570px;
  padding:28px clamp(28px,2.7vw,42px) 24px;
  overflow:hidden;
  border:1px solid rgba(214,224,236,.94);
  border-radius:24px;
  background:rgba(255,255,255,.965);
  box-shadow:0 24px 60px rgba(32,69,112,.18);
  backdrop-filter:blur(14px);
}
.login-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(145deg,rgba(255,255,255,.62),transparent 38%);
}
.login-card>*{position:relative;z-index:1}
.login-card-header{text-align:center}
.logo-circle{
  width:88px;height:88px;
  display:grid;place-items:center;
  margin:0 auto 12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 24px rgba(33,64,102,.13);
}
.logo-circle img{width:54px;height:62px;object-fit:contain}
.login-card-header h2{
  margin:0;
  color:#102650;
  font-size:clamp(24px,2vw,31px);
  line-height:1.18;
  font-weight:900;
}
.login-card-header p{
  margin:6px 0 0;
  color:#74829b;
  font-size:14px;
  line-height:1.45;
}
#loginForm{margin-top:26px}
.form-group{margin-bottom:18px}
.form-group>label{
  display:block;
  margin-bottom:8px;
  color:#12264d;
  font-size:13px;
  font-weight:800;
}
.field-control{
  width:100%;
  height:52px;
  display:flex;
  align-items:center;
  border:1px solid #d7e0ec;
  border-radius:10px;
  background:#fff;
  transition:.18s ease;
}
.field-control:focus-within{
  border-color:#8cb6ef;
  box-shadow:0 0 0 4px rgba(30,111,239,.08);
}
.field-control>i{
  width:48px;
  flex:0 0 48px;
  color:#687996;
  text-align:center;
  font-size:18px;
}
.field-control input{
  min-width:0;
  width:100%;
  height:100%;
  padding:0 14px 0 0;
  border:0;
  outline:0;
  color:#233657;
  background:transparent;
  font-size:14px;
}
.field-control input::placeholder{color:#8b97ab;opacity:1;font-size:13.5px}
.password-toggle{
  width:48px;height:100%;flex:0 0 48px;
  display:grid;place-items:center;
  padding:0;border:0;outline:0;
  color:#5f7190;background:transparent;
  cursor:pointer;font-size:18px;
}
.password-toggle:hover{color:var(--red)}
.captcha-group{margin-bottom:22px}
.captcha-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 142px 52px;
  gap:9px;
}
.captcha-answer-control>i{width:46px;flex-basis:46px}
.captcha-code{
  height:52px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  border:1px solid #dce4ef;
  border-radius:10px;
  background:
    radial-gradient(circle at 12% 30%,rgba(86,112,146,.10) 0 1px,transparent 1.4px),
    radial-gradient(circle at 70% 65%,rgba(86,112,146,.08) 0 1px,transparent 1.4px),
    #fbfcfe;
  background-size:16px 16px,22px 22px,auto;
  font-size:20px;font-weight:850;
  user-select:none;
}
.captcha-code b{color:#a3adbb;font-size:11px;font-weight:700}
.digit-red{color:#e3131e}
.digit-blue{color:#5d27da}
.digit-green{color:#159242}
.captcha-refresh{
  width:52px;height:52px;
  display:grid;place-items:center;
  padding:0;
  border:1px solid #d7e0ec;
  border-radius:10px;
  color:#61728e;background:#fff;
  cursor:pointer;font-size:19px;
}
.captcha-refresh:hover{color:#176deb;border-color:#9dbfe9;background:#f7fbff}
.captcha-refresh.is-loading i{animation:captchaSpin .62s linear infinite}
@keyframes captchaSpin{to{transform:rotate(360deg)}}
.login-button{
  width:100%;
  height:52px;
  display:grid;place-items:center;
  padding:0;
  border:0;border-radius:10px;
  color:#fff;
  background:linear-gradient(90deg,#354279 0%,#284a85 100%);
  box-shadow:0 9px 20px rgba(47,81,126,.20);
  cursor:pointer;
  font-size:14px;font-weight:800;
}
.login-button:hover{filter:brightness(.97);box-shadow:0 12px 25px rgba(47,81,126,.26)}
.login-button:active{transform:translateY(1px)}
.login-button:disabled{cursor:wait;opacity:.78}
.button-content,.button-loading{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.button-loading[hidden],.button-content[hidden]{display:none!important}
.spinner{
  width:15px;height:15px;
  border:2px solid rgba(255,255,255,.42);
  border-top-color:#fff;border-radius:50%;
  animation:loginSpin .62s linear infinite;
}
@keyframes loginSpin{to{transform:rotate(360deg)}}
.login-help{margin-top:19px;text-align:center}
.help-divider{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:20px;
}
.help-divider::before{
  content:"";
  position:absolute;left:0;right:0;top:50%;
  height:1px;background:#e6ebf1;
}
.help-divider span{
  position:relative;z-index:1;
  padding:0 14px;
  color:#25303e;background:#fff;
  font-size:11px;
}
.login-help a{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:7px;
  color:#2f517e;
  text-decoration:none;
  font-size:11px;font-weight:620;
}
.login-help a i{font-size:15px}
.login-help a:hover{text-decoration:underline}

/* ========================= RESPONSIVE ========================= */
@media (max-width:1180px){
  .login-shell{grid-template-columns:minmax(0,54%) minmax(400px,46%)}
  .login-visual{padding-left:46px}
  .visual-brand{left:46px}
  .login-form-panel{padding-right:24px}
  .login-card{width:min(100%,420px)}
}

@media (max-width:900px){
  body{overflow-y:auto}
  .login-page{overflow:visible}
  .login-shell{
    width:100%;
    height:auto;
    min-height:100dvh;
    display:block;
    background-position:35% center;
  }
  .login-shell::before{
    width:100%;
    height:390px;
    background:linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.82) 68%,rgba(255,255,255,.30));
  }
  .login-visual{
    height:390px;
    min-height:390px;
    display:block;
    padding:24px 28px;
  }
  .visual-brand{position:static}
  .visual-brand img{width:34px;height:40px}
  .visual-brand strong{font-size:15px}
  .visual-copy{width:min(100%,560px);margin-top:24px}
  .welcome-text{font-size:19px}
  .visual-copy h1{font-size:38px;letter-spacing:-1px}
  .campus-name{margin-top:10px;font-size:12.5px}
  .visual-features{
    width:min(100%,620px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-top:21px;
  }
  .visual-features li{
    min-height:88px;
    grid-template-columns:1fr;
    gap:5px;
    padding:9px 7px;
    text-align:center;
  }
  .feature-icon{width:38px;height:38px;margin:auto;font-size:18px}
  .feature-copy strong{font-size:10px}
  .feature-copy small{display:none}
  .login-form-panel{
    height:auto;
    min-height:0;
    justify-content:center;
    padding:18px 18px 30px;
  }
  .login-card{
    width:min(100%,480px);
    min-height:0;
    padding:26px 30px 24px;
    border-radius:20px;
  }
}

@media (max-width:576px){
  .login-shell{background-position:28% center}
  .login-shell::before{height:330px}
  .login-visual{
    height:330px;
    min-height:330px;
    padding:18px 16px;
  }
  .visual-brand{gap:8px}
  .visual-brand img{width:30px;height:35px}
  .visual-brand strong{font-size:13px}
  .visual-copy{margin-top:18px}
  .welcome-text{font-size:17px;margin-bottom:5px}
  .visual-copy h1{font-size:clamp(30px,9vw,38px);line-height:1}
  .campus-name{margin-top:8px;font-size:10.5px;line-height:1.45}
  .visual-features{gap:6px;margin-top:15px}
  .visual-features li{min-height:72px;padding:7px 5px;border-radius:11px}
  .feature-icon{width:32px;height:32px;font-size:16px}
  .feature-copy strong{font-size:8.5px}
  .login-form-panel{padding:12px 12px 24px}
  .login-card{width:100%;padding:22px 18px 20px;border-radius:17px}
  .logo-circle{width:72px;height:72px}
  .logo-circle img{width:44px;height:51px}
  .login-card-header h2{font-size:22px}
  .login-card-header p{font-size:12px}
  #loginForm{margin-top:22px}
  .form-group{margin-bottom:16px}
  .form-group>label{font-size:12px}
  .field-control{height:50px}
  .captcha-row{
    grid-template-columns:minmax(0,1fr) 112px 50px;
    gap:6px;
  }
  .captcha-code{height:50px;gap:5px;font-size:16px}
  .captcha-refresh{width:50px;height:50px}
  .login-button{height:50px}
}

@media (max-width:390px){
  .login-visual{height:315px;min-height:315px}
  .login-shell::before{height:315px}
  .visual-copy h1{font-size:29px}
  .visual-features{margin-top:12px}
  .feature-copy strong{font-size:8px}
  .login-card{padding-left:15px;padding-right:15px}
  .captcha-row{grid-template-columns:minmax(0,1fr) 100px 46px}
  .captcha-refresh{width:46px}
  .captcha-code{font-size:14px}
}

/* laptop/desktop dengan tinggi viewport pendek */
@media (min-width:901px) and (max-height:720px){
  .login-shell,.login-visual,.login-form-panel{min-height:600px}
  .login-card{min-height:540px;padding-top:20px;padding-bottom:18px}
  .logo-circle{width:70px;height:70px}
  .logo-circle img{width:43px;height:50px}
  .login-card-header h2{font-size:24px}
  #loginForm{margin-top:18px}
  .form-group{margin-bottom:14px}
  .field-control,.captcha-code,.captcha-refresh,.login-button{height:46px}
  .captcha-refresh{width:46px}
  .captcha-row{grid-template-columns:minmax(0,1fr) 126px 46px}
  .login-help{margin-top:14px}
}