/* ==========================================================
   UNIVERSAL SLIDER
========================================================== */

[data-slider] {
    position: relative;
}


/* ==========================================================
   GAMBAR
========================================================== */

[data-slider-display] {

    display: block;

    width: 100%;

    height: auto;

    opacity: 1;

    transition: opacity 0.4s ease;

}


/* ==========================================================
   SLIDER LINK
========================================================== */

[data-slider-link] {

    display: block;

    text-decoration: none;

}


/* ==========================================================
   SLIDER DOTS
   Overlay di kiri bawah gambar
========================================================== */

.slider-dots {

    position: absolute;

    left: 16px;
    bottom: 16px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 7px;

}


/* ==========================================================
   DOT
   Kecil + putih
========================================================== */

.slider-dot {

    width: 8px;
    height: 8px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.3);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease;

}


/* ==========================================================
   ACTIVE DOT
   Hijau
========================================================== */

.slider-dot.active {

    width: 24px;
    height: 8px;

    border-radius: 10px;

    background-color: #198754;

}


/* ==========================================================
   HOVER
========================================================== */

@media (hover: hover) {

    .slider-dot:hover {

        transform: scale(1.15);

    }

}


/* ==========================================================
   FOCUS KEYBOARD
========================================================== */

.slider-dot:focus-visible {

    outline: 2px solid #198754;

    outline-offset: 3px;

}
/* ==========================================================
   HIGHLIGHT ARROW
========================================================== */

.highlight-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 44px;
    height: 44px;

    border: none;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.45);

    color: #fff;

    font-size: 28px;

    line-height: 1;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 20;

    transition:
        background 0.2s ease,
        transform 0.2s ease;

}


.highlight-arrow:hover {

    background: rgba(0, 0, 0, 0.7);

    transform:
        translateY(-50%)
        scale(1.08);

}


.highlight-arrow-prev {

    left: 20px;

}


.highlight-arrow-next {

    right: 20px;

}


/* ==========================================================
   HIGHLIGHT ARROW DI HP OFF
========================================================== */

@media (max-width: 767px) {

    .highlight-arrow {

        display: none;

    }

}

.highlight-section .container {

    position: relative;

}