/* ============================================================
   DAPOER MAK CHIE
   CONSISTENCY LAYOUT = ABAH ODE
   ============================================================ */


/* ------------------------------------------------------------
   STICKY SIDEBAR
   Sama seperti Abah Ode.
   ------------------------------------------------------------ */

@media (min-width: 961px) {

    .profile-page,
    .profile-shell,
    .profile-layout {
        overflow: visible !important;
    }

    .profile-sidebar {
        position: sticky !important;
        top: 108px !important;

        align-self: start !important;

        height: fit-content !important;
    }

}


/* ------------------------------------------------------------
   HERO SLIDER MAK CHIE
   Tetap 2 foto.
   Gerak menggunakan pola yang sama seperti Abah Ode:
   diam -> geser horizontal -> diam -> kembali via clone.
   8 detik = 4 detik/foto.
   ------------------------------------------------------------ */

.makchie-profile-gallery
.profile-gallery-track {

    animation:
        makchieProfileAutoSlide
        8s
        linear
        infinite !important;

    animation-play-state:
        running !important;
}


@keyframes makchieProfileAutoSlide {

    /* FOTO 1 */
    0%,
    40% {

        transform:
            translate3d(
                0,
                0,
                0
            );

    }


    /* FOTO 2 */
    50%,
    90% {

        transform:
            translate3d(
                -100%,
                0,
                0
            );

    }


    /* CLONE FOTO 1 */
    100% {

        transform:
            translate3d(
                -200%,
                0,
                0
            );

    }

}


/* progress dibuat dua segmen */
.makchie-gallery-progress
.profile-gallery-progress-segment::after {

    animation:
        none !important;
}


.makchie-gallery-progress
.mk-segment-1::after {

    animation:
        makchieProgressOne
        8s
        linear
        infinite !important;
}


.makchie-gallery-progress
.mk-segment-2::after {

    animation:
        makchieProgressTwo
        8s
        linear
        infinite !important;
}


@keyframes makchieProgressOne {

    0% {
        transform:
            scaleX(0);
    }

    40% {
        transform:
            scaleX(1);
    }

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

}


@keyframes makchieProgressTwo {

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

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

}


/* ------------------------------------------------------------
   PRODUCT RAIL
   Sekarang berada di kolom kiri profile-layout.
   Jangan sampai keluar dari grid utama.
   ------------------------------------------------------------ */

#produk-dapoer {
    overflow:
        visible;
}

#produk-dapoer
.mk-product-heading-row {

    margin-top:
        0;
}

#produk-dapoer
.mk-product-rail {

    max-width:
        100%;

    overscroll-behavior-x:
        contain;
}


/* ------------------------------------------------------------
   TIKTOK BUTTON DI STICKY CARD
   WhatsApp tetap memakai wa-button Abah Ode.
   ------------------------------------------------------------ */

.tiktok-button {

    width:
        100%;

    min-height:
        50px;

    margin-top:
        10px;

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        17px;

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #111827,
            #0f172a
        );

    border:
        1px solid
        rgba(15,23,42,.92);

    box-shadow:
        0 13px 28px
        rgba(15,23,42,.16);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        transform .32s cubic-bezier(.16,1,.3,1),
        box-shadow .32s ease,
        background .3s ease;
}


.tiktok-button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #020617
        );

    box-shadow:
        0 17px 34px
        rgba(15,23,42,.22);
}


.makchie-mini-link {

    max-width:
        180px;

    color:
        #0369a1;

    text-align:
        right;

    font-size:
        8.8px;

    font-weight:
        750;

    text-decoration:
        none;

    word-break:
        break-word;
}


.makchie-mini-link:hover {

    color:
        #0ea5e9;
}


/* ------------------------------------------------------------
   BOTTOM CTA:
   tetap konsisten namun TikTok tidak dihilangkan.
   ------------------------------------------------------------ */

.makchie-bottom-actions {

    flex:
        none;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.profile-bottom-cta
.makchie-bottom-actions > a {

    min-height:
        46px;

    padding:
        0 17px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;
}


.profile-bottom-cta
.makchie-bottom-actions
.makchie-bottom-tiktok {

    color:
        #ffffff;

    background:
        rgba(15,23,42,.36);

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


.profile-bottom-cta
.makchie-bottom-actions
.makchie-bottom-tiktok:hover {

    background:
        rgba(15,23,42,.55);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {

    .makchie-bottom-actions {

        width:
            100%;
    }


    .profile-bottom-cta
    .makchie-bottom-actions > a {

        justify-content:
            center;
    }

}