@extends('layouts.layout1')
@section('title', 'Home || KLINIK PKP JAWA 3')

@section('content')



    <!-- Main Slider Start -->
    <section class="main-slider">
        <div class="main-slider__carousel owl-carousel owl-theme">
            <!-- Banner slides will be dynamically loaded here -->
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.main-slider__carousel');
            if (!carousel) return;

            const baseUrl = "{{ env('BASE_URL') }}";
            const slug = "{{ env('DAERAH') }}";
            const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

            // Default values
            const defaultName = 'Klinik Perumahan dan Kawasan Permukiman';
            const defaultHeadline = 'Klinik Perumahan dan Kawasan Permukiman';
            const defaultWhatsapp = '+6282137191145';

            // Function to render the slide
            function renderSlide(name, headline, whatsappNumber) {
                carousel.innerHTML = `
                    <div class="item">
                        <div class="main-slider__bg" style="background-image: url({{ asset('assets/images/backgrounds/1755856604.png') }});"></div>
                        <div class="main-slider__overly"></div>
                        <div class="container-fluid">
                            <div class="row h-100">
                                <div class="col-lg-6 col-md-12">
                                    <div class="main-slider__content-left">
                                        <div class="main-slider__sub-title-box">
                                            <p class="main-slider__sub-title site-name-slider">${name}</p>
                                        </div>
                                        <h2 class="main-slider__title">${headline}</h2>
                                        <div class="main-slider__btn-box">
                                            <div class="main-slider__btn">
                                                <a href="https://wa.me/${whatsappNumber}" class="thm-btn" target="_blank" rel="noopener noreferrer">
                                                    <span class="thm-btn-text">Hubungi Kami</span>
                                                    <span class="thm-btn-icon-box"><i class="fas fa-arrow-right"></i></span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                // Initialize Owl Carousel
                if (typeof $.fn.owlCarousel !== 'undefined') {
                    $(carousel).owlCarousel('destroy');
                    $(carousel).owlCarousel({
                        loop: true,
                        margin: 0,
                        nav: false,
                        dots: false,
                        autoplay: true,
                        autoplayTimeout: 5000,
                        autoplayHoverPause: true,
                        smartSpeed: 700,
                        items: 1
                    });
                }
            }

            // Render with default values first
            renderSlide(defaultName, defaultHeadline, defaultWhatsapp);

            // Fetch data from API and update
            fetch(apiUrl)
                .then(res => res.json())
                .then(data => {
                    if (data && data.site) {
                        const name = data.site.name || defaultName;
                        const headline = data.site.headline || defaultHeadline;
                        const whatsappNumber = data.site.no_phone || defaultWhatsapp;

                        // Re-render with API data
                        renderSlide(name, headline, whatsappNumber);
                    }
                })
                .catch(err => {
                    console.error('Error loading main slider data:', err);
                    // Keep default values on error
                });
        });
    </script>
    
    <!--Main Slider End -->

    <style>
        /* Make the small site-name banner in the main slider larger and responsive */
        .main-slider__sub-title.site-name-slider {
            font-size: clamp(1.1rem, 2.6vw, 2.2rem);
            font-weight: 700;
            letter-spacing: 0.3px;
            margin: 0 0 0.35rem 0;
            line-height: 1.05;
            font-decoration: underline;
        }

        @media (max-width: 767px) {
            .main-slider__sub-title.site-name-slider {
                font-size: clamp(1rem, 4.5vw, 1.4rem);
            }
        }

        /* Force-hide any leftover navigation UI for main-slider only (keep main-banner nav visible) */
        .main-slider .owl-nav,
        .main-slider__nav-arrows,
        .main-slider__nav-arrow {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    </style>

    <!-- Sliding Text One Start -->
    <section class="sliding-text-one">
        <div class="sliding-text-one__wrap">
            <ul class="sliding-text-one__list list-unstyled marquee_mode" id="running-text-list">
                <!-- Running text akan dimuat dari API -->
            </ul>
        </div>
    </section>

    <style>
        /* Marquee layout: ensure items are inline and preserve spaces for words */
        .marquee_mode { display: block; overflow: hidden; }
        .sliding-text-one__list { display: flex; align-items: center; gap: 0.8rem; white-space: nowrap; padding: 0; margin: 0; }
        .sliding-text-one__list li { display: inline-block; list-style: none; }
        .sliding-text-one__title { display: inline-block; white-space: pre; margin: 0; font-weight: 600; }
        .running-sep { opacity: 0.6; padding: 0 0.6rem; display: inline-block; }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const baseUrl = "{{ env('BASE_URL') }}";
            const slug = "{{ env('DAERAH') }}";
            const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

            // Function to initialize marquee animation (aggressive rebuild)
            function initMarquee() {
                if (typeof $ === 'undefined' || !$.fn.marquee) return;

                // debounce multiple calls within short time window
                if (window._pkpMarqueeInitTimeout) clearTimeout(window._pkpMarqueeInitTimeout);
                window._pkpMarqueeInitTimeout = setTimeout(function() {
                    const $marqueeEl = $('.marquee_mode');
                    const ul = document.getElementById('running-text-list');

                    // Rebuild the UL from original <li> markers to avoid duplicates
                    try {
                        if (ul) {
                            const originals = Array.from(ul.querySelectorAll('li[data-pkp-original]'));
                            if (originals.length > 0) {
                                const frag = document.createDocumentFragment();
                                originals.forEach(node => {
                                    frag.appendChild(node.cloneNode(true));
                                });
                                // wipe and append only originals
                                ul.innerHTML = '';
                                ul.appendChild(frag);
                            } else {
                                // If no marked originals, try to keep first set of children only
                                const children = Array.from(ul.children || []);
                                if (children.length > 0) {
                                    // keep only first N children where N is the original count (heuristic: look for unique items separated by separator)
                                    // fallback: keep children as-is
                                }
                            }
                        }
                    } catch (e) {
                        console.warn('Error rebuilding marquee originals', e);
                    }

                    // Lock to avoid rapid repeated inits from other scripts/events
                    try {
                        const lastLock = $marqueeEl.data('pkpMarqueeLock') || 0;
                        const now = Date.now();
                        if (lastLock && (now - lastLock) < 1500) {
                            console.log('[pkp] skipping marquee init due to recent lock', (now - lastLock));
                            return;
                        }
                        $marqueeEl.data('pkpMarqueeLock', now);
                    } catch (e) { /* ignore */ }

                    // Try destroy safely and remove leftover wrapper nodes (but keep one wrapper if present)
                    try { $marqueeEl.marquee('destroy'); } catch (e) { /* ignore if not initialized */ }

                    try {
                        const wrappers = $marqueeEl.find('.js-marquee');
                        if (wrappers && wrappers.length > 1) {
                            console.warn('[pkp] multiple .js-marquee wrappers detected:', wrappers.length);
                            // keep the first, remove the rest
                            wrappers.each(function(i, el) {
                                if (i > 0) $(el).remove();
                            });
                        }
                        // remove any plugin outer wrappers that could remain
                        $marqueeEl.find('.js-marquee-wrapper').remove();
                    } catch (e) { console.warn('Error cleaning marquee wrappers', e); }

                    // Provide a stack trace to help identify which script triggered this init
                    try { console.log('[pkp] initMarquee stack', new Error().stack); } catch (e) { /* ignore */ }

                    // Mark that we're performing a self init to prevent the MutationObserver
                    try { window._pkpMarqueeSelfInit = Date.now(); } catch (e) { /* ignore */ }

                    // Initialize marquee with same visual behaviour (guarded)
                    try {
                        // If a marquee instance (wrapper) still exists, avoid double-init — let destroy/remove handle it
                        if ($marqueeEl.find('.js-marquee').length === 0) {
                            $marqueeEl.marquee({
                                speed: 70,
                                gap: 80,
                                delayBeforeStart: 0,
                                direction: 'left',
                                duplicated: true,
                                pauseOnHover: true,
                                startVisible: true
                            });
                        } else {
                            console.log('[pkp] marquee wrapper exists, skipping plugin init');
                        }
                        // mark initialized timestamp
                        $marqueeEl.attr('data-pkp-marquee-initialized', Date.now());
                        // sanity check: plugin should create a .js-marquee wrapper
                        setTimeout(function() {
                            try {
                                const wrappers = $marqueeEl.find('.js-marquee');
                                if (wrappers && wrappers.length) {
                                    console.log('[pkp] marquee wrappers after init:', wrappers.length);
                                } else {
                                    console.warn('[pkp] marquee init did not create .js-marquee wrapper — plugin may be missing or blocked');
                                }
                            } catch (e) { /* ignore */ }
                        }, 120);
                    } catch (e) {
                        console.warn('Marquee init failed', e);
                    }
                }, 60);
            }

            // Strong MutationObserver: if external scripts insert wrappers or duplicate nodes,
            // rebuild list from the original marked <li> and re-run guarded init.
            (function() {
                const ul = document.getElementById('running-text-list');
                if (!ul || typeof MutationObserver === 'undefined') return;

                let observer = new MutationObserver((mutations) => {
                    let addedNonOriginal = false;
                    for (const m of mutations) {
                        // ignore mutations that are from our own init (allow a small grace period)
                        try {
                            if (window._pkpMarqueeSelfInit && (Date.now() - window._pkpMarqueeSelfInit) < 600) {
                                // reset marker to avoid skipping unrelated future mutations
                                // but don't treat these as external modifications
                                // keep observing but skip this batch
                                window._pkpMarqueeSelfInit = 0;
                                return;
                            }
                        } catch (e) { /* ignore */ }
                        if (m.type === 'childList' && m.addedNodes && m.addedNodes.length) {
                            for (const n of m.addedNodes) {
                                if (n.nodeType !== 1) continue;
                                const el = n;
                                if (el.matches && (el.matches('.js-marquee-wrapper') || el.matches('.js-marquee') || (el.tagName === 'LI' && !el.dataset.pkpOriginal))) {
                                    addedNonOriginal = true; break;
                                }
                                if (el.querySelector && el.querySelector('.js-marquee-wrapper, .js-marquee, li:not([data-pkp-original])')) {
                                    addedNonOriginal = true; break;
                                }
                            }
                        }
                        if (addedNonOriginal) break;
                    }

                    if (addedNonOriginal) {
                        // small debounce to batch rapid mutations
                        setTimeout(() => {
                            try {
                                const originals = Array.from(ul.querySelectorAll('li[data-pkp-original]'));
                                if (originals.length > 0) {
                                    const frag = document.createDocumentFragment();
                                    originals.forEach(n => frag.appendChild(n.cloneNode(true)));
                                    // temporarily disconnect observer to avoid recursion
                                    observer.disconnect();
                                    ul.innerHTML = '';
                                    ul.appendChild(frag);
                                    // cleanup any wrappers on container
                                    try { $('.marquee_mode').find('.js-marquee-wrapper, .js-marquee').remove(); } catch (e) { /* ignore */ }
                                    // attempt guarded init
                                    try { initMarquee(); } catch (e) { console.warn('initMarquee after mutation failed', e); }
                                }
                            } catch (e) {
                                console.warn('MutationObserver enforcement failed', e);
                            } finally {
                                // reconnect
                                observer.observe(ul, { childList: true, subtree: false });
                            }
                        }, 80);
                    }
                });

                observer.observe(ul, { childList: true, subtree: false });
            })();

            // Function to load and display running text
            function loadRunningText() {
                console.log('[pkp] loadRunningText start', new Date().toISOString());
                fetch(apiUrl)
                    .then(res => res.json())
                    .then(data => {
                        const runningText = (data && data.site && data.site.running_text) ? data.site
                            .running_text : null;
                        const runningTextList = document.getElementById('running-text-list');

                        if (!runningTextList) return;

                        // Clear existing content
                        runningTextList.innerHTML = '';

                        let words = [];

                        if (!runningText || runningText.trim() === '') {
                            // Jika tidak ada running text, tampilkan default
                            words = ['Selamat', 'Datang', 'Di', 'Klinik', 'PKP', 'Jawa', 'III'];
                        } else {
                            // Jika runningText mengandung '-' gunakan '-' sebagai pemisah,
                            // sehingga segmen yang mengandung spasi tidak akan terpecah.
                            // Jika tidak ada '-', fallback ke pemisahan spasi seperti sebelumnya.
                            if (runningText.indexOf('-') !== -1) {
                                words = runningText.split('-').map(s => s.trim()).filter(s => s !== '');
                            } else {
                                // Split berdasarkan spasi untuk mendapatkan kata-kata
                                words = runningText.split(' ').filter(word => word.trim() !== '');
                            }
                            // Trim setiap spasi menjadi 3 spasi supaya jarak antar kata lebih lebar
                            words = words.map(word => word.replace(/\s+/g, '   '));
                            words = words.map(word => word.trim());
                            words = words.filter(word => word !== '');

                        }

                        // Generate HTML for words (preserve multiple spaces using textContent + CSS white-space)
                        words.forEach((word, index) => {
                            const li = document.createElement('li');
                            li.dataset.pkpOriginal = '1';
                            const h2 = document.createElement('h2');
                            h2.className = 'sliding-text-one__title';
                            h2.setAttribute('data-hover', word);
                            // Use textContent so multiple spaces are kept when CSS uses white-space: pre
                            h2.textContent = word;
                            li.appendChild(h2);
                            runningTextList.appendChild(li);

                            // Tambahkan separator setelah setiap item, termasuk item terakhir,
                            // sehingga ketika marquee diduplikasi ada jarak antara akhir dan awal.
                            const separator = document.createElement('li');
                            separator.dataset.pkpOriginal = '1';
                            separator.innerHTML = '<span class="running-sep">•</span>';
                            runningTextList.appendChild(separator);
                        });

                        // Wait for DOM to be fully rendered, then initialize marquee
                        setTimeout(() => {
                            console.log('[pkp] loadRunningText -> initMarquee', new Date().toISOString());
                            initMarquee();
                        }, 200);
                    })
                    .catch(err => {
                        console.error('Error loading running text:', err);
                        // Tampilkan default jika error
                        const runningTextList = document.getElementById('running-text-list');
                        if (runningTextList) {
                            runningTextList.innerHTML = '';
                            const defaultWords = ['Selamat', 'Datang', 'Di', 'Klinik', 'PKP', 'Jawa', 'III'];
                            defaultWords.forEach((word, index) => {
                                const li = document.createElement('li');
                                li.dataset.pkpOriginal = '1';
                                const h2 = document.createElement('h2');
                                h2.className = 'sliding-text-one__title';
                                h2.setAttribute('data-hover', word);
                                h2.textContent = word;
                                li.appendChild(h2);
                                runningTextList.appendChild(li);

                                    // Add visible separator after each item so gap is obvious
                                    const separator = document.createElement('li');
                                    separator.dataset.pkpOriginal = '1';
                                    separator.innerHTML = '<span class="running-sep">•</span>';
                                    runningTextList.appendChild(separator);
                            });

                            setTimeout(() => {
                                console.log('[pkp] loadRunningText (error fallback) -> initMarquee', new Date().toISOString());
                                initMarquee();
                            }, 200);
                        }
                    });
            }

            // Wait for jQuery and marquee plugin to be ready
            if (typeof $ !== 'undefined' && $.fn.marquee) {
                loadRunningText();
            } else {
                // Retry after a short delay if jQuery/marquee not ready yet
                setTimeout(loadRunningText, 500);
            }
        });
    </script>
    <!-- Sliding Text One End -->

    <!-- membuat banner sliding yang jelas -->
    <section class="main-banner">
        <div class="main-banner__carousel owl-carousel owl-theme">
            <!-- Banner slides will be dynamically loaded here -->
        </div>
    </section>

    <style>
        /* Ensure image-only banner slides are visible and sized like main-slider */
        .main-banner {
            position: relative;
            overflow: hidden;
            max-height: none;
        }

        .main-banner__carousel .item {
            display: block;
        }

        /* Full-bleed banner: stretch to full viewport width and size to image height.
           If slides render an <img> inside the container, the image will determine height.
           Otherwise background-image will be used with cover behavior. */
        .main-banner__bg {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            width: 100vw; /* full viewport width */
            height: auto; /* allow height to follow image */
            min-height: 0;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            display: block;
            z-index: 0;
        }

        /* If a plain <img> is used inside the banner container, make it responsive */
        .main-banner__bg img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* Ensure carousel items don't add extra spacing */
        .main-banner__carousel .item { padding: 0; }

        /* Owl nav (prev/next) — place above the banner, centered vertically */
        .main-banner .owl-nav {
            position: absolute;
            top: 50%; /* center vertically */
            left: 0;
            right: 0;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            align-items: center;
            pointer-events: none; /* allow clicks only on buttons */
            z-index: 30;
            padding: 0 12px; /* small inset from edges */
        }

        .main-banner .owl-nav button {
            pointer-events: auto;
            background: rgba(0,0,0,0.45);
            border: 0;
            color: #fff;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 18px rgba(0,0,0,0.35);
            transition: background 150ms ease, transform 150ms ease;
            margin: 0 12px;
            font-size: 18px;
        }

        .main-banner .owl-nav button:hover {
            background: rgba(0,0,0,0.65);
            transform: translateY(-2px);
        }

        .main-banner .owl-nav .owl-prev { margin-left: 8px; }
        .main-banner .owl-nav .owl-next { margin-right: 8px; }
        
        /* Ensure each banner slide fills the viewport and prevent next-slide peek */
        .main-banner__carousel,
        .main-banner__carousel .owl-stage-outer {
            width: 100vw !important;
            left: 50%;
            margin-left: -50vw;
            position: relative;
            overflow: hidden;
            height: auto !important;
            min-height: 0 !important;
        }

        .main-banner__carousel .owl-stage {
            display: flex;
            align-items: stretch;
            width: 100% !important;
        }

        .main-banner__carousel .owl-item,
        .main-banner__carousel .item {
            width: 100vw !important;
            min-width: 100vw !important;
            flex: 0 0 100vw !important;
            margin: 0 !important;
            padding: 0 !important;
            height: auto !important; /* allow variable height based on content/image */
            min-height: 0 !important;
        }

        /* Make the slide background align to viewport and not create extra horizontal space */
        .main-banner__bg { box-sizing: border-box; }
    </style>

     <script>
        document.addEventListener('DOMContentLoaded', function() {
            const baseUrl = "{{ env('BASE_URL') }}";
            const slug = "{{ env('DAERAH') }}";
            const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

            fetch(apiUrl)
                .then(res => res.json())
                .then(data => {
                    const banners = (data && data.site && Array.isArray(data.site.banners)) ? data.site
                        .banners : [];
                    const carousel = document.querySelector('.main-banner__carousel');

                    if (!carousel) return;

                    // Clear existing content
                    carousel.innerHTML = '';

                    if (banners.length === 0) {
                        // If no banners, show single default image-only slide (no text)
                        carousel.innerHTML = `
                            <div class="item">
                                <div class="main-banner__bg"><img src="{{ asset('assets/images/backgrounds/1755856604.jpg') }}" alt="Banner"></div>
                            </div>
                        `;

                        // Initialize owl carousel for the single default slide and enable nav
                        if (typeof $.fn.owlCarousel !== 'undefined') {
                            $(carousel).owlCarousel('destroy');
                            $(carousel).owlCarousel({
                                loop: true,
                                margin: 0,
                                nav: true,
                                dots: false,
                                autoplay: true,
                                autoplayTimeout: 5000,
                                autoplayHoverPause: true,
                                smartSpeed: 700,
                                items: 1,
                                navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>']
                            });
                        }

                        return;
                    }

                    // Generate banner slides dynamically — image only, no overlay text or buttons
                    banners.forEach((banner) => {
                        const imageUrl = `${baseUrl}/${banner.path_image}`;
                        const slide = document.createElement('div');
                        slide.className = 'item';
                        slide.innerHTML = `
                            <div class="main-banner__bg"><img src="${imageUrl}" alt="Banner"></div>
                        `;
                        carousel.appendChild(slide);
                    });

                    // Reinitialize owl carousel after adding slides
                    if (typeof $.fn.owlCarousel !== 'undefined') {
                        $(carousel).owlCarousel('destroy');
                        $(carousel).owlCarousel({
                            loop: true,
                            margin: 0,
                            nav: true,
                            dots: false,
                            autoplay: true,
                            autoplayTimeout: 5000,
                            autoplayHoverPause: true,
                            smartSpeed: 700,
                            items: 1,
                            navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>']
                        });
                    }
                })
                .catch(err => {
                    console.error('Error loading banners:', err);
                });
        });
    </script>

    <!--Case One Start -->
    <section class="case-one">
        <!-- Professional Blue Background for Infografis Section -->
        <!-- <div class="case-one__bg-infographic"></div> -->
        <!-- <div class="case-one__bg-documents"></div> -->
        <!-- <div class="case-one__bg-data-visualization"></div> -->
        <div class="case-one__bg-particles"></div>
        <!-- <div class="case-one__bg-overlay"></div> -->

        <style>
            /* light */
            html[data-theme="light"] .case-one {
                background: linear-gradient(135deg, #b3bcc2ff 0%, #969ca0ff 25%, #71858fff 50%, #556268ff 75%, #838586ff 100%) !important;
            }

            html[data-theme="light"] .case-one::before {
                display: none !important;
            }

            /* Professional government-style background for Infografis section */
            .case-one {
                position: relative !important;
                overflow: hidden !important;
                background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%) !important;
                background-color: #1e293b !important;
                padding: 100px 0 100px 0 !important;
                margin: 0 !important;
            }

            /* Override any existing background */
            .case-one * {
                position: relative;
            }

            /* Force professional background - government style */
            body .case-one,
            section.case-one,
            .case-one.case-one,
            html body .case-one {
                background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%) !important;
                background-color: #1e293b !important;
            }

            /* Remove any background from child elements */
            body .case-one__top,
            body .case-one__bottom,
            body .case-one .container,
            body .case-one__bottom .container,
            .case-one>*:not(.case-one__bg-infographic):not(.case-one__bg-documents):not(.case-one__bg-data-visualization):not(.case-one__bg-particles):not(.case-one__bg-overlay) {
                background: none !important;
                background-color: transparent !important;
            }

            /* Professional geometric pattern overlay */
            .case-one__bg-infographic {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="infogrid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="%23334155" stroke-width="0.8" opacity="0.25"/></pattern><pattern id="infohex" width="80" height="69" patternUnits="userSpaceOnUse"><polygon points="40,6 66,23 66,46 40,63 14,46 14,23" fill="none" stroke="%23475569" stroke-width="1" opacity="0.12"/></pattern></defs><rect width="100%" height="100%" fill="url(%23infogrid)"/><rect width="100%" height="100%" fill="url(%23infohex)"/></svg>');
                background-size: 150px 150px, 240px 207px;
                background-position: 0 0, 80px 103px;
                animation: infographicPatternShift 25s linear infinite;
                z-index: 1;
            }

            @keyframes infographicPatternShift {
                0% {
                    background-position: 0 0, 80px 103px;
                }
                100% {
                    background-position: 150px 150px, 240px 310px;
                }
            }

            /* Elegant data visualization elements */
            .case-one__bg-data-visualization {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><defs><linearGradient id="dataGrad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23475569;stop-opacity:0.15"/><stop offset="100%" style="stop-color:%23334155;stop-opacity:0.25"/></linearGradient><linearGradient id="dataGrad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2364748b;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23475569;stop-opacity:0.18"/></linearGradient></defs><g><rect x="80" y="120" width="120" height="200" fill="url(%23dataGrad1)" rx="8"/><rect x="92" y="135" width="20" height="12" fill="%23cbd5e1" opacity="0.4"/><rect x="120" y="135" width="20" height="12" fill="%23cbd5e1" opacity="0.4"/><rect x="148" y="135" width="20" height="12" fill="%23cbd5e1" opacity="0.4"/><rect x="176" y="135" width="20" height="12" fill="%23cbd5e1" opacity="0.4"/><rect x="92" y="160" width="96" height="60" fill="%2364748b" opacity="0.3" rx="4"/><rect x="92" y="240" width="96" height="4" fill="%23cbd5e1" opacity="0.3" rx="1"/><rect x="92" y="255" width="96" height="4" fill="%23cbd5e1" opacity="0.3" rx="1"/><rect x="92" y="270" width="96" height="4" fill="%23cbd5e1" opacity="0.3" rx="1"/><rect x="92" y="285" width="96" height="4" fill="%23cbd5e1" opacity="0.3" rx="1"/><rect x="300" y="80" width="200" height="240" fill="url(%23dataGrad2)" rx="12"/><rect x="320" y="105" width="30" height="18" fill="%23cbd5e1" opacity="0.3"/><rect x="360" y="105" width="30" height="18" fill="%23cbd5e1" opacity="0.3"/><rect x="400" y="105" width="30" height="18" fill="%23cbd5e1" opacity="0.3"/><rect x="440" y="105" width="30" height="18" fill="%23cbd5e1" opacity="0.3"/><rect x="320" y="140" width="160" height="80" fill="%23475569" opacity="0.25" rx="6"/><rect x="320" y="240" width="160" height="6" fill="%23cbd5e1" opacity="0.25" rx="2"/><rect x="320" y="255" width="160" height="6" fill="%23cbd5e1" opacity="0.25" rx="2"/><rect x="320" y="270" width="160" height="6" fill="%23cbd5e1" opacity="0.25" rx="2"/><rect x="320" y="285" width="160" height="6" fill="%23cbd5e1" opacity="0.25" rx="2"/><rect x="320" y="300" width="160" height="6" fill="%23cbd5e1" opacity="0.25" rx="2"/></g></svg>');
                background-size: 700px 500px;
                background-position: 20% 35%;
                background-repeat: no-repeat;
                animation: infographicVisualizationFloat 18s ease-in-out infinite alternate;
                z-index: 2;
            }

            @keyframes infographicVisualizationFloat {
                0% {
                    transform: translateY(0) scale(1);
                    opacity: 0.7;
                }
                100% {
                    transform: translateY(-12px) scale(1.03);
                    opacity: 0.9;
                }
            }

            /* Professional document management elements */
            .case-one__bg-documents {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs><linearGradient id="docGrad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23374151;stop-opacity:0.18"/><stop offset="100%" style="stop-color:%232d3748;stop-opacity:0.25"/></linearGradient><linearGradient id="docGrad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23475569;stop-opacity:0.12"/><stop offset="100%" style="stop-color:%23334155;stop-opacity:0.2"/></linearGradient></defs><g><rect x="100" y="150" width="150" height="200" fill="url(%23docGrad1)" rx="12"/><rect x="115" y="170" width="120" height="8" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="190" width="90" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="205" width="110" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="230" width="120" height="40" fill="%2364748b" opacity="0.3" rx="4"/><rect x="115" y="285" width="80" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="300" width="100" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="315" width="90" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="115" y="330" width="110" height="6" fill="%23e2e8f0" opacity="0.25"/><rect x="350" y="100" width="180" height="250" fill="url(%23docGrad2)" rx="15"/><rect x="370" y="125" width="140" height="10" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="150" width="110" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="170" width="130" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="200" width="140" height="50" fill="%23475569" opacity="0.25" rx="6"/><rect x="370" y="270" width="100" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="290" width="120" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="310" width="110" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="370" y="330" width="130" height="8" fill="%23e2e8f0" opacity="0.2"/></g></svg>'),
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400"><defs><linearGradient id="doc3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23334155;stop-opacity:0.15"/><stop offset="100%" style="stop-color:%23475569;stop-opacity:0.22"/></linearGradient></defs><rect x="80" y="120" width="120" height="160" fill="url(%23doc3)" rx="10"/><rect x="95" y="140" width="90" height="6" fill="%23e2e8f0" opacity="0.3"/><rect x="95" y="155" width="70" height="5" fill="%23e2e8f0" opacity="0.3"/><rect x="95" y="170" width="85" height="5" fill="%23e2e8f0" opacity="0.3"/><rect x="95" y="190" width="90" height="30" fill="%2364748b" opacity="0.3" rx="4"/></svg>');
                background-size: 1000px 750px, 600px 500px;
                background-position: 15% 30%, 75% 25%;
                background-repeat: no-repeat;
                animation: infographicDocumentsElevate 20s ease-in-out infinite;
                z-index: 3;
            }

            @keyframes infographicDocumentsElevate {
                0%, 100% {
                    transform: rotate(0deg) scale(1);
                    opacity: 0.6;
                }
                25% {
                    transform: rotate(1deg) scale(1.02);
                    opacity: 0.7;
                }
                50% {
                    transform: rotate(-0.5deg) scale(0.98);
                    opacity: 0.8;
                }
                75% {
                    transform: rotate(1.5deg) scale(1.01);
                    opacity: 0.7;
                }
            }

            /* Professional light rays effect */
            .case-one__bg-particles {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    linear-gradient(45deg, transparent 40%, rgba(203, 213, 225, 0.06) 50%, transparent 60%),
                    linear-gradient(135deg, transparent 35%, rgba(148, 163, 184, 0.08) 50%, transparent 65%),
                    linear-gradient(-45deg, transparent 45%, rgba(226, 232, 240, 0.04) 50%, transparent 55%),
                    radial-gradient(circle at 20% 30%, rgba(203, 213, 225, 0.3) 1px, transparent 1px),
                    radial-gradient(circle at 70% 70%, rgba(148, 163, 184, 0.25) 1.5px, transparent 1.5px),
                    radial-gradient(circle at 80% 20%, rgba(226, 232, 240, 0.3) 1px, transparent 1px),
                    radial-gradient(circle at 30% 80%, rgba(203, 213, 225, 0.2) 2px, transparent 2px);
                background-size: 250px 500px, 350px 600px, 300px 400px, 200px 200px, 180px 180px, 160px 160px, 220px 220px;
                background-position: 0% 0%, 50% 50%, 100% 0%, 15% 25%, 75% 30%, 80% 70%, 25% 75%;
                animation: infographicProfessionalParticles 30s linear infinite;
                z-index: 3;
            }

            @keyframes infographicProfessionalParticles {
                0% {
                    background-position: 0% 0%, 50% 50%, 100% 0%, 15% 25%, 75% 30%, 80% 70%, 25% 75%;
                }
                100% {
                    background-position: 250px 500px, 350px 600px, 300px 400px, 215px 225px, 255px 210px, 240px 230px, 245px 295px;
                }
            }

            /* Elegant gradient overlay with government colors */
            .case-one__bg-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: 
                    radial-gradient(circle at 25% 25%, rgba(30, 64, 175, 0.06) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
                    linear-gradient(135deg,
                        rgba(15, 23, 42, 0.12) 0%,
                        rgba(30, 41, 59, 0.08) 25%,
                        rgba(51, 65, 85, 0.04) 50%,
                        rgba(71, 85, 105, 0.08) 75%,
                        rgba(100, 116, 139, 0.12) 100%);
                animation: infographicProfessionalOverlay 22s ease-in-out infinite alternate;
                z-index: 4;
            }

            @keyframes infographicProfessionalOverlay {
                0% {
                    opacity: 0.6;
                }
                33% {
                    opacity: 0.4;
                }
                66% {
                    opacity: 0.7;
                }
                100% {
                    opacity: 0.5;
                }
            }

            /* Government seal watermark for infographics */
            /* .case-one::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 250px;
                height: 250px;
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="90" fill="none" stroke="%23334155" stroke-width="1.5" opacity="0.06"/><circle cx="100" cy="100" r="70" fill="none" stroke="%23475569" stroke-width="1" opacity="0.08"/><circle cx="100" cy="100" r="50" fill="none" stroke="%23334155" stroke-width="0.8" opacity="0.1"/><text x="100" y="95" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="%23475569" opacity="0.12">INFO</text><text x="100" y="108" font-family="Arial, sans-serif" font-size="10" font-weight="bold" text-anchor="middle" fill="%23475569" opacity="0.12">GRAFIS</text></svg>');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                animation: infographicSealRotate 80s linear infinite;
                pointer-events: none;
                z-index: 1;
            } */

            @keyframes infographicSealRotate {
                0% { transform: translate(-50%, -50%) rotate(0deg); }
                100% { transform: translate(-50%, -50%) rotate(360deg); }
            }

            .case-one__top {
                position: relative;
                padding: 0 0 40px 0;
                z-index: 10;
                background: none !important;
                background-color: transparent !important;
            }

            .case-one__bottom {
                position: relative;
                padding: 0 0 0 0 !important;
                z-index: 10;
                background: none !important;
                background-color: transparent !important;
            }

            /* Ensure content is above all backgrounds */
            .case-one .container {
                position: relative;
                z-index: 10;
            }

            /* Professional title styling */
            .case-one .section-title {
                position: relative;
            }

            .case-one .section-title::before {
                content: '';
                position: absolute;
                top: -50px;
                left: 0;
                width: 100px;
                height: 4px;
                background: linear-gradient(90deg, #1e40af, #3b82f6, #1e40af);
                border-radius: 2px;
                animation: infographicTitleGlow 4s ease-in-out infinite;
                box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
            }

            @keyframes infographicTitleGlow {
                0%, 100% {
                    opacity: 0.7;
                    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
                }
                50% {
                    opacity: 1;
                    box-shadow: 0 4px 16px rgba(30, 64, 175, 0.5);
                }
            }

            /* Enhanced text styling for government website */
            .case-one .section-title__title {
                color: #ffffff !important;
                text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
                position: relative;
                z-index: 10;
                font-weight: 700;
            }

            .case-one .section-title__title span {
                color: var(--judges-base) !important;
                font-weight: 800;
            }

            .case-one .section-title__text {
                color: #e2e8f0 !important;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                position: relative;
                z-index: 10;
                font-weight: 500;
            }

            .case-one .section-title__tagline-shape {
                background: linear-gradient(90deg, #ffffff, #e2e8f0, #ffffff) !important;
            }

            /* Enhanced button styling for dark background */
            .case-one .thm-btn {
                background: rgba(255, 255, 255, 0.95) !important;
                color: #1e40af !important;
                border: 2px solid rgba(255, 255, 255, 0.3) !important;
                backdrop-filter: blur(10px);
                transition: all 0.3s ease;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            .case-one .thm-btn:hover {
                background: rgba(255, 255, 255, 1) !important;
                color: #1d4ed8 !important;
                transform: translateY(-2px);
                box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
            }

            /* Professional corner accents */
            .case-one::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 120px;
                height: 120px;
                background: linear-gradient(-45deg, rgba(30, 64, 175, 0.08) 0%, transparent 70%);
                z-index: 1;
            }

            /* Bottom corner accent */
            .case-one .container::after {
                content: '';
                position: absolute;
                bottom: -50px;
                left: -50px;
                width: 140px;
                height: 140px;
                background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
                border-radius: 50%;
                z-index: 1;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .case-one {
                    padding: 80px 0 80px 0 !important;
                }

                .case-one__top {
                    padding: 0 0 30px 0;
                }

                .case-one__bottom {
                    padding: 0 0 0 0 !important;
                }

                .case-one::after {
                    width: 180px;
                    height: 180px;
                }

                .case-one__bg-data-visualization {
                    background-size: 600px 400px;
                }

                .case-one__bg-documents {
                    background-size: 800px 600px, 480px 400px;
                }

                .case-one .section-title::before {
                    width: 70px;
                    height: 3px;
                    top: -40px;
                }
            }
        </style>

        <div class="case-one__top">
            <div class="container">
                <div class="case-one__top-inner">
                    <div class="section-title text-left sec-title-animation animation-style2">
                        <div class="section-title__tagline-box">
                            <div class="section-title__tagline-shape"></div>
                        </div>
                        <h2 class="section-title__title title-animation">
                            <span>Infografis</span> Terkini
                        </h2>
                    </div>
                    <!-- <div class="case-one__btn-box">
                        <a href="{{ route('case') }}" class="thm-btn">
                            <span class="thm-btn-text">Lihat Semua</span>
                            <span class="thm-btn-icon-box"><i class="fas fa-arrow-right"></i></span>
                        </a>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="case-one__bottom">
            <div class="container">
                <!-- Scoped styles for Infographic Cards -->
                <style>
                    /* Force blue background for entire case-one section */
                    .case-one,
                    .case-one__top,
                    .case-one__bottom,
                    .case-one .container {
                        background: transparent !important;
                    }

                    /* Add spacing to carousel wrapper */
                    .case-one__carousel {
                        margin: 0 -8px;
                        padding-bottom: 20px;
                    }

                    /* Force equal heights for all carousel items */
                    .case-one__carousel .owl-stage {
                        display: flex !important;
                        align-items: stretch !important;
                        padding: 0 8px;
                    }

                    .case-one__carousel .owl-item {
                        display: flex !important;
                        height: auto !important;
                        padding: 0 8px;
                    }

                    .case-one .case-one__single {
                        display: flex !important;
                        height: 100% !important;
                        width: 100%;
                    }

                    .case-one .info-card {
                        background: #ffffff;
                        border-radius: 20px;
                        overflow: hidden;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                        display: flex !important;
                        flex-direction: column;
                        height: 100% !important;
                        width: 100%;
                        position: relative;
                        cursor: pointer;
                        border: 2px solid transparent;
                    }

                    .case-one .info-card:hover {
                        transform: translateY(-8px);
                        box-shadow: 0 12px 40px var(--judges-base-rgb);
                        border-color: var(--judges-base);
                    }

                    .case-one .info-card__media {
                        position: relative;
                        height: 300px;
                        overflow: hidden;
                        flex-shrink: 0;
                        background: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 100%);
                    }

                    .case-one .info-card__media img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.5s ease;
                    }

                    .case-one .info-card:hover .info-card__media img {
                        transform: scale(1.05);
                    }

                    .case-one .info-card__zoom-icon {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) scale(0);
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                        background: var(--judges-base);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;
                        transition: all 0.3s ease;
                        box-shadow: 0 8px 24px var(--judges-base-rgb);
                    }

                    .case-one .info-card:hover .info-card__zoom-icon {
                        transform: translate(-50%, -50%) scale(1);
                    }

                    .case-one .info-card__zoom-icon i {
                        font-size: 24px;
                        color: #ffffff;
                    }

                    .case-one .info-card__body {
                        background: #ffffff;
                        padding: 24px;
                        flex: 1 1 auto;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                    }

                    .case-one .info-card__title {
                        color: #1f2937;
                        font-size: 1.25rem;
                        font-weight: 700;
                        margin: 0 0 16px 0;
                        line-height: 1.4;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        min-height: 3.5rem;
                        transition: color 0.3s ease;
                    }

                    .case-one .info-card:hover .info-card__title {
                        color: var(--judges-base);
                    }

                    html[data-theme="dark"] .case-one .info-card__title {
                        color: #ffffff !important;
                        text-shadow: none !important;
                    }

                    html[data-theme="dark"] .case-one .info-card:hover .info-card__title {
                        color: var(--judges-base) !important;
                        text-shadow: none !important;
                    }

                    /* 2. Ubah Background Kartu jadi Gelap (Wajib agar teks putih terbaca) */
                    html[data-theme="dark"] .case-one .info-card,
                    html[data-theme="dark"] .case-one .info-card__body {
                        background: #1e293b !important; /* Slate-800 */
                        background-color: #1e293b !important;
                        border-color: rgba(255, 255, 255, 0.1) !important;
                        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
                    }

                    /* 3. Sesuaikan warna teks kecil/meta */
                    html[data-theme="dark"] .case-one .info-card__meta {
                        color: #cbd5e1 !important; /* Abu-abu terang */
                    }

                    /* 4. Pastikan icon tetap terang */
                    html[data-theme="dark"] .case-one .info-card__meta i {
                        color: #ffffff !important;
                    }

                    .case-one .info-card__meta {
                        color: #ffffff;
                        margin: 0;
                        font-weight: 600;
                        font-size: 0.875rem;
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        padding: 10px 20px;
                        background: var(--judges-base);
                        border-radius: 50px;
                        transition: all 0.3s ease;
                    }

                    .case-one .info-card:hover .info-card__meta {
                        background: var(--judges-base);
                        transform: scale(1.05);
                    }

                    .case-one .info-card__meta i {
                        color: #ffffff;
                        font-size: 0.875rem;
                    }

                    .case-one .info-card__actions {
                        display: none;
                    }

                    /* Image Modal */
                    .infographic-modal {
                        display: none;
                        position: fixed;
                        z-index: 9999;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.95);
                        animation: fadeIn 0.3s ease;
                    }

                    .infographic-modal.active {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .infographic-modal__content {
                        position: relative;
                        max-width: 90%;
                        max-height: 90vh;
                        animation: zoomIn 0.3s ease;
                    }

                    .infographic-modal.active .infographic-modal__content{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 12px;
                        box-sizing: border-box;
                    }

                    .infographic-modal__image {
                        display: block;
                        margin: 0;
                        width: auto;
                        height: auto;
                        max-width: calc(100% - 40px);
                        max-height: 80vh;
                        object-fit: contain;
                        border-radius: 8px;
                        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
                    }

                    /* smaller screens: allow more vertical space */
                    @media (max-width: 575.98px) {
                        .infographic-modal__image {
                            max-width: calc(100% - 24px);
                            max-height: 75vh;
                        }
                    }

                    .infographic-modal__close {
                        position: absolute;
                        top: -40px;
                        right: 0;
                        width: 40px;
                        height: 40px;
                        background: rgba(255, 255, 255, 0.1);
                        border: 2px solid rgba(255, 255, 255, 0.3);
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        backdrop-filter: blur(10px);
                    }

                    .infographic-modal__close:hover {
                        background: rgba(255, 255, 255, 0.2);
                        transform: rotate(90deg);
                    }

                    .infographic-modal__close i {
                        color: #fff;
                        font-size: 20px;
                    }

                    .infographic-modal__title {
                        position: absolute;
                        bottom: -60px;
                        left: 0;
                        right: 0;
                        color: #fff;
                        text-align: center;
                        font-size: 1.25rem;
                        font-weight: 600;
                        padding: 0 20px;
                    }

                    @keyframes fadeIn {
                        from {
                            opacity: 0;
                        }

                        to {
                            opacity: 1;
                        }
                    }

                    @keyframes zoomIn {
                        from {
                            transform: scale(0.8);
                            opacity: 0;
                        }

                        to {
                            transform: scale(1);
                            opacity: 1;
                        }
                    }

                    @media (max-width: 991.98px) {
                        .case-one .info-card__media {
                            height: 240px;
                        }
                    }

                    @media (max-width: 575.98px) {
                        .case-one .info-card__media {
                            height: 200px;
                        }

                        .case-one__carousel .owl-stage {
                            padding: 0 4px;
                        }

                        .case-one__carousel .owl-item {
                            padding: 0 4px;
                        }

                        .infographic-modal__content {
                            max-width: 95%;
                        }

                        .infographic-modal__close {
                            top: -50px;
                            width: 36px;
                            height: 36px;
                        }

                        .infographic-modal__title {
                            bottom: -70px;
                            font-size: 1rem;
                        }
                    }
                </style>

                <div class="case-one__carousel owl-carousel owl-theme">
                    <!-- Infographics will be dynamically loaded here -->
                </div>

                <!-- Image Modal -->
                <div class="infographic-modal" id="infographicModal">
                    <div class="infographic-modal__content">
                        <div class="infographic-modal__close" onclick="closeInfographicModal()">
                            <i class="fas fa-times"></i>
                        </div>
                        <img src="" alt="" class="infographic-modal__image" id="modalImage">
                        <div class="infographic-modal__title" id="modalTitle"></div>
                    </div>
                </div>

                <script>
                    // Modal Functions
                    function openInfographicModal(imageUrl, title) {
                        const modal = document.getElementById('infographicModal');
                        const modalImage = document.getElementById('modalImage');
                        const modalTitle = document.getElementById('modalTitle');

                        modalImage.src = imageUrl;
                        modalImage.alt = title;
                        modalTitle.textContent = title;
                        modal.classList.add('active');
                        document.body.style.overflow = 'hidden';
                    }

                    function closeInfographicModal() {
                        const modal = document.getElementById('infographicModal');
                        modal.classList.remove('active');
                        document.body.style.overflow = '';
                    }

                    // Close modal when clicking outside the image
                    document.addEventListener('click', function(e) {
                        const modal = document.getElementById('infographicModal');
                        if (e.target === modal) {
                            closeInfographicModal();
                        }
                    });

                    // Close modal with ESC key
                    document.addEventListener('keydown', function(e) {
                        if (e.key === 'Escape') {
                            closeInfographicModal();
                        }
                    });

                    document.addEventListener('DOMContentLoaded', function() {
                        const baseUrl = "{{ env('BASE_URL') }}";
                        const slug = "{{ env('DAERAH') }}";
                        const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

                        fetch(apiUrl)
                            .then(res => res.json())
                            .then(data => {
                                const infographics = (data && data.site && Array.isArray(data.site.infographics)) ?
                                    data.site.infographics : [];
                                const carousel = document.querySelector('.case-one__carousel');

                                if (!carousel) return;

                                // Clear existing content
                                carousel.innerHTML = '';

                                if (infographics.length === 0) {
                                    // Jika tidak ada data, tampilkan placeholder
                                    const defaultCard = document.createElement('div');
                                    defaultCard.className = 'case-one__single';
                                    defaultCard.innerHTML = `
                                        <div class="info-card">
                                            <div class="info-card__media" style="background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%); display: flex; align-items: center; justify-content: center;">
                                                <div style="color: white; font-size: 1.2rem; font-weight: 600;">Belum Ada Infografis</div>
                                            </div>
                                            <div class="info-card__body">
                                                <h3 class="info-card__title">Belum Ada Data Infografis</h3>
                                                <p class="info-card__meta" style="margin-bottom: 0;"><i class="fas fa-info-circle"></i> Silakan tambahkan infografis melalui admin panel</p>
                                            </div>
                                        </div>
                                    `;
                                    carousel.appendChild(defaultCard);
                                    return;
                                }

                                // Generate infographic cards dynamically
                                infographics.forEach((infographic, index) => {
                                    const card = document.createElement('div');
                                    card.className = 'case-one__single';

                                    // Prepare image URL
                                    const imageUrl = infographic.path_image ?
                                        (infographic.path_image.startsWith('http') ?
                                            infographic.path_image :
                                            `${baseUrl}/${infographic.path_image}`) :
                                        '';

                                    // Format date
                                    let formattedDate = '';
                                    if (infographic.createdAt) {
                                        const date = new Date(infographic.createdAt);
                                        const day = date.getDate().toString().padStart(2, '0');
                                        const monthNames = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                                            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                                        ];
                                        const month = monthNames[date.getMonth()];
                                        const year = date.getFullYear();
                                        const hours = date.getHours().toString().padStart(2, '0');
                                        const minutes = date.getMinutes().toString().padStart(2, '0');
                                        formattedDate = `${day} ${month} ${year} • ${hours}:${minutes} WIB`;
                                    }

                                    const title = infographic.title || 'Tanpa Judul';

                                    card.innerHTML = `
                                        <div class="info-card" onclick="openInfographicModal('${imageUrl}', '${title}')">
                                            <div class="info-card__media">
                                                ${imageUrl 
                                                    ? `<img src="${imageUrl}" alt="${title}">
                                                                                                                                                       <div class="info-card__zoom-icon">
                                                                                                                                                           <i class="fas fa-search-plus"></i>
                                                                                                                                                       </div>` 
                                                    : `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;font-weight:600;">No Image</div>`}
                                            </div>
                                            <div class="info-card__body">
                                                <h3 class="info-card__title">${title}</h3>
                                                ${formattedDate ? `<p class="info-card__meta"><i class="far fa-clock"></i> ${formattedDate}</p>` : ''}
                                            </div>
                                        </div>
                                    `;
                                    carousel.appendChild(card);
                                });

                                // Reinitialize owl carousel after adding items
                                if (typeof $.fn.owlCarousel !== 'undefined') {
                                    $(carousel).owlCarousel('destroy');
                                    $(carousel).owlCarousel({
                                        loop: true,
                                        margin: 16,
                                        nav: true,
                                        dots: false,
                                        autoplay: true,
                                        autoplayTimeout: 5000,
                                        autoplayHoverPause: true,
                                        smartSpeed: 700,
                                        responsive: {
                                            0: {
                                                items: 1
                                            },
                                            600: {
                                                items: 2,
                                                margin: 12
                                            },
                                            1000: {
                                                items: 3
                                            }
                                        },
                                        navText: ['<span class="fas fa-angle-left"></span>',
                                            '<span class="fas fa-angle-right"></span>'
                                        ],
                                        onInitialized: function() {
                                            // Force flexbox display after initialization
                                            $('.case-one__carousel .owl-stage').css('display', 'flex');
                                        },
                                        onTranslated: function() {
                                            // Maintain flexbox after transitions
                                            $('.case-one__carousel .owl-stage').css('display', 'flex');
                                        }
                                    });
                                }
                            })
                            .catch(err => {
                                console.error('Error loading infographics:', err);
                            });
                    });
                </script>
            </div>
        </div>
    </section>
    <!--Case One End -->

    <!--Video One Start -->
    <section class="video-one">
        <div class="container">
            <div style="position: relative; margin-bottom: 30px;">
                <div class="section-title text-center sec-title-animation animation-style2">
                    <div class="section-title__tagline-box justify-content-center">
                        <div class="section-title__tagline-shape"></div>
                    </div>
                    <h2 class="section-title__title title-animation"><span>Video</span> Terbaru</h2>
                    <p class="section-title__text">Video terbaru dari kanal resmi</p>
                </div>
            </div>

            <style>
                .video-one { padding: 40px 0; }
                .video-one__carousel .item { display: flex; align-items: stretch; height: 100%; }
                .video-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); width: 100%; }
                .video-thumb { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; background: #000; }
                .video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
                .video-play { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; pointer-events: none; }
                .video-play i { pointer-events: none; font-size: 44px; color: rgba(255,255,255,0.95); background: rgba(0,0,0,0.4); padding: 14px; border-radius: 50%; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
                .video-card .video-title { padding: 12px 14px; font-size: 1rem; font-weight:700; color: #1f2937; margin:0; }

                /* Modal */
                .video-modal { display:none; position:fixed; inset:0; background: rgba(0,0,0,0.85); z-index:99999; align-items:center; justify-content:center; }
                .video-modal.active { display:flex; }
                .video-modal__content { width: 90%; max-width: 1100px; background: transparent; border-radius: 8px; overflow: hidden; }
                .video-modal__iframe { width: 100%; height: 60vh; border:0; display:block; }
                .video-modal__close { position: absolute; top: 12px; right: 12px; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:100000; }
                .video-modal__close i { color:#111; }

                @media (max-width: 767px) {
                    .video-modal__iframe { height: 50vh; }
                }

                /* Dark mode for video section */
                html[data-theme="dark"] .video-one {
                    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
                    color: #e6eef6;
                }

                html[data-theme="dark"] .video-one .video-card {
                    background: #0f172a !important;
                    color: #e6eef6 !important;
                    box-shadow: 0 10px 30px rgba(2,6,23,0.6) !important;
                    border: 1px solid rgba(255,255,255,0.03);
                }

                html[data-theme="dark"] .video-one .video-title {
                    color: #e6eef6 !important;
                }

                html[data-theme="dark"] .video-thumb { background: #0b1220 !important; }

                /* Modal tweaks for dark mode */
                html[data-theme="dark"] .video-modal { background: rgba(0,0,0,0.95); }
                html[data-theme="dark"] .video-modal__close { background: rgba(255,255,255,0.06); }
                html[data-theme="dark"] .video-modal__close i { color: #fff; }
            </style>

            <div class="video-one__carousel owl-carousel owl-theme">
                <!-- video slides inserted by JS -->
            </div>

            <!-- Video Modal -->
            <div class="video-modal" id="videoModal" aria-hidden="true">
                <div class="video-modal__content">
                    <button class="video-modal__close" id="videoModalClose" aria-label="Tutup Video"><i class="fas fa-times"></i></button>
                    <iframe id="videoModalIframe" class="video-modal__iframe" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function(){
                    try {
                        const baseUrl = "{{ env('BASE_URL') }}";
                        const slug = "{{ env('DAERAH') }}";
                        const apiUrl = `${baseUrl}/api/public/sites/${slug}`;
                        const carousel = document.querySelector('.video-one__carousel');
                        const modal = document.getElementById('videoModal');
                        const iframe = document.getElementById('videoModalIframe');
                        const closeBtn = document.getElementById('videoModalClose');

                        if (!carousel) return;

                        function extractYouTubeID(url) {
                            if (!url) return null;
                            try {
                                // handle short youtu.be links and full youtube urls
                                const u = new URL(url);
                                if (u.hostname.includes('youtu.be')) {
                                    return u.pathname.replace(/\//g, '');
                                }
                                if (u.hostname.includes('youtube.com')) {
                                    if (u.searchParams.get('v')) return u.searchParams.get('v');
                                    // check for /embed/ID
                                    const parts = u.pathname.split('/');
                                    const embedIdx = parts.indexOf('embed');
                                    if (embedIdx !== -1 && parts[embedIdx+1]) return parts[embedIdx+1];
                                }
                            } catch(e) {
                                // fallback regex
                                const m = url.match(/(?:v=|\/)([A-Za-z0-9_-]{6,})/);
                                return m ? m[1] : null;
                            }
                            return null;
                        }

                        fetch(apiUrl)
                            .then(res => res.json())
                            .then(data => {
                                const videos = (data && data.site && Array.isArray(data.site.videos)) ? data.site.videos : (data && data.local && Array.isArray(data.local.videos) ? data.local.videos : []);
                                if (!videos || videos.length === 0) {
                                    // render placeholder
                                    const item = document.createElement('div');
                                    item.className = 'item';
                                    item.innerHTML = `<div class="video-card"><div class="video-thumb" style="background:#ddd;display:flex;align-items:center;justify-content:center;height:180px;"><div style="color:#666;font-weight:700;padding:20px;">Belum ada video</div></div></div>`;
                                    carousel.appendChild(item);
                                } else {
                                    // limit to latest 8 videos
                                    const limit = Math.min(8, videos.length);
                                    for (let i = 0; i < limit; i++) {
                                        const v = videos[i];
                                        const link = v.link_video || v.link || v.url || '';
                                        const id = extractYouTubeID(link);
                                        const title = v.name || v.title || 'Video';
                                        const thumb = id ? `https://img.youtube.com/vi/${id}/hqdefault.jpg` : `https://placehold.co/1200x675?text=No+Thumbnail`;

                                        const slide = document.createElement('div');
                                        slide.className = 'item';
                                        slide.innerHTML = `
                                            <div class="video-card">
                                                <div class="video-thumb" data-video-id="${id || ''}">
                                                    <img loading="lazy" src="${thumb}" alt="${title}" />
                                                    <div class="video-play"><i class="fas fa-play"></i></div>
                                                </div>
                                                <h3 class="video-title">${title}</h3>
                                            </div>
                                        `;

                                        // attach error fallback for thumbnail
                                        slide.querySelectorAll('img').forEach(function(img){
                                            img.onerror = function(){ try { this.onerror = null; } catch(e){} this.src = 'https://placehold.co/1200x675?text=No+Thumbnail'; };
                                        });

                                        carousel.appendChild(slide);
                                    }
                                }

                                // initialize carousel when jQuery & owl ready
                                if (typeof $ !== 'undefined' && $(carousel).owlCarousel) {
                                    try { $(carousel).trigger('destroy.owl.carousel'); } catch(e){}
                                    $(carousel).owlCarousel({
                                        loop: Math.max(1, carousel.querySelectorAll('.item').length) > 1,
                                        margin: 16,
                                        nav: true,
                                        dots: false,
                                        autoplay: false,
                                        smartSpeed: 600,
                                        responsive: { 0:{items:1}, 600:{items:2}, 1000:{items:3} },
                                        navText: ['<i class="fas fa-chevron-left"></i>','<i class="fas fa-chevron-right"></i>']
                                    });
                                }

                                // delegation: click on thumb to open modal
                                carousel.addEventListener('click', function(e){
                                    const thumb = e.target.closest('.video-thumb');
                                    if (!thumb) return;
                                    const vid = thumb.getAttribute('data-video-id');
                                    if (!vid) return;
                                    iframe.src = `https://www.youtube.com/embed/${vid}?autoplay=1&rel=0`;
                                    modal.classList.add('active');
                                    modal.setAttribute('aria-hidden', 'false');
                                    document.body.style.overflow = 'hidden';
                                });

                                // close
                                function closeVideoModal(){
                                    modal.classList.remove('active');
                                    modal.setAttribute('aria-hidden', 'true');
                                    iframe.src = '';
                                    document.body.style.overflow = '';
                                }

                                closeBtn.addEventListener('click', closeVideoModal);
                                modal.addEventListener('click', function(e){ if (e.target === modal) closeVideoModal(); });
                                document.addEventListener('keydown', function(e){ if (e.key === 'Escape') closeVideoModal(); });
                            })
                            .catch(err => {
                                console.error('Error loading videos:', err);
                            });
                    } catch (e) { console.error(e); }
                });
            </script>
        </div>
    </section>
    <!--Video One End -->


    <!--Blog One Start-->
    <section class="blog-one">
        <!-- <div class="blog-one__shape-1 img-bounce">
                                    <img src="{{ asset('assets/images/shapes/2pkp.png') }}" alt="">
                                </div> -->
        <div class="container">
            <div style="position: relative; margin-bottom: 50px;">
                <div class="section-title text-center sec-title-animation animation-style2">
                    <div class="section-title__tagline-box justify-content-center">
                        <div class="section-title__tagline-shape"></div>
                        <div class="section-title__tagline-shape"></div>
                    </div>
                    <h2 class="section-title__title title-animation"><span>Berita & Artikel</span> Terbaru </h2>
                    <p class="section-title__text">Dapatkan informasi terkini seputar dunia perumahan dan kawasan
                        permukiman
                    </p>
                </div>

                <div class="blog-view-all-btn">
                    <a href="/artikel" class="thm-btn">
                        <span class="thm-btn-text">Lihat Semua</span>
                        <span class="thm-btn-icon-box"><i class="fas fa-arrow-right"></i></span>
                    </a>
                </div>
            </div>

            <style>
                html[data-theme="dark"] .blog-one {
                    background-color: #0f172a !important;
                }
                
                /* Hide owl carousel navigation arrows */
                .blog-one .owl-nav {
                    display: none !important;
                }

                /* Custom button positioning */
                .blog-one .blog-view-all-btn {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                    z-index: 10;
                }

                @media (max-width: 991.98px) {
                    .blog-one .blog-view-all-btn {
                        position: static;
                        transform: none;
                        text-align: center;
                        margin-top: 20px;
                    }
                }
            </style>

            <style>
                /* Force equal heights */
                .blog-one__carousel .owl-stage {
                    display: flex !important;
                    align-items: stretch !important;
                }

                .blog-one__carousel .owl-item {
                    display: flex !important;
                    height: auto !important;
                }

                .blog-one__carousel .item {
                    display: flex !important;
                    height: 100% !important;
                    width: 100%;
                }

                .blog-one__single {
                    background: #fff;
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                    display: flex !important;
                    flex-direction: column;
                    height: 100% !important;
                    width: 100%;
                }

                .blog-one__single:hover {
                    transform: translateY(-10px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
                }

                .blog-one__img-box {
                    position: relative;
                    overflow: hidden;
                    height: 280px;
                    flex-shrink: 0;
                }

                .blog-one__img {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }

                .blog-one__img img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .blog-one__single:hover .blog-one__img img {
                    transform: scale(1.1);
                }

                .blog-one__date {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    background: var(--judges-base);
                    color: #fff;
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 15px ver(--judges-base-rgb);
                    z-index: 2;
                }

                .blog-one__date p {
                    font-size: 1.75rem;
                    font-weight: 700;
                    line-height: 1;
                    margin: 0;
                }

                .blog-one__date span {
                    font-size: 0.875rem;
                    font-weight: 600;
                    margin-top: 2px;
                }

                .blog-one__content {
                    padding: 28px;
                    flex: 1 1 auto;
                    display: flex;
                    flex-direction: column;
                }

                .blog-one__meta {
                    margin: 0 0 12px 0;
                    padding: 0;
                }

                .blog-one__title {
                    margin: 0 0 8px 0;
                }

                .blog-one__title a {
                    /* theme-aware title color; default matches previous light mode */
                    color: var(--blog-title-color, #1f2937);
                    font-size: 1.35rem;
                    font-weight: 700;
                    line-height: 1.4;
                    text-decoration: none;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    min-height: 3.8rem;
                    transition: color 0.3s ease;
                }

                .blog-one__title a:hover {
                    color: var(--judges-base);
                }

                .blog-one__title:nth-child(3) a {
                    font-size: 1rem;
                    font-weight: 500;
                    color: var(--blog-subtitle-color, #6b7280);
                    min-height: auto;
                    -webkit-line-clamp: 1;
                    margin-bottom: 12px;
                }

                .blog-one__text {
                    /* theme-aware excerpt color */
                    color: var(--blog-text-color, #6b7280);
                    font-size: 0.95rem;
                    line-height: 1.7;
                    margin: 0 0 20px 0;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    flex: 1;
                }

                .blog-one__read-more {
                    background: var(--judges-base);
                    color: #fff;
                    border: none;
                    border-radius: 12px;
                    padding: 12px 24px;
                    font-weight: 600;
                    font-size: 0.9rem;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    transition: all 0.3s ease;
                    text-decoration: none;
                    margin-top: auto;
                    cursor: pointer;
                }

                .blog-one__read-more:hover {
                    background: var(--judges-base);
                    color: #fff;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 20px var(--judges-base-rgb);
                }

                .blog-one__read-more span {
                    transition: transform 0.3s ease;
                }

                .blog-one__read-more:hover span {
                    transform: translateX(4px);
                }

                /* Article Modal */
                .article-modal {
                    display: none;
                    position: fixed;
                    z-index: 9999;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.85);
                    animation: fadeIn 0.3s ease;
                    overflow-y: auto;
                    overflow-x: hidden;
                }

                .article-modal.active {
                    display: block;
                }

                .article-modal__content {
                    position: relative;
                    max-width: 900px;
                    width: 100%;
                    background: #fff;
                    border-radius: 20px;
                    overflow: hidden;
                    animation: slideUp 0.4s ease;
                    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
                    margin: 40px auto;
                    min-height: auto;
                }

                .article-modal__header {
                    position: relative;
                    height: 400px;
                    overflow: hidden;
                }

                .article-modal__image {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .article-modal__close {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    width: 40px;
                    height: 40px;
                    background: rgba(255, 255, 255, 0.95);
                    border: none;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    z-index: 10;
                }

                .article-modal__close:hover {
                    background: #fff;
                    transform: rotate(90deg);
                }

                .article-modal__close i {
                    color: #1f2937;
                    font-size: 20px;
                }

                .article-modal__date-badge {
                    position: absolute;
                    bottom: 20px;
                    left: 30px;
                    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
                    color: #fff;
                    padding: 8px 20px;
                    border-radius: 50px;
                    font-size: 0.9rem;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
                }

                .article-modal__body {
                    padding: 40px;
                }

                .article-modal__category {
                    display: inline-block;
                    background: #f0fdfa;
                    color: #0D9488;
                    padding: 6px 16px;
                    border-radius: 20px;
                    font-size: 0.875rem;
                    font-weight: 600;
                    margin-bottom: 16px;
                }

                .article-modal__title {
                    font-size: 2rem;
                    font-weight: 700;
                    color: #1f2937;
                    line-height: 1.3;
                    margin: 0 0 24px 0;
                }

                .article-modal__text {
                    font-size: 1.05rem;
                    line-height: 1.8;
                    color: #4b5563;
                }

                @keyframes slideUp {
                    from {
                        transform: translateY(50px);
                        opacity: 0;
                    }

                    to {
                        transform: translateY(0);
                        opacity: 1;
                    }
                }

                @media (max-width: 991.98px) {
                    .blog-one__img-box {
                        height: 240px;
                    }

                    .article-modal__header {
                        height: 300px;
                    }

                    .article-modal__body {
                        padding: 30px;
                    }

                    .article-modal__title {
                        font-size: 1.5rem;
                    }
                }

                @media (max-width: 575.98px) {
                    .blog-one__img-box {
                        height: 200px;
                    }

                    .blog-one__content {
                        padding: 20px;
                    }

                    .article-modal__content {
                        margin: 20px auto;
                    }

                    .article-modal__header {
                        height: 250px;
                    }

                    .article-modal__body {
                        padding: 24px;
                    }

                    .article-modal__title {
                        font-size: 1.35rem;
                    }

                    .article-modal__date-badge {
                        left: 20px;
                        bottom: 15px;
                        font-size: 0.8rem;
                        padding: 6px 14px;
                    }
                }
            </style>

            <div class="blog-one__carousel owl-carousel owl-theme">
                <!-- Template tersembunyi untuk cloning -->
                <template id="berita-template">
                    <div class="item">
                        <div class="blog-one__single">
                            <div class="blog-one__img-box">
                                <div class="blog-one__img">
                                    <img class="js-berita-img" src="{{ asset('assets/images/blog/blog-1-1.jpg') }}"
                                        alt="Gambar Berita">
                                </div>
                                <div class="blog-one__date">
                                    <p class="js-berita-day">10</p>
                                    <span class="js-berita-month">Nov</span>
                                </div>
                            </div>
                            <div class="blog-one__content">
                                <ul class="blog-one__meta list-unstyled"></ul>
                                <h3 class="blog-one__title"><a class="js-berita-title" href="#">Judul Berita</a>
                                </h3>
                                <h4 class="blog-one__title"><a class="js-berita-subtitle" href="#"
                                        style="font-weight:400;">Subjudul</a></h4>
                                <p class="blog-one__text js-berita-summary">Ringkasan berita...</p>
                                <a href="#" class="blog-one__read-more js-berita-link">Baca Selengkapnya<span
                                        class="fas fa-arrow-right"></span></a>
                            </div>
                        </div>
                    </div>
                </template>
                <!-- Dynamic news akan muncul di sini dari API -->
            </div>

            <!-- Article Modal -->
            <div class="article-modal" id="articleModal">
                <div class="article-modal__content">
                    <div class="article-modal__header">
                        <button class="article-modal__close" onclick="closeArticleModal()">
                            <i class="fas fa-times"></i>
                        </button>
                        <img src="" alt="" class="article-modal__image" id="modalArticleImage">
                        <div class="article-modal__date-badge" id="modalArticleDate">
                            <i class="far fa-clock"></i>
                            <span></span>
                        </div>
                    </div>
                    <div class="article-modal__body">
                        <span class="article-modal__category" id="modalArticleCategory"></span>
                        <h2 class="article-modal__title" id="modalArticleTitle"></h2>
                        <div class="article-modal__text" id="modalArticleBody"></div>
                    </div>
                </div>
            </div>

            <script>
                // Modal Functions
                function openArticleModal(article) {
                    const modal = document.getElementById('articleModal');
                    const modalImage = document.getElementById('modalArticleImage');
                    const modalTitle = document.getElementById('modalArticleTitle');
                    const modalCategory = document.getElementById('modalArticleCategory');
                    const modalBody = document.getElementById('modalArticleBody');
                    const modalDate = document.getElementById('modalArticleDate');

                    // Set image
                    modalImage.src = article.image;
                    modalImage.alt = article.title;

                    // Set title
                    modalTitle.textContent = article.title;

                    // Set category
                    modalCategory.textContent = article.category || 'Berita';
                    if (!article.category) {
                        modalCategory.style.display = 'none';
                    } else {
                        modalCategory.style.display = 'inline-block';
                    }

                    // Set body
                    modalBody.innerHTML = article.body.replace(/\n/g, '<br>');

                    // Set date
                    modalDate.querySelector('span').textContent = article.dateFormatted;

                    modal.classList.add('active');
                    document.body.style.overflow = 'hidden';
                    // Scroll modal to top when opened
                    modal.scrollTop = 0;
                }

                function closeArticleModal() {
                    const modal = document.getElementById('articleModal');
                    modal.classList.remove('active');
                    document.body.style.overflow = '';
                }

                // Close modal when clicking outside
                document.addEventListener('click', function(e) {
                    const modal = document.getElementById('articleModal');
                    if (e.target === modal) {
                        closeArticleModal();
                    }
                });

                // Close modal with ESC key
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        closeArticleModal();
                    }
                });

                document.addEventListener('DOMContentLoaded', function() {
                    const baseUrl = "{{ env('BASE_URL') }}";
                    const slug = "{{ env('DAERAH') }}";
                    const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

                    fetch(apiUrl)
                        .then(res => res.json())
                        .then(data => {
                            // Use data.local.articles for the news list
                            const beritaList = (data && data.local && Array.isArray(data.local.articles)) ? data.local
                                .articles : [];
                            const carousel = document.querySelector('.blog-one__carousel');
                            const template = document.getElementById('berita-template');

                            if (!carousel || !template) return;

                            // Clear carousel completely
                            carousel.innerHTML = '';

                            // If API returned no articles, render a single fallback card
                            if (!beritaList || beritaList.length === 0) {
                                const fallback = template.content.cloneNode(true);
                                const item = fallback.querySelector('.item');
                                if (item) {
                                    const img = item.querySelector('.js-berita-img');
                                    if (img) img.src = '{{ asset('assets/images/blog/blog-1-1.jpg') }}';
                                    const dayEl = item.querySelector('.js-berita-day');
                                    const monthEl = item.querySelector('.js-berita-month');
                                    if (dayEl) dayEl.textContent = (new Date()).getDate().toString().padStart(2, '0');
                                    if (monthEl) monthEl.textContent = '---';
                                    const title = item.querySelector('.js-berita-title');
                                    if (title) { title.textContent = 'Belum ada artikel'; title.href = '#'; }
                                    const subtitle = item.querySelector('.js-berita-subtitle');
                                    if (subtitle) { subtitle.textContent = ''; subtitle.href = '#'; }
                                    const summary = item.querySelector('.js-berita-summary');
                                    if (summary) summary.textContent = 'Belum ada berita atau artikel untuk ditampilkan saat ini.';
                                    const link = item.querySelector('.js-berita-link');
                                    if (link) { link.href = '#'; link.onclick = function(e){ e.preventDefault(); }; }
                                }
                                carousel.appendChild(fallback);
                                // initialize carousel with single fallback
                                if (typeof $ !== 'undefined' && $(carousel).owlCarousel) {
                                    $(carousel).trigger('destroy.owl.carousel');
                                    $(carousel).owlCarousel({
                                        loop: true,
                                        margin: 20,
                                        nav: false,
                                        dots: false,
                                        autoplay: true,
                                        autoplayTimeout: 5000,
                                        autoplayHoverPause: true,
                                        smartSpeed: 700,
                                        items: 1
                                    });
                                }
                                return;
                            }

                            // Limit generated article cards to a maximum to reduce render cost
                            const MAX_ARTICLE_CARDS = 10;
                            const totalToRender = Math.min(MAX_ARTICLE_CARDS, beritaList.length);
                            for (let i = 0; i < totalToRender; i++) {
                                const berita = beritaList[i];
                                // Clone dari template tag
                                const clone = template.content.cloneNode(true);
                                const item = clone.querySelector('.item');

                                // Gambar
                                const img = item.querySelector('.js-berita-img');
                                const imageUrl = berita.path_image ?
                                    (berita.path_image.startsWith('http') ? berita.path_image :
                                        `${baseUrl}/${berita.path_image.replace(/\\/g, '/')}`) :
                                    '{{ asset('assets/images/blog/blog-1-1.jpg') }}';

                                if (img) {
                                    img.src = imageUrl;
                                    img.style.objectFit = 'cover';
                                }

                                // Tanggal - be permissive about field names from API
                                function parseArticleDate(obj) {
                                    if (!obj) return null;
                                    const candidates = [
                                        'createdAt', 'created_at', 'publishedAt', 'published_at', 'date',
                                        'tanggal', 'tgl', 'created'
                                    ];
                                    for (let key of candidates) {
                                        if (obj[key]) {
                                            const v = obj[key];
                                            const d = new Date(v);
                                            if (!isNaN(d.getTime())) return d;
                                        }
                                    }
                                    // fallback: try any field that looks like an ISO date
                                    for (let k in obj) {
                                        if (typeof obj[k] === 'string' && /\d{4}-\d{2}-\d{2}/.test(obj[k])) {
                                            const d = new Date(obj[k]);
                                            if (!isNaN(d.getTime())) return d;
                                        }
                                    }
                                    return null;
                                }

                                const date = parseArticleDate(berita);
                                let dateFormatted = '';

                                if (date) {
                                    item.querySelector('.js-berita-day').textContent = date.getDate()
                                        .toString().padStart(2, '0');
                                    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu',
                                        'Sep', 'Okt', 'Nov', 'Des'
                                    ];
                                    item.querySelector('.js-berita-month').textContent = monthNames[date
                                        .getMonth()];

                                    // Full date for modal
                                    const day = date.getDate().toString().padStart(2, '0');
                                    const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei',
                                        'Juni',
                                        'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
                                    ];
                                    const month = monthNamesFull[date.getMonth()];
                                    const year = date.getFullYear();
                                    dateFormatted = `${day} ${month} ${year}`;
                                }

                                // Judul
                                const title = item.querySelector('.js-berita-title');
                                const titleText = berita.title || 'Tanpa Judul';
                                if (title) {
                                    title.textContent = titleText;
                                    title.href = '#';
                                }

                                // Subjudul (pakai nama kategori jika ada)
                                const subtitle = item.querySelector('.js-berita-subtitle');
                                const categoryText = (berita.category && berita.category.name) ? berita.category
                                    .name : '';
                                if (subtitle) {
                                    subtitle.textContent = categoryText;
                                    subtitle.href = '#';
                                }

                                // Ringkasan
                                const summary = item.querySelector('.js-berita-summary');
                                if (summary) {
                                    summary.textContent = berita.body ? berita.body.substring(0, 150) +
                                        (berita.body.length > 150 ? '...' : '') : '';
                                }

                                // Link - navigate to article detail when possible, otherwise open modal
                                const link = item.querySelector('.js-berita-link');
                                if (link) {
                                    // Try to find an id/slug field from the API object
                                    const candidateId = berita.id || berita._id || berita.slug || berita.slug_url || berita.url || berita.link || berita._doc && (berita._doc.id || berita._doc.slug);
                                    if (candidateId) {
                                        // prefer numeric id but accept slug
                                        const idVal = (typeof candidateId === 'number' || /^[0-9]+$/.test(String(candidateId))) ? String(candidateId) : encodeURIComponent(String(candidateId));
                                        const detailUrl = `/artikel/${idVal}`;
                                        link.href = detailUrl;
                                        // remove any modal click behavior
                                        link.onclick = null;
                                    } else {
                                        // fallback: open modal with content
                                        link.href = '#';
                                        link.onclick = function(e) {
                                            e.preventDefault();
                                            openArticleModal({
                                                title: titleText,
                                                category: categoryText,
                                                body: berita.body || 'Konten tidak tersedia',
                                                image: imageUrl,
                                                dateFormatted: dateFormatted
                                            });
                                        };
                                    }
                                }

                                carousel.appendChild(clone);
                            }

                            // Re-init Owl Carousel
                            if (typeof $ !== 'undefined' && $(carousel).owlCarousel) {
                                $(carousel).trigger('destroy.owl.carousel');
                                $(carousel).owlCarousel({
                                    loop: true,
                                    margin: 20,
                                    nav: false,
                                    dots: false,
                                    autoplay: true,
                                    autoplayTimeout: 5000,
                                    autoplayHoverPause: true,
                                    smartSpeed: 700,
                                    responsive: {
                                        0: {
                                            items: 1
                                        },
                                        600: {
                                            items: 2,
                                            margin: 15
                                        },
                                        1000: {
                                            items: 3
                                        }
                                    },
                                    onInitialized: function() {
                                        // Force flexbox display after initialization
                                        $('.blog-one__carousel .owl-stage').css('display', 'flex');
                                    },
                                    onTranslated: function() {
                                        // Maintain flexbox after transitions
                                        $('.blog-one__carousel .owl-stage').css('display', 'flex');
                                    }
                                });
                                // Ensure article images fallback to logo if they fail to load
                                try {
                                    // Use header's runtime site logo if available, otherwise default to packaged logo
                                    const packagedLogo = '{{ asset("assets/images/resources/logopkp2.png") }}';
                                    const logoFallback = function() { try { return (window && window.pkpSiteLogo) ? window.pkpSiteLogo : packagedLogo; } catch(e) { return packagedLogo; } };
                                    // set onerror for images already added
                                    document.querySelectorAll('.blog-one__carousel img.js-berita-img').forEach(function(img){
                                        img.onerror = function(){ try { this.onerror = null; } catch(e) {} this.src = logoFallback(); };
                                    });

                                    // observe future additions to the carousel and attach onerror
                                    const carouselNode = document.querySelector('.blog-one__carousel');
                                    if (carouselNode && window.MutationObserver) {
                                        const obs = new MutationObserver(function(mutations){
                                            mutations.forEach(function(m){
                                                if (m.addedNodes && m.addedNodes.length) {
                                                    m.addedNodes.forEach(function(node){
                                                        if (!node || !node.querySelectorAll) return;
                                                        node.querySelectorAll('img.js-berita-img').forEach(function(img){
                                                            img.onerror = function(){ try { this.onerror = null; } catch(e) {} this.src = logoFallback(); };
                                                        });
                                                    });
                                                }
                                            });
                                        });
                                        obs.observe(carouselNode, { childList: true, subtree: true });
                                    }
                                } catch (e) { console.warn('blog image fallback setup failed', e); }
                            }
                        })
                        .catch(err => {
                            console.error('Gagal memuat berita:', err);
                        });
                });
            </script>
        </div>
    </section>
    <!--Blog One End-->

    <!--Services One Start -->
    <section class="services-one" id="kelayakan">
        <div class="services-one__shape-bg float-bob-x"
            style="background-image: url({{ asset('assets/images/shapes/1pkp.png') }});"></div>
        <div class="container">
            <div class="section-title text-center sec-title-animation animation-style1">
                <div class="section-title__tagline-box">
                    <div class="section-title__tagline-shape"></div>
                </div>
                <h2 class="section-title__title title-animation">Apakah
                    <span>Rumahmu</span> Layak Huni?
                </h2>
                <p class="section-title__text">Cek kondisi rumah Anda berdasarkan 4 indikator utama</p>
            </div>
            <style>
                /* Make the decorative shape act as a translucent background for the whole section
                   - stretched across the section area, positioned at left bottom
                   - content remains above the shape via container z-index */
                .services-one { position: relative; overflow: visible; }
                /* Dark mode: follow site-wide government tone used elsewhere */
                html[data-theme="dark"] .services-one {
                    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
                    color: #e6eef6;
                }

                html[data-theme="dark"] .services-one::before {
                    background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
                    color: #e6eef6;
                }

                html[data-theme="dark"] .services-one .services-one__single {
                    background: #0f172a !important;
                    color: #e6eef6 !important;
                    border-color: rgba(255,255,255,0.04) !important;
                    box-shadow: 0 10px 30px rgba(2,6,23,0.6) !important;
                }

                html[data-theme="dark"] .services-one .services-one__img::before {
                    background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
                }

                html[data-theme="dark"] .services-one .services-one__title {
                    color: #e6eef6 !important;
                }

                html[data-theme="dark"] .services-one .services-one__text {
                    color: #cbd5e1 !important;
                }
                .services-one__shape-bg {
                    position: absolute;
                    inset: 0; /* top:0; right:0; bottom:0; left:0 */
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background-size: auto 100% !important; /* keep aspect, fill vertically */
                    background-position: center bottom !important;
                    background-repeat: no-repeat !important;
                    z-index: 0; /* behind content */
                    pointer-events: none;
                    display: block;
                    opacity: 0.08; /* subtle translucent watermark */
                }
                .services-one .container { position: relative; z-index: 10; background: transparent; }

                @media (max-width: 991.98px) {
                    .services-one__shape-bg { background-size: cover !important; background-position: center bottom !important; opacity: 0.06; }
                }

                @media (max-width: 575.98px) {
                    /* on small screens enlarge image slightly and keep it out of the way */
                    .services-one__shape-bg { background-size: cover !important; background-position: center bottom !important; opacity: 0.05; }
                }

                /* CRITICAL: Force equal heights for all carousel items */
                .services-one__carousel .owl-stage {
                    display: flex !important;
                    align-items: stretch !important;
                }

                .services-one__carousel .owl-item {
                    display: flex !important;
                    height: auto !important;
                }

                .services-one .item {
                    display: flex !important;
                    height: 100% !important;
                    width: 100%;
                }

                /* Rounded corners for service cards within this section */
                .services-one .services-one__single {
                    border-radius: 16px;
                    overflow: hidden;
                    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
                    transition: all 0.4s ease;
                    display: flex !important;
                    flex-direction: column;
                    height: 100% !important;
                    width: 100%;
                }

                .services-one .services-one__single:hover {
                    transform: translateY(-8px);
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
                }

                /* Make the media area follow the same rounded top corners */
                .services-one .services-one__img {
                    border-top-left-radius: inherit;
                    border-top-right-radius: inherit;
                    overflow: hidden;
                    position: relative;
                    height: 280px;
                    flex-shrink: 0;
                }

                .services-one .services-one__img::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(34, 193, 182, 0.15) 0%, rgba(41, 150, 214, 0.15) 100%);
                    opacity: 0;
                    transition: opacity 0.4s ease;
                    z-index: 1;
                }

                .services-one .services-one__single:hover .services-one__img::before {
                    opacity: 1;
                }

                .services-one .services-one__img img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-top-left-radius: inherit;
                    border-top-right-radius: inherit;
                    transition: transform 0.6s ease;
                }

                .services-one .services-one__single:hover .services-one__img img {
                    transform: scale(1.1);
                }

                /* Ensure content takes remaining space and stretches */
                .services-one .services-one__content {
                    flex: 1 1 auto;
                    display: flex;
                    flex-direction: column;
                    min-height: 200px;
                }

                .services-one .services-one__text {
                    flex: 1 1 auto;
                }

                @media (min-width: 992px) {
                    .services-one .services-one__single {
                        border-radius: 18px;
                    }
                }

                /* SVG Illustration Styles */
                .services-one .svg-illustration {
                    width: 100%;
                    height: 100%;
                    display: block;
                }

                /* Hover Animations for Card 1 - Construction */
                .services-one__single:hover .house-group .roof {
                    animation: roofShine 1.5s ease-in-out infinite;
                }

                .services-one__single:hover .house-group .foundation {
                    animation: solidify 0.8s ease;
                }

                .services-one__single:hover .house-group .shield-icon {
                    animation: shieldPulse 1s ease-in-out infinite;
                }

                .services-one__single:hover .house-group .window,
                .services-one__single:hover .house-group .door {
                    animation: lightBlink 1.2s ease-in-out infinite;
                }

                @keyframes roofShine {

                    0%,
                    100% {
                        opacity: 1;
                    }

                    50% {
                        opacity: 0.8;
                    }
                }

                @keyframes solidify {
                    0% {
                        transform: translateY(5px);
                    }

                    100% {
                        transform: translateY(0);
                    }
                }

                @keyframes shieldPulse {

                    0%,
                    100% {
                        transform: translate(180px, 80px) scale(1);
                    }

                    50% {
                        transform: translate(180px, 80px) scale(1.1);
                    }
                }

                @keyframes lightBlink {

                    0%,
                    100% {
                        opacity: 1;
                    }

                    50% {
                        opacity: 0.6;
                    }
                }

                /* Hover Animations for Card 2 - Space */
                .services-one__single:hover .room-group .light-rays .ray {
                    animation: rayMove 1.5s ease-in-out infinite;
                }

                .services-one__single:hover .room-group .measure-line {
                    animation: measureExpand 1s ease-in-out infinite;
                }

                .services-one__single:hover .room-group .measure-point {
                    animation: pointPulse 0.8s ease-in-out infinite;
                }

                .services-one__single:hover .room-group .eye-icon .pupil {
                    animation: eyeMove 2s ease-in-out infinite;
                }

                @keyframes rayMove {

                    0%,
                    100% {
                        opacity: 0.6;
                        transform: translateY(0);
                    }

                    50% {
                        opacity: 1;
                        transform: translateY(-5px);
                    }
                }

                @keyframes measureExpand {

                    0%,
                    100% {
                        stroke-width: 3;
                    }

                    50% {
                        stroke-width: 5;
                    }
                }

                @keyframes pointPulse {

                    0%,
                    100% {
                        r: 5;
                    }

                    50% {
                        r: 7;
                    }
                }

                @keyframes eyeMove {

                    0%,
                    100% {
                        transform: translateX(0);
                    }

                    25% {
                        transform: translateX(-3px);
                    }

                    75% {
                        transform: translateX(3px);
                    }
                }

                /* Hover Animations for Card 3 - Health */
                .services-one__single:hover .bathroom-group .sparkles .sparkle {
                    animation: sparkleShine 1s ease-in-out infinite;
                }

                .services-one__single:hover .bathroom-group .water-drop {
                    animation: waterDrop 1.5s ease-in-out infinite;
                }

                .services-one__single:hover .bathroom-group .heart-icon .heart {
                    animation: heartBeat 1s ease-in-out infinite;
                }

                .services-one__single:hover .bathroom-group .toilet-tank {
                    animation: tankFloat 2s ease-in-out infinite;
                }

                @keyframes sparkleShine {

                    0%,
                    100% {
                        opacity: 1;
                        transform: scale(1) rotate(0deg);
                    }

                    50% {
                        opacity: 0.5;
                        transform: scale(1.2) rotate(45deg);
                    }
                }

                @keyframes waterDrop {
                    0% {
                        transform: translateY(0);
                        opacity: 0.6;
                    }

                    50% {
                        transform: translateY(10px);
                        opacity: 1;
                    }

                    100% {
                        transform: translateY(20px);
                        opacity: 0;
                    }
                }

                @keyframes heartBeat {

                    0%,
                    100% {
                        transform: scale(1);
                    }

                    25% {
                        transform: scale(1.1);
                    }

                    50% {
                        transform: scale(1);
                    }

                    75% {
                        transform: scale(1.05);
                    }
                }

                @keyframes tankFloat {

                    0%,
                    100% {
                        transform: translateY(0);
                    }

                    50% {
                        transform: translateY(-3px);
                    }
                }

                /* Hover Animations for Card 4 - Water Access */
                .services-one__single:hover .water-group .water-drops .drop {
                    animation: dropFall 1.5s ease-in-out infinite;
                }

                .services-one__single:hover .water-group .water-drops .drop-1 {
                    animation-delay: 0s;
                }

                .services-one__single:hover .water-group .water-drops .drop-2 {
                    animation-delay: 0.3s;
                }

                .services-one__single:hover .water-group .water-drops .drop-3 {
                    animation-delay: 0.6s;
                }

                .services-one__single:hover .water-group .ripples .ripple {
                    animation: rippleExpand 2s ease-out infinite;
                }

                .services-one__single:hover .water-group .ripples .ripple-1 {
                    animation-delay: 0s;
                }

                .services-one__single:hover .water-group .ripples .ripple-2 {
                    animation-delay: 0.4s;
                }

                .services-one__single:hover .water-group .ripples .ripple-3 {
                    animation-delay: 0.8s;
                }

                .services-one__single:hover .water-group .tank .bubble {
                    animation: bubbleRise 2s ease-in-out infinite;
                }

                .services-one__single:hover .water-group .droplet-icon .droplet {
                    animation: dropletShake 1s ease-in-out infinite;
                }

                @keyframes dropFall {
                    0% {
                        transform: translateY(-20px);
                        opacity: 0;
                    }

                    50% {
                        opacity: 1;
                    }

                    100% {
                        transform: translateY(20px);
                        opacity: 0;
                    }
                }

                @keyframes rippleExpand {
                    0% {
                        transform: scale(0);
                        opacity: 0.6;
                    }

                    100% {
                        transform: scale(1.5);
                        opacity: 0;
                    }
                }

                @keyframes bubbleRise {
                    0% {
                        transform: translateY(0);
                        opacity: 0.5;
                    }

                    100% {
                        transform: translateY(-30px);
                        opacity: 0;
                    }
                }

                @keyframes dropletShake {

                    0%,
                    100% {
                        transform: translate(280px, 60px) rotate(0deg);
                    }

                    25% {
                        transform: translate(280px, 60px) rotate(-5deg);
                    }

                    75% {
                        transform: translate(280px, 60px) rotate(5deg);
                    }
                }

                /* General SVG hover effect */
                .services-one__single:hover .svg-illustration {
                    transform: scale(1.02);
                    transition: transform 0.3s ease;
                }
            </style>
            <div class="services-one__carousel owl-carousel owl-theme">
                <!--Services One Single Start -->
                <div class="item">
                    <div class="services-one__single">
                        <div class="services-one__img">
                            <svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg" class="svg-illustration">
                                <defs>
                                    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%"
                                        y2="100%">
                                        <stop offset="0%" style="stop-color:#22c1b6;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#14b8a6;stop-opacity:1" />
                                    </linearGradient>
                                </defs>
                                <!-- Background -->
                                <rect width="400" height="280" fill="#e6f7f5" />
                                <!-- House Structure -->
                                <g class="house-group">
                                    <!-- Foundation -->
                                    <rect x="80" y="200" width="240" height="60" fill="#34495e" class="foundation" />
                                    <!-- Walls -->
                                    <rect x="100" y="120" width="200" height="80" fill="#ecf0f1" stroke="#95a5a6"
                                        stroke-width="3" class="wall" />
                                    <!-- Roof -->
                                    <path d="M 70 120 L 200 50 L 330 120 Z" fill="url(#grad1)" class="roof" />
                                    <!-- Door -->
                                    <rect x="170" y="160" width="60" height="40" fill="#16a085" rx="3"
                                        class="door" />
                                    <!-- Windows -->
                                    <rect x="120" y="140" width="40" height="30" fill="#3498db" class="window" />
                                    <rect x="240" y="140" width="40" height="30" fill="#3498db" class="window" />
                                    <!-- Shield Icon -->
                                    <g class="shield-icon" transform="translate(180, 80)">
                                        <path d="M 20 0 L 30 5 L 30 20 C 30 28 20 32 20 32 C 20 32 10 28 10 20 L 10 5 Z"
                                            fill="#22c1b6" stroke="#fff" stroke-width="2" />
                                        <path d="M 16 15 L 19 18 L 25 12" stroke="#fff" stroke-width="2" fill="none"
                                            stroke-linecap="round" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="services-one__content">
                            <div class="services-one__count">01</div>
                            <div class="services-one__icon">
                                <i class="fas fa-shield-check"
                                    style="font-size:2.6rem;color:#22c1b6;background:#22303a;border-radius:50%;padding:18px;"></i>
                            </div>
                            <h3 class="services-one__title"><a href="#kelayakan">Konstruksi aman</a></h3>
                            <p class="services-one__text">
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Komponen
                                memenuhi kaidah konstruksi <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i> menggunakan
                                bahan
                                bangunan ber-SNI
                            </p>
                        </div>
                    </div>
                </div>
                <!--Services One Single End -->
                <!--Services One Single Start -->
                <div class="item">
                    <div class="services-one__single">
                        <div class="services-one__img">
                            <svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg" class="svg-illustration">
                                <defs>
                                    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%"
                                        y2="100%">
                                        <stop offset="0%" style="stop-color:#2996d6;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
                                    </linearGradient>
                                </defs>
                                <!-- Background -->
                                <rect width="400" height="280" fill="#eff6ff" />
                                <!-- Room Layout -->
                                <g class="room-group">
                                    <!-- Floor -->
                                    <rect x="60" y="160" width="280" height="100" fill="#dbeafe" stroke="#93c5fd"
                                        stroke-width="2" class="floor" />
                                    <!-- Walls with perspective -->
                                    <path d="M 60 160 L 140 100 L 140 200 L 60 260 Z" fill="#e0e7ff" stroke="#a5b4fc"
                                        stroke-width="2" class="wall-left" />
                                    <path d="M 340 160 L 260 100 L 260 200 L 340 260 Z" fill="#ddd6fe" stroke="#c4b5fd"
                                        stroke-width="2" class="wall-right" />
                                    <!-- Windows with light rays -->
                                    <g class="light-rays">
                                        <rect x="160" y="120" width="80" height="60" fill="#60a5fa"
                                            opacity="0.3" class="window-large" />
                                        <path d="M 170 130 L 200 180" stroke="#fbbf24" stroke-width="2" opacity="0.6"
                                            class="ray" />
                                        <path d="M 200 130 L 200 180" stroke="#fbbf24" stroke-width="2" opacity="0.6"
                                            class="ray" />
                                        <path d="M 230 130 L 200 180" stroke="#fbbf24" stroke-width="2" opacity="0.6"
                                            class="ray" />
                                    </g>
                                    <!-- Measurement lines -->
                                    <line x1="80" y1="240" x2="320" y2="240"
                                        stroke="url(#grad2)" stroke-width="3" class="measure-line" />
                                    <circle cx="80" cy="240" r="5" fill="#2996d6" class="measure-point" />
                                    <circle cx="320" cy="240" r="5" fill="#2996d6" class="measure-point" />
                                    <!-- Eye Icon -->
                                    <g class="eye-icon" transform="translate(170, 40)">
                                        <ellipse cx="30" cy="20" rx="35" ry="20"
                                            fill="#2996d6" opacity="0.8" />
                                        <circle cx="30" cy="20" r="12" fill="#1e40af" class="pupil" />
                                        <circle cx="30" cy="20" r="6" fill="#fff" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="services-one__content">
                            <div class="services-one__count">02</div>
                            <div class="services-one__icon">
                                <i class="fas fa-eye"
                                    style="font-size:2.6rem;color:#2996d6;background:#22303a;border-radius:50%;padding:18px;"></i>
                            </div>
                            <h3 class="services-one__title"><a href="#kelayakan">Cukup Luas</a></h3>
                            <p class="services-one__text">
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Luas lantai
                                per kapita > 7,2 m2 <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Pencahayaan >
                                10% dari luas lantai <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Penghawaan >
                                5% dari luas lantai
                            </p>
                        </div>
                    </div>
                </div>
                <!--Services One Single End -->
                <!--Services One Single Start -->
                <div class="item">
                    <div class="services-one__single">
                        <div class="services-one__img">
                            <svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg" class="svg-illustration">
                                <defs>
                                    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%"
                                        y2="100%">
                                        <stop offset="0%" style="stop-color:#d72660;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#ec4899;stop-opacity:1" />
                                    </linearGradient>
                                </defs>
                                <!-- Background -->
                                <rect width="400" height="280" fill="#fce7f3" />
                                <!-- Bathroom Scene -->
                                <g class="bathroom-group">
                                    <!-- Walls -->
                                    <rect x="50" y="80" width="300" height="180" fill="#f3f4f6" stroke="#d1d5db"
                                        stroke-width="2" class="bathroom-wall" />
                                    <!-- Tiles Pattern -->
                                    <g class="tiles">
                                        <rect x="60" y="90" width="30" height="30" fill="#e0e7ff"
                                            opacity="0.5" />
                                        <rect x="90" y="90" width="30" height="30" fill="#ddd6fe"
                                            opacity="0.5" />
                                        <rect x="60" y="120" width="30" height="30" fill="#ddd6fe"
                                            opacity="0.5" />
                                        <rect x="90" y="120" width="30" height="30" fill="#e0e7ff"
                                            opacity="0.5" />
                                    </g>
                                    <!-- Toilet -->
                                    <g class="toilet">
                                        <ellipse cx="150" cy="200" rx="40" ry="30"
                                            fill="#fff" stroke="#9ca3af" stroke-width="2" />
                                        <rect x="130" y="160" width="40" height="45" rx="5"
                                            fill="#fff" stroke="#9ca3af" stroke-width="2" class="toilet-tank" />
                                        <rect x="135" y="165" width="30" height="8" rx="2"
                                            fill="#d72660" />
                                    </g>
                                    <!-- Sink -->
                                    <g class="sink">
                                        <rect x="240" y="160" width="80" height="60" rx="10"
                                            fill="#fff" stroke="#9ca3af" stroke-width="2" />
                                        <circle cx="280" cy="180" r="8" fill="#60a5fa" opacity="0.6"
                                            class="water-drop" />
                                        <line x1="280" y1="140" x2="280" y2="160"
                                            stroke="#9ca3af" stroke-width="4" class="faucet" />
                                    </g>
                                    <!-- Sparkles for cleanliness -->
                                    <g class="sparkles">
                                        <path d="M 100 120 L 105 125 L 100 130 L 95 125 Z" fill="#fbbf24"
                                            class="sparkle" />
                                        <path d="M 200 100 L 203 103 L 200 106 L 197 103 Z" fill="#fbbf24"
                                            class="sparkle" />
                                        <path d="M 300 140 L 304 144 L 300 148 L 296 144 Z" fill="#fbbf24"
                                            class="sparkle" />
                                    </g>
                                    <!-- Heart Icon -->
                                    <g class="heart-icon" transform="translate(160, 30)">
                                        <path
                                            d="M 40 25 C 40 18 35 12 28 12 C 23 12 19 15 17 19 C 15 15 11 12 6 12 C -1 12 -6 18 -6 25 C -6 35 17 50 17 50 C 17 50 40 35 40 25 Z"
                                            fill="url(#grad3)" class="heart" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="services-one__content">
                            <div class="services-one__count">03</div>
                            <div class="services-one__icon">
                                <i class="fas fa-heart"
                                    style="font-size:2.6rem;color:#d72660;background:#22303a;border-radius:50%;padding:18px;"></i>
                            </div>
                            <h3 class="services-one__title"><a href="#kelayakan">Sehat dan Bersih</a>
                            </h3>
                            <p class="services-one__text">
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Tersedia
                                kloset dengan leher angsa <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i> Terhubung ke
                                SPAL/septic
                                tank
                            </p>
                        </div>
                    </div>
                </div>
                <!--Services One Single End -->
                <!--Services One Single Start -->
                <div class="item">
                    <div class="services-one__single">
                        <div class="services-one__img">
                            <svg viewBox="0 0 400 280" xmlns="http://www.w3.org/2000/svg" class="svg-illustration">
                                <defs>
                                    <linearGradient id="grad4" x1="0%" y1="0%" x2="100%"
                                        y2="100%">
                                        <stop offset="0%" style="stop-color:#2996d6;stop-opacity:1" />
                                        <stop offset="100%" style="stop-color:#06b6d4;stop-opacity:1" />
                                    </linearGradient>
                                </defs>
                                <!-- Background -->
                                <rect width="400" height="280" fill="#e0f2fe" />
                                <!-- Water System Scene -->
                                <g class="water-group">
                                    <!-- Water Tank -->
                                    <g class="tank">
                                        <rect x="80" y="100" width="100" height="80" rx="10" fill="#0ea5e9"
                                            stroke="#0284c7" stroke-width="3" />
                                        <rect x="85" y="105" width="90" height="60" fill="#38bdf8" opacity="0.7"
                                            class="water-level" />
                                        <circle cx="130" cy="135" r="15" fill="#7dd3fc" opacity="0.5"
                                            class="bubble" />
                                        <circle cx="110" cy="150" r="10" fill="#7dd3fc" opacity="0.5"
                                            class="bubble" />
                                    </g>
                                    <!-- Pipes -->
                                    <g class="pipes">
                                        <rect x="175" y="130" width="60" height="10" fill="#64748b"
                                            stroke="#475569" stroke-width="2" class="pipe-h" />
                                        <rect x="230" y="130" width="10" height="60" fill="#64748b"
                                            stroke="#475569" stroke-width="2" class="pipe-v" />
                                    </g>
                                    <!-- Faucet -->
                                    <g class="faucet-system" transform="translate(200, 180)">
                                        <rect x="20" y="0" width="40" height="15" rx="5" fill="#64748b"
                                            stroke="#475569" stroke-width="2" />
                                        <path d="M 40 15 Q 40 30 30 35" stroke="#64748b" stroke-width="8" fill="none"
                                            stroke-linecap="round" />
                                        <circle cx="30" cy="35" r="8" fill="#0284c7" />
                                    </g>
                                    <!-- Water Drops Animated -->
                                    <g class="water-drops">
                                        <ellipse cx="230" cy="220" rx="6" ry="8"
                                            fill="url(#grad4)" opacity="0.8" class="drop drop-1" />
                                        <ellipse cx="230" cy="200" rx="5" ry="7"
                                            fill="url(#grad4)" opacity="0.6" class="drop drop-2" />
                                        <ellipse cx="230" cy="180" rx="4" ry="6"
                                            fill="url(#grad4)" opacity="0.4" class="drop drop-3" />
                                    </g>
                                    <!-- Water Ripples -->
                                    <g class="ripples" transform="translate(230, 240)">
                                        <ellipse cx="0" cy="0" rx="20" ry="5"
                                            fill="none" stroke="#0ea5e9" stroke-width="2" opacity="0.6"
                                            class="ripple ripple-1" />
                                        <ellipse cx="0" cy="0" rx="35" ry="8"
                                            fill="none" stroke="#0ea5e9" stroke-width="2" opacity="0.4"
                                            class="ripple ripple-2" />
                                        <ellipse cx="0" cy="0" rx="50" ry="12"
                                            fill="none" stroke="#0ea5e9" stroke-width="1" opacity="0.2"
                                            class="ripple ripple-3" />
                                    </g>
                                    <!-- Droplet Icon -->
                                    <g class="droplet-icon" transform="translate(280, 60)">
                                        <path
                                            d="M 30 10 C 30 10 15 30 15 40 C 15 50 22 55 30 55 C 38 55 45 50 45 40 C 45 30 30 10 30 10 Z"
                                            fill="url(#grad4)" class="droplet" />
                                        <ellipse cx="25" cy="35" rx="5" ry="8"
                                            fill="#fff" opacity="0.4" />
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <div class="services-one__content">
                            <div class="services-one__count">04</div>
                            <div class="services-one__icon">
                                <i class="fas fa-tint"
                                    style="font-size:2.6rem;color:#2996d6;background:#22303a;border-radius:50%;padding:18px;"></i>
                            </div>
                            <h3 class="services-one__title"><a href="#kelayakan">Akses Air Mudah</a>
                            </h3>
                            <p class="services-one__text">
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Air tidak
                                berasa, berbau, berwarna <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Tersedia
                                minimal 12 jam/hari <br>
                                <i class="fas fa-check-square" style="color:#28a745; margin-right:6px;"></i>Bebas
                                mikroorganisme & logam berat
                            </p>
                        </div>
                    </div>
                </div>
                <!--Services One Single End -->
            </div>
        </div>
    </section>
    <!--Services One End -->

    <!--Process One Start -->
    <section class="process-one">
        <!-- Dynamic Construction Background -->
        <div class="process-one__bg-construction"></div>
        <!-- <div class="process-one__bg-blueprints"></div> -->
        <div class="process-one__bg-tools"></div>
        <!-- <div class="process-one__bg-progress-lines"></div> -->
        <!-- <div class="process-one__bg-particles"></div> -->
        <!-- <div class="process-one__bg-overlay"></div> -->

        <style>
            /* Professional background for Process One section */
            .process-one {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #ffffff 0%, #f8fafc 25%, #f1f5f9 50%, #e2e8f0 75%, #f8fafc 100%);
                padding: 100px 0;
                min-height: 700px;
            }

            html[data-theme="dark"] .process-one {
                background: #0f172a;
            }
            
            html[data-theme="dark"] .process-one h2 {
                color: #f1f5f9 !important;
            }

            html[data-theme="dark"] .process-one .process-one__single {
                background: #1e293b;
            }

            html[data-theme="dark"] .process-one .process-one__title {
                color: #f1f5f9 !important;
            }

            html[data-theme="dark"] .process-one .process-one__text {
                color: #bbbec2ff !important;
            }


            /* Animated construction silhouette */
            .process-one__bg-construction {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 200px;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200"><g opacity="0.08"><rect x="50" y="120" width="80" height="80" fill="%2364748b" rx="4"/><polygon points="90,100 50,120 130,120" fill="%23475569"/><rect x="60" y="135" width="12" height="15" fill="%23334155"/><rect x="80" y="135" width="12" height="15" fill="%23334155"/><rect x="100" y="135" width="12" height="15" fill="%23334155"/><rect x="180" y="100" width="100" height="100" fill="%2364748b" rx="6"/><polygon points="230,80 180,100 280,100" fill="%23475569"/><rect x="200" y="120" width="15" height="20" fill="%23334155"/><rect x="225" y="120" width="15" height="20" fill="%23334155"/><rect x="250" y="120" width="15" height="20" fill="%23334155"/><rect x="350" y="110" width="75" height="90" fill="%2364748b" rx="5"/><polygon points="387,90 350,110 425,110" fill="%23475569"/><rect x="365" y="125" width="10" height="15" fill="%23334155"/><rect x="385" y="125" width="10" height="15" fill="%23334155"/><rect x="405" y="125" width="10" height="15" fill="%23334155"/><rect x="480" y="95" width="90" height="105" fill="%2364748b" rx="5"/><polygon points="525,75 480,95 570,95" fill="%23475569"/><rect x="500" y="115" width="14" height="18" fill="%23334155"/><rect x="525" y="115" width="14" height="18" fill="%23334155"/><rect x="550" y="115" width="14" height="18" fill="%23334155"/><rect x="620" y="105" width="80" height="95" fill="%2364748b" rx="4"/><polygon points="660,85 620,105 700,105" fill="%23475569"/><rect x="635" y="120" width="12" height="16" fill="%23334155"/><rect x="655" y="120" width="12" height="16" fill="%23334155"/><rect x="675" y="120" width="12" height="16" fill="%23334155"/><rect x="750" y="130" width="70" height="70" fill="%2364748b" rx="4"/><polygon points="785,110 750,130 820,130" fill="%23475569"/><rect x="765" y="140" width="10" height="14" fill="%23334155"/><rect x="780" y="140" width="10" height="14" fill="%23334155"/><rect x="795" y="140" width="10" height="14" fill="%23334155"/><rect x="870" y="115" width="85" height="85" fill="%2364748b" rx="5"/><polygon points="912,95 870,115 955,115" fill="%23475569"/><rect x="885" y="130" width="13" height="16" fill="%23334155"/><rect x="910" y="130" width="13" height="16" fill="%23334155"/><rect x="935" y="130" width="13" height="16" fill="%23334155"/></g></svg>');
                background-size: cover;
                background-position: bottom;
                background-repeat: no-repeat;
                animation: constructionGlow 6s ease-in-out infinite alternate;
                z-index: 1;
            }

            @keyframes constructionGlow {
                0% {
                    opacity: 0.4;
                    filter: brightness(1) contrast(1);
                }

                100% {
                    opacity: 0.7;
                    filter: brightness(1.1) contrast(1.05);
                }
            }

            /* Floating blueprint patterns */
            .process-one__bg-blueprints {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 350"><g opacity="0.05"><rect x="60" y="60" width="230" height="150" fill="none" stroke="%2364748b" stroke-width="2" stroke-dasharray="8,4"/><rect x="80" y="80" width="60" height="45" fill="none" stroke="%2364748b" stroke-width="1" stroke-dasharray="4,2"/><rect x="150" y="80" width="60" height="45" fill="none" stroke="%2364748b" stroke-width="1" stroke-dasharray="4,2"/><rect x="220" y="80" width="50" height="45" fill="none" stroke="%2364748b" stroke-width="1" stroke-dasharray="4,2"/><rect x="80" y="135" width="90" height="55" fill="none" stroke="%2364748b" stroke-width="1" stroke-dasharray="4,2"/><rect x="180" y="135" width="90" height="55" fill="none" stroke="%2364748b" stroke-width="1" stroke-dasharray="4,2"/><circle cx="110" cy="102" r="2" fill="%23475569"/><circle cx="180" cy="102" r="2" fill="%23475569"/><circle cx="245" cy="102" r="2" fill="%23475569"/><line x1="90" y1="230" x2="130" y2="230" stroke="%2364748b" stroke-width="1"/><line x1="110" y1="226" x2="110" y2="234" stroke="%2364748b" stroke-width="1"/><text x="140" y="235" fill="%23475569" font-size="10" font-family="Arial">20m</text></g></svg>');
                background-size: 400px 400px;
                background-position: 25% 20%;
                background-repeat: no-repeat;
                animation: blueprintFloat 10s ease-in-out infinite;
                z-index: 2;
            }

            @keyframes blueprintFloat {

                0%,
                100% {
                    transform: translate(0, 0) rotate(0deg);
                }

                25% {
                    transform: translate(10px, -15px) rotate(2deg);
                }

                50% {
                    transform: translate(20px, -10px) rotate(-1deg);
                }

                75% {
                    transform: translate(10px, -20px) rotate(1deg);
                }
            }

            /* Animated construction tools */
            .process-one__bg-tools {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><g opacity="0.08"><rect x="50" y="100" width="8" height="120" fill="%2364748b" rx="2"/><circle cx="54" cy="90" r="12" fill="%2364748b"/><circle cx="54" cy="90" r="8" fill="%23475569"/><rect x="80" y="80" width="60" height="8" fill="%2364748b" rx="2"/><rect x="75" y="75" width="10" height="18" fill="%2364748b" rx="2"/><rect x="135" y="75" width="10" height="18" fill="%2364748b" rx="2"/><rect x="180" y="120" width="40" height="6" fill="%2364748b" rx="2"/><polygon points="220,120 240,110 240,135 220,125" fill="%2364748b"/><rect x="185" y="110" width="6" height="25" fill="%2364748b" rx="2"/><rect x="200" y="110" width="6" height="25" fill="%2364748b" rx="2"/><polygon points="100,200 120,180 140,200 130,210 110,210" fill="%2364748b"/><rect x="115" y="210" width="10" height="40" fill="%2364748b" rx="2"/></g></svg>'),
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250"><g opacity="0.06"><rect x="50" y="50" width="40" height="8" fill="%2364748b" rx="2"/><circle cx="45" cy="54" r="8" fill="%2364748b"/><rect x="100" y="80" width="8" height="50" fill="%2364748b" rx="2"/><circle cx="104" cy="75" r="8" fill="%2364748b"/><rect x="150" y="100" width="30" height="6" fill="%2364748b" rx="2"/><polygon points="180,100 195,95 195,110 180,105" fill="%2364748b"/><rect x="80" y="150" width="25" height="25" fill="%2364748b" rx="3"/><rect x="85" y="155" width="15" height="15" fill="%23475569" rx="2"/><rect x="130" y="170" width="6" height="30" fill="%2364748b" rx="2"/><circle cx="133" cy="165" r="6" fill="%2364748b"/></g></svg>');
                background-size: 350px 350px, 280px 280px;
                background-position: 15% 30%, 80% 20%;
                background-repeat: no-repeat;
                animation: toolsRotate 10s ease-in-out infinite;
                z-index: 3;
            }

            @keyframes toolsRotate {

                0%,
                100% {
                    transform: rotate(0deg) scale(1);
                }

                25% {
                    transform: rotate(5deg) scale(1.05);
                }

                50% {
                    transform: rotate(-3deg) scale(0.95);
                }

                75% {
                    transform: rotate(7deg) scale(1.02);
                }
            }

            /* Progress connection lines */
            .process-one__bg-progress-lines {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg,
                        transparent 0%,
                        rgba(100, 116, 139, 0.2) 10%,
                        rgba(71, 85, 105, 0.3) 25%,
                        rgba(51, 65, 85, 0.4) 40%,
                        rgba(71, 85, 105, 0.3) 60%,
                        rgba(51, 65, 85, 0.4) 75%,
                        rgba(100, 116, 139, 0.2) 90%,
                        transparent 100%);
                transform: translateY(-50%);
                animation: progressFlow 8s linear infinite;
                z-index: 1;
            }

            @keyframes progressFlow {
                0% {
                    background-position: -100% 0;
                    opacity: 0.6;
                }

                50% {
                    opacity: 1;
                }

                100% {
                    background-position: 100% 0;
                    opacity: 0.6;
                }
            }

            /* Simplified floating particles effect */
            .process-one__bg-particles {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    radial-gradient(circle at 20% 30%, rgba(100, 116, 139, 0.3) 1px, transparent 1px),
                    radial-gradient(circle at 70% 20%, rgba(71, 85, 105, 0.2) 1px, transparent 1px),
                    radial-gradient(circle at 80% 70%, rgba(51, 65, 85, 0.25) 1px, transparent 1px),
                    radial-gradient(circle at 30% 80%, rgba(100, 116, 139, 0.2) 1px, transparent 1px);
                background-size: 150px 150px, 120px 120px, 180px 180px, 140px 140px;
                background-position: 0% 0%, 50% 20%, 80% 60%, 20% 80%;
                animation: particlesDance 20s linear infinite;
                z-index: 3;
            }

            @keyframes particlesDance {
                0% {
                    background-position: 0% 0%, 50% 20%, 80% 60%, 20% 80%;
                }

                100% {
                    background-position: 150px 150px, 120px 120px, 180px 180px, 140px 140px;
                }
            }

            /* Simplified overlay for depth */
            .process-one__bg-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(135deg,
                        rgba(248, 250, 252, 0.8) 0%,
                        rgba(241, 245, 249, 0.6) 50%,
                        rgba(226, 232, 240, 0.8) 100%);
                z-index: 4;
            }

            @keyframes overlayShimmer {
                0% {
                    opacity: 0.7;
                }

                50% {
                    opacity: 0.9;
                }

                100% {
                    opacity: 0.8;
                }
            }

            /* Ensure content is above all backgrounds */
            .process-one .container {
                position: relative;
                z-index: 10;
            }

            /* Enhanced title styling */
            .process-one .section-title {
                position: relative;
            }

            .process-one .section-title::before {
                content: '';
                position: absolute;
                top: -40px;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 4px;
                background: var(--judges-base);
                border-radius: 2px;
                animation: titlePulse 3s ease-in-out infinite;
            }

            @keyframes titlePulse {

                0%,
                100% {
                    opacity: 0.8;
                    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
                }

                50% {
                    opacity: 1;
                    box-shadow: 0 0 20px rgba(59, 130, 246, 0.7);
                }
            }

            /* Enhanced text styling for better contrast */
            .process-one .section-title__title {
                color: rgb(34, 34, 34);
                text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                position: relative;
                z-index: 10;
            }

            .process-one .section-title__text {
                color: #475569;
                text-shadow: none;
                position: relative;
                z-index: 10;
            }

            /* Enhanced process cards */
            .process-one .process-one__single {
                background: rgba(255, 255, 255, 0.95);
                border-radius: 20px;
                padding: 30px 20px;
                text-align: center;
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
                transition: all 0.4s ease;
                backdrop-filter: blur(10px);
                border: 2px solid rgba(255, 255, 255, 0.2);
                position: relative;
                z-index: 10;
            }

            .process-one .process-one__single:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 32px rgba(2, 7, 14, 0.2);
                border-color: var(--judges-base);
                background: rgba(255, 255, 255, 0.98);
            }

            .process-one .process-one__icon {
                margin-bottom: 20px !important;
                transition: all 0.3s ease;
            }

            .process-one .process-one__single:hover .process-one__icon {
                transform: scale(1.05);
            }

            .process-one .process-one__single:hover .process-one__icon i {
                color: white !important;
            }

            .process-one .process-one__title {
                color: rgb(34, 34, 34);
                font-weight: 700;
                margin-bottom: 15px;
                transition: color 0.3s ease;
            }

            .process-one .process-one__single:hover .process-one__title {
                color: rgb(34, 34, 34);
            }

            .process-one .process-one__text {
                color: #4b5563;
                line-height: 1.6;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .process-one {
                    min-height: 600px;
                    padding: 80px 0;
                }

                .process-one__bg-blueprints {
                    background-size: 400px 400px, 300px 300px;
                }

                .process-one__bg-tools {
                    background-size: 250px 250px, 200px 200px;
                }

                .process-one .process-one__single {
                    padding: 25px 15px;
                }
            }
        </style>

        <div class="container">
            <div class="section-title text-center sec-title-animation animation-style1">
                <div class="section-title__tagline-box">
                    <div class="section-title__tagline-shape"></div>
                </div>
                <h2 class="section-title__title title-animation">Bagaimana
                    <span>Tahapan</span> Membangun Rumah?
                </h2>
                <p class="section-title__text">Ikuti panduan lengkap untuk membangun rumah impian anda dengan tepat</p>
            </div>
            <div class="process-one__inner">
                <ul class="list-unstyled row">
                    <!--Process Two Single Start -->
                    <li class="col-xl-3 col-lg-6 col-md-6 wow fadeInLeft" data-wow-delay="100ms">
                        <div class="process-one__single">
                            <div class="process-one__icon-box" style="position:relative;">
                                <div class="process-one__count">01</div>
                                <div class="process-one__icon"
                                    style="width:80px;height:80px;border-radius:50%;border:2px solid var(--judges-base);background:rgba(34,193,214,0.07);display:flex;align-items:center;justify-content:center;margin:0 auto 12px auto;">
                                    <i class="fas fa-drafting-compass" style="font-size:2.6rem;color:var(--judges-base);"></i>
                                </div>
                            </div>
                            <h3 class="process-one__title">Perencanaan</h3>
                            <p class="process-one__text">Desain rumah, anggaran, dan perizinan</p>
                        </div>
                    </li>
                    <!--Process Two Single End -->
                    <!--Process Two Single Start -->
                    <li class="col-xl-3 col-lg-6 col-md-6 wow fadeInRight" data-wow-delay="100ms">
                        <div class="process-one__single">
                            <div class="process-one__icon-box" style="position:relative;">
                                <div class="process-one__count">02</div>
                                <div class="process-one__icon"
                                    style="width:80px;height:80px;border-radius:50%;border:2px solid var(--judges-base);background:rgba(34,193,214,0.07);display:flex;align-items:center;justify-content:center;margin:0 auto 12px auto;">
                                    <i class="fas fa-hard-hat" style="font-size:2.6rem;color:var(--judges-base);"></i>
                                </div>
                            </div>
                            <h3 class="process-one__title">Konstruksi</h3>
                            <p class="process-one__text">Pemilihan material, tukang, dan pelaksanaan</p>
                        </div>
                    </li>
                    <!--Process Two Single End -->
                    <!--Process Two Single Start -->
                    <li class="col-xl-3 col-lg-6 col-md-6 wow fadeInLeft" data-wow-delay="100ms">
                        <div class="process-one__single">
                            <div class="process-one__icon-box" style="position:relative;">
                                <div class="process-one__count">03</div>
                                <div class="process-one__icon"
                                    style="width:80px;height:80px;border-radius:50%;border:2px solid var(--judges-base);background:rgba(34,193,214,0.07);display:flex;align-items:center;justify-content:center;margin:0 auto 12px auto;">
                                    <i class="fas fa-user-check" style="font-size:2.6rem;color:var(--judges-base);"></i>
                                </div>
                            </div>
                            <h3 class="process-one__title">Pengawasan</h3>
                            <p class="process-one__text">Kontrol kualitas dan progres pembangunan</p>
                        </div>
                    </li>
                    <!--Process Two Single End -->
                    <!--Process Two Single Start -->
                    <li class="col-xl-3 col-lg-6 col-md-6 wow fadeInRight" data-wow-delay="100ms">
                        <div class="process-one__single">
                            <div class="process-one__icon-box" style="position:relative;">
                                <div class="process-one__count">04</div>
                                <div class="process-one__icon"
                                    style="width:80px;height:80px;border-radius:50%;border:2px solid var(--judges-base);background:rgba(34,193,214,0.07);display:flex;align-items:center;justify-content:center;margin:0 auto 12px auto;">
                                    <i class="fas fa-home" style="font-size:2.6rem;color:var(--judges-base);"></i>
                                </div>
                            </div>
                            <h3 class="process-one__title">Pemanfaatan</h3>
                            <p class="process-one__text">Penggunaan dan pemeliharaan rumah</p>
                        </div>
                    </li>
                    <!--Process Two Single End -->
                </ul>
            </div>
        </div>
    </section>
    <!--Process One End -->

    <!--Team One Start -->
    <section class="team-one">
        <!-- Dynamic Architectural Background -->
        <!-- <div class="team-one__bg-cityscape"></div> -->
        <!-- <div class="team-one__bg-buildings"></div> -->
        <!-- <div class="team-one__bg-clouds"></div> -->
        <div class="team-one__bg-particles"></div>
        <!-- <div class="team-one__bg-gradient-overlay"></div> -->

        <style>
            /* light */
            html[data-theme="light"] .team-one {
                background: linear-gradient(135deg, #abadafff 0%, #a6a8aaff 25%, #71858fff 50%, #556268ff 75%, #969899ff 100%) !important;
            }

            /* Professional government-style background for Bank Desain section */
            .team-one {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
                padding: 100px 0;
                min-height: 600px;
            }

            /* Professional geometric pattern overlay */
            .team-one__bg-cityscape {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="%23334155" stroke-width="0.5" opacity="0.3"/></pattern><pattern id="hexagon" width="60" height="52" patternUnits="userSpaceOnUse"><polygon points="30,4 52,17 52,35 30,48 8,35 8,17" fill="none" stroke="%23475569" stroke-width="0.8" opacity="0.15"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/><rect width="100%" height="100%" fill="url(%23hexagon)"/></svg>');
                background-size: 120px 120px, 180px 156px;
                background-position: 0 0, 60px 78px;
                animation: patternShift 20s linear infinite;
                z-index: 1;
            }

            @keyframes patternShift {
                0% {
                    background-position: 0 0, 60px 78px;
                }
                100% {
                    background-position: 120px 120px, 180px 234px;
                }
            }

            /* Elegant architectural elements */
            .team-one__bg-buildings {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs><linearGradient id="buildingGrad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23475569;stop-opacity:0.1"/><stop offset="100%" style="stop-color:%23334155;stop-opacity:0.2"/></linearGradient><linearGradient id="buildingGrad2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2364748b;stop-opacity:0.08"/><stop offset="100%" style="stop-color:%23475569;stop-opacity:0.15"/></linearGradient></defs><g><rect x="50" y="200" width="80" height="300" fill="url(%23buildingGrad1)" rx="4"/><rect x="58" y="220" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="78" y="220" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="98" y="220" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="58" y="240" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="78" y="240" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="98" y="240" width="12" height="8" fill="%23cbd5e1" opacity="0.3"/><rect x="200" y="150" width="120" height="350" fill="url(%23buildingGrad2)" rx="6"/><rect x="215" y="180" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="240" y="180" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="265" y="180" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="290" y="180" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="215" y="210" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="240" y="210" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="265" y="210" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="290" y="210" width="15" height="12" fill="%23cbd5e1" opacity="0.25"/><rect x="400" y="180" width="100" height="320" fill="url(%23buildingGrad1)" rx="5"/><rect x="415" y="210" width="14" height="10" fill="%23cbd5e1" opacity="0.3"/><rect x="435" y="210" width="14" height="10" fill="%23cbd5e1" opacity="0.3"/><rect x="455" y="210" width="14" height="10" fill="%23cbd5e1" opacity="0.3"/><rect x="475" y="210" width="14" height="10" fill="%23cbd5e1" opacity="0.3"/></g></svg>'),
                    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400"><defs><linearGradient id="building3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23374151;stop-opacity:0.12"/><stop offset="100%" style="stop-color:%232d3748;stop-opacity:0.18"/></linearGradient></defs><rect x="80" y="120" width="90" height="280" fill="url(%23building3)" rx="8"/><rect x="95" y="150" width="16" height="12" fill="%23e2e8f0" opacity="0.2"/><rect x="120" y="150" width="16" height="12" fill="%23e2e8f0" opacity="0.2"/><rect x="145" y="150" width="16" height="12" fill="%23e2e8f0" opacity="0.2"/></svg>');
                background-size: 1000px 600px, 800px 400px;
                background-position: 10% 30%, 70% 40%;
                background-repeat: no-repeat;
                animation: buildingElevation 15s ease-in-out infinite alternate;
                z-index: 2;
            }

            @keyframes buildingElevation {
                0% {
                    transform: translateY(0) scale(1);
                    opacity: 0.6;
                }
                100% {
                    transform: translateY(-8px) scale(1.02);
                    opacity: 0.8;
                }
            }

            /* Professional light rays effect */
            .team-one__bg-clouds {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    linear-gradient(45deg, transparent 40%, rgba(203, 213, 225, 0.05) 50%, transparent 60%),
                    linear-gradient(135deg, transparent 35%, rgba(148, 163, 184, 0.08) 50%, transparent 65%),
                    linear-gradient(-45deg, transparent 45%, rgba(226, 232, 240, 0.04) 50%, transparent 55%);
                background-size: 200px 400px, 300px 500px, 250px 350px;
                background-position: 0% 0%, 50% 50%, 100% 0%;
                background-repeat: no-repeat;
                animation: lightRays 12s ease-in-out infinite;
                z-index: 1;
            }

            @keyframes lightRays {
                0%, 100% {
                    background-position: 0% 0%, 50% 50%, 100% 0%;
                    opacity: 0.3;
                }
                50% {
                    background-position: 20% 20%, 30% 30%, 80% 20%;
                    opacity: 0.6;
                }
            }

            /* Sophisticated particle system */
            .team-one__bg-particles {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-image:
                    radial-gradient(circle at 15% 25%, rgba(203, 213, 225, 0.4) 1px, transparent 1px),
                    radial-gradient(circle at 65% 75%, rgba(148, 163, 184, 0.3) 1.5px, transparent 1.5px),
                    radial-gradient(circle at 85% 15%, rgba(226, 232, 240, 0.35) 1px, transparent 1px),
                    radial-gradient(circle at 35% 85%, rgba(203, 213, 225, 0.25) 2px, transparent 2px),
                    radial-gradient(circle at 75% 45%, rgba(148, 163, 184, 0.4) 1px, transparent 1px),
                    radial-gradient(circle at 25% 55%, rgba(226, 232, 240, 0.3) 1.5px, transparent 1.5px);
                background-size: 250px 250px, 300px 300px, 200px 200px, 350px 350px, 280px 280px, 220px 220px;
                background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 0%, 0% 50%;
                animation: professionalParticles 25s linear infinite;
                z-index: 3;
            }

            @keyframes professionalParticles {
                0% {
                    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 50% 0%, 0% 50%;
                }
                100% {
                    background-position: 250px 250px, 200px 300px, 200px -200px, 650px 450px, 330px 280px, 220px 270px;
                }
            }

            /* Elegant gradient overlay with government colors */
            .team-one__bg-gradient-overlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: 
                    radial-gradient(circle at 20% 20%, rgba(30, 64, 175, 0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
                    linear-gradient(135deg,
                        rgba(15, 23, 42, 0.15) 0%,
                        rgba(30, 41, 59, 0.1) 25%,
                        rgba(51, 65, 85, 0.05) 50%,
                        rgba(71, 85, 105, 0.1) 75%,
                        rgba(100, 116, 139, 0.15) 100%);
                animation: professionalGradient 18s ease-in-out infinite alternate;
                z-index: 4;
            }

            @keyframes professionalGradient {
                0% {
                    opacity: 0.7;
                }
                33% {
                    opacity: 0.5;
                }
                66% {
                    opacity: 0.8;
                }
                100% {
                    opacity: 0.6;
                }
            }

            /* Government seal watermark */
            /* .team-one::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 300px;
                height: 300px;
                background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="95" fill="none" stroke="%23334155" stroke-width="2" opacity="0.08"/><circle cx="100" cy="100" r="75" fill="none" stroke="%23475569" stroke-width="1.5" opacity="0.1"/><circle cx="100" cy="100" r="55" fill="none" stroke="%23334155" stroke-width="1" opacity="0.12"/><text x="100" y="105" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="%23475569" opacity="0.15">REPUBLIK</text><text x="100" y="120" font-family="Arial, sans-serif" font-size="12" font-weight="bold" text-anchor="middle" fill="%23475569" opacity="0.15">INDONESIA</text></svg>');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                animation: sealRotate 60s linear infinite;
                pointer-events: none;
                z-index: 1;
            } */

            @keyframes sealRotate {
                0% { transform: translate(-50%, -50%) rotate(0deg); }
                100% { transform: translate(-50%, -50%) rotate(360deg); }
            }

            /* Ensure content is above all backgrounds */
            .team-one .container {
                position: relative;
                z-index: 10;
            }

            /* Professional title styling */
            .team-one .section-title {
                position: relative;
            }

            .team-one .section-title::before {
                content: '';
                position: absolute;
                top: -50px;
                left: 0;
                width: 120px;
                height: 4px;
                background: linear-gradient(90deg, #1e40af, #3b82f6, #1e40af);
                border-radius: 2px;
                animation: professionalTitleGlow 4s ease-in-out infinite;
                box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
            }

            @keyframes professionalTitleGlow {
                0%, 100% {
                    opacity: 0.8;
                    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
                }
                50% {
                    opacity: 1;
                    box-shadow: 0 4px 16px rgba(30, 64, 175, 0.5);
                }
            }

            /* Enhanced text styling for government website */
            .team-one .section-title__title {
                color: #ffffff;
                text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
                position: relative;
                z-index: 10;
                font-weight: 700;
            }

            .team-one .section-title__title span {
                color: var(--judges-base);
                font-weight: 800;
            }

            .team-one .section-title__text {
                color: #e2e8f0;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                position: relative;
                z-index: 10;
                font-weight: 500;
            }

            /* Professional corner accents */
            .team-one::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
                background: linear-gradient(45deg, rgba(30, 64, 175, 0.1) 0%, transparent 70%);
                z-index: 1;
            }

            /* Bottom corner accent */
            .team-one .container::after {
                content: '';
                position: absolute;
                bottom: -50px;
                right: -50px;
                width: 150px;
                height: 150px;
                background: linear-gradient(-135deg, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
                border-radius: 50%;
                z-index: 1;
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .team-one {
                    min-height: 500px;
                    padding: 60px 0;
                }

                .team-one::after {
                    width: 200px;
                    height: 200px;
                }

                .team-one__bg-buildings {
                    background-size: 800px 480px, 640px 320px;
                }

                .team-one .section-title::before {
                    width: 80px;
                    height: 3px;
                    top: -40px;
                }
            }
        </style>

        <div class="container">
            <div class="section-title text-left sec-title-animation animation-style2">
                <div class="section-title__tagline-box">
                    <div class="section-title__tagline-shape"></div>
                </div>
                <h2 class="section-title__title title-animation">Bank
                    <span>Desain</span> Terbaru
                </h2>
                <p class="section-title__text">Temukan berbagai desain rumah yang sesuai dengan kebutuhan dan budget anda
                </p>

                <!-- Filter Chips (Semua Tipe | Semua Luas | Jumlah Kamar) -->
                <!-- <div class="filter-chips">
                    <button type="button" class="chip">Semua Tipe</button>
                    <button type="button" class="chip">Semua Luas</button>
                    <button type="button" class="chip">Jumlah Kamar</button>
                </div> -->

                <style>
                    /* Scoped styles for the filter chips within the team-one section */
                    .team-one .filter-chips {
                        display: flex;
                        gap: 18px;
                        flex-wrap: wrap;
                        justify-content: center;
                        margin-top: 18px;
                    }

                    .team-one .filter-chips .chip {
                        /* Enhanced visibility on blue background */
                        color: #1e40af;
                        background: rgba(255, 255, 255, 0.95);
                        border: 2px solid rgba(255, 255, 255, 0.8);
                        border-radius: 12px;
                        padding: 12px 20px;
                        line-height: 1;
                        font-weight: 700;
                        cursor: pointer;
                        transition: all 0.3s ease;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                        backdrop-filter: blur(10px);
                    }

                    .team-one .filter-chips .chip:hover {
                        background: #ffffff;
                        color: #1d4ed8;
                        border-color: #dbeafe;
                        transform: translateY(-2px);
                        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
                    }

                    /* blue-400 */
                    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
                    }

                    @media (max-width: 575.98px) {
                        .team-one .filter-chips {
                            gap: 12px;
                        }

                        .team-one .filter-chips .chip {
                            padding: 9px 14px;
                        }
                    }
                </style>
            </div>
            <!-- Scoped styles for Design Cards -->
            <style>
                html[data-theme="dark"] .team-one .design-card {
                    background: #1e293b;
                    border: 1px solid var(--judges-base);
                }

                html[data-theme="dark"] .team-one .design-card__body {
                    background: #1e293b;
                }

                html[data-theme="dark"] .team-one .design-card__title {
                    color: #f1f5f9;
                }

                .team-one .design-card {
                    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
                    border-radius: 16px;
                    overflow: hidden;
                    box-shadow: 
                        0 8px 25px rgba(15, 23, 42, 0.1),
                        0 3px 10px rgba(15, 23, 42, 0.05),
                        inset 0 1px 0 rgba(255, 255, 255, 0.8);
                    transition: all 0.3s ease;
                    position: relative;
                    border: 1px solid rgba(226, 232, 240, 0.8);
                    transform: translateY(0);
                    opacity: 1;
                }

                /* .team-one .design-card::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    height: 3px;
                    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
                    border-radius: 16px 16px 0 0;
                    z-index: 1;
                    opacity: 0.9;
                } */

                .team-one .design-card:hover {
                    transform: translateY(-6px) scale(1.02);
                    box-shadow: 
                        0 15px 35px rgba(15, 23, 42, 0.15),
                        0 8px 15px rgba(30, 64, 175, 0.1),
                        0 0 0 1px rgba(59, 130, 246, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 1);
                    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
                }

                /* .team-one .design-card:hover::before {
                    opacity: 1;
                    background: linear-gradient(90deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
                } */

                .team-one .design-card__media {
                    position: relative;
                    height: 240px;
                    overflow: hidden;
                    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
                    border-radius: 12px 12px 0 0;
                    margin: 6px 6px 0 6px;
                    border: 1px solid rgba(226, 232, 240, 0.5);
                }

                .team-one .design-card__media::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
                    pointer-events: none;
                    border-radius: 12px;
                    transition: all 0.3s ease;
                }

                .team-one .design-card:hover .design-card__media::after {
                    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%);
                }

                .team-one .design-card__media img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: all 0.3s ease;
                    filter: brightness(0.98) contrast(1.02);
                    border-radius: 12px;
                }

                .team-one .design-card:hover .design-card__media img {
                    transform: scale(1.05);
                    filter: brightness(1.02) contrast(1.05);
                }

                /* Badge overlay on image */
                .team-one .design-card__badge {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background: var(--judges-base);
                    color: #ffffff;
                    padding: 6px 12px;
                    font-size: 14px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    z-index: 10;
                    box-shadow: 0 3px 8px rgba(30, 64, 175, 0.3);
                    border-radius: 8px;
                    transition: all 0.2s ease;
                }

                .team-one .design-card:hover .design-card__badge {
                    background: var(--judges-base);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px var(--judges-base-rgb);
                }

                /* Simple floating element */
                /* .team-one .design-card__media::before {
                    content: '';
                    position: absolute;
                    top: 12px;
                    left: 12px;
                    width: 40px;
                    height: 40px;
                    background: rgba(255, 255, 255, 0.9);
                    border: 1px solid rgba(30, 64, 175, 0.2);
                    border-radius: 50%;
                    z-index: 5;
                    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
                    opacity: 0.7;
                    transition: all 0.2s ease;
                } */

                /* .team-one .design-card:hover .design-card__media::before {
                    opacity: 1;
                    transform: scale(1.1);
                    border-color: rgba(59, 130, 246, 0.3);
                    background: rgba(255, 255, 255, 1);
                } */

                .team-one .design-card__body {
                    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
                    padding: 20px 16px 16px 16px;
                    position: relative;
                    border-radius: 0 0 16px 16px;
                    margin: 0 6px 6px 6px;
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
                }

                .team-one .design-card__body::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 16px;
                    right: 16px;
                    height: 1px;
                    background: linear-gradient(90deg, 
                        transparent 0%, 
                        rgba(30, 64, 175, 0.15) 50%, 
                        transparent 100%);
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }

                .team-one .design-card:hover .design-card__body::before {
                    opacity: 1;
                }

                .team-one .design-card__title {
                    color: #0f172a;
                    font-size: 17px;
                    font-weight: 700;
                    margin: 0 0 10px 0;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    min-height: 30px;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    transition: all 0.2s ease;
                }

                .team-one .design-card:hover .design-card__title {
                    color: var(--judges-base);
                    letter-spacing: 0.8px;
                }

                .team-one .design-card__meta {
                    color: #64748b;
                    margin: 0 0 16px 0;
                    font-weight: 500;
                    font-size: 13px;
                    line-height: 1.5;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    height: 100px;
                    overflow: hidden;
                    min-height: 39px;
                    padding: 8px 10px;
                    background: rgba(100, 116, 139, 0.05);
                    border-radius: 6px;
                    border-left: 3px solid transparent;
                    transition: all 0.2s ease;
                }

                .team-one .design-card:hover .design-card__meta {
                    color: #475569;
                    background: rgba(59, 130, 246, 0.08);
                    border-left-color: var(--judges-base);
                }

                .team-one .design-card__stats {
                    display: none;
                }

                .team-one .design-card__stat {
                    display: none;
                }

                .team-one .design-card__stat i {
                    display: none;
                }

                .team-one .design-card__actions {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 10px;
                }

                .team-one .btn-download {
                    flex: 1;
                    background: var(--judges-base);
                    color: #ffffff;
                    border: none;
                    border-radius: 8px;
                    padding: 10px 16px;
                    font-weight: 700;
                    font-size: 11px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    transition: all 0.2s ease;
                    text-decoration: none;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    box-shadow: 0 3px 8px var(--judges-base-rgb);
                    position: relative;
                    overflow: hidden;
                }

                .team-one .btn-download::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: -100%;
                    width: 100%;
                    height: 100%;
                    background: rgba(255, 255, 255, 0.2);
                    transition: left 0.3s ease;
                }

                .team-one .btn-download:hover::before {
                    left: 100%;
                }

                .team-one .btn-download:hover {
                    background: var(--judges-base);
                    transform: translateY(-2px);
                    box-shadow: 0 6px 15px var(--judges-base-rgb);
                }

                .team-one .btn-download i {
                    font-size: 12px;
                    position: relative;
                    z-index: 2;
                }

                .team-one .btn-download span {
                    position: relative;
                    z-index: 2;
                }

                .team-one .btn-download.disabled {
                    background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
                    cursor: not-allowed;
                    opacity: 0.6;
                    box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2);
                }

                .team-one .btn-download.disabled:hover {
                    transform: none;
                    box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2);
                }

                .team-one .btn-video {
                    width: 44px;
                    height: 44px;
                    border: 2px solid #dc2626;
                    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
                    color: #ffffff;
                    border-radius: 8px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    transition: all 0.2s ease;
                    text-decoration: none;
                    flex-shrink: 0;
                    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
                }

                .team-one .btn-video:hover {
                    background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
                    transform: translateY(-2px) scale(1.05);
                    box-shadow: 0 6px 15px rgba(220, 38, 38, 0.4);
                    border-color: #b91c1c;
                }

                .team-one .btn-video i {
                    font-size: 16px;
                    position: relative;
                    z-index: 2;
                }

                /* Placeholder style */
                .team-one .design-card__placeholder {
                    width: 100%;
                    height: 240px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(135deg, var(--judges-base) 0%,  var(--judges-base) 100%);
                    color: #ffffff;
                    font-weight: 700;
                    font-size: 14px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    border-radius: 12px;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                }

                /* Enhanced card stability - no problematic animations */
                .team-one .design-card {
                    opacity: 1;
                    transform: translateY(0) scale(1);
                    animation: none;
                }

                /* responsive tweak: reduce padding on small screens */
                @media (max-width: 575.98px) {
                    .team-one .design-card__media {
                        height: 200px;
                        margin: 4px 4px 0 4px;
                        border-radius: 10px 10px 0 0;
                    }

                    .team-one .design-card__body {
                        padding: 16px 12px 12px 12px;
                        margin: 0 4px 4px 4px;
                        border-radius: 0 0 12px 12px;
                    }

                    .team-one .design-card__title {
                        font-size: 15px;
                        min-height: 40px;
                    }

                    .team-one .design-card__meta {
                        font-size: 12px;
                        min-height: 36px;
                        padding: 6px 8px;
                    }

                    .team-one .btn-download {
                        padding: 8px 12px;
                        font-size: 10px;
                        border-radius: 6px;
                    }

                    .team-one .btn-video {
                        width: 40px;
                        height: 40px;
                        border-radius: 6px;
                    }

                    .team-one .design-card__placeholder {
                        height: 200px;
                        font-size: 12px;
                        border-radius: 10px;
                    }

                    .team-one .design-card {
                        border-radius: 12px;
                    }

                    .team-one .design-card__media::before {
                        width: 35px;
                        height: 35px;
                        top: 10px;
                        left: 10px;
                    }

                    .team-one .design-card__badge {
                        top: 8px;
                        right: 8px;
                        padding: 4px 8px;
                        font-size: 9px;
                        border-radius: 6px;
                    }
                }
            </style>

            <style>
                /* Fix: ensure team-one carousel shows left arrow correctly (bank desain) */
                .team-one .owl-nav .owl-prev span,
                .team-one__carousel .owl-nav .owl-prev span {
                    display: inline-block;
                    transform: scaleX(-1);
                }
            </style>

            <div class="team-one__carousel owl-theme owl-carousel">
                <!-- House designs will be dynamically loaded here -->
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const baseUrl = "{{ env('BASE_URL') }}";
                    const slug = "{{ env('DAERAH') }}";
                    const apiUrl = `${baseUrl}/api/public/sites/${slug}`;

                    fetch(apiUrl)
                        .then(res => res.json())
                        .then(data => {
                            const houseDesigns = (data && data.local && Array.isArray(data.local.houseDesigns)) ?
                                data.local.houseDesigns : [];

                            // Get video list from the same API response
                            const videoList = (data && data.local && Array.isArray(data.local.videos)) ?
                                data.local.videos : [];

                            // console.log('Videos from API:', videoList.length);
                            // console.log('House Designs:', houseDesigns.length);

                            const carousel = document.querySelector('.team-one__carousel');

                            if (!carousel) return; // Clear existing content
                            carousel.innerHTML = '';

                            if (houseDesigns.length === 0) {
                                // Jika tidak ada data, tampilkan placeholder
                                const defaultDesign = document.createElement('div');
                                defaultDesign.className = 'item';
                                defaultDesign.innerHTML = `
                                    <div class="design-card">
                                        <div class="design-card__media">
                                            <div class="design-card__placeholder">Belum Ada Desain</div>
                                        </div>
                                        <div class="design-card__body">
                                            <h3 class="design-card__title">Belum Ada Data Desain Rumah</h3>
                                            <p class="design-card__meta">Silakan tambahkan desain rumah melalui admin panel</p>
                                        </div>
                                    </div>
                                `;
                                carousel.appendChild(defaultDesign);
                                
                                // Add floating animation to placeholder
                                setTimeout(() => {
                                    // Remove problematic animation
                                    // defaultDesign.querySelector('.design-card').classList.add('in-view');
                                }, 500);
                                return;
                            }

                            // Generate up to 10 latest house design cards (duplicate if fewer than 10)
                            function parseTimestamp(item) {
                                const t = item.created_at || item.updated_at || item.id || 0;
                                if (typeof t === 'string' && !isNaN(Date.parse(t))) return Date.parse(t);
                                if (!isNaN(Number(t))) return Number(t);
                                return 0;
                            }

                            const sorted = houseDesigns.slice().sort((a, b) => parseTimestamp(b) - parseTimestamp(a));
                            let latest = sorted.slice(0, 10);

                            // If there are fewer than 10 items, repeat from the latest to reach 10
                            if (latest.length > 0 && latest.length < 10) {
                                let i = 0;
                                while (latest.length < 10) {
                                    latest.push(Object.assign({}, latest[i % latest.length]));
                                    i++;
                                }
                            }

                            latest.forEach((design, index) => {
                                const card = document.createElement('div');
                                card.className = 'item';

                                // Prepare image URL
                                const imageUrl = design.path_image ?
                                    (design.path_image.startsWith('http') ?
                                        design.path_image :
                                        `${baseUrl}/${design.path_image}`) :
                                    'https://placehold.co/600x400?text=No+Image&font=roboto';

                                // Prepare file URL for download
                                const fileUrl = design.path_file ?
                                    (design.path_file.startsWith('http') ?
                                        design.path_file :
                                        `${baseUrl}/${design.path_file}`) :
                                    '';

                                // Video URL - Handle both direct video object and video_id reference
                                let videoUrl = '';
                                if (design.video && design.video.link_video) {
                                    videoUrl = design.video.link_video;
                                } else if (design.video && design.video.link) {
                                    videoUrl = design.video.link;
                                } else if (design.video_id && videoList.length > 0) {
                                    const foundVideo = videoList.find(v =>
                                        v.id == design.video_id ||
                                        v.id === String(design.video_id) ||
                                        v.id === Number(design.video_id)
                                    );
                                    if (foundVideo) {
                                        videoUrl = foundVideo.link_video || foundVideo.link || '';
                                    }
                                }

                                // Category name
                                const categoryName = (design.category && design.category.name) ?
                                    design.category.name :
                                    '';

                                // Bersihkan deskripsi dari tag HTML jika ada (misal dari rich text editor)
                                const rawDesc = design.description || '';
                                const cleanDesc = rawDesc.replace(/<[^>]*>?/gm, ''); // Hapus tag HTML
                                const finalDesc = cleanDesc ? 
                                    (cleanDesc.length > 100 ? cleanDesc.substring(0, 100) + '...' : cleanDesc) : 
                                    'Tidak ada deskripsi singkat.';

                                card.innerHTML = `
                                    <div class="design-card">
                                        <div class="design-card__media">
                                            ${categoryName ? `<div class="design-card__badge">${categoryName}</div>` : ''}
                                            ${imageUrl 
                                                ? `<img src="${imageUrl}" alt="${design.title}">` 
                                                : '<div class="design-card__placeholder">No Image</div>'}
                                        </div>
                                        <div class="design-card__body">
                                            <h3 class="design-card__title">${design.title || 'Tanpa Judul'}</h3>
                                            <p class="design-card__meta">${finalDesc}</p>
                                            <div class="design-card__stats">
                                                <div class="design-card__stat">
                                                    <i class="fas fa-eye"></i>
                                                    <span>123</span>
                                                </div>
                                            </div>
                                            <div class="design-card__actions">
                                                ${fileUrl 
                                                    ? `<a href="${fileUrl}" target="_blank" class="btn-download" title="Download File" download>
                                                        <i class="fas fa-download"></i> <span>Download</span>
                                                    </a>` 
                                                    : '<a href="#" class="btn-download disabled" onclick="return false;"><i class="fas fa-download"></i> <span>Download</span></a>'}
                                                ${videoUrl 
                                                    ? `<a href="${videoUrl}" target="_blank" class="btn-video" title="Lihat Video">
                                                        <i class="fab fa-youtube"></i>
                                                    </a>` 
                                                    : ''}
                                            </div>
                                        </div>
                                    </div>
                                `;
                                carousel.appendChild(card);
                            });

                            // Reinitialize owl carousel after adding items
                            if (typeof $.fn.owlCarousel !== 'undefined') {
                                $(carousel).owlCarousel('destroy');
                                $(carousel).owlCarousel({
                                    loop: true,
                                    margin: 30,
                                    nav: true,
                                    dots: false,
                                    autoplay: false,
                                    responsive: {
                                        0: {
                                            items: 1
                                        },
                                        600: {
                                            items: 2
                                        },
                                        1000: {
                                            items: 3
                                        }
                                    },
                                    navText: ['<span class="fas fa-angle-left"></span>',
                                        '<span class="fas fa-angle-right"></span>'
                                    ]
                                });

                                // Add stable hover effects without problematic animations
                                setTimeout(() => {
                                    const cards = carousel.querySelectorAll('.design-card');
                                    // Remove problematic floating animation
                                    // cards.forEach((card, index) => {
                                    //     setTimeout(() => {
                                    //         card.classList.add('in-view');
                                    //     }, index * 200);
                                    // });
                                }, 800);
                            }

                            // Add hover effects for enhanced interaction
                            const cards = carousel.querySelectorAll('.design-card');
                            cards.forEach(card => {
                                card.addEventListener('mouseenter', function() {
                                    this.style.zIndex = '20';
                                });

                                card.addEventListener('mouseleave', function() {
                                    this.style.zIndex = '1';
                                });

                                // Add click ripple effect
                                const buttons = card.querySelectorAll('.btn-download, .btn-video');
                                buttons.forEach(button => {
                                    button.addEventListener('click', function(e) {
                                        if (!this.classList.contains('disabled')) {
                                            const ripple = document.createElement('span');
                                            ripple.classList.add('ripple');
                                            this.appendChild(ripple);

                                            const rect = this.getBoundingClientRect();
                                            const size = Math.max(rect.width, rect.height);
                                            const x = e.clientX - rect.left - size / 2;
                                            const y = e.clientY - rect.top - size / 2;

                                            ripple.style.width = ripple.style.height = size + 'px';
                                            ripple.style.left = x + 'px';
                                            ripple.style.top = y + 'px';
                                            ripple.style.position = 'absolute';
                                            ripple.style.borderRadius = '50%';
                                            ripple.style.background = 'rgba(255, 255, 255, 0.6)';
                                            ripple.style.pointerEvents = 'none';
                                            ripple.style.transform = 'scale(0)';
                                            ripple.style.animation = 'ripple 0.6s linear';

                                            setTimeout(() => {
                                                ripple.remove();
                                            }, 600);
                                        }
                                    });
                                });
                            });

                            // Add CSS for ripple animation
                            if (!document.querySelector('#ripple-styles')) {
                                const style = document.createElement('style');
                                style.id = 'ripple-styles';
                                style.innerHTML = `
                                    @keyframes ripple {
                                        to {
                                            transform: scale(2);
                                            opacity: 0;
                                        }
                                    }
                                    .btn-download, .btn-video {
                                        position: relative;
                                        overflow: hidden;
                                    }
                                `;
                                document.head.appendChild(style);
                            }
                        })
                        .catch(err => {
                            console.error('Error loading house designs:', err);
                        });
                });
            </script>
        </div>
    </section>
    <!--Team One End -->


    <!-- Floating WhatsApp button (uses site phone from API when available) -->
    <div id="pkp-whatsapp-float" data-fixed="left" style="position:fixed; left:26px; bottom:112px; right:auto; top:auto; z-index:9999;">
        <a id="pkp-whatsapp-link" href="https://wa.me/6282137191145" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" style="display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.2); font-size:22px; text-decoration:none;">
            <i class="fab fa-whatsapp" aria-hidden="true"></i>
        </a>
    </div>

    <script>
        (function() {
            function normalizePhone(v) {
                if (!v) return '';
                var s = String(v).trim();
                // remove non-digits
                var digits = s.replace(/\D/g, '');
                if (!digits) return '';
                // if starts with 0, assume local Indonesian number -> replace with 62
                if (digits.charAt(0) === '0') digits = '62' + digits.slice(1);
                // if already starts with 62 or country code, keep
                return digits;
            }

            function updateWhatsAppLink() {
                try {
                    var link = document.getElementById('pkp-whatsapp-link');
                    if (!link) return;
                    // Prefer window.pkpSitePhone, then window.pkpSiteData fields
                    var phone = '';
                    try { phone = window.pkpSitePhone || ''; } catch(e) { phone = ''; }
                    try {
                        if ((!phone || phone === '') && window.pkpSiteData) {
                            phone = window.pkpSiteData.no_phone || window.pkpSiteData.phone || window.pkpSiteData.phone_number || phone;
                        }
                    } catch(e) {}

                    var p = normalizePhone(phone);
                    if (p) {
                        link.href = 'https://wa.me/' + p;
                        link.setAttribute('title', 'Chat via WhatsApp: +' + p);
                        link.style.display = 'inline-flex';
                    } else {
                        // no phone available — keep default fallback but still show
                        link.href = link.href || 'https://wa.me/6282137191145';
                    }
                } catch (e) { console.warn('updateWhatsAppLink error', e); }
            }

            document.addEventListener('DOMContentLoaded', function(){
                updateWhatsAppLink();
                // update when site data becomes available
                window.addEventListener && window.addEventListener('pkpSiteDataReady', function(){ setTimeout(updateWhatsAppLink, 50); });
                // also try a few delayed attempts for late-loading data
                setTimeout(updateWhatsAppLink, 300);
                setTimeout(updateWhatsAppLink, 1200);
                // adjust position to avoid overlapping with scroll-to-top button
                function adjustWhatsAppPosition() {
                    try {
                        const wa = document.getElementById('pkp-whatsapp-float');
                        const scrollBtn = document.querySelector('.scroll-to-top');
                        if (!wa) return;

                        // If developer requested a fixed-left override, enforce it and skip further positioning
                        try {
                            if (wa.dataset && wa.dataset.fixed === 'left') {
                                wa.style.position = 'fixed';
                                wa.style.setProperty('left', '26px', 'important');
                                wa.style.setProperty('bottom', '112px', 'important');
                                wa.style.setProperty('right', 'auto', 'important');
                                wa.style.setProperty('top', 'auto', 'important');
                                return;
                            }
                        } catch (e) { /* ignore */ }

                        // Defaults
                        const defaultBottom = 100;
                        const defaultRight = 20;

                        // Vertical: keep WA stacked above the scroll button if present
                        if (scrollBtn && scrollBtn.offsetParent !== null) {
                            const cs = window.getComputedStyle(scrollBtn);
                            let scrollBottom = 20;
                            try { scrollBottom = parseFloat(cs.bottom) || scrollBottom; } catch(e) { scrollBottom = 20; }
                            const scrollHeight = scrollBtn.offsetHeight || 56;
                            const gapV = 12; // vertical gap between buttons
                            wa.style.bottom = (scrollBottom + scrollHeight + gapV) + 'px';
                        } else {
                            wa.style.bottom = defaultBottom + 'px';
                        }

                        // If a feedback/chat icon exists on the left, place WA above that icon (top-left area)
                        const chatIcon = document.querySelector('.chat-icon, .chat-toggler');
                        if (chatIcon && chatIcon.offsetParent !== null) {
                            try {
                                // debug log to help verify presence
                                console.log('[pkp] adjustWhatsAppPosition: chatIcon found', chatIcon);
                                wa.style.transition = wa.style.transition || 'left 200ms ease, top 200ms ease, transform 200ms ease';
                                const chatRect = chatIcon.getBoundingClientRect();
                                const waWidth = wa.offsetWidth || 56;
                                const waHeight = wa.offsetHeight || 56;
                                const gapH = 8; // horizontal gap from chat icon
                                const gapV = 8; // vertical gap above chat icon

                                // Align WA horizontally centered over the chat icon
                                let desiredLeft = Math.round(chatRect.left + (chatRect.width / 2) - (waWidth / 2));
                                desiredLeft = Math.max(8, desiredLeft); // keep inside viewport

                                // Place WA above the chat icon
                                let desiredTop = Math.round(chatRect.top - waHeight - gapV);
                                desiredTop = Math.max(8, desiredTop);

                                // Force fixed position and apply important to override other styles
                                wa.style.position = 'fixed';
                                wa.style.setProperty('left', desiredLeft + 'px', 'important');
                                wa.style.setProperty('top', desiredTop + 'px', 'important');
                                wa.style.setProperty('right', 'auto', 'important');
                                wa.style.setProperty('bottom', 'auto', 'important');
                                wa.style.zIndex = 10050;
                            } catch (e) {
                                console.warn('[pkp] adjustWhatsAppPosition: failed to position above chatIcon', e);
                            }
                        } else if (scrollBtn && scrollBtn.offsetParent !== null) {
                            try {
                                // add a smooth transition for position changes so movement feels natural
                                wa.style.transition = wa.style.transition || 'left 200ms ease, right 200ms ease, bottom 200ms ease, transform 200ms ease';

                                const scrollRect = scrollBtn.getBoundingClientRect();
                                const waWidth = wa.offsetWidth || 56;
                                const gapH = 28; // horizontal gap between buttons

                                // compute left position so WA's right edge is gapH pixels to the left of scrollBtn's left edge
                                let desiredLeft = Math.round(scrollRect.left - gapH - waWidth);
                                // don't push off-screen to the left; keep at least 8px from viewport left
                                desiredLeft = Math.max(8, desiredLeft);

                                // apply left positioning and clear right to avoid conflicts
                                wa.style.left = desiredLeft + 'px';
                                wa.style.right = 'auto';
                            } catch (e) {
                                // fallback to default if measurement fails
                                wa.style.right = defaultRight + 'px';
                                wa.style.left = 'auto';
                            }
                        } else {
                            // no scroll button: keep WA anchored to the right
                            wa.style.right = defaultRight + 'px';
                            wa.style.left = 'auto';
                        }
                    } catch (e) { /* ignore */ }
                }

                // run on load and when things change
                setTimeout(adjustWhatsAppPosition, 100);
                setTimeout(adjustWhatsAppPosition, 500);
                window.addEventListener('resize', function() { setTimeout(adjustWhatsAppPosition, 60); });
                // when DOM changes (e.g., sticky header or scroll button inserted), re-run
                try {
                    const bodyObs = new MutationObserver(function() { setTimeout(adjustWhatsAppPosition, 60); });
                    bodyObs.observe(document.body, { childList: true, subtree: true });
                } catch (e) { /* ignore */ }
            });
        })();
    </script>

    <x-footer_one />
@endsection
