/* ============================================================
   ABAH ODE CAROUSEL - FINAL
   CSS-ONLY AUTOPLAY, 4 DETIK PER FOTO
   ============================================================ */

.profile-photo.profile-gallery {
    position: relative !important;

    width: 100% !important;

    height: 520px !important;
    min-height: 520px !important;

    overflow: hidden !important;

    border-radius: 34px !important;

    isolation: isolate !important;

    background:
        #dff2fc !important;
}


/*
    Track berisi:
    foto 1, foto 2, foto 3, clone foto 1.
*/
.profile-gallery-track {
    position: absolute !important;

    inset: 0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform:
        translate3d(
            0,
            0,
            0
        );

    animation:
        abahOdeAutoSlide
        12s
        linear
        infinite !important;

    animation-play-state:
        running !important;

    will-change:
        transform;
}


/*
    Satu slide = satu ukuran frame penuh.
    Tidak ada slide yang boleh turun ke bawah.
*/
.profile-gallery-slide {
    position: relative !important;

    flex:
        0 0 100% !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        block !important;

    overflow:
        hidden !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    transform:
        none !important;
}


.profile-gallery-slide img {
    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        100% !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    transform:
        scale(1.025);

    animation:
        abahOdePhotoBreath
        4s
        ease-in-out
        infinite alternate;
}


/*
    0s - 3.2s     : Foto 1 diam
    3.2s - 4s     : geser ke Foto 2

    4s - 7.2s     : Foto 2 diam
    7.2s - 8s     : geser ke Foto 3

    8s - 11.2s    : Foto 3 diam
    11.2s - 12s   : geser ke clone Foto 1

    Setelah 12s track kembali ke 0.
    Karena posisi terakhir dan awal adalah foto yang sama,
    reset tidak terlihat.
*/
@keyframes abahOdeAutoSlide {

    0%,
    26.666% {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }


    33.333%,
    60% {
        transform:
            translate3d(
                -100%,
                0,
                0
            );
    }


    66.666%,
    93.333% {
        transform:
            translate3d(
                -200%,
                0,
                0
            );
    }


    100% {
        transform:
            translate3d(
                -300%,
                0,
                0
            );
    }

}


@keyframes abahOdePhotoBreath {

    from {
        transform:
            scale(1.015);
    }


    to {
        transform:
            scale(1.06);
    }

}


/* Overlay tidak ikut bergeser */
.profile-gallery-shade {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        5 !important;

    pointer-events:
        none !important;

    background:
        linear-gradient(
            180deg,
            rgba(7,24,39,0)
            28%,
            rgba(7,24,39,.06)
            52%,
            rgba(7,24,39,.74)
            100%
        ) !important;
}


.profile-gallery
.profile-photo-copy {
    position:
        absolute !important;

    left:
        26px !important;

    right:
        26px !important;

    bottom:
        24px !important;

    z-index:
        7 !important;
}


/* Status autoplay */
.profile-gallery-auto-badge {
    position:
        absolute;

    top:
        19px;

    right:
        19px;

    z-index:
        9;

    min-height:
        34px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius:
        999px;

    color:
        rgba(
            255,
            255,
            255,
            .94
        );

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

    backdrop-filter:
        blur(15px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(15px)
        saturate(140%);

    font-size:
        8.5px;

    font-weight:
        800;

    letter-spacing:
        .025em;

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


.profile-gallery-auto-dot {
    width:
        6px;

    height:
        6px;

    flex:
        none;

    border-radius:
        50%;

    background:
        #7dd3fc;

    box-shadow:
        0 0 0 4px
        rgba(
            125,
            211,
            252,
            .12
        );

    animation:
        abahOdeAutoDot
        1.4s
        ease-in-out
        infinite;
}


@keyframes abahOdeAutoDot {

    0%,
    100% {
        opacity:
            .5;

        transform:
            scale(.85);
    }


    50% {
        opacity:
            1;

        transform:
            scale(1.08);
    }

}


/* Progress 3 bagian */
.profile-gallery-progress {
    position:
        absolute;

    top:
        19px;

    left:
        20px;

    z-index:
        9;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        12px 11px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius:
        999px;

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

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.profile-gallery-progress-segment {
    width:
        20px;

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            .28
        );
}


.profile-gallery-progress-segment::after {
    content:
        "";

    display:
        block;

    width:
        100%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        #ffffff;

    transform-origin:
        left center;

    transform:
        scaleX(0);
}


.segment-1::after {
    animation:
        abahProgress1
        12s
        linear
        infinite;
}


.segment-2::after {
    animation:
        abahProgress2
        12s
        linear
        infinite;
}


.segment-3::after {
    animation:
        abahProgress3
        12s
        linear
        infinite;
}


@keyframes abahProgress1 {

    0% {
        transform:
            scaleX(0);
    }

    26.666%,
    100% {
        transform:
            scaleX(1);
    }

}


@keyframes abahProgress2 {

    0%,
    33.333% {
        transform:
            scaleX(0);
    }

    60%,
    100% {
        transform:
            scaleX(1);
    }

}


@keyframes abahProgress3 {

    0%,
    66.666% {
        transform:
            scaleX(0);
    }

    93.333%,
    100% {
        transform:
            scaleX(1);
    }

}


@media (max-width: 767px) {

    .profile-photo.profile-gallery {
        height:
            430px !important;

        min-height:
            430px !important;

        border-radius:
            27px !important;
    }


    .profile-gallery
    .profile-photo-copy {

        left:
            19px !important;

        right:
            19px !important;

        bottom:
            18px !important;
    }


    .profile-gallery-auto-badge {
        top:
            13px;

        right:
            13px;

        min-height:
            30px;

        padding:
            0 10px;

        font-size:
            7.8px;
    }


    .profile-gallery-progress {
        top:
            13px;

        left:
            13px;

        padding:
            10px 9px;
    }


    .profile-gallery-progress-segment {
        width:
            14px;
    }

}


/*
    Tidak mematikan autoplay pada reduced-motion,
    karena slider ini merupakan fungsi galeri yang diminta.
    Hanya zoom kecil yang dihilangkan.
*/
@media (prefers-reduced-motion: reduce) {

    .profile-gallery-slide img {
        animation:
            none !important;

        transform:
            none !important;
    }

}