/* ============================================================
   product-detail-short-mulan.min.css
   Section "Kata Ahli & Cerita Moms" — Short-video slider
   Mobile  : 1.5 slide visible, slide ke-2 blur
   Desktop : tepat 3 slide, tengah highlight, kiri-kanan blur & mundur
   ============================================================ */
 
/* ---------- Section wrapper ---------- */
.short-mulan-section {
    padding: 40px 0 56px;
    background: #fff;
    overflow: hidden;
}
 
/* ---------- Header / Title ---------- */
.short-mulan-header {
    margin-bottom: 28px;
    text-align: center;
}
.short-mulan-title h2,
.short-mulan-title h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}
 
/* ---------- Slider container ---------- */
.short-mulan-slider-container {
    position: relative;
}
 
/* ============================================================
   MOBILE  ≤ 767px
   variableWidth: true → slick baca lebar dari CSS (bukan paksa via !important)
   Slide item 70vw → slide ke-2 nongol ~43%
   Section overflow:hidden clip, col overflow:visible biarkan peek
   ============================================================ */
@media (max-width: 767px) {
    .short-mulan-section {
        padding: 32px 0 0px;
        overflow: hidden; /* Clip peek di luar section */
    }
 
    .short-mulan-title p{
        margin-bottom: 0 !important;
    }
    .short-mulan-header {
        padding: 0 16px;
        text-align: left;
    }
    .short-mulan-title h2,
    .short-mulan-title h3 {
        font-size: 20px;
    }
 
    /* Biarkan col dan container tidak clipping slide yang peek */
    .short-mulan-slider-container .container,
    .short-mulan-slider-container .row,
    .short-mulan-slider-container .col-12 {
        overflow: visible;
    }
 
    /* Slick list: visible agar slide berikutnya nongol */
    .short-mulan-section .slick-list {
        overflow: visible !important;
    }
 
    /*
     * Lebar tiap slide item = 70vw
     * slick membaca ini via variableWidth:true → track terhitung benar
     * Peek slide ke-2 = viewport (100vw) - 70vw = 30vw ≈ 43% dari slide
     * JANGAN pakai !important di sini — biarkan slick kelola lebar
     */
    .short-mulan-slide-item {
        width: 70vw;
        box-sizing: border-box;
        padding: 6px 10px 6px 0;
    }
 
    /* Blur slide yang tidak aktif */
    .short-mulan-list-wrapper .slick-slide:not(.slick-active) .short-mulan-card-inner {
        filter: blur(3px) brightness(0.55);
        transition: filter 0.35s ease;
    }
    .short-mulan-list-wrapper .slick-active .short-mulan-card-inner {
        filter: none;
        transition: filter 0.35s ease;
    }
 
    /* Panah navigasi mobile */
    .slick-prev-short-mulan { left: 4px; }
    .slick-next-short-mulan { right: 4px; }
}
 
/* ============================================================
   DESKTOP  ≥ 768px
   Overflow HIDDEN → tepat 3 slide terlihat
   Center: penuh, shadow, tidak blur
   Kiri & kanan: mengecil + blur (efek di belakang)
   ============================================================ */
@media (min-width: 768px) {
    /* CLIP partial cloned slides — hanya 3 yang kelihatan */
    .short-mulan-section .slick-list {
        overflow: hidden !important;
    }
 
    .short-mulan-slide-item {
        padding: 16px 10px;
    }
 
    /* Slide bukan center: mengecil, blur, gelap */
    .short-mulan-list-wrapper .slick-slide:not(.slick-center) .short-mulan-card-inner {
        transform       : scale(0.83);
        filter          : blur(2.5px) brightness(0.55);
        transition      : transform 0.4s ease, filter 0.4s ease;
        transform-origin: center center;
    }
    .short-mulan-list-wrapper .slick-slide:not(.slick-center) .short-mulan-card-info {
        opacity   : 0.45;
        transition: opacity 0.4s ease;
    }
 
    /* Center slide: penuh, jelas, shadow */
    .short-mulan-list-wrapper .slick-center .short-mulan-card-inner {
        transform  : scale(1);
        filter     : none;
        transition : transform 0.4s ease, filter 0.4s ease;
        position   : relative;
        z-index    : 2;
    }
    .short-mulan-list-wrapper .slick-center .short-mulan-card-info {
        opacity   : 1;
        transition: opacity 0.4s ease;
    }
 
    /* Panah navigasi desktop */
    .slick-prev-short-mulan { left: -52px; }
    .slick-next-short-mulan { right: -52px; }
}
 
@media (min-width: 1200px) {
    .slick-prev-short-mulan { left: -60px; }
    .slick-next-short-mulan { right: -60px; }
}
 
/* ============================================================
   CARD STYLES (shared)
   ============================================================ */
.short-mulan-slide-item {
    box-sizing: border-box;
    outline: none;
}
.short-mulan-card {
    display       : flex;
    flex-direction: column;
    border-radius : 16px;
    overflow      : visible;
}
.short-mulan-card-inner {
    position     : relative;
    border-radius: 16px;
    overflow     : hidden;
    cursor       : default;
    aspect-ratio : 9 / 16;
    background   : #111;
}
.short-mulan-card-inner.--has-video {
    cursor: pointer;
}
/* Gradient bawah (disembunyikan saat playing) */
.short-mulan-card-inner::after {
    content       : '';
    position      : absolute;
    inset         : 0;
    background    : linear-gradient(to top,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.12) 55%,
        transparent 100%);
    border-radius : 16px;
    pointer-events: none;
    z-index       : 1;
    transition    : opacity 0.3s;
}
.short-mulan-card-inner.--playing::after {
    opacity: 0;
}
 
/* ---------- Thumbnail ---------- */
.short-mulan-card-thumb {
    position     : absolute;
    inset        : 0;
    border-radius: 16px;
    transition   : opacity 0.3s;
}
.short-mulan-card-thumb picture,
.short-mulan-card-thumb img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 16px;
}
 
/* ---------- Play button ---------- */
.short-mulan-play-btn {
    position      : absolute;
    inset         : 0;
    display       : flex;
    align-items   : center;
    justify-content: center;
    z-index       : 3;
    pointer-events: none;
    transition    : opacity 0.25s;
}
.short-mulan-play-btn svg {
    filter    : drop-shadow(0 2px 8px rgba(0,0,0,0.4));
    transition: transform 0.2s;
}
.short-mulan-card-inner.--has-video:hover .short-mulan-play-btn svg {
    transform: scale(1.12);
}
 
/* ---------- Badges ---------- */
.short-mulan-card-badges {
    position      : absolute;
    top           : 12px;
    left          : 12px;
    right         : 12px;
    display       : flex;
    justify-content: space-between;
    align-items   : flex-start;
    z-index       : 4;
    transition    : opacity 0.25s;
}
.short-mulan-badge {
    display       : inline-block;
    font-size     : 10px;
    font-weight   : 700;
    letter-spacing: 0.5px;
    padding       : 3px 8px;
    border-radius : 4px;
    text-transform: uppercase;
    color         : #fff;
    white-space   : nowrap;
    max-width     : 48%;
    overflow      : hidden;
    text-overflow : ellipsis;
}
.short-mulan-badge.--left  { background: rgba(0, 87, 168, 0.85); }
.short-mulan-badge.--right { background: rgba(212, 160, 23, 0.90); }
 
/* ---------- Caption overlay ---------- */
.short-mulan-card-overlay {
    position  : absolute;
    bottom    : 0;
    left      : 0;
    right     : 0;
    z-index   : 4;
    padding   : 16px 14px 20px;
    transition: opacity 0.25s;
}
.short-mulan-card-caption,
.short-mulan-card-caption p {
    color      : #fff;
    font-size  : 15px;
    font-weight: 700;
    line-height: 1.3;
    margin     : 0;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
 
/* ---------- Sembunyikan elemen saat video playing ---------- */
.sm-hidden {
    opacity        : 0 !important;
    pointer-events : none !important;
}
 
/* ============================================================
   INLINE VIDEO PLAYER
   Tampil di dalam card, menutupi thumbnail
   ============================================================ */
.sm-inline-player {
    position     : absolute;
    inset        : 0;
    z-index      : 10;
    background   : #000;
    border-radius: 16px;
    overflow     : hidden;
    animation    : smFadeIn 0.3s ease forwards;
}
.sm-inline-player iframe,
.sm-inline-player video {
    position  : absolute;
    inset     : 0;
    width     : 100%;
    height    : 100%;
    border    : none;
    display   : block;
    background: #000;
}
 
/*
 * Overlay atas & bawah — menutup sisa UI YouTube yang tidak disembunyikan
 * oleh controls=0 (tombol back/play/forward di atas, bar logo/share di bawah).
 * pointer-events: all agar klik tidak tembus ke YouTube UI.
 *
 * HANYA untuk YouTube. Player TikTok sudah bersih lewat parameter embed-nya,
 * dan <video> biasa tidak punya UI pihak ketiga — kalau masker ini ikut
 * dipasang, videonya hanya terpotong 56px di atas & bawah tanpa alasan.
 * Selector :not([data-sm-provider]) dipertahankan supaya markup lama (JS versi
 * sebelumnya yang masih ter-cache di browser user) tetap tertutup seperti dulu.
 */
.sm-inline-player[data-sm-provider="youtube"]::before,
.sm-inline-player[data-sm-provider="youtube"]::after,
.sm-inline-player:not([data-sm-provider])::before,
.sm-inline-player:not([data-sm-provider])::after {
    content        : '';
    position       : absolute;
    left           : 0;
    right          : 0;
    z-index        : 20;
    pointer-events : all;
    background     : #000;
}
/* Tutup area top — tombol navigasi YouTube */
.sm-inline-player[data-sm-provider="youtube"]::before,
.sm-inline-player:not([data-sm-provider])::before {
    top   : 0;
    height: 56px;
}
/* Tutup area bottom — logo/share/related YouTube */
.sm-inline-player[data-sm-provider="youtube"]::after,
.sm-inline-player:not([data-sm-provider])::after {
    bottom: 0;
    height: 56px;
}
 
@keyframes smFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
 
/* ---------- Info bawah card ---------- */
.short-mulan-card-info {
    padding: 10px 4px 0;
}
.short-mulan-card-name {
    font-size  : 13px;
    font-weight: 600;
    color      : #1a1a2e;
    line-height: 1.4;
}
.short-mulan-card-subtitle {
    font-size : 12px;
    color     : #666;
    margin-top: 2px;
}
 
/* ---------- Arrow buttons ---------- */
.slick-prev-short-mulan,
.slick-next-short-mulan {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    z-index       : 10;
    width         : 40px;
    height        : 40px;
    border-radius : 50%;
    border        : none;
    background    : #fff;
    box-shadow    : 0 2px 12px rgba(0,0,0,0.18);
    cursor        : pointer;
    display       : flex !important;
    align-items   : center;
    justify-content: center;
    padding       : 0;
    transition    : box-shadow 0.2s, background 0.2s;
}
.slick-prev-short-mulan:hover,
.slick-next-short-mulan:hover {
    background: #0057a8;
    box-shadow: 0 4px 16px rgba(0,87,168,0.25);
}
.slick-prev-short-mulan::before,
.slick-next-short-mulan::before {
    content     : '';
    display     : block;
    width       : 10px;
    height      : 10px;
    border-right: 2px solid #0057a8;
    border-top  : 2px solid #0057a8;
    transition  : border-color 0.2s;
}
.slick-prev-short-mulan:hover::before,
.slick-next-short-mulan:hover::before { border-color: #fff; }
.slick-prev-short-mulan::before { transform: rotate(-135deg) translate(-2px, 2px); }
.slick-next-short-mulan::before { transform: rotate(45deg)  translate(-2px, 2px); }
 
/* ============================================================
   DOTS / PAGINATION
   ============================================================ */
.short-mulan-dots-wrapper {
    text-align: center;
    margin-top: 20px;
    line-height: 1;
}
.short-mulan-dots-wrapper .slick-dots {
    position      : static;
    display       : flex ;
    justify-content: center;
    align-items   : center;
    gap           : 6px;
    padding       : 0;
    margin        : 0;
    list-style    : none;
}
.short-mulan-dots-wrapper .slick-dots li {
    width : auto;
    height: auto;
    margin: 0;
}
.short-mulan-dots-wrapper .slick-dots li button {
    width        : 8px;
    height       : 8px;
    border-radius: 50%;
    border       : none;
    background   : #c9d4e0;
    padding      : 0;
    font-size    : 0;
    cursor       : pointer;
    transition   : background 0.25s, width 0.25s, border-radius 0.25s;
    display      : block;
}
.short-mulan-dots-wrapper .slick-dots li button::before {
    display: none;
}
.short-mulan-dots-wrapper .slick-dots li.slick-active button {
    width        : 24px;
    border-radius: 4px;
    background   : #0057a8;
}
 
/* ---------- Aspect ratio fallback (Safari lama) ---------- */
@supports not (aspect-ratio: 9/16) {
    .short-mulan-card-inner {
        padding-top: 177.78%;
        height     : 0;
        position   : relative;
    }
}
 
/* ============================================================
   Embed Instagram Reels
   Halaman embed Instagram berlatar putih dan punya header/footer
   sendiri, jadi jangan diberi latar hitam seperti YouTube/TikTok.
   ============================================================ */
.sm-inline-player[data-sm-provider="instagram"] {
    background: #fff;
}
.sm-inline-player[data-sm-provider="instagram"] iframe {
    background: #fff;
}
 
/* ============================================================
   Kartu yang tidak sedang fokus tidak bisa diputar (lihat
   kartuShortMulanSedangFokus di product-detail-short-mulan.min.js),
   jadi kursornya jangan menyerupai sesuatu yang bisa diklik.
   ============================================================ */
@media (min-width: 768px) {
    .short-mulan-list-wrapper .slick-slide:not(.slick-center) .short-mulan-card-inner,
    .short-mulan-list-wrapper .slick-slide:not(.slick-center) .short-mulan-card-inner * {
        cursor: default;
    }
}

/* ────────────────────────────────────────────────────────────────
   MOBILE: banner full, tanpa sisa ruang navy di bawah gambar.
 
   Di mobile, .nutrition-table & .desktop-title dipindah keluar dari
   .product-info oleh JS halaman. Kolom .product-info jadi kosong tapi
   masih menyumbang margin-top 30px, dan .hero-section masih punya
   padding-bottom 10px -> terlihat sebagai strip navy di bawah banner.
   Kalau reorder-nya tidak jalan, .nutrition-table hanya opacity:0
   sehingga tetap memesan ratusan px ruang kosong.
 
   Semua aturan di bawah discope ke area banner ini saja.
──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
 
    .pimcore_area_product-detail-banner-mulan .hero-section {
        padding-bottom: 0 !important;
    }
 
    .pimcore_area_product-detail-banner-mulan .hero-section > .product-info {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
 
    /* Kalau judul ternyata masih berada di dalam .product-info
       (halaman tanpa .kandungan-mulan-banner), jarak atasnya
       dikembalikan supaya tidak menempel ke gambar. */
    .pimcore_area_product-detail-banner-mulan .hero-section > .product-info > .desktop-title {
        margin-top: 30px;
    }
 
    /* Tabel gizi yang masih disembunyikan tidak boleh memakan tinggi.
       Transisi fade tetap jalan saat class .is-reordered dipasang JS. */
    .pimcore_area_product-detail-banner-mulan .hero-section .nutrition-table:not(.is-reordered) {
        position: absolute !important;
        left: -9999px !important;
        top: 0 !important;
        width: 1px !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    } 
}