/* =====================================================
   LOGIN PAGE — e-RAPOR ISMUBA
===================================================== */

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:#f1f5f9;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* HEADER */
.erapor-header{
  height:64px;
  background:#0f766e;
  color:#fff;
  display:flex;
  align-items:center;
  padding:0 28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo img{
  height:36px;
}

.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.logo-text .app{
  font-weight:800;
}

.logo-text small{
  font-size:12px;
  color:#e0f2f1;
}

/* MAIN */
.erapor-container{
  flex:1;
  display:grid;
  grid-template-columns:1.2fr 1fr;
}

/* BANNER */
.erapor-banner{
  background:
    linear-gradient(135deg,rgba(15,118,110,.92),rgba(17,94,89,.92)),
    url('../img/bg-login.jpg') center/cover;
  color:#fff;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.erapor-banner h1{font-size:36px;font-weight:800}
.erapor-banner h3{margin:10px 0 16px}
.erapor-banner p{max-width:420px;line-height:1.6}

/* LOGIN */
.erapor-login{
  background:#fff;
  padding:60px 70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.subtitle{color:#64748b;margin-bottom:20px}

/* INFO */
.info-akademik{
  background:#f0fdfa;
  border:1px solid #99f6e4;
  border-radius:10px;
  padding:12px;
  margin-bottom:16px;
  font-size:13px;
}

.info-row{
  display:flex;
  justify-content:space-between;
}

.info-row .value{
  font-weight:700;
  color:#0f766e;
}

.info-row.sekolah .value{
  color:#2563eb;
}

/* ALERT */
.alert{
  padding:10px;
  border-radius:8px;
  margin-bottom:14px;
  font-size:13px;
}

.alert-danger{
  background:#fee2e2;
  color:#991b1b;
}

/* FORM */
label{font-size:13px;margin-bottom:6px;display:block}
input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  margin-bottom:16px;
}

.password-box{position:relative}
.password-box i{
  position:absolute;
  right:14px;
  top:38%;
  cursor:pointer;
}

button{
  width:100%;
  padding:14px;
  background:linear-gradient(135deg,#0f766e,#115e59);
  color:#fff;
  border:none;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}

/* FOOTER */
.erapor-footer{
  height:50px;
  background:#0f172a;
  color:#94a3b8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

/* RESPONSIVE */
@media(max-width:900px){
  .erapor-container{grid-template-columns:1fr}
  .erapor-banner{display:none}
  .erapor-login{padding:40px}
}
/* ===============================
   AKUN DEMO
=============================== */

.demo-account{
    margin-top:20px;
    border:1px solid #dbeafe;
    background:#f8fafc;
    border-radius:10px;
    padding:12px;
}

.demo-account h4{
    margin:0 0 10px;
    font-size:14px;
    color:#2563eb;
}

.demo-account table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.demo-account th{
    background:#eff6ff;
    color:#1e40af;
    padding:8px;
    border:1px solid #dbeafe;
    text-align:left;
}

.demo-account td{
    padding:8px;
    border:1px solid #e5e7eb;
}

.demo-account strong{
    color:#111827;
}