/* =====================================
   RESET & BASE
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",Arial,sans-serif;
}

body{
    min-height:100vh;
    min-height:100dvh; /* fix viewport mobile (address bar) */
    background:#edf6ff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 15px;
}

.pageWrapper{
    width:100%;
    max-width:520px;
}

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

.loginCard{
    background:#ffffff;
    border-radius:28px;
    padding:clamp(20px,5vw,45px) clamp(18px,4vw,40px);
    box-shadow:0 20px 45px rgba(21,101,192,.15);
    border:1px solid #e3f0fc;
    text-align:center;
}

/* =====================================
   LOGO & TITLE
===================================== */

.logo{
    font-size:clamp(38px,10vw,56px);
    margin-bottom:10px;
}

.loginCard h1{
    color:#1565C0;
    font-size:clamp(22px,5.5vw,30px);
    font-weight:800;
    letter-spacing:.5px;
    margin-bottom:12px;
    line-height:1.2;
}

.subtitle{
    color:#666;
    font-size:clamp(13px,3.2vw,16px);
    line-height:1.6;
    margin-bottom:clamp(20px,4vw,32px);
}

/* =====================================
   FORM & INPUT
===================================== */

#formSiswa{
    display:flex;
    flex-direction:column;
    gap:clamp(14px,3vw,20px);
}

.inputBox{
    display:flex;
    flex-direction:column;
    gap:8px;
    text-align:left;
}

.inputBox label{
    color:#1565C0;
    font-size:clamp(13px,3vw,15px);
    font-weight:700;
}

.inputBox input,
.inputBox select{
    width:100%;
    padding:14px 16px;
    border:2px solid #d6e7f7;
    border-radius:14px;
    font-size:16px; /* wajib >=16px agar tidak auto-zoom di iOS Safari — jangan diturunkan lagi di media query */
    outline:none;
    background:#fafcff;
    transition:.25s;
    font-family:inherit;
    color:#333;
    -webkit-appearance:none; /* select tetap konsisten tampil di iOS/Android */
    appearance:none;
}

.inputBox input:focus,
.inputBox select:focus{
    border-color:#1E88E5;
    background:white;
    box-shadow:0 0 0 5px rgba(30,136,229,.15);
}

.inputBox select{
    cursor:pointer;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%231565C0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:right 16px center;
    padding-right:38px;
}

/* =====================================
   BUTTON: MULAI BERMAIN
===================================== */

.playButton{
    position:relative;
    overflow:hidden;
    margin-top:8px;
    width:100%;
    border:none;
    border-radius:18px;
    padding:16px;
    cursor:pointer;
    background:linear-gradient(135deg,#42A5F5,#1565C0);
    background-size:200% auto;
    color:white;
    font-size:clamp(16px,4vw,19px);
    font-weight:700;
    letter-spacing:.5px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    transition:.35s;
    box-shadow:0 12px 25px rgba(21,101,192,.35);
}

.playButton:hover{
    background-position:right center;
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(21,101,192,.45);
}

.playButton:active{
    transform:scale(.97);
}

.playButton:disabled{
    opacity:.75;
    cursor:not-allowed;
    transform:none;
}

.playButton .rocket{
    display:inline-block;
    transition:.35s;
}

.playButton:hover .rocket{
    transform:translateY(-3px) rotate(-8deg);
}

.playButton .arrow{
    transition:.3s;
    flex-shrink:0;
}

.playButton:hover .arrow{
    transform:translateX(8px);
}

/* efek kilau saat hover */
.playButton::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%
    );
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.playButton:hover::after{
    left:130%;
}

/* =====================================
   BUTTON: KEMBALI
===================================== */

.backButton{
    width:100%;
    margin-top:4px;
    border:2px solid #d6e7f7;
    border-radius:16px;
    padding:14px;
    cursor:pointer;
    background:#fafcff;
    color:#1565C0;
    font-size:clamp(14px,3.5vw,16px);
    font-weight:700;
    transition:.25s;
}

.backButton:hover{
    background:#e3f0fc;
    border-color:#90caf9;
    transform:translateY(-2px);
}

.backButton:active{
    transform:scale(.98);
}

/* =====================================
   RESPONSIVE — TABLET & KEBAWAH
===================================== */

@media(max-width:600px){

    .loginCard{
        border-radius:22px;
    }

    /* CATATAN: font-size input/select TIDAK diturunkan di sini (tetap 16px)
       supaya tidak memicu auto-zoom saat siswa mengetik/memilih di HP */
}

/* =====================================
   RESPONSIVE — HP KECIL (<=380px)
===================================== */

@media(max-width:380px){

    body{
        padding:10px;
    }

    .loginCard{
        border-radius:18px;
        box-shadow:0 10px 25px rgba(21,101,192,.12);
    }
}

/* =====================================
   RESPONSIVE — LANDSCAPE HP (layar pendek)
===================================== */

@media(max-height:500px) and (orientation:landscape){

    body{
        align-items:center;
        padding:12px;
    }

    .loginCard{
        padding:20px;
    }

    .logo{
        font-size:32px;
        margin-bottom:4px;
    }

    .subtitle{
        margin-bottom:14px;
    }
}