:root{
    --primary:#264794;
    --primary-dark:#1d376f;
    --secondary:#6b7280;
    --border:#d4d7dc;
    --bg:#f5f7fb;
    --white:#ffffff;
    --login-visual-bg:
        linear-gradient(135deg,
            rgba(38,71,148,.92),
            rgba(23,47,96,.90)),
        url("/images/login-bg.jpg") center/cover;
}

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

html,
body{
    height:100%;
    font-family:Inter,Segoe UI,Roboto,sans-serif;
    background:#000;
    overflow:hidden;
}


.bg-overlay{
    position:fixed;
    inset:0;
    backdrop-filter:blur(2px);
    background:rgba(255,255,255,.45);
}

.login-shell{
    position:relative;
    z-index:1;
    min-height:100vh !important;
    min-height:100svh !important;
    min-height:100dvh !important;
    padding-top:24px;
    padding-bottom:24px;
}

.login-card{
    position:relative;
    z-index:2;
    width:1000px;
    max-width:100%;
    min-height:580px;
    border-radius:10px;
    overflow:hidden;
    background:rgba(255,255,255,.90);
}

.left-panel{
    width:100%;
    height:580px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:70px;
    color:#fff;
    background:var(--login-visual-bg);
}

.brand{
    max-width:570px;
}

.brand-title {
    width:400px;
}

.text-primary-custom{
    color:#fff;
    font-size:58px;
    font-weight:800;
}

.text-dark-custom{
    color:#dbe7ff;
    font-size:34px;
    font-weight:300;
    letter-spacing:0px;
    padding-top: 8px !important;
    float:right;
}

.brand-subtitle{
    font-size:19px;
    line-height:1.9;
    color:rgba(255,255,255,.88);
}

.right-panel{
     height:580px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:60px;
    background:#fff;
}

.login-header{
    margin-bottom:30px;
}

.login-header h3{
    font-family:  sans-serif;
    font-size:30px;
    font-weight:700;
    color:#333;
    letter-spacing: -1px;
    margin-bottom:0px;
}

.login-header p{
    color:#7b8495;
    font-size:16px;
    margin:0;
}

.form-label{
    font-weight:600;
    color:#374151;
    margin-bottom:8px;
}

.custom-input{
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    transition:.25s;
}

.custom-input:focus-within{
    box-shadow:0 0 0 4px rgba(38,71,148,.12);
}

.input-group-text{
    border:none;
    background:#fff;
    color:#8b95a7;
    padding-left:18px;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color:#212529 !important;
    transition:background-color 9999s ease-in-out 0s;
}

.form-control{
    border:none;
    height:45px;
    font-size:15px;
    box-shadow:none!important;
}

.form-control::placeholder{
    color:#a2aab7;
}

.btn-eye{
    border:none;
    width:58px;
    color:#7d8797;
}

.btn-eye:hover{
    background:#fff;
    color:var(--primary);
}

.form-check-input:checked{
    background:var(--primary);
    border-color:var(--primary);
}

.form-check-label{
    color:#555;
    font-size:14px;
}

.forgot-link{
    color:var(--primary);
    font-size:14px;
    text-decoration:none;
}

.forgot-link:hover{
    color:var(--primary-dark);
}

.btn-login{
    height:50px;
    border:none;
    border-radius:8px;
    background:var(--primary);
    color:#fff;
    font-size:16px;
    font-weight:600;
    transition:.25s;
}

.btn-login:hover{
    background:var(--primary-dark);
    color:#fff;
    box-shadow:0 12px 24px rgba(38,71,148,.28);
}

.btn-none {
    border:none !important;
    font-size: 13px;
    font-weight: 500;
}

.btn-none:active {
    color:#DD0000 !important;
}

.login-footer{
    margin-top:35px;
    text-align:center;
    color:#7a8393;
    font-size:15px;
}

.login-footer a{
    color:var(--primary);
    text-decoration:none;
    margin-left:4px;
}

.login-footer a:hover{
    text-decoration:underline;
}

.copyright{
    margin-top:45px;
    text-align:center;
    color:#a0a8b6;
    font-size:13px;
}

.alert{
    border-radius:12px;
    margin-bottom:25px;
}

@media(max-width:991px){

    body{
        overflow:auto;
    }

    .login-shell{
        min-height:100dvh !important;
        padding:22px 16px;
    }

    .login-card{
        width:80%;
        max-width: 500px;
        min-height:auto;
        border-radius:10px;
        margin:0;
    }

    .right-panel{
        height:auto;
        padding:40px 30px;
    }

    .login-header{
        text-align:center;
    }

    .login-header h3{
        font-size:28px;
    }

}

@media(max-width:767px){

    body{
        overflow:auto;
    }

    .bg-overlay{
        backdrop-filter:blur(2px);
        background:rgba(255,255,255,.45);
    }

    .login-shell{
        padding:22px 16px;
    }

    .login-card{
        width:90%;
        max-width:500px;
        min-height:auto;
    }

    .login-card .row{
        height:auto !important;
    }

    .login-card .row > [class*="col-"]{
        flex:0 0 100%;
        max-width:100%;
        width:100%;
    }

    .left-panel{
        height:auto;
        padding:32px 40px;
        justify-content:flex-start;
    }

    .brand{
        max-width:100%;
        width:100%;
    }

    .brand-title{
        width:auto;
    }

    .brand-title img{
        width:190px !important;
    }

    .text-dark-custom{
        font-size:19px;
        padding-top:6px !important;
    }

    .brand-subtitle{
        font-size:13px;
        line-height:1.7;
    }

    .login-header{
        text-align:left;
    }

}

@media(max-width:576px){

    .login-shell{
        padding:18px 14px;
    }

    .login-card{
        width:100%;
    }

    .left-panel{
        padding:28px 26px;
    }

    .brand-title img{
        width:165px !important;
    }

    .text-dark-custom{
        font-size:17px;
    }

    .right-panel{
        padding:30px 20px;
    }

    .login-header h3{
        font-size:24px;
    }

    .btn-login{
        height:52px;
    }

}

/* ===================================================
   TABLET - PORTRAIT / STACKED (768px - 991px)
   Left panel jadi banner navy ringkas di atas,
   form login di bawahnya. Lebih lega dari versi mobile.
   =================================================== */
@media(min-width:768px) and (max-width:991px),
       (min-width:768px) and (orientation:portrait){

    .login-card{
        width:90%;
        max-width:680px;
        margin:0;
    }

    .login-card .row{
        height:auto !important;
    }

    .login-card .row > [class*="col-"]{
        flex:0 0 100%;
        max-width:100%;
        width:100%;
    }

    .left-panel{
        height:auto;
        padding:42px 50px;
    }

    .brand{
        max-width:100%;
    }

    .brand-title{
        width:auto;
    }

    .brand-title img{
        width:220px !important;
    }

    .text-primary-custom{
        font-size:36px;
    }

    .text-dark-custom{
        font-size:22px;
    }

    .brand-subtitle{
        font-size:15px;
        line-height:1.7;
    }

    .right-panel{
        height:auto;
        padding:42px 50px;
    }

    .login-header{
        text-align:left;
    }

}

/* ===================================================
   TABLET - LANDSCAPE (992px - 1199px)
   Tetap dua kolom seperti desktop, tapi proporsi
   spacing & ukuran teks dikecilkan biar pas di lebar
   layar tablet landscape (iPad, Android tablet, dst).
   =================================================== */
@media(min-width:992px) and (max-width:1199px) and (orientation:landscape){

    .login-card{
        width:900px;
    }

    .left-panel{
        padding:50px;
    }

    .text-primary-custom{
        font-size:46px;
    }

    .text-dark-custom{
        font-size:26px;
    }

    .brand-subtitle{
        font-size:16px;
        line-height:1.8;
    }

    .right-panel{
        padding:45px;
    }

    .login-header h3{
        font-size:27px;
    }

}