/* --- Animasi Background Warna Smooth --- */
body {
    min-height: 100vh;
    /* Mengubah gradasi dari pink/ungu menjadi biru, hijau, dan oranye */
    background: linear-gradient(135deg, #4CAF50, #2196F3, #FF9800, #FFEB3B); /* Gradasi hijau, biru, oranye, kuning */
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite alternate;
    overflow-x: hidden; /* Penting: agar shape yang keluar layar tidak menyebabkan scrollbar */
    position: relative; /* Penting untuk posisi absolut shape */
}

@keyframes gradientShift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

/* --- Gaya untuk Graphic Shapes --- */
.animated-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
    filter: blur(10px);
    z-index: -1; /* Pastikan shape di belakang konten utama */
    transform: translate(0, 0); /* Initial transform */
}

/* Ukuran dan Gradasi Warna untuk Setiap Shape */
/* Shape 1: Besar, Gradasi Biru-Hijau (tidak berubah karena sudah sesuai) */
.shape-1 {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #00C9FF, #92FE9D);
    top: 10%;
    left: 5%;
    animation: floatAndFade1 22s infinite ease-in-out alternate, rotateAndScale1 18s infinite ease-in-out;
}

/* Shape 2: Sedang, Gradasi Oranye-Merah (tidak berubah karena sudah sesuai) */
.shape-2 {
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #FF5F6D, #FFC371);
    top: 60%;
    left: 80%;
    animation: floatAndFade2 25s infinite ease-in-out alternate, rotateAndScale2 20s infinite ease-in-out;
}

/* Shape 3: Kecil, Gradasi Ungu-Pink (tidak berubah karena sudah sesuai) */
.shape-3 {
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #cc2b5e, #753a88);
    top: 30%;
    left: 40%;
    animation: floatAndFade3 20s infinite ease-in-out alternate, rotateAndScale3 16s infinite ease-in-out;
}

/* Shape 4: Sedang, Gradasi Kuning-Oranye (tidak berubah karena sudah sesuai) */
.shape-4 {
    width: 170px;
    height: 170px;
    background: linear-gradient(45deg, #FDBB2D, #3A1C71);
    top: 80%;
    left: 20%;
    animation: floatAndFade4 23s infinite ease-in-out alternate, rotateAndScale4 19s infinite ease-in-out;
}

/* Shape 5: Besar, Gradasi Teal-Biru (tidak berubah karena sudah sesuai) */
.shape-5 {
    width: 220px;
    height: 220px;
    background: linear-gradient(45deg, #1DE9B6, #29B6F6);
    top: 5%;
    left: 70%;
    animation: floatAndFade5 26s infinite ease-in-out alternate, rotateAndScale5 21s infinite ease-in-out;
}


/* Keyframes untuk Animasi Pergerakan (Float) */
@keyframes floatAndFade1 {
    0% { transform: translate(0, 0); opacity: 0.6; }
    25% { transform: translate(30px, -40px); opacity: 0.75; }
    50% { transform: translate(-20px, 50px); opacity: 0.5; }
    75% { transform: translate(40px, -20px); opacity: 0.8; }
    100% { transform: translate(0, 0); opacity: 0.6; }
}

@keyframes floatAndFade2 {
    0% { transform: translate(0, 0); opacity: 0.7; }
    20% { transform: translate(-25px, 35px); opacity: 0.6; }
    40% { transform: translate(45px, -15px); opacity: 0.8; }
    60% { transform: translate(-10px, -50px); opacity: 0.55; }
    80% { transform: translate(50px, 20px); opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 0.7; }
}

@keyframes floatAndFade3 {
    0% { transform: translate(0, 0); opacity: 0.5; }
    30% { transform: translate(15px, 25px); opacity: 0.65; }
    60% { transform: translate(-30px, -35px); opacity: 0.7; }
    100% { transform: translate(0, 0); opacity: 0.5; }
}

@keyframes floatAndFade4 {
    0% { transform: translate(0, 0); opacity: 0.65; }
    25% { transform: translate(-40px, 10px); opacity: 0.7; }
    50% { transform: translate(25px, -30px); opacity: 0.58; }
    75% { transform: translate(-15px, 45px); opacity: 0.75; }
    100% { transform: translate(0, 0); opacity: 0.65; }
}

@keyframes floatAndFade5 {
    0% { transform: translate(0, 0); opacity: 0.55; }
    30% { transform: translate(50px, -5px); opacity: 0.7; }
    60% { transform: translate(-20px, 40px); opacity: 0.6; }
    100% { transform: translate(0, 0); opacity: 0.55; }
}


/* Keyframes untuk Animasi Rotasi dan Skala */
@keyframes rotateAndScale1 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(200deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes rotateAndScale2 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-150deg) scale(1.1); }
    100% { transform: rotate(-360deg) scale(1); }
}

@keyframes rotateAndScale3 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(100deg) scale(0.95); } /* Sedikit mengecil */
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes rotateAndScale4 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(250deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes rotateAndScale5 {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(-180deg) scale(1.08); }
    100% { transform: rotate(-360deg) scale(1); }
}


/* --- Media Queries untuk Responsivitas Shapes --- */
/* Untuk tablet dan mobile (lebar layar kurang dari 992px) */
@media (max-width: 991.98px) {
    .animated-shape {
        filter: blur(7px); /* Sedikit kurangi blur */
        opacity: 0.5; /* Sedikit kurangi opasitas */
    }

    /* Mengurangi ukuran shapes di tablet/mobile */
    .shape-1 {
        width: 150px;
        height: 150px;
        top: 8%;
        left: 8%;
    }

    .shape-2 {
        width: 120px;
        height: 120px;
        top: 65%;
        left: 70%;
    }

    .shape-3 {
        width: 80px;
        height: 80px;
        top: 25%;
        left: 45%;
    }

    .shape-4 {
        width: 140px;
        height: 140px;
        top: 75%;
        left: 15%;
    }

    .shape-5 {
        width: 160px;
        height: 160px;
        top: 12%;
        left: 65%;
    }

    /* Mengurangi rentang pergerakan (translate) animasi di tablet/mobile */
    @keyframes floatAndFade1 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(20px, -30px); }
        50% { transform: translate(-15px, 35px); }
        75% { transform: translate(25px, -15px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade2 {
        0% { transform: translate(0, 0); }
        20% { transform: translate(-20px, 25px); }
        40% { transform: translate(30px, -10px); }
        60% { transform: translate(-5px, -40px); }
        80% { transform: translate(35px, 15px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade3 {
        0% { transform: translate(0, 0); }
        30% { transform: translate(10px, 20px); }
        60% { transform: translate(-20px, -25px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade4 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(-30px, 8px); }
        50% { transform: translate(20px, -20px); }
        75% { transform: translate(-10px, 30px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade5 {
        0% { transform: translate(0, 0); }
        30% { transform: translate(35px, -5px); }
        60% { transform: translate(-15px, 30px); }
        100% { transform: translate(0, 0); }
    }
}

/* Untuk layar ponsel yang sangat kecil (lebar layar kurang dari 576px) */
@media (max-width: 575.98px) {
    .animated-shape {
        filter: blur(4px); /* Lebih kecil lagi blur di ponsel */
        opacity: 0.3; /* Lebih transparan */
    }

    /* Mengurangi ukuran shapes di ponsel */
    .shape-1 {
        width: 80px;
        height: 80px;
        top: 15%;
        left: 5%;
    }

    .shape-2 {
        width: 70px;
        height: 70px;
        top: 60%;
        left: 85%;
    }

    .shape-3 {
        width: 50px;
        height: 50px;
        top: 35%;
        left: 55%;
    }

    .shape-4 {
        width: 90px;
        height: 90px;
        top: 70%;
        left: 10%;
    }

    .shape-5 {
        width: 100px;
        height: 100px;
        top: 20%;
        left: 75%;
    }

    /* Mengurangi rentang pergerakan (translate) animasi di ponsel */
    @keyframes floatAndFade1 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(10px, -15px); }
        50% { transform: translate(-8px, 18px); }
        75% { transform: translate(12px, -10px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade2 {
        0% { transform: translate(0, 0); }
        20% { transform: translate(-10px, 15px); }
        40% { transform: translate(18px, -5px); }
        60% { transform: translate(-3px, -20px); }
        80% { transform: translate(20px, 8px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade3 {
        0% { transform: translate(0, 0); }
        30% { transform: translate(8px, 10px); }
        60% { transform: translate(-10px, -12px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade4 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(-15px, 4px); }
        50% { transform: translate(10px, -10px); }
        75% { transform: translate(-5px, 15px); }
        100% { transform: translate(0, 0); }
    }

    @keyframes floatAndFade5 {
        0% { transform: translate(0, 0); }
        30% { transform: translate(18px, -3px); }
        60% { transform: translate(-8px, 15px); }
        100% { transform: translate(0, 0); }
    }

    /* Untuk animasi rotateAndScale, mungkin tidak perlu perubahan drastis,
        tapi jika ingin skala lebih kecil di mobile, bisa ditambahkan di sini. */
    /* Contoh: */
    @keyframes rotateAndScale1 { 0% { transform: rotate(0deg) scale(0.7); } 50% { transform: rotate(180deg) scale(0.8); } 100% { transform: rotate(360deg) scale(0.7); } }
}