/* =========================================================
   CSS hasil ekstraksi dari blok <style> #17
   Nama file: 17-carousel-slide.css
   ========================================================= */

/* ----- Reset & Container ----- */
                    .custom-carousel {
                        position: relative;
                        width: 100%;
                        margin: 0 auto;
                        padding: 20px 0;
                        overflow: hidden;
                        background: #fff;
                        border: 1px solid #ddd;
                        border-radius: 8px;
                    }

                    .custom-carousel .carousel-header {
                        padding: 0 20px 15px 20px;
                        font-size: 1.5rem;
                        font-weight: bold;
                    }

                    /* ----- Track & Slides ----- */
                    .carousel-track-container {
                        overflow: hidden;
                        position: relative;
                        padding: 0 20px;
                    }

                    .carousel-track {
                        display: flex;
                        transition: transform 0.5s ease-in-out;
                        gap: 20px;
                        /* jarak antar slide */
                        will-change: transform;
                    }

                    .carousel-slide {
                        flex: 0 0 calc(25% - 15px);
                        /* 4 slide per tampilan, sesuaikan */
                        min-width: 0;
                        background: #f9f9f9;
                        border-radius: 8px;
                        padding: 15px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                        text-align: center;
                    }

                    .carousel-slide img {
                        width: 100%;
                        height: auto;
                        aspect-ratio: 1/1;
                        object-fit: cover;
                        border-radius: 4px;
                    }

                    .carousel-slide .product-name {
                        font-weight: 600;
                        margin: 10px 0 5px;
                        font-size: 1rem;
                    }

                    .carousel-slide .product-price {
                        color: #b12704;
                        font-weight: bold;
                        font-size: 1.1rem;
                    }

                    .carousel-slide .product-sku {
                        color: #666;
                        font-size: 0.8rem;
                    }

                    /* ----- Tombol Navigasi ----- */
                    .carousel-btn {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        background: rgba(0, 0, 0, 0.5);
                        color: #fff;
                        border: none;
                        border-radius: 50%;
                        width: 40px;
                        height: 40px;
                        font-size: 24px;
                        cursor: pointer;
                        z-index: 10;
                        transition: background 0.2s;
                    }

                    .carousel-btn:hover {
                        background: rgba(0, 0, 0, 0.8);
                    }

                    .carousel-btn.prev {
                        left: 5px;
                    }

                    .carousel-btn.next {
                        right: 5px;
                    }

                    /* ----- Dots ----- */
                    .carousel-dots {
                        display: flex;
                        justify-content: center;
                        gap: 10px;
                        padding: 15px 0 5px;
                    }

                    .carousel-dot {
                        width: 12px;
                        height: 12px;
                        border-radius: 50%;
                        background: #ccc;
                        border: none;
                        cursor: pointer;
                        transition: background 0.3s;
                    }

                    .carousel-dot.active {
                        background: #333;
                    }

                    /* ----- Responsif (ubah jumlah slide tampil) ----- */
                    @media (max-width: 992px) {
                        .carousel-slide {
                            flex: 0 0 calc(33.33% - 14px);
                        }

                        /* 3 slide */
                    }

                    @media (max-width: 768px) {
                        .carousel-slide {
                            flex: 0 0 calc(50% - 10px);
                        }

                        /* 2 slide */
                    }

                    @media (max-width: 480px) {
                        .carousel-slide {
                            flex: 0 0 calc(100% - 0px);
                        }

                        /* 1 slide */
                    }