/* =========================================================
   SISTEM ASET
   LOGIN PAGE
========================================================= */

:root {

    --primary: #0876df;
    --primary-dark: #0565c5;

    --navy: #071a4c;

    --text: #516a91;
    --muted: #8292ad;

    --border: #cbd8e7;

    --white: #ffffff;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

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

    color: var(--navy);

}


button,
input {

    font: inherit;

}


a {

    text-decoration: none;

}


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

.login-page {

    width: 100%;

    min-height: 100vh;

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 61.5fr)
        minmax(440px, 38.5fr);

    overflow: hidden;


    /*
    |--------------------------------------------------------------------------
    | BACKGROUND IMAGE
    |--------------------------------------------------------------------------
    */

    background-image:
        url('/images/login/login_bg.png');

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

}


/* =========================================================
   GLOBAL SOFT OVERLAY
========================================================= */

.login-page::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;


    /*
    Sedikit overlay agar text tetap terbaca,
    tetapi background IPA tidak hilang.
    */

    background:

        linear-gradient(

            90deg,

            rgba(245, 251, 255, .10)
            0%,

            rgba(244, 251, 255, .04)
            52%,

            rgba(216, 236, 255, .04)
            100%

        );


    pointer-events: none;

}


/* =========================================================
   LEFT SECTION
========================================================= */

.login-information {

    min-width: 0;

    min-height: 100vh;

    position: relative;

    z-index: 2;

    padding:

        35px

        25px

        50px

        clamp(70px, 6.2vw, 115px);

}


/* =========================================================
   HERO CONTENT
========================================================= */

.login-hero-content {

    width: min(100%, 1000px);

    /*
    Background sudah punya logo Perumdam pada bagian atas.
    Jadi content kita mulai agak ke bawah.
    */

    margin-top:
        clamp(50px, 18vh, 30px);

}


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

.hero-heading h1,
.hero-heading h2 {

    margin: 0;

    font-size:
        clamp(34px, 3vw, 52px);

    line-height: 1.08;

    font-weight: 780;

    letter-spacing: -1.7px;

}


.hero-heading h1 {

    color: #06194c;

}


.hero-heading h2 {

    margin-top: 5px;

    color: #0870d5;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    width: min(100%, 760px);

    margin-top: 20px;

    color: #526a90;

    font-size:
        clamp(14px, 1.02vw, 18px);

    line-height: 1.58;

    font-weight: 450;

    text-shadow:
        0 1px 0
        rgba(255, 255, 255, .28);

}


/* =========================================================
   FEATURE GLASS PANEL
========================================================= */

.feature-glass-panel {

    width: min(100%, 900px);

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;

    margin-top: 31px;

    padding: 13px;


    /*
    |--------------------------------------------------------------------------
    | GLASS EFFECT
    |--------------------------------------------------------------------------
    */

    border:

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

    border-radius: 18px;


    background:

        rgba(255, 255, 255, .20);


    backdrop-filter:
        blur(15px);

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


    box-shadow:

        0 15px 35px
        rgba(29, 77, 121, .08),

        inset
        0 1px 0
        rgba(255, 255, 255, .40);

}


/* =========================================================
   FEATURE ITEM
========================================================= */

.login-feature {

    min-width: 0;

    min-height: 77px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        12px 11px;


    border:

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


    border-radius: 13px;


    background:

        rgba(255, 255, 255, .43);


    box-shadow:

        0 6px 18px
        rgba(27, 75, 118, .045);


    transition:

        transform .18s ease,

        background .18s ease,

        box-shadow .18s ease;

}


.login-feature:hover {

    transform:
        translateY(-2px);


    background:

        rgba(255, 255, 255, .58);


    box-shadow:

        0 10px 24px
        rgba(27, 75, 118, .09);

}


/* =========================================================
   FEATURE ICON
========================================================= */

.login-feature-icon {

    width: 46px;

    height: 46px;

    min-width: 46px;


    display: flex;

    align-items: center;

    justify-content: center;


    border-radius: 12px;


    border:

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


    box-shadow:

        inset
        0 1px 0
        rgba(255,255,255,.55);

}


.login-feature-icon svg {

    width: 22px;

    height: 22px;

    stroke-width: 2.1;

}


/* =========================================================
   FEATURE 1 - BLUE
========================================================= */

.feature-blue .login-feature-icon {

    color: #086bd0;

    background:

        rgba(222, 238, 255, .94);

}


/* =========================================================
   FEATURE 2 - CYAN
========================================================= */

.feature-cyan .login-feature-icon {

    color: #0284c7;

    background:

        rgba(221, 245, 255, .94);

}


/* =========================================================
   FEATURE 3 - PURPLE
========================================================= */

.feature-purple .login-feature-icon {

    color: #7138c7;

    background:

        rgba(239, 231, 255, .94);

}


/* =========================================================
   FEATURE 4 - GREEN
========================================================= */

.feature-green .login-feature-icon {

    color: #087a70;

    background:

        rgba(221, 246, 241, .94);

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.login-feature-content {

    min-width: 0;

}


.login-feature strong,
.login-feature span {

    display: block;

    line-height: 1.25;

}


.login-feature strong {

    color: #0d2857;

    font-size: 11.5px;

    font-weight: 720;

}


.login-feature span {

    margin-top: 3px;

    color: #345277;

    font-size: 10.5px;

    font-weight: 520;

}


/* =========================================================
   RIGHT FORM AREA
========================================================= */

.login-form-area {

    min-height: 100vh;

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;


    padding:

        45px

        clamp(42px, 5vw, 90px)

        45px

        15px;

}


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

.login-card {

    width: 100%;

    max-width: 545px;

    min-height: 690px;


    display: flex;

    flex-direction: column;

    justify-content: center;


    padding:

        58px

        54px

        42px;


    border:

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


    border-radius: 18px;


    background:

        rgba(255, 255, 255, .965);


    box-shadow:

        0 21px 55px
        rgba(24, 70, 114, .11);


    backdrop-filter:
        blur(13px);

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

}


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

.mobile-brand {

    display: none;

}


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

.login-heading {

    margin-bottom: 35px;

}


.welcome-text {

    display: block;

    margin-bottom: 26px;

    color: #367acb;

    font-size: 10px;

    font-weight: 750;

    letter-spacing: 3.5px;

    text-transform: uppercase;

}


.login-heading h1 {

    margin: 0;

    color: #07194c;

    font-size:
        clamp(30px, 2.2vw, 39px);

    line-height: 1.1;

    font-weight: 770;

    letter-spacing: -.9px;

}


.login-heading p {

    max-width: 420px;

    margin: 14px 0 0;

    color: #65799a;

    font-size: 13px;

    line-height: 1.55;

}


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

.login-alert {

    display: flex;

    align-items: flex-start;

    gap: 9px;


    margin-bottom: 18px;

    padding:
        11px 13px;


    border:
        1px solid #f2cccc;

    border-radius:
        8px;


    background:
        #fff5f5;


    color:
        #b42318;


    font-size:
        11px;

}


.login-alert svg {

    width: 16px;

    height: 16px;

    flex-shrink: 0;

}


.login-alert p {

    margin: 0;

}


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

.form-group {

    margin-bottom: 23px;

}


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

.form-label-login {

    display: block;

    margin-bottom: 9px;

    color: #091d4b;

    font-size: 12px;

    font-weight: 680;

}


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

.input-container {

    position: relative;

}


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

.login-input {

    width: 100%;

    height: 55px;


    padding:

        0

        48px

        0

        48px;


    border:

        1px solid
        #c9d6e5;


    border-radius:

        8px;


    outline:

        none;


    background:

        rgba(255, 255, 255, .96);


    color:

        #294266;


    font-size:

        13px;


    transition:

        border-color .18s ease,

        box-shadow .18s ease,

        background .18s ease;

}


.login-input::placeholder {

    color:
        #a5b2c6;

}


.login-input:hover {

    border-color:
        #acbed2;

}


.login-input:focus {

    border-color:
        var(--primary);


    background:
        #ffffff;


    box-shadow:

        0 0 0 3px
        rgba(8, 118, 223, .08);

}


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

.input-icon {

    width: 20px;

    height: 20px;


    position: absolute;

    top: 50%;

    left: 17px;


    transform:

        translateY(-50%);


    display: flex;

    align-items: center;

    justify-content: center;


    color:

        #526d95;


    pointer-events:

        none;

}


.input-icon svg {

    width: 18px;

    height: 18px;

    stroke-width: 1.9;

}


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

.password-button {

    width: 38px;

    height: 38px;


    position: absolute;

    top: 50%;

    right: 8px;


    transform:

        translateY(-50%);


    display: flex;

    align-items: center;

    justify-content: center;


    border: 0;


    border-radius:
        7px;


    background:
        transparent;


    color:
        #526d95;


    cursor:
        pointer;


    transition:
        .15s ease;

}


.password-button:hover {

    color:
        var(--primary);


    background:
        #f2f7fd;

}


.password-button svg {

    width: 18px;

    height: 18px;

}


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

.login-options {

    display: flex;

    align-items: center;

    justify-content: space-between;


    gap: 16px;


    margin:

        1px

        0

        27px;

}


/* =========================================================
   REMEMBER ME
========================================================= */

.remember-me {

    display: flex;

    align-items: center;


    gap: 9px;


    color:
        #122950;


    font-size:
        11.5px;


    font-weight:
        520;


    cursor:
        pointer;

}


.remember-me input {

    width:
        19px;

    height:
        19px;


    accent-color:
        #0875dd;

}


/* =========================================================
   FORGOT PASSWORD
========================================================= */

.forgot-password {

    color:
        #086ed1;


    font-size:
        11.5px;


    font-weight:
        520;


    text-decoration:
        underline;

}


.forgot-password:hover {

    color:
        #0459ad;

}


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

.login-button {

    width:
        100%;

    height:
        58px;


    display:
        flex;

    align-items:
        center;

    justify-content:
        center;


    gap:
        20px;


    border:
        0;


    border-radius:
        8px;


    background:

        linear-gradient(

            90deg,

            #0877df,

            #066ed4

        );


    color:
        #ffffff;


    font-size:
        14px;


    font-weight:
        680;


    cursor:
        pointer;


    box-shadow:

        0 9px 20px
        rgba(4, 100, 202, .16);


    transition:

        transform .18s ease,

        box-shadow .18s ease,

        background .18s ease;

}


.login-button:hover {

    transform:

        translateY(-1px);


    background:

        linear-gradient(

            90deg,

            #076bcc,

            #0564c3

        );


    box-shadow:

        0 12px 25px
        rgba(4, 100, 202, .22);

}


.login-button svg {

    width:
        18px;

    height:
        18px;

}


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

.login-footer {

    display:
        grid;


    grid-template-columns:

        1fr

        auto

        1fr;


    align-items:
        center;


    gap:
        16px;


    margin-top:
        42px;

}


.login-footer > span {

    height:
        1px;


    background:
        #dae3ed;

}


.login-footer p {

    margin:
        0;


    color:
        #71829f;


    font-size:
        10px;


    white-space:
        nowrap;

}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1500px) {

    .login-information {

        padding-left:
            75px;

    }


    .login-hero-content {

        margin-top:
            clamp(135px, 16vh, 175px);

    }


    .feature-glass-panel {

        gap:
            8px;

    }


    .login-feature {

        padding:
            10px 8px;

    }


    .login-feature-icon {

        width:
            42px;

        height:
            42px;

        min-width:
            42px;

    }


    .login-feature-icon svg {

        width:
            20px;

        height:
            20px;

    }


    .login-feature strong {

        font-size:
            10.5px;

    }


    .login-feature span {

        font-size:
            9.5px;

    }


    .login-card {

        padding-left:
            45px;

        padding-right:
            45px;

    }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .login-page {

        grid-template-columns:

            minmax(0, 1fr)

            435px;

    }


    .login-information {

        padding-left:
            45px;

    }


    .hero-heading h1,
    .hero-heading h2 {

        font-size:
            clamp(29px, 3.2vw, 42px);

    }


    .hero-description {

        font-size:
            13px;

    }


    .feature-glass-panel {

        grid-template-columns:

            repeat(2, minmax(0, 1fr));


        max-width:
            510px;

    }


    .login-feature strong {

        font-size:
            11px;

    }


    .login-feature span {

        font-size:
            10px;

    }


    .login-form-area {

        padding-right:
            27px;

    }


    .login-card {

        min-height:
            630px;


        padding:

            45px

            36px

            35px;

    }

}


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

@media (max-width: 900px) {

    .login-page {

        display:
            block;


        background-position:
            center center;

    }


    /*
    Hide left content
    */

    .login-information {

        display:
            none;

    }


    .login-form-area {

        min-height:
            100vh;


        padding:
            25px;

    }


    .login-card {

        max-width:
            500px;


        min-height:
            auto;


        padding:

            43px

            35px;

    }


    /*
    |--------------------------------------------------------------------------
    | MOBILE BRAND
    |--------------------------------------------------------------------------
    */

    .mobile-brand {

        display:
            flex;


        align-items:
            center;


        gap:
            11px;


        margin-bottom:
            34px;

    }


    .mobile-brand-logo {

        width:
            44px;

        height:
            44px;


        display:
            flex;


        align-items:
            center;


        justify-content:
            center;


        border-radius:
            11px;


        background:

            linear-gradient(

                145deg,

                #0878df,

                #0660bb

            );


        color:
            #ffffff;

    }


    .mobile-brand-logo svg {

        width:
            22px;

        height:
            22px;

    }


    .mobile-brand-content strong {

        display:
            block;


        color:
            #0a1d4c;


        font-size:
            15px;

    }


    .mobile-brand-content span {

        display:
            block;


        margin-top:
            2px;


        color:
            #8290a8;


        font-size:
            9px;

    }

}


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

@media (max-width: 520px) {

    body {

        background:
            #ffffff;

    }


    .login-page {

        background:
            #ffffff;

    }


    .login-form-area {

        align-items:
            stretch;


        padding:
            0;

    }


    .login-card {

        width:
            100%;


        max-width:
            none;


        min-height:
            100vh;


        justify-content:
            center;


        padding:

            34px

            24px;


        border:
            0;


        border-radius:
            0;


        background:
            #ffffff;


        box-shadow:
            none;


        backdrop-filter:
            none;

    }


    .welcome-text {

        margin-bottom:
            17px;

    }


    .login-heading {

        margin-bottom:
            28px;

    }


    .login-heading h1 {

        font-size:
            28px;

    }


    .login-heading p {

        font-size:
            12px;

    }


    .login-input {

        height:
            52px;

    }


    .login-button {

        height:
            54px;

    }


    .login-footer {

        margin-top:
            31px;

    }


    .login-options {

        gap:
            10px;

    }


    .remember-me,
    .forgot-password {

        font-size:
            10.5px;

    }

}