/* =====================================================
   ETHNOML AUTH CSS
===================================================== */

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

:root{

    --primary:#215180;
    --primary-light:#4D80B3;

    --secondary:#FFCC33;

    --text:#333;

    --gray:#777;

    --border:#E8E8E8;

    --bg:#F7F9FC;

    --white:#FFFFFF;

    --shadow:

        0 20px 60px rgba(0,0,0,.12);

}
body{

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

    background:var(--bg);

    overflow-x:hidden;

    color:var(--text);

    scroll-behavior:smooth;

}
a{

    text-decoration:none;

    transition:.35s;

}

a:hover{

    text-decoration:none;

}
img{

    max-width:100%;

    display:block;

}
.auth-wrapper{

    min-height:100vh;

}
.auth-navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:70px;

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

    backdrop-filter:blur(15px);

    border-radius:0 0 20px 20px;

    box-shadow:

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

    z-index:999;

}
.auth-navbar .container-fluid{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

}
.logo{

    width:42px;

    transition:.35s;

}

.logo:hover{

    transform:rotate(-6deg) scale(1.05);

}
.nav-left{

    display:flex;

    align-items:center;

    gap:15px;

}
.brand{

    display:flex;

    flex-direction:column;

}

.brand h4{
    margin:0;
    color:var(--primary);
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}

.brand small{
  font-size:12px;
  line-height:1.3;
    color:#888;

}
.nav-menu{

    display:flex;

    gap:26px;

}
.nav-menu a{

    position:relative;

    color:#444;
    font-size:15px;
    font-weight:600;

}
.nav-menu a:hover{

    color:var(--primary);

}
.nav-menu a::after{

    content:"";

    position:absolute;

    bottom:-7px;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:3px;

    background:var(--secondary);

    border-radius:30px;

    transition:.35s;

}

.nav-menu a:hover::after{

    width:100%;

}
.nav-button{

    display:flex;

    gap:14px;

}
.btn-login{

    padding:10px 26px;

    border:2px solid var(--secondary);

    border-radius:14px;

    color:var(--text);

    background:white;

    font-weight:600;
    font-size:15px;
    transition:.35s;

}

.btn-login:hover{

    background:var(--secondary);

    transform:translateY(-2px);

}
.btn-register{

    padding:11px 24px;

    background:var(--secondary);

    border-radius:12px;

    color:#222;

    font-weight:600;

    transition:.35s;

}

.btn-register:hover{

    transform:translateY(-2px);

    box-shadow:

        0 12px 30px rgba(255,204,51,.4);

}
.auth-container{

    margin-top:90px;

    min-height:calc(100vh - 70px);

    position:relative;

    background:url("../images/auth/background.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    overflow:hidden;
    animation: bgMove 18s ease-in-out infinite alternate;
}

.auth-container::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(255,255,255,.05),

        rgba(255,255,255,.18)

    );

}
.auth-container::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    filter:blur(40px);

    left:-80px;

    bottom:-80px;

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

.login-card{

    position:absolute;

    top:10%;

    right:70px;

    transform: none;

    width:450px;

    padding:5px 15px;

    border-radius:32px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

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

    overflow:hidden;

    transition:.35s;

    animation:fadeCard .8s ease;

}

/* efek cahaya */

.login-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:60%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:1s;

}

.login-card:hover::before{

    left:160%;

}

.login-card:hover{

    transform:none;

    box-shadow :
        0 35px 80px rgba(0,0,0,.16),
        0 0 25px rgba(77,128,179,.15);

}

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

.login-card h1{

    font-size:25px;

    font-weight:500;

    color:var(--primary);

    margin-bottom:5px;

}

.login-subtitle{

    color:#666;

    font-size:1px;

    margin-bottom:10px;

}

.title-line{

    width:90px;

    height:5px;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        #FFD84D,
        #FFC52D
    );

    margin-bottom:28px;

}
/* =====================================================
   ROLE OPTION - GAMBAR + TEKS DI TENGAH
===================================================== */

.role-wrapper{
    display:flex;
    gap:20px;
    margin-bottom:28px;
    width:100%;
}

/* Pembungkus masing-masing role */
.role-option{
    flex:1;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

/* =====================================================
   KARTU GAMBAR
===================================================== */

.role-card{
    width:100%;

    background:transparent;
    border:none;

    padding:0;
    margin:0;

    cursor:pointer;

    transition:.35s;
}

/* =====================================================
   GAMBAR
===================================================== */

.role-card img{
    width:100%;
    height:125px;

    display:block;

    object-fit:cover;

    border:2px solid #E8E8E8;
    border-radius:18px;

    background:white;

    padding:0;
    margin:0;

    transition:.35s;
}

/* =====================================================
   TEKS SISWA / GURU
===================================================== */

.role-label{
    display:block;

    width:100%;

    margin-top:8px;

    text-align:center;

    font-size:16px;
    font-weight:600;

    color:#444;

    transition:.35s;
}

/* =====================================================
   HOVER GAMBAR
===================================================== */

.role-card:hover img{
    transform:translateY(-4px);

    border-color:#4D80B3;

    box-shadow:
        0 12px 25px rgba(33,81,128,.18);
}

/* =====================================================
   ACTIVE GAMBAR
===================================================== */

.role-card.active img{
    border:3px solid #215180;

    box-shadow:
        0 15px 30px rgba(33,81,128,.25);
}

/* =====================================================
   TEKS ACTIVE
===================================================== */

.role-card.active + .role-label{
    color:#215180;
    font-weight:700;
}

/* =====================================================
   HOVER TEKS
===================================================== */

.role-option:hover .role-label{
    color:#215180;
}
/* =====================================================
   FORM
===================================================== */

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#444;

}

.form-group input{

    width:100%;

    height:52px;

    padding:0 18px;

    border:2px solid #ECECEC;

    border-radius:14px;

    background:#FAFAFA;

    transition:.3s;

    font-size:15px;

}

.form-group input:hover{

    border-color:#BFD4FF;

}

.form-group input:focus{

    outline:none;

    background:white;

    border-color:var(--primary-light);

    box-shadow:
        0 0 0 5px rgba(77,128,179,.15);

}
/* =====================================================
   LOGIN OPTION
===================================================== */

.login-option{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:18px 0 25px;

    font-size:14px;

}

.login-option label{

    cursor:pointer;

}

.login-option a{

    color:var(--primary);

    font-weight:500;

}

.login-option a:hover{

    color:#4D80B3;

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

.btn-auth{

    width:100%;

    height:55px;

    border:none;

    border-radius:15px;

    background:linear-gradient(
        90deg,
        #FFD84D,
        #FFC52D
    );

    color:#333;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

/* shimmer */

.btn-auth::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:60%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.6),

        transparent

    );

}

.btn-auth:hover::before{

    animation:shine .8s;

}

.btn-auth:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 35px rgba(255,204,51,.45);

}

.btn-auth:active{

    transform:scale(.98);

}
/* =====================================================
   REGISTER
===================================================== */

.register-box{

    margin-top:22px;

    text-align:center;

    color:#666;

}

.register-box a{

    color:var(--primary);

    font-weight:600;

}

.register-box a:hover{

    color:#4D80B3;

}
/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes fadeCard{

    from{

        opacity:0;

        transform:
            translateY(-40%)
            scale(.95);

    }

    to{

        opacity:1;

        transform:
            translateY(-50%)
            scale(1);

    }

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}
/* FOOOTTTEEERRRRRRRRRR */
 .footer{

    position:relative;

    background:linear-gradient(
        180deg,
        #215180 0%,
        #163F87 100%
    );

    color:#fff;

    overflow:hidden;

    padding:

        80px
        0
        25px;

}

/* Bubble Background */

.footer::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

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

    left:-150px;

    top:-180px;

    filter:blur(20px);

}

.footer::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

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

    right:-120px;

    bottom:-120px;

    filter:blur(25px);

}
.footer-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

        2fr
        1fr
        1fr;

    gap:65px;

}
.footer-logo{

    width:70px;

    margin-bottom:18px;

    transition:.35s;

}

.footer-logo:hover{

    transform:
        rotate(-6deg)
        scale(1.05);

}
.footer-about h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:15px;

}

.footer-about p{

    color:#D7E4FF;

    line-height:1.9;

    margin-bottom:25px;

}
.footer-about h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:15px;

}

.footer-about p{

    color:#D7E4FF;

    line-height:1.9;

    margin-bottom:25px;

}
.footer h5{

    margin-bottom:22px;

    font-weight:700;

    color:white;

}
.footer ul{

    list-style:none;

    padding:0;

}

.footer li{

    margin-bottom:14px;

}
.footer a{

    color:#D7E4FF;

    transition:.35s;

}

.footer a:hover{

    color:#FFD84D;

    padding-left:10px;

}
.social-media{

    display:flex;

    gap:16px;

}
.social-media a{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

    color:white;

    font-size:18px;

    transition:.35s;

}
.social-media a:hover{

    background:#FFD84D;

    color:#215180;

    transform:

        translateY(-6px)

        rotate(8deg);

    box-shadow:

        0 12px 25px rgba(255,216,77,.4);

}
.footer-bottom{

    position:relative;

    z-index:2;

    margin-top:55px;

    padding-top:25px;

    border-top:

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    color:#D7E4FF;

    font-size:14px;

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

.auth-navbar .container-fluid{

padding:0 20px;

}

.nav-menu{

display:none;

}

.login-card{

position:relative;

right:auto;

top:auto;

transform:none;

margin:60px auto;

width:90%;

max-width:520px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.social-media{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

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

.login-card{

padding:28px;

border-radius:24px;

}

.login-title{

font-size:28px;

}

.role-wrapper{

flex-direction:column;

}

.role-card{

width:100%;

}

.nav-button{

gap:8px;

}

.btn-login,
.btn-register{

padding:9px 18px;

font-size:14px;

}

.footer{

padding:60px 0 20px;

}

.footer-about p{

font-size:14px;

}

.footer-bottom{

font-size:13px;

}

}
@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
button,
.btn-login,
.btn-register,
.btn-auth{

transition:

all .35s ease;

}
/*==================================================
Selection
==================================================*/

::selection{

    background:#FFD84D;

    color:#215180;

}
/*==================================================
Scrollbar
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#F2F4F8;

}

::-webkit-scrollbar-thumb{

    background:#4D80B3;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:#215180;

}
.btn-auth{

    width:100%;

    height:56px;

    border:none;

    border-radius:16px;

    font-weight:700;

    font-size:17px;

    cursor:pointer;

    color:#333;

    background:linear-gradient(

        135deg,

        #FFD84D,

        #FFC52D,

        #FFD84D

    );

    background-size:250%;

    transition:.35s;

    overflow:hidden;

    position:relative;

}
.btn-auth:hover{

    background-position:right;

    transform:translateY(-3px);

    box-shadow:

        0 20px 40px rgba(255,204,51,.45);

}
.btn-auth::after{

content:"";

position:absolute;

width:0;

height:0;

border-radius:50%;

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

top:50%;

left:50%;

transform:translate(-50%,-50%);

transition:.5s;

}

.btn-auth:active::after{

width:500px;

height:500px;

opacity:0;

}
.login-card::after{

content:"";

position:absolute;

top:-100%;

left:-50%;

width:40%;

height:300%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.28),

transparent

);

transform:rotate(25deg);

animation:reflection 8s infinite;

}
@keyframes reflection{

0%{

left:-80%;

}

100%{

left:180%;

}

}
.auth-container{

animation:

backgroundMove

25s linear infinite;

}
@keyframes backgroundMove{

0%{

background-position:left center;

}

50%{

background-position:center center;

}

100%{

background-position:right center;

}

}
.auth-container::after{

animation:

bubbleFloat

7s ease-in-out infinite;

}
.auth-container::after{

animation:

bubbleFloat

7s ease-in-out infinite;

}
@keyframes bubbleFloat{

0%{

transform:

translateY(0);

}

50%{

transform:

translateY(-30px);

}

100%{

transform:

translateY(0);

}

}
.form-group{

position:relative;

}

.form-group input{

transition:

all .35s;

}

.form-group:hover input{

transform:scale(1.01);

}
.form-check-input{

cursor:pointer;

transition:.3s;

}

.form-check-input:hover{

transform:scale(1.15);

}

.form-check-input:checked{

background:#215180;

border-color:#215180;

}
.auth-navbar{

transition:.35s;

}

.auth-navbar:hover{

box-shadow:

0 15px 35px rgba(0,0,0,.12);

}
.logo{

transition:.35s;

}

.logo:hover{

transform:

rotate(-8deg)

scale(1.08);

}
/* =====================================================
                    REGISTER PAGE
===================================================== */

.register-card{

    position:relative;

    top:auto;
    right:70px;

    transform:none;

    margin:40px 0px 60px auto;

    width:560px;

    min-height:auto;

    padding:38px;

}

/* ==========================================
        REGISTER GRID
========================================== */

.register-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.register-grid .full{

    grid-column:1/-1;

}

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

.register-card h1{

    font-size:42px;

    font-weight:700;

    color:#2F3A4F;

    margin-bottom:5px;

}

.register-card .title-line{

    width:90px;

    height:5px;

    border-radius:50px;

    background:#FFC52D;

    margin-bottom:30px;

}

.register-card .form-group{

    margin-bottom:18px;

}

.register-card .form-group label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

    color:#444;

}

.register-card .form-group input{

    width:100%;

    height:54px;

    padding:0 18px;

    border-radius:14px;

    border:1.8px solid #E5E5E5;

    background:#fff;

    transition:.35s;

    font-size:15px;

}

.register-card .form-group input:focus{

    outline:none;

    border-color:#4D80B3;

    box-shadow:

        0 0 0 5px rgba(77,128,179,.12);

}

/* ==========================================
        ROLE
========================================== */

.register-card .role-wrapper{

    display:flex;

    gap:18px;

    margin-top:10px;

    margin-bottom:20px;

}

.register-card .role-card{

    flex:1;

    border:2px solid #E9E9E9;

    border-radius:18px;

    padding:20px;

    text-align:center;

    cursor:pointer;

    transition:.35s;

    background:white;

}

.register-card .role-card img{

    width:65px;

    height:65px;

    object-fit:contain;

    margin:auto;

    margin-bottom:10px;

}

.register-card .role-card span{

    display:block;

    font-weight:600;

    color:#444;

}

.register-card .role-card:hover{

    transform:translateY(-5px);

    border-color:#4D80B3;

    box-shadow:

        0 15px 35px rgba(77,128,179,.18);

}

.register-card .role-card.active{

    background:linear-gradient(

        135deg,

        #4D80B3,

        #215180

    );

    border-color:#215180;

}

.register-card .role-card.active span{

    color:white;

}

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

.register-card .btn-auth{

    margin-top:28px;

    width:100%;

    height:58px;

    border:none;

    border-radius:15px;

    background:linear-gradient(

        135deg,

        #FFD54F,

        #FFC52D

    );

    font-size:20px;

    font-weight:700;

    color:#333;

    transition:.35s;

}

.register-card .btn-auth:hover{

    transform:translateY(-4px);

    box-shadow:

        0 18px 35px rgba(255,197,45,.35);

}

/* ==========================================
        LOGIN LINK
========================================== */

.register-card .register-box{

    text-align:center;

    margin-top:22px;

    font-size:15px;

    color:#666;

}

.register-card .register-box a{

    font-weight:700;

    color:#215180;

}

.register-card .register-box a:hover{

    color:#4D80B3;

}

/* ==========================================
        VALIDATION
========================================== */

.register-card .text-danger{

    display:block;

    margin-top:6px;

    font-size:13px;

    color:#E53935 !important;

}

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

@media(max-width:992px){

    .register-card{

        width:92%;

        margin:40px auto;

        right:auto;

    }

    .register-grid{

        grid-template-columns:1fr;

    }

    .register-grid .full{

        grid-column:auto;

    }

}

@media(max-width:576px){

    .register-card{

        padding:25px;

    }

    .register-card h1{

        font-size:32px;

    }

    .register-card .role-wrapper{

        flex-direction:column;

    }

}