/*=========================================================
    SURAKU ACADEMY ADMIN LOGIN
=========================================================*/

:root{

    --primary:#002E5D;
    --primary-light:#0B5CAD;
    --secondary:#F59E0B;
    --secondary-dark:#E68900;

    --text:#1F2937;
    --muted:#6B7280;

    --border:#E5E7EB;

    --background:#F4F7FB;

    --white:#FFFFFF;

    --success:#10B981;

    --danger:#DC3545;

}

/*=========================================================
    RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    font-family:'Poppins',sans-serif;

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}

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

.sa-login-page{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    background:

    radial-gradient(circle at top left,#0B5CAD 0%,transparent 35%),

    radial-gradient(circle at bottom right,#F59E0B 0%,transparent 35%),

    #F4F7FB;

}

/*=========================================================
    MAIN CONTAINER
=========================================================*/

.sa-login-page>div{

    width:100%;

    max-width:1400px;

    min-height:760px;

    display:flex;

    border-radius:26px;

    overflow:hidden;

    background:#fff;

    box-shadow:

        0 30px 80px rgba(0,0,0,.10),

        0 10px 30px rgba(0,46,93,.08);

}

/*=========================================================
    LEFT PANEL
=========================================================*/

.sa-login-left{

    position:relative;

    width:50%;

    background:

    linear-gradient(

        135deg,

        #002E5D 0%,

        #003D7A 50%,

        #0B5CAD 100%

    );

    overflow:hidden;

}

/*=========================================================
    OVERLAY
=========================================================*/

.sa-login-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 15% 20%,

        rgba(255,255,255,.08),

        transparent 25%),

    radial-gradient(circle at 90% 80%,

        rgba(245,158,11,.15),

        transparent 30%);

}

/*=========================================================
    LEFT CONTENT
=========================================================*/

.sa-login-left-content{

    position:relative;

    z-index:2;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:70px;

    color:#fff;

}

/*=========================================================
    LOGO
=========================================================*/

.sa-login-logo{

    width:420px;

    max-width:100%;

    margin-bottom:50px;

    padding:18px 26px;

    border-radius:18px;

    background:#FAFAFA;

    backdrop-filter:blur(8px);

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

    filter:
        drop-shadow(0 12px 30px rgba(0,0,0,.35));

    animation:logoFloat 5s ease-in-out infinite;

}

/*=========================================================
    TITLE
=========================================================*/

.sa-login-left h1{

    font-size:44px;

    font-weight:700;

    margin-bottom:12px;

    line-height:1.25;

}

.sa-login-left h1 span{

    color:#F59E0B;

}

.sa-login-left p{

    font-size:17px;

    line-height:1.9;

    opacity:.92;

    max-width:620px;

    margin-bottom:45px;

}

/*=========================================================
    FEATURE LIST
=========================================================*/

.sa-feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.sa-feature{

    display:flex;

    align-items:center;

    font-size:16px;

    font-weight:500;

}

.sa-feature i{

    width:42px;

    height:42px;

    border-radius:50%;

    margin-right:18px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#F59E0B;

    font-size:18px;

    backdrop-filter:blur(6px);

}

/*=========================================================
    RIGHT PANEL
=========================================================*/

.sa-login-right{

    width:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#FFFFFF;

    padding:60px;

}
/*=========================================================
    LOGIN CARD
=========================================================*/

.sa-login-card{

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

    background:#FFFFFF;

    border:1px solid #EDF2F7;

    border-radius:22px;

    padding:50px;

    box-shadow:
        0 18px 50px rgba(0,46,93,.08),
        0 8px 20px rgba(0,0,0,.04);

    transition:.30s ease;

}

.sa-login-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 28px 60px rgba(0,46,93,.12),
        0 10px 24px rgba(0,0,0,.06);

}

/*=========================================================
    HEADING
=========================================================*/

.sa-login-heading{

    text-align:center;

    margin-bottom:35px;

}

.sa-login-heading small{

    display:inline-block;

    color:var(--secondary);

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}

.sa-login-heading h2{

    font-size:34px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:10px;

}

.sa-login-heading p{

    color:var(--muted);

    font-size:15px;

    margin:0;

}

/*=========================================================
    ALERT
=========================================================*/

.alert{

    border-radius:12px;

    font-size:14px;

    margin-bottom:28px;

}

/*=========================================================
    FORM GROUP
=========================================================*/

.sa-form-group{

    margin-bottom:24px;

}

.sa-form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:var(--primary);

}

/*=========================================================
    INPUT BOX
=========================================================*/

.sa-input-box{

    position:relative;

}

.sa-input-box i:first-child{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#94A3B8;

    font-size:16px;

    transition:.25s;

}

.sa-input-box input{

    width:100%;

    height:56px;

    padding-left:52px;

    padding-right:52px;

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

    border-radius:14px;

    background:#FAFBFD;

    font-size:15px;

    transition:.25s;

    box-shadow:none;

}

.sa-input-box input::placeholder{

    color:#A0AEC0;

}

.sa-input-box input:focus{

    outline:none;

    background:#FFFFFF;

    border-color:var(--primary);

    box-shadow:
        0 0 0 4px rgba(0,46,93,.08);

}

.sa-input-box input:focus + .password-toggle{

    color:var(--primary);

}

.sa-input-box:focus-within i:first-child{

    color:var(--primary);

}

/*=========================================================
    PASSWORD TOGGLE
=========================================================*/

.password-toggle{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    cursor:pointer;

    color:#94A3B8;

    transition:.25s;

    user-select:none;

}

.password-toggle:hover{

    color:var(--secondary);

}

/*=========================================================
    CAPS LOCK
=========================================================*/

.caps-warning{

    display:none;

    margin-top:10px;

    color:#DC3545;

    font-size:13px;

    font-weight:500;

}

.caps-warning i{

    margin-right:6px;

}

/*=========================================================
    CAPTCHA
=========================================================*/

.sa-captcha-group{

    margin-top:10px;

    margin-bottom:28px;

}

.g-recaptcha{

    display:inline-block;

    transform-origin:left top;

}

/*=========================================================
    LOGIN BUTTON
=========================================================*/

.sa-login-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    color:#FFFFFF;

    background:

        linear-gradient(
            135deg,
            var(--secondary),
            var(--secondary-dark)
        );

    transition:.30s;

    box-shadow:
        0 12px 24px rgba(245,158,11,.28);

}

.sa-login-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 35px rgba(245,158,11,.35);

}

.sa-login-btn:focus{

    outline:none;

}

.sa-login-btn:disabled{

    opacity:.75;

    cursor:not-allowed;

}

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

.sa-login-footer{

    margin-top:32px;

    text-align:center;

}

.sa-login-footer p{

    margin:0;

    color:#94A3B8;

    font-size:13px;

}

.sa-login-footer strong{

    color:var(--primary);

}
/*=========================================================
    SPINNER
=========================================================*/

.spinner-border-sm{

    width:16px;

    height:16px;

    border-width:.18em;

    vertical-align:-2px;

}

/*=========================================================
    INPUT AUTOFILL
=========================================================*/

.sa-input-box input:-webkit-autofill,
.sa-input-box input:-webkit-autofill:hover,
.sa-input-box input:-webkit-autofill:focus{

    -webkit-box-shadow:0 0 0px 1000px #FFFFFF inset !important;

    -webkit-text-fill-color:#1F2937 !important;

    transition:background-color 5000s ease-in-out 0s;

}

/*=========================================================
    TEXT SELECTION
=========================================================*/

::selection{

    background:var(--secondary);

    color:#FFFFFF;

}

/*=========================================================
    SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#F3F4F6;

}

::-webkit-scrollbar-thumb{

    background:#C9D2DE;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#A9B7C8;

}

/*=========================================================
    FADE ANIMATION
=========================================================*/

@keyframes saFadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.sa-login-left-content{

    animation:saFadeUp .8s ease;

}

.sa-login-card{

    animation:saFadeUp .8s ease;

}

/*=========================================================
    FLOAT ANIMATION
=========================================================*/

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

.sa-login-logo{

    animation:logoFloat 5s ease-in-out infinite;

}

/*=========================================================
    FEATURE HOVER
=========================================================*/

.sa-feature{

    transition:.25s ease;

}

.sa-feature:hover{

    transform:translateX(6px);

}

.sa-feature:hover i{

    background:#F59E0B;

    color:#FFFFFF;

}

/*=========================================================
    LOGIN BUTTON ICON
=========================================================*/

.sa-login-btn i{

    transition:.25s;

}

.sa-login-btn:hover i{

    transform:translateX(4px);

}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:1200px){

    .sa-login-left-content{

        padding:55px;

    }

    .sa-login-logo{

        width:330px;

    }

    .sa-login-left h1{

        font-size:38px;

    }

    .sa-login-card{

        padding:40px;

    }

}

/*=========================================================
    TABLET
=========================================================*/

@media(max-width:992px){

    .sa-login-page{

        padding:20px;

    }

.sa-login-container{

    width:100%;

    max-width:1400px;

    min-height:760px;

    display:flex;

    border-radius:26px;

    overflow:hidden;

    background:#fff;

    box-shadow:
        0 30px 80px rgba(0,0,0,.10),
        0 10px 30px rgba(0,46,93,.08);

}

    .sa-login-left{

        width:100%;

    }

    .sa-login-right{

        width:100%;

        padding:45px;

    }

    .sa-login-left-content{

        padding:50px;

    }

    .sa-login-left h1{

        font-size:34px;

    }

    .sa-login-left p{

        font-size:15px;

    }

    .sa-feature{

        font-size:15px;

    }

}

/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:768px){

    .sa-login-page{

        padding:15px;

    }

    .sa-login-left{

        display:none;

    }

    .sa-login-right{

        width:100%;

        padding:20px;

    }

    .sa-login-card{

        max-width:100%;

        border-radius:18px;

        padding:30px 24px;

    }

    .sa-login-heading h2{

        font-size:28px;

    }

    .sa-login-heading p{

        font-size:14px;

    }

    .sa-input-box input{

        height:52px;

        font-size:14px;

    }

    .sa-login-btn{

        height:54px;

        font-size:15px;

    }

    .g-recaptcha{

        transform:scale(.90);

        transform-origin:left top;

    }

}

/*=========================================================
    EXTRA SMALL DEVICES
=========================================================*/

@media(max-width:420px){

    .sa-login-card{

        padding:24px 18px;

    }

    .sa-login-heading h2{

        font-size:24px;

    }

    .sa-form-group label{

        font-size:13px;

    }

    .sa-input-box input{

        padding-left:48px;

        padding-right:48px;

    }

    .g-recaptcha{

        transform:scale(.82);

        transform-origin:left top;

    }

}

/*=========================================================
    PRINT
=========================================================*/

@media print{

    .sa-login-left{

        display:none;

    }

    .sa-login-card{

        box-shadow:none;

        border:1px solid #DDD;

    }

}

/*=========================================================
    GOOGLE RECAPTCHA
=========================================================*/

.sa-captcha-wrapper{

    width:100%;

    padding:18px;

    background:#FFFFFF;

    border:1px solid #D8E2EC;

    border-radius:14px;

    transition:.30s;

}

.sa-captcha-wrapper:hover{

    border-color:#BFD2E6;

}

.sa-captcha-title{

    display:flex;

    align-items:center;

    margin-bottom:15px;

    font-size:14px;

    font-weight:600;

    color:#002E5D;

}

.sa-captcha-title i{

    color:#0D6EFD;

    font-size:15px;

}

.g-recaptcha{

    display:inline-block;

}

#gcaptcha-error{

    margin-top:10px;

    font-size:13px;

    font-weight:500;

}
/*=========================================================
    END
=========================================================*/