/* ===============================
   MAIN SLIDE
================================ */

.ssm-slider.style2 .ssm-main img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Caption Overlay */
.ssm-caption {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    width: 40%;
    margin: 0px auto;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.ssm-caption p {
    color: #fff;
    text-align: center;
    margin: 0px auto;
}

/* ===============================
   THUMBNAIL SLIDER
================================ */
.ssm-thumbs {
    flex: 1;
    overflow: hidden;
}


.ssm-thumbs .swiper-slide {
    opacity: 0.4;
    transition: all .3s ease;
    border-radius: 14px;
    overflow: hidden;
}

.ssm-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

/* ===============================
   THUMBNAIL WRAPPER
================================ */
.ssm-thumbs-wrapper {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 16px;
    margin-left: 100px;
    margin-right: 100px;
}

/* Thumbnail image */
.ssm-thumbs img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

/* ===============================
   NAV BUTTONS (MATCH IMAGE)
================================ */
.ssm-nav {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #c40000;
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}


/* ===============================
   STYLE 3 WRAPPER
================================ */


/* ===============================
   NAV INSIDE IMAGE
================================ */
.ssm-style3-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.ssm-style3-nav.prev { left: 16px; }
.ssm-style3-nav.next { right: 16px; }

/* ===============================
   TEXT
================================ */
.ssm-style3-text {
    flex: 1;
}

.ssm-style3-text h3 {
    font-size: 30px;
    margin-bottom: 20px;
}

.ssm-style3-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    max-width: 420px;
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
    .ssm-style3 {
        flex-direction: column;
        gap: 30px;
    }

    .ssm-style3-image img {
        height: 260px;
    }
}

/* ===============================
   STYLE 4 – PARTIAL SLIDE
================================ */
.ssm-style4 {
    position: relative;
}

.ssm-style4 .swiper-slide {
    width: 60% !important;
    transition: all .45s ease;
    opacity: .25;
    transform: scale(0.9);
}

.ssm-style4 .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
}

.ssm-style4 .swiper-slide-prev,
.ssm-style4 .swiper-slide-next {
    opacity: .5;
    transform: scale(0.92);
    z-index: 2;
}


/* IMAGE */
.ssm-style4 img {
    width: 100%;
    height: 380px;
    object-fit: cover;
   border-radius: 14px;
}

/* CROPPING EFFECT (INI KUNCI 10%) */
.ssm-style4 .swiper {
    overflow: hidden;
}

/* NAV */
.ssm-style4-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

.ssm-style4-nav.prev { left: 10px; }
.ssm-style4-nav.next { right: 10px; }

/* DOT */
.ssm-style4-pagination {
    margin-top: 20px;
    text-align: center;
}