/**
 * slider.css - Khusus untuk Hero Slider component
 * SURGAFILM21
 */

/* ========== HERO SLIDER ========== */
.heroSlider {
    height: 55vh;
    min-height: 450px;
}

@media (min-width: 768px) {
    .heroSlider {
        height: 65vh;
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    .heroSlider {
        height: 75vh;
        min-height: 550px;
    }
}

.heroSlider .swiper-slide {
    background: #0b0c0f;
}

/* ========== HIDE DEFAULT SWIPER ICONS ========== */
.heroSlider .swiper-button-next::after,
.heroSlider .swiper-button-prev::after {
    display: none;
}

/* ========== NAVIGATION BUTTONS ========== */
.heroSlider .swiper-button-next,
.heroSlider .swiper-button-prev {
    transition: all 0.3s ease;
    opacity: 0.6;
}

.heroSlider:hover .swiper-button-next,
.heroSlider:hover .swiper-button-prev {
    opacity: 1;
}

.heroSlider .swiper-button-next:hover,
.heroSlider .swiper-button-prev:hover {
    background: #00ff7f !important;
}

.heroSlider .swiper-button-next:hover svg,
.heroSlider .swiper-button-prev:hover svg {
    color: black !important;
}

/* ========== PAGINATION BULLETS ========== */
.heroSlider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    width: 8px;
    height: 8px;
    opacity: 1;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .heroSlider .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }
}

.heroSlider .swiper-pagination-bullet-active {
    background: #00ff7f !important;
    width: 20px !important;
    border-radius: 10px !important;
}

@media (min-width: 768px) {
    .heroSlider .swiper-pagination-bullet-active {
        width: 24px !important;
        border-radius: 12px !important;
    }
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .heroSlider .swiper-button-next,
    .heroSlider .swiper-button-prev {
        display: none !important;
    }
    
    .heroSlider .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ========== LINE CLAMP ========== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}