.bg-slider {
    height: 640px;
    background-size: cover;
    background-position: 50%;
    display: flex;
    align-items: center;
    /* justify-content: center;
    flex-direction: column; */
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    transition: all 0.3s linear;
    ;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: #0F4BB9;
    background-color: #fff;
}

.wadah-gambar-mpc {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 600px;
    /* margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center; */
    overflow: hidden;
    /* penting agar gambar gak keluar */
}

.mpc1,
.mpc2,
.mpc3,
.mpc4 {
    position: absolute;
    /* top: 50%;
    transform: translateY(-50%); */
    transition: all 0.3s ease-in-out;
}

.mpc1 {
    left: 0;
    top: 120px;
    z-index: 4;
}

.mpc2 {
    left: 50px;
    top: 100px;
    z-index: 3;
}

.mpc3 {
    left: 160px;
    top: 180px;
    z-index: 2;
}

.mpc4 {
    left: 280px;
    top: 190px;
    z-index: 1;
}

.mpc1:hover,
.mpc2:hover,
.mpc3:hover,
.mpc4:hover {
    transform: translateY(-60%) scale(1.05);
    cursor: pointer;
}

.shadow-putih {
    filter: drop-shadow(0 0 3px white);
}

/* =================================================================== */
/* KODE ANIMASI BARU (PERBAIKAN TOTAL)                   */
/* =================================================================== */

/* 1. KONDISI AWAL (SAAT SLIDE TIDAK AKTIF) */
/* Ini adalah keadaan default: semua tersembunyi dan di luar posisi. */

.anim-sub,
.anim-button {
    opacity: 0;
    transform: translateY(10px);
    /* Tambahkan transisi agar saat di-reset, kembalinya mulus */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.anim-heading {
    opacity: 0;
    /* Tetap 0 agar bisa dianimasikan */
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.4s ease, clip-path 0.4s ease;
}

.anim-image {
    opacity: 0;
    transform: translate(-50px, 40px);
    filter: blur(6px);
    transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}


/* 2. KONDISI AKHIR (SAAT SLIDE DIBERI CLASS .is-active) */
/* Ini adalah keadaan setelah animasi selesai. */

/* Teks dan Tombol */
.swiper-slide.is-active .anim-sub,
.swiper-slide.is-active .anim-button {
    opacity: 1;
    transform: translateY(0);
}

/* Heading */
.swiper-slide.is-active .anim-heading {
    opacity: 1;
    clip-path: inset(0 0% 0 0);
}

/* Gambar */
.swiper-slide.is-active .anim-image {
    opacity: 1;
    transform: translate(0, 0);
    filter: blur(0px);
}


/* 3. ATUR JEDA WAKTU (DELAY) MENGGUNAKAN TRANSITION-DELAY */
/* Ini menggantikan animation-delay untuk kontrol yang lebih baik. */

.swiper-slide.is-active .anim-sub {
    transition-delay: 0.2s;
}

.swiper-slide.is-active .anim-heading {
    transition-delay: 0.4s;
}

.swiper-slide.is-active .mpc4 {
    transition-delay: 0.6s;
}

.swiper-slide.is-active .mpc3 {
    transition-delay: 0.8s;
}

.swiper-slide.is-active .mpc2 {
    transition-delay: 1.0s;
}

.swiper-slide.is-active .mpc1 {
    transition-delay: 1.2s;
}

.swiper-slide.is-active .anim-button {
    transition-delay: 1.4s;
}


.anim-image {
    max-height: 600px;
}

.slider1-text {
    margin-top: 50px;
}

.slider2,
.slider3,
.slider4 {
    padding: 20px;
}

.slider2-image,
.slider4-image {
    max-width: 500px;
}

.slider3-image {
    max-width: 400px;
}

@media (max-width: 767px) {

    .slider1-text {
        margin-top: 50px;
    }

    .slider1-image {
        max-width: 350px;
    }

    .slider2,
    .slider3,
    .slider4 {
        padding: 0;
    }

    .slider2-image {
        max-width: 350px;
    }

    .slider3-image {
        max-width: 300px;
    }

    .slider4-image {
        max-width: 350px;
    }
}