:root{
    --bg:#0A1120;
    --card:#111A2E;
    --card2:#182746;
    --primary:#28D9C4;
    --primary-dark:#1AA694;
    --text:#ffffff;
    --muted:#9AA5BE;
    --border:#24375F;
    --radius:18px;
}

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

body{
    font-family:'Vazirmatn',sans-serif;
    background:var(--bg);
    color:var(--text);
}

.auth-page{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;

}
.auth-container{

    width:1200px;
    max-width:100%;

    background:var(--card);

    border-radius:25px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}
.auth-left{

    padding:70px;

    background:
    radial-gradient(circle at top right,#154c46 0%,transparent 45%),
    var(--bg);

    display:flex;

    flex-direction:column;

    justify-content:center;

}
.logo-placeholder{

    width:90px;

    height:90px;

    border:2px dashed rgba(255,255,255,.25);

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:40px;

    color:var(--muted);

}
.auth-left h1{

    font-size:42px;

    line-height:1.5;

    margin-bottom:25px;

}

.auth-left span{

    color:var(--primary);

}
.auth-left p{

    color:var(--muted);

    font-size:17px;

    line-height:2;

    margin-bottom:50px;

}
.feature-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:17px;

}

.feature-item i{

    width:45px;

    height:45px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(40,217,196,.12);

    color:var(--primary);

}
.auth-right{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;

    background:var(--card);

}
.auth-card{

    width:100%;

    max-width:430px;

}
.auth-card h2{

    font-size:36px;

    margin-bottom:10px;

}
.subtitle{

    color:var(--muted);

    margin-bottom:40px;

}
.form-group{

    margin-bottom:25px;

}

.form-group label{

    display:block;

    margin-bottom:10px;

}
.form-control{

    width:100%;

    padding:16px;

    border-radius:12px;

    background:var(--card2);

    border:1px solid var(--border);

    color:white;

    font-family:inherit;

    font-size:15px;

    transition:.25s;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

}
.remember{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    font-size:14px;

}

.remember a{

    color:var(--primary);

}
.auth-btn{

    width:100%;

    padding:16px;

    font-size:16px;

}
.auth-footer{

    text-align:center;

    margin-top:30px;

    color:var(--muted);

}

.auth-footer a{

    color:var(--primary);

    font-weight:bold;

}
@media(max-width:900px){

.auth-container{

grid-template-columns:1fr;

}

.auth-left{

display:none;

}

.auth-right{

padding:40px 25px;

}

}

.auth-card{
    animation: cardEnter .7s ease forwards;
}

.form-group{
    opacity:0;
    animation: fadeUp .6s forwards;
}

.form-group:nth-child(1){
    animation-delay:.2s;
}

.form-group:nth-child(2){
    animation-delay:.35s;
}

.auth-btn{
    opacity:0;
    animation: fadeUp .6s .5s forwards;
}

.auth-footer{
    opacity:0;
    animation: fadeUp .6s .65s forwards;
}

.auth-logo{
    animation: logoPop .7s ease;
}

@keyframes cardEnter{
    from{
        opacity:0;
        transform:translateY(35px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(18px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes logoPop{
    0%{
        opacity:0;
        transform:scale(.8);
    }

    70%{
        transform:scale(1.08);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.required{
    color:#ef4444;
    margin-right:3px;
    font-weight:700;
}

@media(max-width:700px){

.form-row{

grid-template-columns:1fr;

}

}
.auth-page{
    padding-top:140px;
    padding-bottom:80px;
}