.hero {
    padding: 3.5rem 1rem;
}

.site-title {
    font-weight: 700;
    letter-spacing: .6px;
    text-shadow:
        0 0 4px #ffffff,
        0 0 8px #ffffff,
        0 0 12px rgba(255, 255, 255, 0.9),
        0 0 18px rgba(255, 255, 255, 0.7);
}

.subtitle {
    color: #ffffff
}

.btn-app {
    min-width: 200px;
    width: 100%;
}

.social-list a {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.decor-blob {
    position: absolute;
    opacity: .08;
    filter: blur(24px);
    pointer-events: none;
}

/* ================================
   DESKTOP – ukuran normal (90px)
================================ */
.character {
    position: fixed;
    width: 90px;
    bottom: 40px;
    z-index: 2;
    animation: bounce 3s infinite alternate ease-in-out;
}

/* Posisi desktop */
#guru1 {
    right: 120px;
}

#guru2 {
    right: 20px;
}

#siswa1 {
    left: 20px;
}

#siswa2 {
    left: 120px;
}

/* Animasi */
@keyframes bounce {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-15px, -25px);
    }

    50% {
        transform: translate(10px, -60px);
    }

    75% {
        transform: translate(-20px, -15px);
    }

    100% {
        transform: translate(0, -50px);
    }
}

/* ==========================================
   MOBILE (max-width: 768px)
   Kecil – turun – tidak menutupi konten
========================================== */
@media (max-width: 768px) {
    .character {
        position: absolute;
        /* tidak menutupi konten */
        width: 18px;
        /* super kecil */
        bottom: -20px;
        /* benar-benar ke bawah */
        opacity: .7;
        z-index: 0;
    }

    #guru1 {
        right: 5px;
    }

    #guru2 {
        right: 30px;
    }

    #siswa1 {
        left: 5px;
    }

    #siswa2 {
        left: 30px;
    }
}

/* ==========================================
   HP KECIL (max-width: 480px)
   Ekstrem mini 10px!
========================================== */
@media (max-width: 480px) {
    .character {
        width: 10px;
        /* ukuran ekstrem */
        bottom: -28px;
        /* makin ke bawah */
        opacity: .6;
    }

    #guru1 {
        right: 3px;
    }

    #guru2 {
        right: 18px;
    }

    #siswa1 {
        left: 3px;
    }

    #siswa2 {
        left: 18px;
    }
}

/* ==========================================
   Jika tinggi layar pendek => sembunyikan
========================================== */
@media (max-height: 600px) {
    .character {
        display: none;
    }
}

.character {
    position: fixed;
    width: 90px;
    z-index: 9999;
    animation: bounce 3s infinite alternate ease-in-out;
}

/* Posisi Guru (kanan) — berpasangan horizontal */
#guru1 {
    bottom: 40px;
    right: 120px;
}

#guru2 {
    bottom: 40px;
    right: 20px;
}

/* Posisi Siswa (kiri) — berpasangan horizontal */
#siswa1 {
    bottom: 40px;
    left: 20px;
}

#siswa2 {
    bottom: 40px;
    left: 120px;
}

@keyframes bounce {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-15px, -25px);
    }

    50% {
        transform: translate(10px, -60px);
    }

    75% {
        transform: translate(-20px, -15px);
    }

    100% {
        transform: translate(0, -50px);
    }
}