/* ---- Base ---- */
*{box-sizing:border-box} html,body{height:100%}
body{background:#fff;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}

/* ---- Card & layout ---- */
.login-wrap{
    padding:24px}
.login-card{
  width: 500px; max-width: 92%;
  background:#fff; border-radius:24px; overflow:hidden;
  border:1px solid #e9e9e9;
}
.shadow-elev{ box-shadow:0 18px 34px rgba(0,0,0,.18); }

/* ---- Header ---- */
.login-header{ position:relative; }
.login-banner{
  background-image: url('/assets/img/backgroundLogin.png');
  background-size: cover;
  background-position: center;
  height:180px; background-size:cover; background-position:center;
  border-top-left-radius:24px; border-top-right-radius:24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
}

.logo-container {
  text-align: center;
  z-index: 2;
}

.login-logo{
  max-width:250px; height:auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  margin-bottom: 8px;
}

/* ---- System Title Styling ---- */
.logo-container h1 {
  font-size: 21px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.2px;
  margin: 0;
  margin-top: 12px;
  padding: 0;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  line-height: 1;
}

.login-title{
  position:relative;
  padding:16px 20px; text-align:center;
  font-weight:800; font-size:18px; color:#000; letter-spacing:.2px;
  border-top:1px solid #e5e5e5;
  background: #fff;
}

/* ---- Body ---- */
.login-body{ padding:22px 26px 28px; }

/* ---- Form fields ---- */
.form-group{ margin-bottom:0 }
.input-wrapper{ position:relative; width:100%; }

/* Field style (seperti gambar) */
.input-elev{
  height:48px; border-radius:8px; background:#fff;
  border:1px solid #d9dce2; font-size:14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  padding-left:52px !important; padding-right:50px !important;
}
.input-elev:focus{
  border-color:#1E4178; outline:0;
  box-shadow:0 0 0 3px rgba(30,65,120,.12);
}
.input-elev::placeholder{ color:#9aa0a6 }

/* Icon kiri dalam kotak kecil */
.icon-chip{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#1E4178; font-size:14px; z-index:2; pointer-events:none;
}

/* Toggle mata kanan */
.password-toggle{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:#7a7a7a; font-size:16px; cursor:pointer; z-index:2;
}
.password-toggle:hover{ color:#1E4178 }

/* ---- Options row ---- */
.form-check-input{ width:16px; height:16px; margin-top:2px; }
.form-check-label{ font-size:14px }
.forgot-link{ font-size:14px; color:#0d6efd; text-decoration:none }
.forgot-link:hover{ color:#0a58ca; text-decoration:underline }

/* ---- Button ---- */
.btn-submit{
  background:#1E4178; color:#fff; border:0; border-radius:8px;
  height:46px; font-weight:800; letter-spacing:.6px;
}
.btn-submit:hover{ 
  background:#183665; 
  color:#fff;
}

/* ---- Alerts ---- */
.alert{ border-radius:8px; font-size:14px; }
.alert-danger{ background:#ffebee; border:1px solid #ffcdd2; color:#c62828 }
.alert-success{ background:#e8f5e8; border:1px solid #c8e6c9; color:#2e7d32 }

/* ---- Responsive ---- */
@media (max-width: 480px){
  .login-card{ border-radius:18px }
  .login-banner{ height:160px; border-radius:18px 18px 0 0 }
  .login-logo{ max-width:160px }
  .logo-container h1 { font-size: 14px; }
  .login-title{ font-size:16px; padding:12px 16px }
  .input-elev{ height:46px; padding-left:50px!important; padding-right:48px!important }
  .icon-chip{ width:28px; height:28px; border-radius:7px; left:12px }
}