/* Splide Hero Slider Custom */
#heroSlider {
    margin-top: 16px;
    margin-bottom: 8px;
    width: 100vw;
    margin-left: -30px;
}

#heroSlider .splide__slide > a > div {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
}

#heroSlider a {
    text-decoration: none;
    color: inherit;
}

#heroSlider h2,
#heroSlider p {
    color: #fff !important;
}

/* Slide kiri & kanan lebih kecil, slide tengah lebih besar */
#heroSlider .splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transform: scale(0.85);
    opacity: 0.25;
    transition: transform 0.5s, opacity 0.5s;
}

#heroSlider .splide__slide.is-prev img,
#heroSlider .splide__slide.is-next img {
    transform: scale(0.8);
    opacity: 0.25;
}

#heroSlider .splide__slide.is-active img {
    transform: scale(1);
    opacity: 1;
}

#heroSlider .splide__pagination {
    bottom: 20px;
}

#heroSlider .splide__pagination__page {
    background: rgba(255,255,255,0.5);
}

#heroSlider .splide__pagination__page.is-active {
    background: #fff;
}

/* Pastikan peek effect terlihat di mobile/tablet */
@media (max-width: 768px) {
    #heroSlider .splide__track {
        padding-left: 15%;
        padding-right: 15%;
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    #heroSlider .splide__track {
        padding-left: 10%;
        padding-right: 10%;
    }
}