[x-cloak] { display: none !important; }
        .swiper-button-next, .swiper-button-prev {
            color: #1e293b;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .swiper-button-next {
            right: -1px;
        }
        .swiper-button-prev {
            left: -1px;
        }
        .swiper-button-next:after, .swiper-button-prev:after {
            font-size: 18px;
            font-weight: bold;
        }
        .swiper-pagination-bullet {
            background: #64748b;
        }
        .swiper-pagination-bullet-active {
            background: #1e293b;
        }

        /* aplikasiSwiper: push pagination below the boxes and reserve space */
        .aplikasiSwiper {
            padding-bottom: 1.25rem; /* reserve space for pagination */
        }
        .aplikasiSwiper .swiper-pagination {
            bottom: 0.25rem !important; /* place pagination inside reserved space */
            z-index: 10;
        }
        .aplikasiSwiper .swiper-pagination-bullet {
            margin: 0 .35rem;
        }

        /* Video play button (larger, blue) */
        .video-play-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
        .video-play-btn {
            width: 80px;
            height: 80px;
            border-radius: 9999px;
            background: linear-gradient(180deg,#0369a1 0%, #075985 100%); /* blue gradient */
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 30px rgba(3,105,161,0.1);
            transition: transform .24s ease, box-shadow .24s ease;
            border: 13px solid rgba(255,255,255,0.1);
        }
        .video-play-btn svg { width: 48px; height: 48px; color: #ffffff; shape-rendering: geometricPrecision; stroke-linejoin: round; stroke-linecap: round; }
        .video-play-btn:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 36px rgba(3,105,161,0.30); }
        .video-play-pulse {
            position: absolute;
            width: 160px;
            height: 160px;
            border-radius: 9999px;
            /* stronger, centered radial; blurred for soft glow */
            background: radial-gradient(circle at center, rgba(3,105,161,0.30) 0%, rgba(3,105,161,0.14) 35%, rgba(3,105,161,0) 75%);
            animation: pulse 1.6s cubic-bezier(.2,.8,.2,1) infinite;
            z-index: 5; /* above thumbnail but below play button (play button has z-10) */
            filter: blur(6px);
            pointer-events: none;
        }
        @keyframes pulse {
            0% { transform: scale(0.6); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.45; }
            85% { transform: scale(1.45); opacity: 0.12; }
            100% { transform: scale(1.9); opacity: 0.3; }
        }

        /* Swiper tweaks for galeriVideo */
        .galeriVideoSwiper .swiper-button-next, .galeriVideoSwiper .swiper-button-prev {
            width: 44px;
            height: 44px;
            background: white;
            color: #0f172a;
            box-shadow: 0 6px 18px rgba(2,6,23,0.12);
        }
        .galeriVideoSwiper .swiper-pagination-bullet {
            background: rgba(15,23,42,0.15);
        }
        .galeriVideoSwiper .swiper-pagination-bullet-active {
            background: #0369a1;
        }

        /* Contain video gallery cards to prevent page horizontal scroll
           - parent uses overflow:hidden so page won't get a horizontal scrollbar
           - wrapper/slide keep spacing and shadows but are clipped within container
           - padding-inline reserves room for shadows / navigation buttons */
        .galeriVideoSwiper {
            overflow: hidden; /* prevent page overflow */
            padding-inline: 1rem; /* reserve space for shadows/arrows */
            padding-bottom: 1.25rem; /* prevent bottom of cards from being clipped */
        }
        .galeriVideoSwiper .swiper-wrapper {
            overflow: visible; /* allow slide shadows visually, parent will clip outermost overflow */
            margin-inline: -0.5rem; /* compensate per-slide padding so spacing stays consistent */
            margin-bottom: -0.5rem; /* compensate for container padding so slides align visually */
        }
        .galeriVideoSwiper .swiper-slide {
            box-sizing: border-box;
            padding-inline: 0.5rem; /* keep slide spacing */
        }

        @media (max-width: 768px) {
            .aplikasiSwiper { padding-bottom: 1rem; }
            .aplikasiSwiper .swiper-pagination { bottom: 0.125rem !important; }
        }