/* ====================================================== */
    /* TENTANG - HERO AUTO SLIDER 3 FOTO */
    /* 4 DETIK PER FOTO */
    /* ====================================================== */

    .hero-visual[data-about-slider] {
        position: relative;
        isolation: isolate;
    }

    .about-hero-slider {
        position: relative;
        width: 100%;
        height: 460px;
        overflow: hidden;

        background:
            linear-gradient(
                135deg,
                var(--brand-100),
                var(--brand-50)
            );
    }

    .hero-visual[data-about-slider] .about-hero-slide {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        opacity: 0;
        visibility: hidden;

        transform:
            translate3d(
                0,
                var(--about-image-y, 0px),
                0
            )
            scale(1.045);

        transition:
            opacity .9s cubic-bezier(.16,1,.3,1),
            visibility .9s linear,
            transform 4.6s cubic-bezier(.16,1,.3,1);

        will-change:
            opacity,
            transform;

        backface-visibility:
            hidden;
    }

    .hero-visual[data-about-slider] .about-hero-slide.active {
        opacity: 1;
        visibility: visible;

        transform:
            translate3d(
                0,
                var(--about-image-y, 0px),
                0
            )
            scale(1.015);

        z-index: 2;
    }

    .hero-visual[data-about-slider] .hero-visual-overlay {
        z-index: 4;
    }

    .hero-visual[data-about-slider] .hero-visual-caption {
        z-index: 5;
    }

    .about-slider-indicator {
        position: absolute;
        top: 22px;
        right: 24px;
        z-index: 6;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 8px 10px;

        border: 1px solid rgba(255,255,255,.26);
        border-radius: 999px;

        background: rgba(7,24,39,.22);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        box-shadow:
            0 8px 24px rgba(15,23,42,.08);
    }

    .about-slider-dot {
        width: 6px;
        height: 6px;

        border-radius: 999px;

        background:
            rgba(255,255,255,.52);

        transition:
            width .35s cubic-bezier(.16,1,.3,1),
            background .35s ease,
            opacity .35s ease;
    }

    .about-slider-dot.active {
        width: 20px;
        background: #ffffff;
        opacity: 1;
    }

    @media (max-width: 767px) {

        .about-hero-slider {
            height: 330px;
        }

        .about-slider-indicator {
            top: 15px;
            right: 16px;
            gap: 5px;
            padding: 7px 8px;
        }

        .about-slider-dot {
            width: 5px;
            height: 5px;
        }

        .about-slider-dot.active {
            width: 16px;
        }

    }

    @media (prefers-reduced-motion: reduce) {

        .hero-visual[data-about-slider] .about-hero-slide,
        .hero-visual[data-about-slider] .about-hero-slide.active {
            transform:
                translate3d(
                    0,
                    var(--about-image-y, 0px),
                    0
                )
                scale(1.015);

            transition:
                opacity .55s ease,
                visibility .55s linear;
        }

    }