/* ============================================================
   SPLIT SLIDER CSS - PT Solid Multipart
   Desktop: Full-height 2-panel split layout
   Mobile: Full-height stacked layout (image top, content bottom)
   ============================================================ */

/* ── DESKTOP: Full viewport hero ── */
.hero-slider-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #fff;
}

.heroSwiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* The actual background div — hidden, sliced by JS */
.slide-bg {
    display: none;
}

/* ── Slices container (desktop: absolute full-height) ── */
.slide-slices {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
}

.slice-part {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    transform: translateY(-100%);
    opacity: 1;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.swiper-slide-active .slice-part {
    transform: translateY(0);
}

/* Stagger cascade effect */
.slice-part:nth-child(1) { transition-delay: 0s; }
.slice-part:nth-child(2) { transition-delay: 0.15s; }
.slice-part:nth-child(3) { transition-delay: 0.3s; }

.slice-inner {
    position: absolute;
    top: 0;
    width: 300%; /* 3× slice width = full slider width */
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ── Swiper controls ── */
.swiper-button-next, .swiper-button-prev {
    color: #D97706;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    background: #F59E0B;
    color: #0F172A;
}
.swiper-button-next::after, .swiper-button-prev::after {
    display: none !important;
}
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.6;
}
.swiper-pagination-bullet-active {
    background: #F59E0B;
    opacity: 1;
}

/* ============================================================
   MOBILE HERO LAYOUT (max-width: 991px)
   - Hero = 100svh (full screen)
   - Image = absolute top, occupies 58% of screen height
   - Content panel = absolute bottom, occupies remaining 42%
   - Hubungi Kami card fixed at very bottom of content area
   - Slice transition CSS tetap aktif via .swiper-slide-active
   ============================================================ */
@media (max-width: 991px) {

    /* ── Section: full viewport height ── */
    .hero-slider-section {
        height: 100svh !important;
        min-height: 580px !important;
        overflow: hidden !important;
        background: #111 !important;
    }

    /* Admin bar di mobile: WP sudah set html.admin-bar { margin-top: 46px } otomatis,
       jadi hero section mulai di bawah admin bar tanpa perlu margin tambahan.
       Hanya shrink height agar konten tidak terpotong di bawah. */
    body.admin-bar .hero-slider-section {
        height: calc(100svh - 46px) !important;
    }


    /* ── Swiper: full height ── */
    .heroSwiper,
    .heroSwiper .swiper-wrapper {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* ── Slide: full height, relative positioning base ── */
    .heroSwiper .swiper-slide {
        height: 100% !important;
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        background: #0F172A !important;
    }

    /* ── GAMBAR: absolute, mengisi top 58% slide ── */
    .slide-slices {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 58% !important;
        display: flex !important;  /* tetap flex agar slice-part bisa flex:1 */
        z-index: 1;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    /* Slice bagian ke-3 dikurangi delay di mobile biar lebih cepat */
    .slice-part:nth-child(3) { transition-delay: 0.2s; }

    /* ── Slice inner: full width tiap slice, no offset shift needed on mobile ── */
    /* (slice inner tetap 300% lebar, alignment sudah benar oleh JS) */

    /* ── Gradient bawah gambar: fade tipis ke bg konten ── */
    .slide-slices::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent 0%, rgba(15,23,42,0.95) 100%);
        z-index: 5;
        pointer-events: none;
    }

    /* ── Pagination dots: di dalam image (bawah gambar) ── */
    .heroSwiper .swiper-pagination {
        bottom: 44% !important;   /* 44% dari bawah = dalam area gambar (gambar 58% dari atas) */
        z-index: 10 !important;
    }

    /* Dot warna putih agar kontras dengan gambar */
    .heroSwiper .swiper-pagination-bullet {
        background: rgba(255,255,255,0.6) !important;
        width: 7px !important;
        height: 7px !important;
    }
    .heroSwiper .swiper-pagination-bullet-active {
        background: #fff !important;
        width: 9px !important;
        height: 9px !important;
    }

    /* ── Sembunyikan arrows di mobile ── */
    .hero-arrows-container {
        display: none !important;
    }
}