/* ==========================================================
   E-VOTING OSIS
   LOGIN ADMIN
   MODERN GOVERNMENT PREMIUM UI
   SMPN 2 MOYUDAN
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

:root {

    --navy: #123b72;
    --navy-dark: #0b2d59;

    --blue: #2563a6;
    --blue-soft: #edf4fb;

    --gold: #b99745;

    --green: #16803c;

    --text: #172b45;
    --text-soft: #607187;
    --muted: #8a98a9;

    --border: #e1e7ee;

    --white: #ffffff;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--text);

    background:
        #ffffff;

    overflow-x:
        hidden;

}


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

.login-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px 20px;

    overflow:
        hidden;

}


/* ==========================================================
   BACKGROUND SLIDER
   FOTO TERLIHAT PENUH
========================================================== */

.background-slider {

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

}


.background-slide {

    position:
        absolute;

    inset:
        0;

    background-position:
        center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    opacity:
        0;

    transform:
        scale(1.04);

    transition:
        opacity 1.5s ease,
        transform 8s ease;

}


.background-slide.active {

    opacity:
        1;

    transform:
        scale(1);

}


/* ==========================================================
   OVERLAY
   TIDAK PUTIH PEKAT
   HANYA MEMBUAT FOTO LEBIH TERBACA
========================================================== */

.background-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.30),
            rgba(255,255,255,.08) 50%,
            rgba(255,255,255,.28)
        );

}


/* ==========================================================
   HAPUS GARIS BIRU ATAS
========================================================== */

.government-line {

    display:
        none !important;

}


/* ==========================================================
   LOGIN WRAPPER
========================================================== */

.login-wrapper {

    position:
        relative;

    z-index:
        10;

    width:
        100%;

    max-width:
        430px;

}


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

.login-card {

    position:
        relative;

    isolation:
        isolate;

    padding:
        1px;

    border-radius:
        22px;

    background:

        linear-gradient(
            120deg,
            #123b72,
            #5b91c7,
            #b99745,
            #5b91c7,
            #123b72
        );

    background-size:
        300% 300%;

    animation:
        borderMove 7s
        ease-in-out
        infinite;

    box-shadow:

        0 25px 70px
        rgba(0,0,0,.18);

}


@keyframes borderMove {

    0% {

        background-position:
            0% 50%;

    }

    50% {

        background-position:
            100% 50%;

    }

    100% {

        background-position:
            0% 50%;

    }

}


/* ==========================================================
   CAHAYA BERPUTAR DI LUAR CARD
========================================================== */

.login-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        -4px;

    z-index:
        -2;

    border-radius:
        25px;

    background:

        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 55deg,
            rgba(37,99,166,.9) 85deg,
            rgba(185,151,69,1) 110deg,
            transparent 145deg,
            transparent 360deg
        );

    filter:
        blur(5px);

    opacity:
        .75;

    animation:
        rotatingLight 5s
        linear
        infinite;

}


@keyframes rotatingLight {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* ==========================================================
   WHITE INNER CARD
========================================================== */

.login-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        1px;

    z-index:
        -1;

    border-radius:
        21px;

    background:
        #ffffff;

}


.login-container {

    position:
        relative;

    z-index:
        2;

    padding:
        36px 40px 27px;

    border-radius:
        21px;

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

}


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

.login-logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        12px;

}


.login-logo img {

    width:
        70px;

    height:
        70px;

    object-fit:
        contain;

    display:
        block;

    filter:
        drop-shadow(
            0 7px 12px
            rgba(18,59,114,.13)
        );

    animation:
        logoFloating 4s
        ease-in-out
        infinite;

}


@keyframes logoFloating {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

}


/* ==========================================================
   IDENTITAS OSIS
========================================================== */

.login-identity {

    text-align:
        center;

    margin-bottom:
        23px;

}


.identity-main {

    color:
        var(--navy);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    line-height:
        1.5;

}


.identity-school {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        8.5px;

    font-weight:
        600;

    letter-spacing:
        .20em;

}


.identity-line {

    width:
        36px;

    height:
        2px;

    margin:
        9px auto 0;

    border-radius:
        10px;

    background:
        var(--gold);

    animation:
        identityLine 2.5s
        ease-in-out
        infinite;

}


@keyframes identityLine {

    0%,
    100% {

        width:
            36px;

    }

    50% {

        width:
            55px;

    }

}


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

.login-heading {

    text-align:
        center;

    margin-bottom:
        23px;

}


.login-label {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        var(--navy);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.login-label i {

    color:
        var(--gold);

    font-size:
        10px;

    animation:
        adminIcon 2.5s
        ease-in-out
        infinite;

}


@keyframes adminIcon {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-3px);

    }

}


.login-heading h1 {

    margin-top:
        10px;

    color:
        var(--text);

    font-size:
        26px;

    font-weight:
        800;

    letter-spacing:
        -.035em;

    line-height:
        1.2;

}


.login-heading p {

    max-width:
        310px;

    margin:
        8px auto 0;

    color:
        var(--text-soft);

    font-size:
        11px;

    line-height:
        1.6;

}


/* ==========================================================
   ERROR
========================================================== */

.login-alert {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        17px;

    padding:
        11px 13px;

    border:
        1px solid
        #f1d2ce;

    border-radius:
        9px;

    color:
        #a5261d;

    background:
        #fff6f4;

    font-size:
        9px;

    line-height:
        1.5;

}


.alert-icon {

    flex-shrink:
        0;

}


.alert-icon i {

    animation:
        alertPulse 1.8s
        ease-in-out
        infinite;

}


@keyframes alertPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.15);

    }

}


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

.login-form {

    width:
        100%;

}


.form-group {

    margin-bottom:
        16px;

}


.form-group label {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        7px;

    color:
        #40536b;

    font-size:
        10px;

    font-weight:
        700;

}


.form-group label i {

    color:
        var(--navy);

    font-size:
        9px;

    transition:
        transform .2s ease;

}


.form-group:focus-within
label i {

    transform:
        scale(1.15);

}


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

.input-group {

    position:
        relative;

    transition:
        transform .2s ease;

}


.input-group:focus-within {

    transform:
        translateY(-1px);

}


.input-group input {

    width:
        100%;

    height:
        46px;

    padding:
        0 43px;

    outline:
        none;

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

    border-radius:
        10px;

    color:
        var(--text);

    background:
        #f9fbfd;

    font-family:
        inherit;

    font-size:
        11px;

    transition:
        .25s ease;

}


.input-group input::placeholder {

    color:
        #a3afbc;

}


.input-group input:hover {

    border-color:
        #cbd6e2;

}


.input-group input:focus {

    border-color:
        var(--navy);

    background:
        #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(18,59,114,.06);

}


/* ==========================================================
   INPUT ICON
========================================================== */

.input-icon {

    position:
        absolute;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #8190a2;

    pointer-events:
        none;

}


.input-icon i {

    font-size:
        11px;

    transition:
        .25s ease;

}


.input-group:focus-within
.input-icon i {

    color:
        var(--navy);

    transform:
        scale(1.12);

}


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

.password-toggle {

    position:
        absolute;

    right:
        7px;

    top:
        50%;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translateY(-50%);

    border:
        none;

    border-radius:
        7px;

    color:
        #8996a5;

    background:
        transparent;

    cursor:
        pointer;

    transition:
        .2s ease;

}


.password-toggle:hover {

    color:
        var(--navy);

    background:
        var(--blue-soft);

}


.password-toggle i {

    transition:
        transform .2s ease;

}


.password-toggle:hover i {

    transform:
        scale(1.15);

}


/* ==========================================================
   OPTIONS
========================================================== */

.form-options {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin:
        1px 0 19px;

}


.remember-option {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #68788c;

    font-size:
        9px;

    cursor:
        pointer;

}


.remember-option input {

    position:
        absolute;

    opacity:
        0;

}


.custom-checkbox {

    width:
        15px;

    height:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #cbd5e1;

    border-radius:
        4px;

    background:
        #ffffff;

}


.custom-checkbox i {

    opacity:
        0;

    color:
        #ffffff;

    font-size:
        8px;

}


.remember-option input:checked
+ .custom-checkbox {

    border-color:
        var(--navy);

    background:
        var(--navy);

}


.remember-option input:checked
+ .custom-checkbox i {

    opacity:
        1;

}


.forgot-password {

    color:
        var(--navy);

    font-size:
        9px;

    font-weight:
        700;

    text-decoration:
        none;

}


.forgot-password:hover {

    color:
        var(--gold);

}


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

.login-button {

    position:
        relative;

    width:
        100%;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    overflow:
        hidden;

    border:
        none;

    border-radius:
        10px;

    color:
        #ffffff;

    background:

        linear-gradient(
            135deg,
            #123b72,
            #2867a8
        );

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    box-shadow:
        0 8px 20px
        rgba(18,59,114,.18);

    transition:
        .25s ease;

}


.login-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(18,59,114,.25);

}


.login-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -100%;

    width:
        60%;

    height:
        100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .7s ease;

}


.login-button:hover::before {

    left:
        140%;

}


.button-text {

    position:
        relative;

    z-index:
        2;

}


.button-icon {

    position:
        relative;

    z-index:
        2;

    width:
        22px;

    height:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

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

    transition:
        transform .25s ease;

}


.login-button:hover
.button-icon {

    transform:
        translateX(4px);

}


/* ==========================================================
   SECURITY
   POSISI TENGAH
========================================================== */

.security-status {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    width:
        fit-content;

    max-width:
        100%;

    margin:
        19px auto 0;

    padding:
        9px 14px;

    border:
        1px solid
        #e0e8e3;

    border-radius:
        50px;

    background:
        #fbfdfb;

    box-shadow:
        0 3px 12px
        rgba(22,128,60,.04);

}


/* ==========================================================
   SECURITY ICON
========================================================== */

.security-icon {

    position:
        relative;

    width:
        25px;

    height:
        25px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        50%;

    color:
        var(--green);

    background:
        #edf8f0;

}


.security-icon::before {

    content:
        "";

    position:
        absolute;

    inset:
        -3px;

    border:
        1px solid
        rgba(22,128,60,.18);

    border-radius:
        50%;

    animation:
        securityPulse 2.4s
        ease-out
        infinite;

}


@keyframes securityPulse {

    0% {

        transform:
            scale(.8);

        opacity:
            .8;

    }

    70% {

        transform:
            scale(1.45);

        opacity:
            0;

    }

    100% {

        opacity:
            0;

    }

}


.security-icon i {

    font-size:
        10px;

    animation:
        shieldMove 2.5s
        ease-in-out
        infinite;

}


@keyframes shieldMove {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-2px);

    }

}


/* ==========================================================
   SECURITY TEXT
========================================================== */

.security-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1px;

    text-align:
        left;

}


.security-text strong {

    color:
        #40536b;

    font-size:
        8.5px;

    font-weight:
        800;

}


.security-text span {

    color:
        #8a98a6;

    font-size:
        7.5px;

}


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

.login-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        14px;

    color:
        #9aa5b2;

    font-size:
        7.5px;

    text-align:
        center;

}


.footer-dot {

    color:
        var(--gold);

}


/* ==========================================================
   LOADING
========================================================== */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ffffff;

    transition:
        opacity .4s ease,
        visibility .4s ease;

}


.page-loader.hide {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


.loader {

    width:
        38px;

    height:
        38px;

    border:
        3px solid
        #e6ecf3;

    border-top-color:
        var(--navy);

    border-right-color:
        var(--gold);

    border-radius:
        50%;

    animation:
        loaderSpin .8s
        linear
        infinite;

}


@keyframes loaderSpin {

    to {

        transform:
            rotate(360deg);

    }

}


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

.button-loading {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

}


.button-spinner {

    width:
        14px;

    height:
        14px;

    border:
        2px solid
        rgba(255,255,255,.35);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        loaderSpin .7s
        linear
        infinite;

}


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

@media (max-width: 600px) {

    .login-page {

        padding:
            30px 16px;

    }


    .login-container {

        padding:
            33px 30px 26px;

    }

}


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

@media (max-width: 480px) {

    .login-page {

        min-height:
            100dvh;

        padding:
            22px 12px;

    }


    .login-wrapper {

        max-width:
            410px;

    }


    .login-card {

        border-radius:
            20px;

    }


    .login-card::after {

        border-radius:
            19px;

    }


    .login-container {

        padding:
            29px 21px 22px;

        border-radius:
            19px;

    }


    .login-logo img {

        width:
            61px;

        height:
            61px;

    }


    .identity-main {

        font-size:
            8.5px;

        letter-spacing:
            .10em;

    }


    .identity-school {

        font-size:
            7.5px;

        letter-spacing:
            .15em;

    }


    .login-heading h1 {

        font-size:
            23px;

    }


    .login-heading p {

        font-size:
            10px;

    }


    .input-group input {

        height:
            45px;

    }


    .security-status {

        margin-top:
            17px;

    }

}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-width: 360px) {

    .login-page {

        padding:
            18px 9px;

    }


    .login-container {

        padding:
            25px 17px 20px;

    }


    .login-logo img {

        width:
            55px;

        height:
            55px;

    }


    .identity-main {

        font-size:
            7.8px;

    }


    .identity-school {

        font-size:
            7px;

    }


    .login-heading h1 {

        font-size:
            20px;

    }


    .login-heading p {

        font-size:
            9.5px;

    }


    .security-status {

        padding:
            8px 11px;

    }


    .security-text strong {

        font-size:
            8px;

    }


    .security-text span {

        font-size:
            7px;

    }


    .login-footer {

        font-size:
            7px;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* ==========================================================
   IDENTITAS SEKOLAH & OSIS
   GOVERNMENT MODERN STYLE
========================================================== */

.login-identity {

    position: relative;

    text-align: center;

    margin: 4px 0 25px;

    padding: 0;

}


/* ==========================================================
   ORGANISASI INTRA SEKOLAH
========================================================== */

.identity-main {

    color: #607187;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    line-height: 1.5;

    text-transform: uppercase;

    animation:
        identityFade 1.2s ease both;

}


/* ==========================================================
   SMPN 2 MOYUDAN
========================================================== */

.identity-school {

    margin-top: 5px;

    color: #123b72;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -.035em;

    line-height: 1.1;

    text-transform: uppercase;

    animation:
        schoolReveal .9s ease both;

    text-shadow:
        0 3px 12px
        rgba(18,59,114,.08);

}


/* ==========================================================
   ANIMASI NAMA SEKOLAH
========================================================== */

@keyframes schoolReveal {

    from {

        opacity: 0;

        transform:
            translateY(7px);

        letter-spacing:
            .04em;

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

        letter-spacing:
            -.035em;

    }

}


@keyframes identityFade {

    from {

        opacity: 0;

        transform:
            translateY(-4px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   GARIS IDENTITAS
========================================================== */

.identity-line {

    position: relative;

    width: 72px;

    height: 1px;

    margin: 14px auto 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b99745,
            #123b72,
            #b99745,
            transparent
        );

}


/* ==========================================================
   ICON PEMERINTAH
========================================================== */

.identity-icon {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 23px;

    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #123b72;

    background: #ffffff;

}


.identity-icon i {

    font-size: 9px;

    animation:
        institutionFloat 3s
        ease-in-out
        infinite;

}


/* ==========================================================
   ICON GERAK HALUS
========================================================== */

@keyframes institutionFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-3px);

    }

}


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

@media (max-width: 480px) {

    .identity-main {

        font-size: 8px;

        letter-spacing: .12em;

    }


    .identity-school {

        font-size: 21px;

        letter-spacing: -.025em;

    }


    .login-identity {

        margin-bottom: 22px;

    }

}


@media (max-width: 360px) {

    .identity-main {

        font-size: 7px;

    }


    .identity-school {

        font-size: 18px;

    }

}