/* ===================================
    LOGIN PAGE
=================================== */

.login-page{
    min-height:100vh;
    display:flex;
    font-family:'Inter',sans-serif;
    background:var(--bg);
}

/* LEFT SIDE */

.login-left{
    flex:1;
    position:relative;
    overflow:hidden;

    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px;

    background:
        linear-gradient(
            135deg,
            #20c997,
            #17b978,
            #11998e
        );

    z-index:1;
}

/* ==========================
   Animated Aurora Background
========================== */

.login-left::before{
    content:"";
    position:absolute;
    inset:-20%;

    background:
        radial-gradient(circle at 20% 30%,
        rgba(255,255,255,.14),
        transparent 45%),

        radial-gradient(circle at 80% 25%,
        rgba(255,255,255,.08),
        transparent 40%),

        radial-gradient(circle at 60% 80%,
        rgba(255,255,255,.10),
        transparent 45%);

    animation:auroraMove 14s ease-in-out infinite alternate;

    z-index:0;
}

.login-left::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.12),
        transparent 70%
    );

    animation:floatGlow 15s ease-in-out infinite;

    z-index:0;

}

.brand h1{
    font-size:52px;
    font-weight:700;
    margin:0;
}

.subtitle{
    margin-top:10px;
    font-size:18px;
    opacity:.85;
}

.brand-content{
    margin-top:80px;
}

.brand-content span{
    color:#d7fff2;
}

.brand-content h2{
    font-size:40px;
    line-height:1.3;
    margin-bottom:25px;
}

.brand-content p{
    max-width:500px;
    font-size:18px;
    line-height:1.8;
    opacity:.9;
}

.brand,
.brand-content{
    position:relative;
    z-index:2;
}

.login-left::selection{
    background:transparent;
}

.brand::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-30px;
    width:90px;
    height:4px;
    border-radius:20px;
    background:#7fffd4;
    opacity:.8;
}

/* RIGHT SIDE */

/*=========================
LOGIN SUCCESS
=========================*/

.login-success{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding:14px 18px;
    border-radius:10px;
    background:#ecfdf5;
    border:1px solid #6ee7b7;
    color:#047857;
    font-size:14px;
    font-weight:600;
}

.login-success svg{
    width:20px;
    height:20px;
}

.login-right{
    width:520px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px;
}

.login-box{
    width:100%;
}

.login-box h2{
    font-size:34px;
    color:var(--text);
    margin-bottom:10px;
}

.login-box p{
    color:var(--text-light);
    margin-bottom:35px;
}

.login-logo img{
    width: 240px;
    max-width: 100%;
    height: auto;
    display:block;
}

.login-box h1{
    margin-top: 15px;
}

/* FORM */

.form-group{
    margin-bottom:22px;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--text);
}

.form-group > input{
    width:100%;
    padding:15px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:15px;
    transition:.25s;
    box-sizing:border-box;
}

.form-group > input:focus{
    outline:none;
    border-color:var(--primary);
}

/* VERIFY */
.verify-help{

    margin-top:12px;

    text-align:center;

    font-size:14px;

    color:#64748b;

}

.verify-help a{
    display:block;
    margin-top:8px;
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}
.verify-help a:hover{
    text-decoration:underline;
}

/* OPTIONS */

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    font-size:14px;
}

.login-options a{
    color:var(--primary);
    text-decoration:none;
}

.login-options a:hover{
    text-decoration:underline;
}

/* BUTTON */

.login-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.login-btn:hover{
    background:var(--primary-dark);
    transform: translateY(-2px);
    box-shadow:0 12px 25px rgba(33,178,111,.30);
}

/* REGISTER */

.register-link{
    margin-top:30px;
    text-align:center;
}

.register-link a{
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}

/* LOGIN ERROR */

.login-error{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
    padding:14px 18px;
    border-radius:10px;
    background:#fde8e8;
    border:1px solid #f8b4b4;
    color:#b91c1c;
    font-size:14px;
    font-weight:600;
}

.login-error svg{
    width:20px;
    height:20px;
}

/*==============================
INPUT GROUP
===============================*/

.input-group{
    position:relative;
}

.input-group > svg{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    color:var(--text-light);
    pointer-events:none;
}

.input-group input{
    width:100%;
    padding:15px 50px 15px 48px;
    border:1px solid var(--border);
    border-radius:12px;
    font-size:15px;
    box-sizing:border-box;
    transition:.25s;
}

.input-group input:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(32,201,151,.15);
}

.password-toggle{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    padding:0;
    cursor:pointer;
    color:var(--text-light);
    display:flex;
    align-items:center;
    justify-content:center;
}

.password-toggle:hover{
    color:var(--primary);
}

.remember{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
    color:var(--text);
    font-size:14px;
}

.remember input{
    width:18px;
    height:18px;
    accent-color:var(--primary);
    cursor:pointer;
}

.remember span{
    font-weight:500;
}

/*==========================
LOGIN FOOTER
==========================*/

.login-footer{
    margin-top:30px;
    text-align:center;
}

.footer-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    font-size:14px;
    color:var(--text-light);
}

.footer-links a{
    text-decoration:none;
    color:var(--text-light);
    transition:.25s;
}

.footer-links a:hover{
    color:var(--primary);
}

.footer-links svg{
    width:16px;
    height:16px;
    margin-right:4px;
    vertical-align:middle;
}

.version{
    font-weight:500;
}

.copyright{
    margin-top:14px;
    font-size:12px;
    color:#9ca3af;
}

/*=========================
LANGUAGE
=========================*/

.language-selector{
    position:relative;
    display:inline-block;
    margin-bottom:20px;
}

.language-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    color:var(--text);
}

.language-btn svg{
    width:18px;
    height:18px;
}

.lang-arrow{
    width:16px;
    height:16px;
}

.language-menu{
    position:absolute;
    top:110%;
    left:0;
    width:220px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    display:none;
    overflow:hidden;
    z-index:999;
}

.language-menu.show{
    display:block;
}

.language-item{
    padding:13px 18px;
    cursor:pointer;
    transition:.2s;
}

.language-item:hover{
    background:#f4f7fb;
}

.language-item.active{
    color:var(--primary);
    font-weight:600;
}

/*=============================
Registration dito
=============================*/

.register-link-btn{

    display:inline-block;
    margin-top:18px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.register-link-btn:hover{

    text-decoration:underline;

}

/* RESPONSIVE */

@media(max-width:992px){

    .login-left{
        display:none;
    }
    .login-right{
        width:100%;
        padding:40px;
    }
    .footer-links{
        flex-direction:column;
        gap:8px;
    }
    
    .footer-links span{
        display:none;
    }
}

/*==========================
Responsive Footer
==========================*/

@media (max-width:768px){

    .footer-links{
        flex-direction:column;
        gap:10px;
    }

    .footer-links span{
        display:none;
    }

    .copyright{
        margin-top:20px;
    }
    .login-footer-top{
        flex-direction:column;
        gap:8px;
    }
    
    .login-footer-links{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }
    
    .login-footer-links span{
        display:none;
    }
}

@keyframes auroraMove{

0%{
transform:translate(0,0) scale(1);
}

50%{
transform:translate(-40px,-25px) scale(1.08);
}

100%{
transform:translate(30px,20px) scale(1.12);
}

}

@keyframes floatGlow{

0%{
transform:translate(0,0);
}

50%{
transform:translate(-60px,40px);
}

100%{
transform:translate(30px,-20px);
}

}