/* ===============================
        CSI AUTH POPUP
================================== */

.auth-overlay{

    position:fixed;
    inset:0;

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

    background:rgba(0,0,0,.65);
    backdrop-filter:blur(10px);

    opacity:0;
    visibility:hidden;

    transition:.30s;

    z-index:999999;

}

.auth-overlay.active{

    opacity:1;
    visibility:visible;

}

.auth-popup{

    position:relative;

    width:430px;
    max-width:95%;

    background:#181818;

    border:1px solid #343434;
    border-top:4px solid #f0c419;

    border-radius:22px;

    padding:35px;

    text-align:center;

    box-shadow:0 25px 70px rgba(0,0,0,.6);

    animation:popupScale .25s ease;

}

@keyframes popupScale{

    from{

        transform:scale(.9);
        opacity:0;

    }

    to{

        transform:scale(1);
        opacity:1;

    }

}

.auth-logo{

    width:95px;
    margin-bottom:20px;

}

.auth-popup h2{

    font-size:30px;
    margin-bottom:10px;

}

.auth-text{

    color:#bdbdbd;
    margin-bottom:25px;
    line-height:1.6;

}

.auth-popup input{

    width:100%;

    height:52px;

    background:#242424;

    border:1px solid #444;

    color:white;

    border-radius:12px;

    padding:0 18px;

    font-size:16px;

    outline:none;

    margin-bottom:18px;

    transition:.25s;

}

.auth-popup input:focus{

    border-color:#f0c419;

    box-shadow:0 0 15px rgba(240,196,25,.20);

}

.auth-main-btn{

    width:100%;
    height:54px;

    border:none;

    border-radius:12px;

    background:#f0c419;

    color:black;

    font-weight:800;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}

.auth-main-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(240,196,25,.30);

}

.auth-close{

    position:absolute;

    top:15px;
    right:15px;

    width:38px;
    height:38px;

    border:none;

    border-radius:50%;

    background:#252525;

    color:white;

    cursor:pointer;

    font-size:18px;

}

.auth-close:hover{

    background:#f0c419;
    color:black;

}

.verify-box{

    margin:25px 0;

    background:#101010;

    border:1px solid #343434;

    border-radius:15px;

    padding:20px;

}

.verify-box span{

    color:#9c9c9c;
    font-size:14px;

}

.verify-box h3{

    margin-top:10px;

    font-size:28px;

    color:#f0c419;

    letter-spacing:2px;

}

.verify-info{

    color:#cfcfcf;

    line-height:1.6;

    margin-bottom:20px;

}

#passwordArea{
    display:none;
    margin-top:20px;
}

#passwordArea h3{
    color:#fff;
    text-align:center;
    margin-bottom:20px;
}

#passwordArea input{
    width:100%;
    margin-bottom:15px;
}

.forgot-password-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    border: none;
    background: transparent;
    color: #f0c419;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.forgot-password-btn:hover {
    color: #ffe36b;
}

#resetStartArea,
#resetVerifyArea,
#resetPasswordArea {
    margin-top: 18px;
}

#resetPasswordArea h3 {
    color: #fff;
    margin-bottom: 20px;
}

.auth-switch{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    margin-top:18px;

    color:#cfcfcf;

    font-size:14px;

}

.auth-switch button{

    border:none;

    background:none;

    color:#f0c419;

    font-weight:700;

    cursor:pointer;

    padding:0;

}

.auth-switch button:hover{

    text-decoration:underline;

}

/* =====================================
   AUTH POPUP TABLET + MOBİL
===================================== */

.auth-overlay {
    padding: 18px;
    overflow-y: auto;
}

.auth-popup {
    max-height: calc(100svh - 36px);
    overflow-y: auto;
}

@media (max-width: 600px) {

    .auth-overlay {
        align-items: center;
        padding: 12px;
    }

    .auth-popup {
        width: 100%;
        max-width: 100%;
        padding: 28px 20px 24px;
        border-radius: 17px;
    }

    .auth-logo {
        width: 75px;
        margin-bottom: 14px;
    }

    .auth-popup h2 {
        font-size: 25px;
    }

    .auth-popup input {
        height: 49px;
        padding: 0 14px;
        font-size: 16px;
    }

    .auth-main-btn {
        height: 50px;
        font-size: 16px;
    }

    .verify-box {
        padding: 15px 10px;
        margin: 18px 0;
    }

    .verify-box h3 {
        font-size: 20px;
        letter-spacing: 1px;
        overflow-wrap: anywhere;
    }

    .auth-switch {
        flex-wrap: wrap;
        line-height: 1.5;
    }
}

#passwordArea select,
#passwordArea input {
    width: 100%;
    height: 50px;

    margin-bottom: 13px;
    padding: 0 15px;

    background: #242424;
    border: 1px solid #444;
    border-radius: 11px;

    color: white;
    font-size: 15px;
    outline: none;
}

#passwordArea select:focus,
#passwordArea input:focus {
    border-color: #f0c419;
}

#passwordArea select {
    cursor: pointer;
}

#passwordArea select{
    width:100%;
    height:52px;

    background:#242424;
    border:1px solid #444;
    color:white;

    border-radius:12px;

    padding:0 18px;

    font-size:16px;

    margin-bottom:18px;

    outline:none;

    transition:.25s;
}

#passwordArea select:focus{
    border-color:#f0c419;
    box-shadow:0 0 15px rgba(240,196,25,.20);
}

/* ===============================
   KAYIT SONUÇ / HATA BİLDİRİMİ
================================== */

.auth-register-feedback {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.auth-register-feedback.error {
    display: block;
    color: #ff9a9a;
    background: rgba(255, 65, 65, 0.10);
    border: 1px solid rgba(255, 65, 65, 0.42);
}

.auth-register-feedback.success {
    display: block;
    color: #a9f5ba;
    background: rgba(74, 205, 112, 0.11);
    border: 1px solid rgba(74, 205, 112, 0.42);
}