/* HALAMAN LOGIN — PHP 7.4 */

.login-page{
    padding:28px 0 34px;
    background:
        radial-gradient(circle at 14% 20%,rgba(35,103,213,.08),transparent 24%),
        radial-gradient(circle at 86% 75%,rgba(0,174,119,.06),transparent 25%);
}

.login-shell{
    min-height:610px;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    overflow:hidden;
    border:1px solid #d9e6f4;
    border-radius:26px;
    background:#fff;
    box-shadow:0 18px 48px rgba(11,31,77,.10);
}

.login-form-panel{
    padding:48px 52px 38px;
}

.login-form-header{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.login-form-icon{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:15px;
    color:#1762d3;
    background:#eaf4ff;
}

.login-form-icon .icon{
    width:26px;
    height:26px;
}

.login-eyebrow{
    display:block;
    margin-bottom:3px;
    color:#1762d3;
    font-size:9.5px;
    letter-spacing:1.1px;
    font-weight:700;
}

.login-form-header h1{
    margin:0;
    color:#10366d;
    font-size:31px !important;
    line-height:1.22 !important;
    letter-spacing:-.65px !important;
    font-weight:600 !important;
}

.login-form-header p{
    max-width:520px;
    margin:7px 0 0;
    color:#667d98;
    font-size:12.5px;
    line-height:1.55;
}

.login-form{
    margin-top:26px;
    display:grid;
    gap:15px;
}

.login-field > span{
    display:block;
    margin-bottom:7px;
    color:#294b75;
    font-size:12px;
    font-weight:600;
}

.login-input{
    min-height:50px;
    padding:0 13px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #d7e3f0;
    border-radius:11px;
    background:#fff;
    transition:border-color .18s,box-shadow .18s,background .18s;
}

.login-input:focus-within{
    border-color:#2266d5;
    box-shadow:0 0 0 3px rgba(34,102,213,.10);
}

.login-input.invalid{
    border-color:#da4b4b;
    background:#fffafa;
    box-shadow:0 0 0 3px rgba(218,75,75,.08);
}

.login-input .icon{
    width:19px;
    height:19px;
    flex:0 0 auto;
    color:#69819e;
}

.login-input input{
    width:100%;
    min-width:0;
    height:48px;
    padding:0;
    border:0;
    outline:0;
    color:#173b6e;
    background:transparent;
    font-size:13px !important;
}

.login-input input::placeholder{
    color:#98a8ba;
}

.login-password-input{
    padding-right:7px;
}

.login-password-toggle{
    width:auto !important;
    min-width:auto !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:8px !important;
    color:#1762d3 !important;
    background:#edf5ff !important;
    box-shadow:none !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    cursor:pointer;
}

.login-error{
    min-height:15px;
    display:block;
    margin-top:4px;
    color:#c63e3e;
    font-size:9.5px;
}

.login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.login-remember{
    display:flex;
    align-items:center;
    gap:7px;
    color:#657c97;
    font-size:10.5px;
}

.login-remember input{
    width:16px;
    height:16px;
    margin:0;
    accent-color:#1762d3;
}

.login-options > a{
    color:#1762d3;
    font-size:10.5px;
    font-weight:600;
}

.login-notice{
    padding:12px 14px;
    border:1px solid #bdebd8;
    border-radius:11px;
    color:#166846;
    background:#eaf8f1;
    font-size:11px;
    line-height:1.5;
}

.login-notice.error{
    border-color:#f1c6c6;
    color:#a63d3d;
    background:#fff1f1;
}

.login-submit{
    width:100%;
    min-height:50px;
}

.login-submit .icon{
    width:18px;
    height:18px;
}

.login-divider{
    margin:19px 0;
    display:flex;
    align-items:center;
    gap:12px;
    color:#91a1b3;
    font-size:10px;
}

.login-divider::before,
.login-divider::after{
    content:"";
    height:1px;
    flex:1;
    background:#e3eaf2;
}

.login-register-button{
    min-height:66px;
    padding:11px 13px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    border:1px solid #dbe6f2;
    border-radius:13px;
    color:#254972;
    background:#f9fbfe;
    transition:transform .18s,border-color .18s,box-shadow .18s;
}

.login-register-button:hover{
    transform:translateY(-1px);
    border-color:#a9c8ee;
    box-shadow:0 8px 18px rgba(17,72,140,.07);
}

.login-register-button > span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#1762d3;
    background:#eaf4ff;
}

.login-register-button > span .icon{
    width:21px;
    height:21px;
}

.login-register-button strong{
    display:block;
    font-size:11.5px;
    font-weight:600;
}

.login-register-button small{
    display:block;
    margin-top:2px;
    color:#73879e;
    font-size:9.5px;
}

.login-register-button > b{
    color:#1762d3;
    font-size:18px;
}

.login-safe-note{
    margin-top:15px;
    padding:11px 13px;
    display:flex;
    align-items:center;
    gap:8px;
    border-radius:10px;
    color:#627a96;
    background:#f4f8fc;
    font-size:10.5px;
}

.login-safe-note .icon{
    width:17px;
    height:17px;
    flex:0 0 auto;
    color:#1762d3;
}

.login-side-panel{
    min-height:610px;
    padding:42px 38px 28px;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#fff;
    background:
        radial-gradient(circle at 90% 10%,rgba(92,175,255,.34),transparent 28%),
        radial-gradient(circle at 10% 92%,rgba(0,199,139,.22),transparent 28%),
        linear-gradient(145deg,#0b43a8 0%,#1262d4 58%,#0a4cb5 100%);
}

.login-side-panel::before{
    content:"";
    position:absolute;
    width:270px;
    height:270px;
    right:-118px;
    bottom:-115px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    box-shadow:
        0 0 0 44px rgba(255,255,255,.035),
        0 0 0 88px rgba(255,255,255,.025);
}

.login-side-content,
.login-side-footer{
    position:relative;
    z-index:1;
}

.login-side-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.11);
    font-size:11px;
    font-weight:600;
}

.login-side-badge .icon{
    width:17px;
    height:17px;
}

.login-side-panel h2{
    max-width:520px;
    margin:20px 0 11px;
    color:#fff;
    font-size:30px !important;
    line-height:1.22 !important;
    letter-spacing:-.65px !important;
    font-weight:600 !important;
}

.login-side-content > p{
    max-width:500px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:13px;
    line-height:1.6;
}

.login-feature-list{
    margin-top:26px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}

.login-feature-list article{
    padding:12px;
    display:grid;
    grid-template-columns:37px minmax(0,1fr);
    gap:10px;
    align-items:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:13px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(4px);
}

.login-feature-list article > span{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.13);
}

.login-feature-list article > span .icon{
    width:19px;
    height:19px;
}

.login-feature-list strong{
    display:block;
    color:#fff;
    font-size:10.5px;
    font-weight:600;
}

.login-feature-list small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.70);
    font-size:8.8px;
    line-height:1.35;
}

.login-status-preview{
    margin-top:23px;
    padding:15px;
    border:1px solid rgba(255,255,255,.17);
    border-radius:15px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(5px);
}

.login-status-top{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
}

.login-status-top > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#0f9f72;
    background:#fff;
}

.login-status-top > span .icon{
    width:21px;
    height:21px;
}

.login-status-top small{
    display:block;
    color:rgba(255,255,255,.7);
    font-size:8.5px;
}

.login-status-top strong{
    display:block;
    margin-top:1px;
    color:#fff;
    font-size:11.5px;
    font-weight:600;
}

.login-status-top > b{
    padding:5px 8px;
    border-radius:999px;
    color:#075f42;
    background:#bdf2dc;
    font-size:8.5px;
    font-weight:600;
}

.login-status-progress{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
}

.login-status-progress span{
    height:5px;
    border-radius:999px;
    background:rgba(255,255,255,.22);
}

.login-status-progress span.done{
    background:#fff;
}

.login-status-label{
    margin-top:7px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    color:rgba(255,255,255,.67);
    font-size:8px;
}

.login-status-label small:nth-child(2){
    text-align:center;
}

.login-status-label small:last-child{
    text-align:right;
}

.login-side-footer{
    margin-top:24px;
    padding-top:17px;
    display:flex;
    align-items:center;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.16);
}

.login-side-footer > .icon{
    width:22px;
    height:22px;
}

.login-side-footer small{
    display:block;
    color:rgba(255,255,255,.7);
    font-size:8.5px;
}

.login-side-footer strong{
    display:block;
    color:#fff;
    font-size:10.5px;
    font-weight:600;
}

@media(max-width:980px){
    .login-shell{
        grid-template-columns:1fr;
    }

    .login-side-panel{
        min-height:auto;
    }

    .login-feature-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .login-page{
        padding:18px 0 25px;
    }

    .login-shell{
        border-radius:21px;
    }

    .login-form-panel{
        padding:28px 20px 25px;
    }

    .login-form-header h1{
        font-size:25px !important;
    }

    .login-form-header p{
        font-size:12px;
    }

    .login-side-panel{
        padding:28px 20px 24px;
    }

    .login-side-panel h2{
        font-size:25px !important;
    }

    .login-feature-list{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:430px){
    .login-form-panel,
    .login-side-panel{
        padding-left:16px;
        padding-right:16px;
    }

    .login-form-header{
        align-items:flex-start;
    }

    .login-form-icon{
        width:43px;
        height:43px;
    }

    .login-form-header h1{
        font-size:23px !important;
    }

    .login-options{
        align-items:flex-start;
    }

    .login-feature-list{
        grid-template-columns:1fr;
    }
}