/* ===============================
   BACKGROUND RAMADHAN
===============================*/
body{
    margin:0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    min-height:100vh;

    /* gradasi malam ramadhan */
    background: linear-gradient(180deg,#0f2027,#203a43,#2c5364);
    
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===============================
   CARD LOGIN
===============================*/
.glass-card{
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(12px);
    border-radius:20px;
    padding:35px 30px;
    box-shadow:0 0 30px rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.15);
    color:white;
}

/* ===============================
   LOGO
===============================*/
.logo-sekolah{
    width:90px;
    display:block;
    margin:0 auto 15px auto;
}

/* ===============================
   TEXT
===============================*/
h2{
    margin-top:10px;
    margin-bottom:5px;
    font-weight:600;
    letter-spacing:1px;
}

p{
    opacity:0.85;
    font-size:14px;
}

/* ===============================
   FORM
===============================*/
form{
    margin-top:15px;
}

label{
    font-size:14px;
    display:block;
    margin-bottom:6px;
    margin-top:14px;
    opacity:0.9;
}

/* INPUT */
.input{
    width:100%;
    padding:11px;
    border-radius:10px;
    border:none;
    outline:none;
    font-size:15px;
    box-sizing:border-box;
}

/* SELECT */
select.input{
    appearance:none;
}

/* ===============================
   BUTTON GOLD RAMADHAN
===============================*/
.btn-gold{
    width:100%;
    padding:12px;
    margin-top:22px;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:0.3s;

    background: linear-gradient(45deg,#d4af37,#f6e27a,#d4af37);
    color:#333;
}

.btn-gold:hover{
    transform:scale(1.03);
    box-shadow:0 0 15px rgba(255,215,0,0.6);
}

/* ===============================
   ERROR MESSAGE
===============================*/
.error{
    color:#ffb3b3;
    text-align:center;
    margin-bottom:10px;
}

/* ===============================
   MOBILE RESPONSIVE
===============================*/
@media(max-width:480px){
    .glass-card{
        width:90% !important;
        padding:28px 22px;
    }

    h2{
        font-size:20px;
    }
}
/* ===============================
   JUDUL SEKOLAH TIMBUL - FIX READABLE
===============================*/
.judul-sekolah{
    text-align:center;
    margin-bottom:22px;
    font-size:22px;
    font-weight:500;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#ffffff;

    /* efek timbul realistis (soft emboss) */
    text-shadow:
        0 1px 0 rgba(0,0,0,0.5),
        0 2px 4px rgba(0,0,0,0.6),
        0 0 12px rgba(255,215,0,0.4);
}


/* ===============================
   LABEL LOGIN LEBIH MENARIK
===============================*/
.label-login{
    font-size:15px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-top:5px;
    display:block;
    margin-bottom:8px;

    color:#ffd86b;
    text-shadow:0 0 6px rgba(255,215,0,0.6);
}