*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:sans-serif;
}

body{
background:#121212;
color:white;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}

.form-box{
position:relative;
width:400px;
padding:40px;
backdrop-filter: blur(10px);
background: transparent;
border:  2px solid rgba(255, 255, 255, .5);
backdrop-filter: blur(15px);
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
}

h2{
font-size:2em;
text-align:center;
margin-bottom:20px;
}

.eye{
position: absolute;
right: 40px;
top: 15px;
cursor: pointer;
font-size: 18px;
z-index: 9;
color: #fff;
}

.input-box{
position:relative;
width:310px;
margin:30px 0;
border-bottom:2px solid #fff;
}

.input-box label{
position:absolute;
top:50%;
left:5px;
transform:translateY(-50%);
font-size:1em;
pointer-events:none;
transition:.5s;
color:#fff;
}

.input-box input:focus~label,
.input-box input:valid~label{
top:-5px;
}

.input-box input{
width:100%;
height:50px;
background:transparent;
border:none;
outline:none;
font-size:1em;
color:#fff;
padding:0 35px 0 5px;
}

.input-box .icon{
position:absolute;
right:8px;
top:15px;
font-size:1.2em;
}

.eye{
position:absolute;
right:30px;
top:15px;
cursor:pointer;
font-size:18px;
}

.remember-forgot{
margin:-15px 0 15px;
font-size:.9em;
display:flex;
justify-content:space-between;
align-items:center;
}

.remember-forgot label input{
margin-right:5px;
}

.remember-forgot a{
color:#fff;
text-decoration:none;
}

.remember-forgot a:hover{
text-decoration:underline;
}

button{
width:100%;
height:40px;
border-radius:40px;
border:none;
background:white;
color:black;
font-size:1em;
font-weight:600;
cursor:pointer;
transition:.3s;
}

button:hover{
background:#ddd;
}

.register-link{
text-align:center;
margin-top:15px;
font-size:.9em;
}

.register-link a{
color:#fff;
text-decoration:none;
font-weight:600;
}

.register-link a:hover{
text-decoration:underline;
}

/* Autofill rang muammosi fix */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
-webkit-box-shadow:0 0 0 1000px transparent inset !important;
-webkit-text-fill-color:white !important;
transition:background-color 5000s ease-in-out 0s;
}

.error-message {
    padding: 12px;
    background: #f8d7da;
    border-radius: 6px;
    font-size: 16px;
    color: #a42834;
    text-align: center;
    margin-bottom: 20px;
}