html, body{
overflow-x:hidden;
max-width:100vw;
}

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

body{
background:#000;
color:white;
font-family:'Poppins',sans-serif;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
overflow-x:hidden;
}

/* wrapper */

.wrapper{
max-width:1100px;
width:100%;
padding:40px;
position:relative;
}

/* daun */

.leaf{
position:absolute;
width:400px;
opacity:.35;
filter:drop-shadow(0 0 8px rgba(199,155,75,0.6));
}

.leaf1{
top:-150px;
left:550px;
transform: scaleX(-1) rotate(50deg);
}

.leaf2{
top:170px;
right:250px;
}

/* header */

.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:70px;
}

/* title */

.title{
font-family:'Playfair Display',serif;
font-style:italic;
font-size:58px;
color:#e3a24d;
line-height:1.05;
}

.subtitle{
margin-top:12px;
font-size:14px;
color:#ddd;
}

.line{
height:1px;
width:300px;
background:#c79b4b;
margin-top:20px;
}

/* logo */

.logo{
width:270px;
}

/* login box */

.login-box{

max-width:420px;
margin:auto;

border:2px solid #c79b4b;
border-radius:20px;

padding:35px;

text-align:center;

box-shadow:0 0 25px rgba(199,155,75,0.15);

}

/* system */

.system{
color:#c79b4b;
margin-bottom:25px;
font-weight:500;
}

/* error */

.error{
display:none;
background:#ff4c4c;
padding:10px;
margin-bottom:12px;
font-size:13px;
}

/* field */

.field{
position:relative;
margin-bottom:16px;
}

.field input{

width:100%;
padding:14px;

border:none;
background:#d7dde3;

font-size:14px;

outline:none;

}

/* label */

.field label{

position:absolute;

left:12px;
top:14px;

font-size:13px;
color:#666;

transition:0.25s;
pointer-events:none;

}

/* floating */

.field input:focus + label,
.field input:not(:placeholder-shown) + label{

top:-8px;
font-size:11px;

background:#000;
padding:0 5px;

color:#c79b4b;

}

/* password */

.pass-wrap{
position:relative;
}

.toggle-pass{

position:absolute;

right:12px;
top:14px;

font-size:12px;

cursor:pointer;
color:#444;

}

/* caps */

.caps{
display:none;
font-size:11px;
color:#ff7070;
margin-bottom:10px;
text-align:left;
}

/* remember */

.remember{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
margin-bottom:15px;
}

/* button */

.btn{

width:100%;
padding:13px;

background:#c79b4b;

border:none;

font-weight:600;
cursor:pointer;

transition:.2s;
color: #000;

}

.btn:hover{
opacity:.85;
}

/* copyright */

.copy{
margin-top:20px;
font-size:12px;
color:#aaa;
}

/* responsive */

@media(max-width:768px){

.header{
flex-direction:column;
text-align:center;
gap:40px;
}

.title{
font-size:42px;
}

.logo{
width:210px;
}

.line{
margin:auto;
margin-top:20px;
}

.leaf{
width:160px;
}

}