/* =========================================================
   GLOBAL
========================================================= */

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

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

    -webkit-tap-highlight-color:transparent;
}


/* =========================================================
   THEME VARIABLES (DARK = DEFAULT)
========================================================= */

:root{

    --bg-grad-1:#3b82f6;
    --bg-grad-2:#2563eb;
    --bg-grad-3:#1e1b4b;

    --blob-1:#3b82f6;
    --blob-2:#8b5cf6;

    --card-bg:rgba(255,255,255,.13);
    --card-border:rgba(255,255,255,.22);
    --card-shadow:rgba(0,0,0,.35);

    --logo-bg-1:rgba(59,130,246,.45);
    --logo-bg-2:rgba(99,102,241,.45);
    --logo-border:rgba(255,255,255,.28);
    --logo-shadow:rgba(59,130,246,.30);
    --logo-icon:#ffffff;

    --text-title:#ffffff;
    --text-sub:#e0ecff;

    --admin-border:rgba(255,255,255,.28);
    --admin-bg:rgba(255,255,255,.10);
    --admin-bg-hover:rgba(255,255,255,.20);
    --admin-text:#ffffff;

    --install-border:rgba(255,255,255,.30);
    --install-bg:rgba(255,255,255,.08);
    --install-bg-hover:rgba(255,255,255,.20);
    --install-text:#ffffff;

    --footer-text:#d1d9e6;
    --footer-powered-text:#c7d2e6;
    --footer-powered-link:#ffffff;
    --footer-powered-link-hover:#dbeafe;

    --toggle-bg:rgba(255,255,255,.14);
    --toggle-border:rgba(255,255,255,.28);
    --toggle-icon:#ffffff;
}


body.light-mode{

    --bg-grad-1:#e0f2fe;
    --bg-grad-2:#bfdbfe;
    --bg-grad-3:#f8fafc;

    --blob-1:#93c5fd;
    --blob-2:#c4b5fd;

    --card-bg:rgba(255,255,255,.75);
    --card-border:rgba(15,23,42,.08);
    --card-shadow:rgba(30,41,59,.15);

    --logo-bg-1:rgba(59,130,246,.15);
    --logo-bg-2:rgba(99,102,241,.15);
    --logo-border:rgba(59,130,246,.25);
    --logo-shadow:rgba(59,130,246,.15);
    --logo-icon:#2563eb;

    --text-title:#0f172a;
    --text-sub:#475569;

    --admin-border:rgba(15,23,42,.14);
    --admin-bg:rgba(15,23,42,.04);
    --admin-bg-hover:rgba(15,23,42,.09);
    --admin-text:#0f172a;

    --install-border:rgba(15,23,42,.14);
    --install-bg:rgba(15,23,42,.03);
    --install-bg-hover:rgba(15,23,42,.08);
    --install-text:#0f172a;

    --footer-text:#64748b;
    --footer-powered-text:#94a3b8;
    --footer-powered-link:#2563eb;
    --footer-powered-link-hover:#1d4ed8;

    --toggle-bg:rgba(15,23,42,.06);
    --toggle-border:rgba(15,23,42,.14);
    --toggle-icon:#0f172a;
}


/* =========================================================
   HTML & BODY
========================================================= */

html,
body{

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    overflow:hidden;

    position:fixed;

    inset:0;

    overscroll-behavior:none;

    touch-action:none;

    -ms-touch-action:none;
}


/* =========================================================
   BODY
========================================================= */

body{

    display:flex;

    justify-content:center;

    align-items:center;

    background:
        radial-gradient(
            circle at top,
            var(--bg-grad-1) 0%,
            var(--bg-grad-2) 35%,
            var(--bg-grad-3) 100%
        );

    transition:background .35s ease;

    padding:16px;

    padding-top:
        calc(
            16px +
            env(safe-area-inset-top)
        );

    padding-bottom:
        calc(
            16px +
            env(safe-area-inset-bottom)
        );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

body::before,
body::after{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    opacity:.40;

    z-index:0;

    pointer-events:none;
}


body::before{

    width:500px;
    height:500px;

    background:var(--blob-1);

    top:-120px;
    left:-120px;

    transition:background .35s ease;
}


body::after{

    width:400px;
    height:400px;

    background:var(--blob-2);

    bottom:-120px;
    right:-120px;

    transition:background .35s ease;
}


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

.card{

    width:100%;

    max-width:380px;

    max-height:100%;

    overflow-y:auto;

    background:
        var(--card-bg);

    backdrop-filter:blur(20px);

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

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

    padding:34px 28px;

    border-radius:26px;

    box-shadow:
        0 25px 60px
        var(--card-shadow);

    position:relative;

    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;

    animation:
        fadeIn .6s ease;

    z-index:2;

    touch-action:pan-y;
}


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

@keyframes fadeIn{

    from{

        opacity:0;

        transform:
            translateY(30px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}


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

.logo-circle{

    width:64px;
    height:64px;

    margin:
        0 auto 18px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            var(--logo-bg-1),
            var(--logo-bg-2)
        );

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

    box-shadow:
        0 10px 25px
        var(--logo-shadow);

    transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}


.logo-circle i{

    font-size:26px;

    color:var(--logo-icon);

    transition:color .35s ease;
}


.logo-circle img{

    width:100%;

    height:100%;

    object-fit:cover;
}


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

h2{

    text-align:center;

    color:var(--text-title);

    font-size:22px;

    transition:color .35s ease;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;
}


/* =========================================================
   SUBTITLE
========================================================= */

.sub{

    text-align:center;

    font-size:13px;

    color:var(--text-sub);

    margin:
        6px 0 26px;

    letter-spacing:.3px;

    transition:color .35s ease;
}


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

.login-alert{

    display:none;

    align-items:flex-start;

    gap:10px;

    padding:
        12px 14px;

    border-radius:14px;

    font-size:12.5px;

    font-weight:600;

    line-height:1.4;

    margin-bottom:16px;
}


.login-alert.show{

    display:flex;

    animation:
        shakeAlert .4s ease;
}


.login-alert i{

    font-size:15px;

    margin-top:1px;

    flex-shrink:0;
}


/* ERROR */

.login-alert.error{

    background:
        rgba(239,68,68,.18);

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

    color:#fecaca;
}


/* WARNING */

.login-alert.warning{

    background:
        rgba(245,158,11,.18);

    border:
        1px solid
        rgba(245,158,11,.45);

    color:#fde68a;
}


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

@keyframes shakeAlert{

    0%,
    100%{
        transform:translateX(0);
    }

    20%,
    60%{
        transform:translateX(-6px);
    }

    40%,
    80%{
        transform:translateX(6px);
    }
}


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

.input-group{

    position:relative;

    margin-top:16px;
}


.input-group.first{

    margin-top:0;
}


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

.input-icon{

    position:absolute;

    left:15px;

    top:50%;

    transform:
        translateY(-50%);

    color:#111827;

    font-size:15px;

    pointer-events:none;

    z-index:2;

    transition:.25s;
}


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

input{

    width:100%;

    padding:
        14px
        45px
        14px
        42px;

    border-radius:14px;

    /*
       PUTIH TERANG
    */
    background:#ffffff;

    /*
       BORDER
    */
    border:
        1px solid
        #d1d5db;

    outline:none;

    /*
       TULISAN YANG DIKETIK
    */
    color:#111827;

    font-size:15px;

    font-weight:500;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

input::placeholder{

    color:#6b7280;

    opacity:1;
}


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

input:focus{

    background:#ffffff;

    border-color:#3b82f6;

    color:#111827;

    box-shadow:
        0 0 0 3px
        rgba(59,130,246,.25);
}


/* =========================================================
   INPUT ICON SAAT FOCUS
========================================================= */

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

    color:#2563eb;
}


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

.icon-toggle{

    position:absolute;

    right:14px;

    top:50%;

    transform:
        translateY(-50%);

    cursor:pointer;

    color:#4b5563;

    font-size:16px;

    padding:6px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.2s;

    z-index:3;
}


.icon-toggle:hover,
.icon-toggle:active{

    color:#111827;
}


/* =========================================================
   CHROME / SAFARI AUTOFILL
========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{

    -webkit-text-fill-color:#111827;

    -webkit-box-shadow:
        0 0 0 1000px
        #ffffff
        inset;

    box-shadow:
        0 0 0 1000px
        #ffffff
        inset;

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


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

button{

    width:100%;

    padding:14px;

    margin-top:24px;

    border:none;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #6366f1
        );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;
}


button:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(0,0,0,.30);
}


button:active{

    transform:
        translateY(0);
}


/* =========================================================
   ADMINISTRATOR LOGIN
========================================================= */

.admin-login{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    margin-top:12px;

    padding:12px 14px;

    border-radius:14px;

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

    background:
        var(--admin-bg);

    color:var(--admin-text);

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.3s;
}


.admin-login:hover{

    background:
        var(--admin-bg-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.20);
}


.admin-login:active{

    transform:
        translateY(0);
}


.admin-login i{

    font-size:14px;
}


/* =========================================================
   INSTALL
========================================================= */

.install{

    margin-top:14px;
}


.install button{

    width:100%;

    padding:12px;

    margin-top:0;

    border-radius:14px;

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

    background:
        var(--install-bg);

    color:var(--install-text);

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;
}


.install button:hover{

    background:
        var(--install-bg-hover);

    transform:
        translateY(-2px);
}


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

.footer{

    text-align:center;

    margin-top:18px;

    font-size:12px;

    color:var(--footer-text);

    display:flex;

    transition:color .35s ease;

    align-items:center;

    justify-content:center;

    gap:6px;
}


.footer-powered{

    text-align:center;

    margin-top:6px;

    font-size:10.5px;

    color:var(--footer-powered-text);

    transition:color .35s ease;
}


.footer-powered a{

    color:var(--footer-powered-link);

    font-weight:700;

    text-decoration:none;

    transition:.2s;
}


.footer-powered a:hover{

    color:var(--footer-powered-link-hover);

    text-decoration:underline;
}


/* =========================================================
   THEME TOGGLE BUTTON
========================================================= */

.theme-toggle{

    position:absolute;

    top:18px;

    right:18px;

    width:36px;

    height:36px;

    border-radius:50%;

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

    background:
        var(--toggle-bg);

    color:var(--toggle-icon);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    font-size:14px;

    z-index:5;

    transition:.3s;
}


.theme-toggle:hover{

    transform:
        translateY(-2px)
        rotate(15deg);
}


.theme-toggle:active{

    transform:translateY(0);
}


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

@media(max-width:480px){

    .card{

        padding:26px 20px;

        border-radius:20px;
    }


    h2{

        font-size:19px;
    }


    .sub{

        font-size:12px;

        margin-bottom:22px;
    }


    .logo-circle{

        width:56px;

        height:56px;

        border-radius:16px;

        margin-bottom:14px;
    }


    .logo-circle i{

        font-size:22px;
    }


    .theme-toggle{

        top:14px;

        right:14px;

        width:32px;

        height:32px;

        font-size:13px;
    }


    input{

        padding:
            13px
            42px
            13px
            40px;

        font-size:14px;

        background:#ffffff;

        color:#111827;

        border-color:#d1d5db;
    }


    input::placeholder{

        color:#6b7280;
    }


    .input-icon{

        color:#111827;
    }


    .icon-toggle{

        color:#374151;
    }
}


/* =========================================================
   SMALL HEIGHT DEVICE
========================================================= */

@media(max-height:640px){

    .card{

        padding:22px 20px;
    }


    .logo-circle{

        width:48px;

        height:48px;

        margin-bottom:10px;
    }


    .sub{

        margin-bottom:16px;
    }
}