*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:'Poppins',sans-serif;

background:#f8f7f2;

}



.auth-container{

height:100vh;

display:flex;

}





.auth-image{

width:55%;

background:

linear-gradient(
rgba(15,61,46,.7),
rgba(15,61,46,.7)
),

url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c");


background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding:60px;

color:white;

}



.register-bg{

background:

linear-gradient(
rgba(15,61,46,.7),
rgba(15,61,46,.7)
),

url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c");

}



.auth-image h1{

font-size:50px;

font-weight:700;

}



.auth-image p{

font-size:20px;

}





.auth-form{

width:45%;

display:flex;

justify-content:center;

flex-direction:column;

padding:80px;

background:white;

}

.keja-toast{

position:fixed;

top:30px;

right:30px;

padding:16px 22px;

border-radius:12px;

color:#fff;

font-weight:500;

z-index:9999;

opacity:0;

transform:translateY(-20px);

transition:.35s;

}

.keja-toast.success{

background:#16a34a;

}

.keja-toast.error{

background:#dc2626;

}

.keja-toast.show{

opacity:1;

transform:translateY(0);

}

.brand{

font-size:35px;

font-weight:700;

color:#0F3D2E;

margin-bottom:30px;

}
/* Toast */

.keja-toast{

position:fixed;

top:25px;

right:25px;

padding:15px 22px;

border-radius:10px;

font-weight:600;

color:#fff;

z-index:9999;

opacity:0;

transform:translateY(-20px);

transition:.35s;

}

.keja-toast.show{

opacity:1;

transform:translateY(0);

}

.keja-toast.success{

background:#16a34a;

}

.keja-toast.error{

background:#dc2626;

}



.brand span{

color:#D4A017;

}




.auth-form h2{

font-size:38px;

}




.subtitle{

color:#777;

margin-bottom:35px;

}





.input-group{

margin-bottom:20px;

}



.input-group label{

display:block;

font-weight:500;

margin-bottom:8px;

}



.input-group input,
.input-group select{


width:100%;

padding:15px;

border-radius:12px;

border:1px solid #ddd;

outline:none;

font-size:15px;

}



.auth-form button{


width:100%;

padding:16px;

border:none;

border-radius:30px;

background:#0F3D2E;

color:white;

font-size:16px;

font-weight:600;

cursor:pointer;

}



.auth-form button:hover{

background:#D4A017;

color:black;

}



.bottom-text{

margin-top:25px;

color:#777;

}



.bottom-text a{

color:#0F3D2E;

font-weight:600;

}




@media(max-width:900px){


.auth-image{

display:none;

}


.auth-form{

width:100%;

padding:40px;

}



}