*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;background:#0b416c;color:#17354d}

.login-page{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px 18px max(24px,env(safe-area-inset-bottom));
    background:
      linear-gradient(rgba(7,31,50,.18),rgba(7,31,50,.30)),
      url("login-bg-seamless.jpg") center center/cover no-repeat;
}

.login-box{
    width:min(350px,92vw);
    padding:20px 20px 16px;
    border-radius:20px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.82);
    box-shadow:0 18px 50px rgba(3,28,47,.28);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.logo{
    display:block;
    width:54px;
    height:62px;
    object-fit:contain;
    margin:0 auto 5px;
}
.login-title{text-align:center;margin-bottom:16px}
.login-title h1{
    margin:0;
    color:#123e65;
    font-size:21px;
    line-height:1.1;
    font-weight:800;
}
.login-title p{
    margin:4px 0 0;
    color:#31556f;
    font-size:11px;
    font-weight:700;
}

form label{
    display:block;
    font-size:10px;
    font-weight:700;
    color:#28475f;
    margin:0 0 5px;
}
.field{
    height:44px;
    display:flex;
    align-items:center;
    background:#fff;
    border:1px solid #dbe4ea;
    border-radius:10px;
    margin-bottom:11px;
}
.field:focus-within{
    border-color:#4d91bd;
    box-shadow:0 0 0 3px rgba(39,126,181,.10);
}
.field-icon{
    width:38px;
    text-align:center;
    color:#5d86a4;
    font-size:9px;
}
.field input{
    min-width:0;
    flex:1;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:0 8px 0 0;
    color:#17354d;
    font-size:13px;
}
.field input::placeholder{color:#9aa8b2}
.show-password{
    border:0;
    background:transparent;
    color:#2c668e;
    font-size:10px;
    font-weight:700;
    padding:0 11px;
    height:100%;
}
.submit-btn{
    width:100%;
    height:45px;
    margin-top:2px;
    border:0;
    border-radius:10px;
    background:linear-gradient(90deg,#0f4f80,#0d7099);
    color:#fff;
    font-size:13px;
    font-weight:800;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    box-shadow:0 9px 20px rgba(13,86,130,.18);
}
.mini-note{
    margin-top:13px;
    padding-top:10px;
    border-top:1px solid #e2e8ed;
    text-align:center;
    font-size:8px;
    letter-spacing:.45px;
    text-transform:uppercase;
    font-weight:700;
    color:#557186;
}
.login-alert{
    margin:-4px 0 12px;
    padding:9px 10px;
    border-radius:9px;
    background:#fff0f0;
    color:#922b2b;
    font-size:11px;
}
.page-footer{
    margin-top:12px;
    color:rgba(255,255,255,.92);
    font-size:9px;
    text-shadow:0 1px 5px rgba(0,0,0,.55);
}

/* Tablet/mobile */
@media (max-width: 700px){
    .login-page{
        padding:18px 14px max(20px,env(safe-area-inset-bottom));
        background:
          linear-gradient(rgba(7,31,50,.20),rgba(7,31,50,.34)),
          url("login-bg-seamless.jpg") center center/cover no-repeat;
    }
    .login-box{
        width:min(330px,88vw);
        padding:18px 18px 15px;
        border-radius:18px;
    }
    .logo{width:48px;height:56px}
    .login-title h1{font-size:19px}
    .login-title p{font-size:10px}
}

/* Very short desktop/mobile landscape */
@media (max-height: 680px){
    .login-page{justify-content:flex-start;padding-top:14px}
    .login-box{padding:15px 17px 13px}
    .logo{width:42px;height:48px}
    .login-title{margin-bottom:11px}
    .login-title h1{font-size:18px}
    .field{height:40px;margin-bottom:9px}
    .submit-btn{height:41px}
    .mini-note{margin-top:9px;padding-top:8px}
}


/* V4 — seamless background + text clipping safeguards */
html,body{width:100%;min-height:100%;overflow-x:hidden}
.login-page{
  background-image:linear-gradient(rgba(7,31,50,.18),rgba(7,31,50,.30)),url("login-bg-seamless.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed;
}
.login-box{overflow:visible}
.login-title h1,.login-title p,.mini-note,.page-footer,
form label,.field input,.show-password,.submit-btn{
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
}
.login-title h1,.login-title p,.mini-note,.page-footer{
  white-space:normal;
  overflow-wrap:normal;
  word-break:normal;
}
.mini-note{
  line-height:1.45;
  padding-left:4px;
  padding-right:4px;
}
.page-footer{
  width:min(350px,92vw);
  text-align:center;
  line-height:1.4;
}
@media(max-width:700px){
  .login-page{
    background-image:linear-gradient(rgba(7,31,50,.20),rgba(7,31,50,.34)),url("login-bg-seamless.jpg") !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll;
  }
  .mini-note{font-size:7.5px;letter-spacing:.3px}
}


/* V5 — polishing final: logo bersih + kartu lebih ringkas */
.login-box{
  padding-top:15px !important;
  padding-bottom:13px !important;
}
.logo{
  width:68px !important;
  height:78px !important;
  margin:0 auto 3px !important;
  object-fit:contain !important;
}
.login-title{
  margin-bottom:12px !important;
}
.login-title p{
  margin-top:3px !important;
}
.field{
  /* ukuran kolom TIDAK dikecilkan */
  height:44px !important;
}
.submit-btn{
  height:45px !important;
}
.mini-note{
  margin-top:10px !important;
  padding-top:8px !important;
}
.page-footer{
  margin-top:10px !important;
}
@media(max-width:700px){
  .login-box{
    padding:14px 17px 12px !important;
  }
  .logo{
    width:64px !important;
    height:73px !important;
  }
  .login-title{
    margin-bottom:11px !important;
  }
}
@media(max-height:680px){
  .logo{
    width:58px !important;
    height:66px !important;
  }
}