/* =========================================================
   AKAR — LOGIN ELEGAN & PROPORSIONAL v2
   Scope khusus body.login-page.login-crafted.
   Tidak memengaruhi halaman aplikasi lainnya.
   ========================================================= */

body.login-page.login-crafted{
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    display:flex;
    flex-direction:column;
    background:#f5f5f3;
}

/* =========================================================
   MAIN LAYOUT — DESKTOP
   ========================================================= */

.login-page.login-crafted .login-auth-shell{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(420px,40%) minmax(0,60%);
}

/* =========================================================
   IDENTITY PANEL
   ========================================================= */

.login-page.login-crafted .login-identity{
    position:relative;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:44px 40px;
    overflow:hidden;
    background:#171b4c;
    color:#fff;
    border-top:4px solid #d4ae2f;
    text-align:center;
}

.login-page.login-crafted .login-brand-center{
    width:100%;
    max-width:500px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.login-page.login-crafted .login-identity-logo{
    width:148px;
    height:148px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:11px;
    overflow:hidden;
    background:linear-gradient(145deg,#fff 0%,#faf9f3 100%);
    border:1px solid rgba(212,174,47,.75);
    border-radius:20px;
    box-shadow:0 18px 40px rgba(5,10,40,.24),0 0 0 4px rgba(255,255,255,.045);
}

.login-page.login-crafted .login-identity-logo img{
    position:static !important;
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    margin:0 !important;
    object-fit:contain !important;
    transform:none !important;
}

.login-page.login-crafted .login-brand-school{
    margin-top:25px;
    font-size:clamp(1.15rem,1.4vw,1.34rem);
    line-height:1.25;
    font-weight:720;
    letter-spacing:-.015em;
}

.login-page.login-crafted .login-brand-name{
    margin:13px 0 7px;
    font-size:clamp(3rem,3.25vw,3.75rem);
    line-height:.96;
    font-weight:800;
    letter-spacing:-.045em;
}

.login-page.login-crafted .login-brand-full{
    max-width:460px;
    color:#e1e3ed;
    font-size:.92rem;
    line-height:1.45;
    font-weight:500;
}

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

.login-page.login-crafted .login-form-panel{
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:44px 7vw;
    background:#f8f8f6;
}

.login-page.login-crafted .login-form-wrap{
    width:min(100%,430px);
}

.login-page.login-crafted .login-form-heading{
    margin-bottom:28px;
    text-align:center;
}

.login-page.login-crafted .login-form-heading h2{
    margin:0;
    color:var(--navy-950);
    font-size:1.72rem;
    line-height:1.2;
    font-weight:750;
    letter-spacing:-.025em;
}

.login-page.login-crafted .login-form-heading::after{
    content:"";
    display:block;
    width:40px;
    height:2px;
    margin:12px auto 0;
    background:#d4ae2f;
    border-radius:999px;
}

.login-page.login-crafted .login-crafted-form{
    padding:0;
}

/* Label tetap tersedia bagi screen reader, tetapi tidak tampil visual.
   Mendukung class versi lama (.form-label) maupun baru (.login-sr-only). */
.login-page.login-crafted .login-crafted-form .form-label,
.login-page.login-crafted .login-crafted-form .login-sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    border:0 !important;
}

.login-page.login-crafted .login-crafted-form .form-group{
    position:relative;
    margin-bottom:13px;
}

.login-page.login-crafted .login-crafted-form .input{
    min-height:52px;
    background:#fff;
    font-size:.94rem;
}

.login-page.login-crafted .login-crafted-form .btn{
    min-height:52px;
    margin-top:5px;
    font-size:.9rem;
    font-weight:700;
}

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

body.login-page.login-crafted .login-simple-footer{
    flex:none;
    min-height:76px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:9px 24px 10px;
    background:#fff;
    border-top:1px solid var(--line);
    color:#657087;
    font-size:.80rem;
    line-height:1.4;
    text-align:center;
}

body.login-page.login-crafted .login-credit{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:center;
    gap:5px;
    color:#657087;
    font-size:inherit;
    line-height:inherit;
}

/* Mendukung class kredit versi baru dan lama. Ukuran selalu sama dengan footer. */
body.login-page.login-crafted .login-credit-brand,
body.login-page.login-crafted .pujangga-wordmark{
    color:#c69d23;
    font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive;
    font-size:inherit;
    line-height:inherit;
    font-weight:600;
    letter-spacing:0;
    white-space:nowrap;
    text-shadow:none;
}

/* Jika login.php lama masih memakai image wordmark, jangan tampilkan image besar. */
body.login-page.login-crafted .login-credit img{
    width:auto;
    height:1em;
    max-width:9.5em;
    object-fit:contain;
    vertical-align:middle;
}

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

@media(max-width:899px){
    body.login-page.login-crafted{
        min-height:100dvh;
    }

    .login-page.login-crafted .login-auth-shell{
        flex:1 1 auto;
        min-height:0;
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(0,1fr);
    }

    .login-page.login-crafted .login-identity{
        min-height:auto;
        padding:19px 18px 19px;
        border-top-width:4px;
    }

    .login-page.login-crafted .login-brand-center{
        max-width:420px;
    }

    /* Logo HP dibuat lebih kuat dan dominan */
    .login-page.login-crafted .login-identity-logo{
        width:136px;
        height:136px;
        padding:9px;
        border-radius:18px;
        box-shadow:0 12px 28px rgba(5,10,40,.22),0 0 0 3px rgba(255,255,255,.04);
    }

    .login-page.login-crafted .login-brand-school{
        margin-top:13px;
        font-size:1.06rem;
        line-height:1.22;
        font-weight:700;
    }

    .login-page.login-crafted .login-brand-name{
        margin:8px 0 4px;
        font-size:2.35rem;
        line-height:.98;
    }

    .login-page.login-crafted .login-brand-full{
        max-width:370px;
        font-size:.82rem;
        line-height:1.35;
    }

    .login-page.login-crafted .login-form-panel{
        min-height:0;
        display:flex;
        align-items:center;
        padding:20px 18px 22px;
    }

    .login-page.login-crafted .login-form-wrap{
        width:min(100%,420px);
        margin:auto;
    }

    .login-page.login-crafted .login-form-heading{
        margin-bottom:18px;
    }

    .login-page.login-crafted .login-form-heading h2{
        font-size:1.42rem;
    }

    .login-page.login-crafted .login-form-heading::after{
        width:36px;
        margin-top:9px;
    }

    .login-page.login-crafted .login-crafted-form .form-group{
        margin-bottom:11px;
    }

    .login-page.login-crafted .login-crafted-form .input{
        min-height:50px;
        font-size:.94rem;
    }

    .login-page.login-crafted .login-crafted-form .btn{
        min-height:50px;
        font-size:.92rem;
    }

    body.login-page.login-crafted .login-simple-footer{
        min-height:72px;
        gap:4px;
        padding:9px 14px 10px;
        font-size:.82rem;
        line-height:1.35;
    }
}

/* =========================================================
   HP UMUM <= 430px
   ========================================================= */

@media(max-width:430px){
    .login-page.login-crafted .login-identity{
        padding:17px 14px 16px;
    }

    .login-page.login-crafted .login-identity-logo{
        width:128px;
        height:128px;
        padding:8px;
        border-radius:17px;
    }

    .login-page.login-crafted .login-brand-school{
        margin-top:12px;
        font-size:1.02rem;
    }

    .login-page.login-crafted .login-brand-name{
        margin:7px 0 3px;
        font-size:2.24rem;
    }

    .login-page.login-crafted .login-brand-full{
        max-width:340px;
        font-size:.79rem;
    }

    .login-page.login-crafted .login-form-panel{
        padding:18px 14px 19px;
    }

    .login-page.login-crafted .login-form-heading{
        margin-bottom:16px;
    }

    .login-page.login-crafted .login-form-heading h2{
        font-size:1.36rem;
    }

    .login-page.login-crafted .login-crafted-form .input{
        min-height:48px;
        font-size:.92rem;
    }

    .login-page.login-crafted .login-crafted-form .btn{
        min-height:48px;
        font-size:.9rem;
    }

    body.login-page.login-crafted .login-simple-footer{
        min-height:70px;
        padding:8px 12px 9px;
        font-size:.80rem;
    }
}

/* =========================================================
   HP SANGAT KECIL
   ========================================================= */

@media(max-width:360px){
    .login-page.login-crafted .login-identity-logo{
        width:118px;
        height:118px;
    }

    .login-page.login-crafted .login-brand-school{
        font-size:.96rem;
    }

    .login-page.login-crafted .login-brand-name{
        font-size:2.08rem;
    }

    .login-page.login-crafted .login-brand-full{
        font-size:.75rem;
    }

    body.login-page.login-crafted .login-simple-footer{
        font-size:.76rem;
    }
}

/* =========================================================
   HP DENGAN LAYAR PENDEK
   Logo tetap cukup besar, elemen lain yang dipadatkan.
   ========================================================= */

@media(max-width:899px) and (max-height:700px){
    .login-page.login-crafted .login-identity{
        padding-top:10px;
        padding-bottom:10px;
    }

    .login-page.login-crafted .login-identity-logo{
        width:110px;
        height:110px;
        padding:7px;
        border-radius:15px;
    }

    .login-page.login-crafted .login-brand-school{
        margin-top:7px;
        font-size:.92rem;
    }

    .login-page.login-crafted .login-brand-name{
        margin:4px 0 2px;
        font-size:1.92rem;
    }

    .login-page.login-crafted .login-brand-full{
        font-size:.72rem;
    }

    .login-page.login-crafted .login-form-panel{
        padding-top:10px;
        padding-bottom:12px;
    }

    .login-page.login-crafted .login-form-heading{
        margin-bottom:11px;
    }

    .login-page.login-crafted .login-form-heading h2{
        font-size:1.22rem;
    }

    .login-page.login-crafted .login-crafted-form .input,
    .login-page.login-crafted .login-crafted-form .btn{
        min-height:46px;
    }

    body.login-page.login-crafted .login-simple-footer{
        min-height:62px;
        padding-top:6px;
        padding-bottom:7px;
        font-size:.75rem;
    }
}

/* Pada layar HP normal, kunci komposisi ke viewport.
   Ketika keyboard muncul tinggi viewport mengecil dan aturan ini otomatis tidak aktif. */
@media(max-width:899px) and (min-height:720px){
    body.login-page.login-crafted{
        height:100dvh;
        overflow:hidden;
    }
}