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

body{
font-family:Arial, Helvetica, sans-serif;
background:white;
overflow-x:hidden;
}

/* ================= HEADER ================= */
.header{
display:flex;
align-items:center;
padding:0.7rem 4%;
border-bottom:0.08rem solid #ddd;
gap:0.6rem;
flex-wrap:wrap;
}

.logo-header{
width:clamp(1.8rem,3vw,2.3rem);
height:auto;
}

.title-header{
font-size:clamp(0.75rem,1.4vw,1.1rem);
font-weight:bold;
line-height:1.3;
}

/* ================= CONTAINER ================= */
.container{
display:flex;
align-items:center;
justify-content:center;
gap:3%;
padding:2%;
min-height:90vh;
width:100%;
}

/* ================= LEFT ================= */
.left{
flex:1;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.welcome{
font-size:clamp(1.2rem,2.5vw,2.3rem);
font-weight:bold;
line-height:1.1;
}

.welcome-sub{
font-size:clamp(0.8rem,1.3vw,1rem);
color:#6b7280;
margin-top:1%;
max-width:80%;
}

.left img{
width:85%;
max-width:32rem;
height:auto;
margin-top:3%;
}

/* ================= RIGHT ================= */
.right{
flex:0.8;
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

/* ================= LOGIN ================= */
.login-box{
background:#f5f7ff;
padding:5%;
width:100%;
max-width:22rem;
border-radius:0.9rem;
box-shadow:0 0.3rem 1rem rgba(0,0,0,0.06);
text-align:center;
margin:auto;
}

.logo{
width:20%;
max-width:4rem;
height:auto;
margin-bottom:2%;
}

.login-title{
font-size:clamp(1.2rem,1.8vw,1.8rem);
font-weight:bold;
margin-top:1%;
}

.subtitle{
font-size:clamp(0.75rem,1.2vw,0.9rem);
color:#6b7280;
margin-bottom:4%;
}

/* ================= INPUT ================= */
.input-group{
text-align:left;
margin-bottom:3%;
}

.input-group label{
font-size:clamp(0.8rem,1.2vw,0.95rem);
display:block;
margin-bottom:1%;
}

.input-group input{
width:100%;
padding:3%;
border:0.08rem solid #ccc;
border-radius:0.5rem;
margin-top:1%;
font-size:clamp(0.8rem,1.2vw,0.95rem);
transition:0.2s;
}

/* FOCUS */
.input-group input:focus{
border:0.08rem solid #1a73e8;
outline:none;
box-shadow:0 0 0 0.08rem #1a73e8;
}

/* ERROR */
.error-text{
color:#d93025;
font-size:0.75rem;
margin-top:1.5%;
animation:fadeIn 0.2s ease-in-out;
}

.input-error{
border:0.08rem solid #d93025 !important;
background:#fff6f6;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(-0.15rem);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* ================= PASSWORD ================= */
.password-box{
position:relative;
}

.password-box input{
padding-right:11%;
}

.eye{
position:absolute;
right:4%;
top:50%;
transform:translateY(-50%);
cursor:pointer;
width:4.5%;
max-width:1rem;
opacity:0.6;
transition:0.2s;
}

.eye:hover{
opacity:1;
}

/* ================= LUPA PASSWORD ================= */
.forgot{
text-align:right;
font-size:0.78rem;
margin-top:1.5%;
}

.forgot a{
color:#2563eb;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.forgot a:hover{
color:#1d4ed8;
text-decoration:underline;
}

/* ================= BUTTON ================= */
.login-btn{
width:100%;
padding:3%;
background:#2563eb;
color:white;
border:none;
border-radius:0.5rem;
margin-top:3%;
cursor:pointer;
font-size:clamp(0.85rem,1.2vw,0.95rem);
transition:0.3s;
}

.login-btn:hover{
background:#1d4ed8;
}

/* ================= MOBILE ================= */
@media (max-width:768px){

.header{
padding:0.7rem 4%;
}

.container{
flex-direction:column;
padding:4%;
gap:1.5rem;
min-height:auto;
}

.left{
width:100%;
}

.right{
width:100%;
}

.welcome{
font-size:2rem;
}

.welcome-sub{
font-size:0.9rem;
max-width:95%;
}

.left img{
width:80%;
max-width:18rem;
margin-top:5%;
}

.login-box{
width:100%;
max-width:20rem;
padding:6%;
}

.logo{
width:22%;
}

.input-group input{
padding:3.5%;
}

.login-btn{
padding:3.5%;
}

}

/* ================= TABLET ================= */
@media (min-width:769px) and (max-width:1023px){

.container{
gap:4%;
padding:3%;
}

.left img{
max-width:25rem;
}

.login-box{
max-width:21rem;
}

}

/* ================= DESKTOP BESAR ================= */
@media (min-width:1400px){

.container{
max-width:1400px;
margin:auto;
gap:6%;
}

.left img{
max-width:36rem;
}

.login-box{
max-width:24rem;
}

}