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

body{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#0f0f0f;
    overflow:hidden;
    position:relative;
}

/* Animated Gradient Background Glow */
body::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(255, 69, 0, 0.7),transparent 70%);
    top:-200px;
    left:-200px;
    animation:moveGlow 6s infinite alternate;
    filter:blur(100px);
}

body::after{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:radial-gradient(circle,#fcbc00,transparent 70%);
    bottom:-200px;
    right:-200px;
    animation:moveGlow 6s infinite alternate-reverse;
    filter:blur(120px);
}

@keyframes moveGlow{
    from{transform:translate(0,0);}
    to{transform:translate(100px,100px);}
}

/* Container */
.container{
    width:900px;
    height:520px;
    display:flex;
    border-radius:25px;
    overflow:hidden;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    box-shadow:0 0 40px rgba(255, 69, 0, 0.7);
    /* filter: drop-shadow(0 0 25px rgba(255, 69, 0, 0.7)); */
    border:1px solid rgba(255,255,255,0.1);
    animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:scale(0.9);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* Left Side */
.left{
    width:50%;
    background:url(tem2.jpg) center/cover;
    position:relative;
}

.left::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0, 0, 0, 0.652);
}

.left-text{
    position:absolute;
    color:white;
    z-index:1;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    animation:slideLeft 1.2s ease;
}

@keyframes slideLeft{
    from{
        opacity:0;
        transform:translate(-70%,-50%);
    }
    to{
        opacity:1;
        transform:translate(-50%,-50%);
    }
}

.left-text h1{
    font-size:42px;
    letter-spacing:3px;
    color:#fcbc00;
    text-shadow:0 0 20px #fcbc00;
    font-family: Lucida Handwriting;
}

/* Right Side */
.right{
    width:50%;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    animation:slideRight 1.2s ease;
}

@keyframes slideRight{
    from{
        opacity:0;
        transform:translateX(100px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

.right h2{
    margin-bottom:25px;
    color:white;
    font-size:28px;
}

/* Input */
.input-box{
    margin-bottom:18px;
}

.input-box input{
    width:100%;
    padding:13px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.2);
    outline:none;
    background:rgba(255,255,255,0.05);
    color:white;
    transition:0.4s;
    font-size:14px;
}

.input-box input::placeholder{
    color:#aaa;
}

.input-box input:focus{
    border-color:rgba(255, 69, 0, 0.7);
    box-shadow:0 0 15px rgba(255, 69, 0, 0.7);
    transform:scale(1.05);
}

/* Button */
.btn{
    padding:13px;
    background:linear-gradient(135deg,#fcbc00,rgba(255, 69, 0, 0.7));
    color:white;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    font-weight:bold;
    transition:0.4s;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 0 20px rgba(255, 69, 0, 0.7);
}

/* Login Link */
.login-link{
    margin-top:15px;
    font-size:14px;
    color:#aaa;
}

.login-link a{
    color:#fcbc00;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}

.login-link a:hover{
    text-shadow:0 0 10px rgba(255, 69, 0, 0.7);
}