/* ========================================================================== 
   HOTFIX LOGIN UNIT R2
   Gotham family + ukuran UI adaptif + satu layar tanpa page scroll.
   ========================================================================== */

:root{
  --unit-login-gotham:"Gotham","Gotham SSm","Gotham Book","Gotham Medium","Montserrat",Arial,sans-serif;
}

html:has(body.unit-login-document),
body.unit-login-document{
  width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  overflow:hidden!important;
  overscroll-behavior:none;
}

body.unit-login-document,
body.unit-login-document button,
body.unit-login-document input,
body.unit-login-document select,
body.unit-login-document textarea,
body.unit-login-document label,
body.unit-login-document a,
body.unit-login-document small,
body.unit-login-document strong,
body.unit-login-document span,
body.unit-login-document p,
body.unit-login-document h1,
body.unit-login-document h2{
  font-family:var(--unit-login-gotham)!important;
}

html[lang="ar"] body.unit-login-document,
html[lang="ar"] body.unit-login-document *{
  font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif!important;
}

.unit-login-page{
  width:100%;
  height:100vh;
  height:100svh;
  height:100dvh;
  min-height:0!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  overflow:hidden!important;
}

.unit-login-toolbar{
  flex:0 0 auto;
  width:min(1480px,calc(100% - 36px))!important;
  min-height:0;
  margin:0 auto!important;
  padding:10px 0 8px!important;
}


.unit-login-toolbar.unit-login-toolbar-picker-hidden{
  justify-content:flex-end!important;
}

.unit-login-unit-picker{
  min-height:48px!important;
  padding:6px 10px 6px 7px!important;
  border-radius:14px!important;
}

.unit-login-unit-icon{
  width:35px!important;
  height:35px!important;
  border-radius:10px!important;
  font-size:1rem!important;
}

.unit-login-unit-picker label{min-width:135px!important}
.unit-login-unit-picker small{font-size:.55rem!important}
.unit-login-unit-picker strong{font-size:.73rem!important}
.unit-login-unit-picker select{font-size:.69rem!important;padding-block:.28rem!important}

.unit-login-language .language-switcher{
  min-height:38px!important;
  padding:3px 5px!important;
}

.unit-login-shell{
  width:min(1480px,calc(100% - 36px))!important;
  min-height:0!important;
  height:auto!important;
  margin:0 auto 10px!important;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr)!important;
  border-radius:24px!important;
}

.unit-login-hero{
  min-height:0!important;
  overflow:hidden;
  justify-content:center!important;
  padding:clamp(22px,3.2vh,44px) clamp(28px,4vw,58px)!important;
}

.unit-login-hero:before{
  width:clamp(240px,24vw,360px)!important;
  height:clamp(240px,24vw,360px)!important;
  top:-145px!important;
}

.unit-login-brand-lockup{
  gap:13px!important;
  margin-bottom:clamp(14px,2.6vh,28px)!important;
}

.unit-login-brand-lockup img{
  width:clamp(50px,6.5vh,68px)!important;
  height:clamp(50px,6.5vh,68px)!important;
  padding:5px!important;
  border-radius:16px!important;
}

.unit-login-brand-lockup small{font-size:clamp(.52rem,1.05vh,.64rem)!important}
.unit-login-brand-lockup strong{font-size:clamp(1rem,2.2vh,1.32rem)!important}
.unit-login-brand-lockup span{font-size:clamp(.62rem,1.3vh,.74rem)!important}

.unit-login-hero-copy{
  max-width:680px!important;
}

.unit-login-hero-copy h1{
  max-width:680px;
  margin:0!important;
  font-family:var(--unit-login-gotham)!important;
  font-size:clamp(2.25rem,4vw,4.45rem)!important;
  font-weight:700!important;
  line-height:.96!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
  overflow-wrap:normal;
}

.unit-login-hero-copy h1:after{
  width:52px!important;
  height:3px!important;
  margin:clamp(12px,2vh,20px) 0 clamp(10px,1.5vh,15px)!important;
  box-shadow:62px 0 0 color-mix(in srgb,var(--unit-login-accent) 40%,transparent)!important;
}

.unit-login-hero-copy h2{
  margin:0 0 clamp(7px,1.2vh,11px)!important;
  font-size:clamp(1rem,2.1vh,1.55rem)!important;
  font-weight:700!important;
}

.unit-login-hero-copy p{
  max-width:600px!important;
  margin:0!important;
  font-size:clamp(.72rem,1.45vh,.9rem)!important;
  line-height:1.55!important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.unit-login-feature-grid{
  gap:10px!important;
  margin-top:clamp(15px,2.5vh,25px)!important;
}

.unit-login-feature-grid>div{
  padding:clamp(10px,1.6vh,14px) 12px!important;
  border-radius:14px!important;
}

.unit-login-feature-grid i{
  width:34px!important;
  height:34px!important;
  margin-bottom:8px!important;
  border-radius:10px!important;
  font-size:.95rem!important;
}

.unit-login-feature-grid strong{font-size:clamp(.66rem,1.2vh,.75rem)!important}
.unit-login-feature-grid span{font-size:clamp(.52rem,1vh,.59rem)!important;line-height:1.35!important}

.unit-login-trust-pill{
  gap:8px!important;
  margin-top:clamp(12px,2vh,18px)!important;
  padding:8px 13px!important;
  font-size:clamp(.57rem,1.1vh,.65rem)!important;
}

.unit-login-form-side{
  min-height:0!important;
  overflow:hidden;
  padding:clamp(16px,3vh,32px) clamp(18px,3vw,38px)!important;
}

.unit-login-form-side:before{
  inset:clamp(12px,2vh,21px)!important;
  border-radius:22px!important;
}

.unit-login-card{
  width:min(100%,520px)!important;
  max-height:100%;
  overflow:hidden;
  padding:clamp(20px,3vh,30px) clamp(22px,2.8vw,34px) clamp(18px,2.5vh,26px)!important;
  border-radius:22px!important;
}

.unit-login-card-brand{
  margin-bottom:clamp(12px,2vh,19px)!important;
}

.unit-login-card-brand img{
  width:clamp(52px,7vh,72px)!important;
  height:clamp(52px,7vh,72px)!important;
  padding:5px!important;
  border-radius:17px!important;
}

.unit-login-card-brand h2{
  margin:clamp(7px,1.2vh,12px) 0 3px!important;
  font-size:clamp(1.28rem,2.7vh,1.62rem)!important;
  font-weight:700!important;
}

.unit-login-card-brand p{font-size:clamp(.63rem,1.2vh,.74rem)!important}
.unit-login-card .alert{margin-bottom:8px!important;padding:7px 10px!important;font-size:.65rem!important}

.unit-login-form{gap:clamp(9px,1.5vh,13px)!important}
.unit-login-field label{margin-bottom:5px!important;font-size:.66rem!important}
.unit-login-field>div{min-height:46px!important;border-radius:10px!important;grid-template-columns:36px 1fr auto!important}
.unit-login-field input{height:44px!important;font-size:.76rem!important}
.unit-login-password-toggle{width:43px!important;height:44px!important}
.unit-login-form-options{font-size:.65rem!important}
.unit-login-submit{min-height:46px!important;border-radius:10px!important;font-size:.8rem!important}

.unit-login-actions{
  gap:10px!important;
  margin-top:clamp(11px,1.8vh,16px)!important;
  padding-top:clamp(10px,1.6vh,14px)!important;
  font-size:.59rem!important;
}

.unit-login-footer{
  min-height:54px!important;
  gap:18px!important;
  padding:8px max(22px,calc((100vw - 1480px)/2))!important;
}

.unit-login-footer>div{gap:8px!important}
.unit-login-footer>div>i{font-size:1.05rem!important}
.unit-login-footer strong{font-size:.61rem!important}
.unit-login-footer small{font-size:.5rem!important}
.unit-login-footer p{font-size:.53rem!important}

/* Laptop dengan tinggi layar pendek: tetap muat satu viewport. */
@media (min-width:992px) and (max-height:760px){
  .unit-login-toolbar{padding:6px 0!important}
  .unit-login-unit-picker{min-height:42px!important}
  .unit-login-unit-icon{width:31px!important;height:31px!important}
  .unit-login-shell{margin-bottom:6px!important}
  .unit-login-hero{padding-block:18px!important}
  .unit-login-brand-lockup{margin-bottom:12px!important}
  .unit-login-brand-lockup img{width:48px!important;height:48px!important}
  .unit-login-hero-copy h1{font-size:clamp(2.2rem,5.8vh,3.65rem)!important}
  .unit-login-hero-copy h1:after{margin:10px 0 9px!important}
  .unit-login-hero-copy h2{font-size:1rem!important;margin-bottom:6px!important}
  .unit-login-hero-copy p{font-size:.69rem!important;-webkit-line-clamp:2}
  .unit-login-feature-grid{margin-top:13px!important}
  .unit-login-feature-grid>div{padding:8px 10px!important}
  .unit-login-feature-grid i{width:29px!important;height:29px!important;margin-bottom:5px!important}
  .unit-login-feature-grid span{display:none!important}
  .unit-login-trust-pill{margin-top:10px!important;padding:6px 11px!important}
  .unit-login-form-side{padding:13px 24px!important}
  .unit-login-card{padding:17px 28px 16px!important}
  .unit-login-card-brand{margin-bottom:9px!important}
  .unit-login-card-brand img{width:46px!important;height:46px!important}
  .unit-login-card-brand h2{margin:5px 0 2px!important;font-size:1.22rem!important}
  .unit-login-form{gap:7px!important}
  .unit-login-field label{margin-bottom:3px!important}
  .unit-login-field>div{min-height:40px!important}
  .unit-login-field input,.unit-login-password-toggle{height:39px!important}
  .unit-login-submit{min-height:41px!important}
  .unit-login-actions{margin-top:8px!important;padding-top:8px!important}
  .unit-login-footer{min-height:44px!important;padding-block:5px!important}
}

/* Tablet dan HP: hero besar disembunyikan, form menjadi fokus dan tetap tanpa scroll. */
@media (max-width:991.98px){
  .unit-login-page{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    padding:0!important;
  }

  .unit-login-toolbar{
    width:calc(100% - 20px)!important;
    padding:7px 0 6px!important;
  }

  .unit-login-shell{
    width:calc(100% - 20px)!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    margin:0 auto 6px!important;
    border-radius:20px!important;
  }

  .unit-login-hero{display:none!important}

  .unit-login-form-side{
    order:initial!important;
    min-height:0!important;
    height:100%;
    padding:10px!important;
    background:linear-gradient(135deg,rgba(8,47,91,.1),rgba(5,20,38,.31))!important;
  }

  .unit-login-form-side:before{inset:7px!important;border-radius:16px!important}

  .unit-login-card{
    width:min(100%,500px)!important;
    max-height:calc(100% - 2px);
    padding:clamp(15px,3vh,24px) clamp(16px,5vw,28px)!important;
    border-radius:18px!important;
  }

  .unit-login-footer{
    display:flex!important;
    justify-content:center;
    min-height:32px!important;
    padding:5px 12px!important;
  }

  .unit-login-footer>div{display:none!important}
  .unit-login-footer p{grid-column:auto!important;text-align:center!important;font-size:.49rem!important}
}

@media (max-width:767.98px){
  .unit-login-toolbar{align-items:center!important;gap:7px!important}
  .unit-login-unit-picker{max-width:calc(100% - 95px)!important;min-height:42px!important;padding:5px 7px!important}
  .unit-login-unit-icon{width:31px!important;height:31px!important;font-size:.88rem!important}
  .unit-login-unit-picker label{max-width:170px!important}
  .unit-login-unit-picker small{font-size:.47rem!important}
  .unit-login-unit-picker strong{font-size:.62rem!important}
  .unit-login-language .language-switcher{min-height:36px!important}

  .unit-login-card-brand img{width:54px!important;height:54px!important}
  .unit-login-card-brand h2{font-size:1.3rem!important}
  .unit-login-field>div{min-height:45px!important}
  .unit-login-field input,.unit-login-password-toggle{height:43px!important}
  .unit-login-submit{min-height:45px!important}
  .unit-login-actions{flex-direction:row!important;align-items:center!important}
}

@media (max-width:430px){
  .unit-login-toolbar,.unit-login-shell{width:calc(100% - 12px)!important}
  .unit-login-unit-picker{max-width:calc(100% - 88px)!important}
  .unit-login-unit-picker label{max-width:135px!important}
  .unit-login-card{padding-inline:15px!important}
  .unit-login-form-options{flex-direction:row!important;align-items:center!important;gap:8px!important}
  .unit-login-actions span{display:none!important}
}

/* HP pendek / mode landscape: kompres tambahan agar tidak ada scroll. */
@media (max-width:991.98px) and (max-height:680px){
  .unit-login-toolbar{padding:4px 0!important}
  .unit-login-unit-picker{min-height:37px!important}
  .unit-login-unit-icon{width:28px!important;height:28px!important}
  .unit-login-language .language-switcher{min-height:33px!important}
  .unit-login-shell{margin-bottom:3px!important}
  .unit-login-form-side{padding:6px!important}
  .unit-login-card{padding:11px 18px!important}
  .unit-login-card-brand{margin-bottom:7px!important}
  .unit-login-card-brand img{width:42px!important;height:42px!important}
  .unit-login-card-brand h2{margin:4px 0 1px!important;font-size:1.12rem!important}
  .unit-login-card-brand p{font-size:.58rem!important}
  .unit-login-form{gap:6px!important}
  .unit-login-field label{display:none!important}
  .unit-login-field>div{min-height:40px!important}
  .unit-login-field input,.unit-login-password-toggle{height:39px!important}
  .unit-login-form-options{font-size:.58rem!important}
  .unit-login-submit{min-height:40px!important}
  .unit-login-actions{margin-top:6px!important;padding-top:6px!important}
  .unit-login-footer{min-height:24px!important;padding:3px 8px!important}
}

@media (max-width:991.98px) and (max-height:540px){
  .unit-login-card-brand img,.unit-login-card-brand p{display:none!important}
  .unit-login-card-brand h2{margin:0 0 6px!important}
  .unit-login-footer{display:none!important}
}


/* R72 security controls: tetap kompak agar halaman login tidak menambah scroll. */
#passkeyLoginButton{
  min-height:40px!important;
  padding:.42rem .75rem!important;
  font-family:var(--unit-login-gotham)!important;
  font-size:.72rem!important;
  border-radius:10px!important;
}
#passkeyStatus{font-size:.62rem!important;margin-bottom:0!important}
.unit-login-security-challenge small{font-size:.54rem!important;line-height:1.25!important}

@media (max-height:760px){
  #passkeyLoginButton{min-height:36px!important;padding:.32rem .65rem!important;font-size:.66rem!important}
  .unit-login-card .my-2:has(+ #passkeyLoginButton){margin-top:.25rem!important;margin-bottom:.25rem!important}
  body.security-challenge-active .unit-login-card-brand img{display:none!important}
  body.security-challenge-active .unit-login-card-brand h2{margin-top:0!important}
  body.security-challenge-active .unit-login-actions{display:none!important}
}

@media (max-width:991.98px) and (max-height:680px){
  #passkeyLoginButton{min-height:34px!important;font-size:.62rem!important}
  #passkeyStatus{font-size:.56rem!important;padding:.3rem .5rem!important}
  body.security-challenge-active .unit-login-card-brand{display:none!important}
}