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

body{
    height:100vh;
    overflow:hidden;
}

.splash-screen{
    position:relative;
    width:100%;
    height:100vh;
    background:url('background-sekolah.jpg') center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0, 56, 168, 0.82);
    backdrop-filter: blur(1px);
}

.content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    width:90%;
    max-width:400px;
}

.logo img{
    width:140px;
    margin-bottom:25px;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.3));
}

h1{
    font-size:25px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:5px;
}

h3{
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:10px;
}

p{
    font-size:1rem;
    opacity:0.95;
}

.loading{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-180px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.spinner{
    width:36px;
    height:36px;
    border:4px solid rgba(255,255,255,0.3);
    border-top:4px solid #ffffff;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

.loading span{
    font-size:14px;
    color:#fff;
    opacity:0.9;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Responsive Mobile */
@media(max-width:480px){

    .logo img{
        width:120px;
    }

    h1{
        font-size:1.8rem;
    }

    p{
        font-size:0.95rem;
    }

    .loading{
        bottom:-160px;
    }
}