/*=================================
        AUTH.CSS
==================================*/

.auth-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:60px 20px;

background:linear-gradient(135deg,#0b1120,#111827,#2563eb);

}

.auth-box{

width:100%;

max-width:450px;

background:#111827;

padding:40px;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 20px 40px rgba(0,0,0,.35);

animation:fadeUp .6s ease;

}

.auth-logo{

text-align:center;

margin-bottom:25px;

}

.auth-logo img{

width:80px;

margin:auto;

margin-bottom:12px;

}

.auth-logo h1{

font-size:30px;

font-weight:800;

}

.auth-logo span{

color:#3b82f6;

}

.auth-title{

text-align:center;

font-size:28px;

font-weight:700;

margin-bottom:8px;

}

.auth-subtitle{

text-align:center;

color:#94a3b8;

margin-bottom:30px;

}

/* FORM */

.form-group{

margin-bottom:20px;

}

.form-group label{

display:block;

margin-bottom:8px;

font-weight:600;

}

.form-group input{

width:100%;

padding:15px 18px;

background:#1f2937;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

color:#fff;

font-size:15px;

transition:.3s;

}

.form-group input:focus{

border-color:#2563eb;

box-shadow:0 0 0 3px rgba(37,99,235,.2);

}

.form-group input::placeholder{

color:#94a3b8;

}

/* PASSWORD */

.password-box{

position:relative;

}

.password-box i{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

color:#94a3b8;

}

/* BUTTON */

.auth-btn{

width:100%;

padding:16px;

background:linear-gradient(135deg,#2563eb,#3b82f6);

border:none;

border-radius:14px;

color:white;

font-size:16px;

font-weight:700;

transition:.3s;

cursor:pointer;

}

.auth-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 30px rgba(37,99,235,.35);

}

/* GOOGLE */

.google-btn{

width:100%;

margin-top:15px;

padding:15px;

background:#fff;

color:#111827;

border-radius:14px;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.google-btn:hover{

background:#f3f4f6;

}

/* FOOTER */

.auth-footer{

text-align:center;

margin-top:25px;

color:#94a3b8;

}

.auth-footer a{

color:#3b82f6;

font-weight:700;

}

/* DIVIDER */

.divider{

display:flex;

align-items:center;

margin:25px 0;

gap:15px;

color:#94a3b8;

}

.divider::before,

.divider::after{

content:"";

flex:1;

height:1px;

background:rgba(255,255,255,.08);

}

/* ANIMATION */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* RESPONSIVE */

@media(max-width:768px){

.auth-box{

padding:30px 22px;

}

.auth-title{

font-size:24px;

}

.auth-logo h1{

font-size:24px;

}

}