    </main>
    <footer class="site-footer">
        <div class="footer-inner">
            <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
        </div>
    </footer>

    <!-- Sticky Bottom Navigation -->
    <nav class="bottom-nav">
        <a href="<?php echo esc_url(get_option('hk_home_url', home_url('/'))); ?>" class="bottom-nav-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#80a5b4" stroke-width="2">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                <polyline points="9 22 9 12 15 12 15 22"/>
            </svg>
            <span>Beranda</span>
        </a>
        <a href="<?php echo esc_url(get_option('hk_proposal_url', home_url('/proposal'))); ?>" class="bottom-nav-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#80a5b4" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
                <polyline points="10 9 9 9 8 9"/>
            </svg>
            <span>Kirim Proposal</span>
        </a>
        <a href="<?php echo esc_url(get_option('hk_appointment_url', home_url('/janji-temu'))); ?>" class="bottom-nav-item">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#80a5b4" stroke-width="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
                <line x1="16" y1="2" x2="16" y2="6"/>
                <line x1="8" y1="2" x2="8" y2="6"/>
                <line x1="3" y1="10" x2="21" y2="10"/>
            </svg>
            <span>Janji Temu</span>
        </a>
    </nav>
</div>
<?php wp_footer(); ?>
<script>
window.addEventListener('load', function() {
    var preloader = document.getElementById('preloader');
    preloader.classList.add('fade-out');
    setTimeout(function() {
        preloader.style.display = 'none';
    }, 500);
});

// Hamburger menu toggle
document.addEventListener('DOMContentLoaded', function() {
    var menuToggle = document.getElementById('hk-menu-toggle');
    var menu = document.getElementById('hk-menu');
    if (menuToggle && menu) {
        menuToggle.addEventListener('click', function() {
            menu.classList.toggle('active');
        });
    }

    // Bottom nav active state
    var currentUrl = window.location.href;
    var bottomNavItems = document.querySelectorAll('.bottom-nav-item');
    bottomNavItems.forEach(function(item) {
        if (item.href === currentUrl || currentUrl.includes(item.href.split('/').pop())) {
            item.classList.add('active');
        }
    });
});

document.addEventListener('DOMContentLoaded', function() {
    const toggle = document.getElementById('hk-logo-toggle');
    const dropdown = document.getElementById('hk-dropdown');

    if (toggle && dropdown) {
        // Toggle the dropdown visibility on logo click
        toggle.addEventListener('click', function(event) {
            dropdown.classList.toggle('active');
            event.stopPropagation(); // Prevent document click from closing it immediately
        });

        // Close the dropdown if the user clicks anywhere else on the document
        document.addEventListener('click', function(event) {
            // Check if the dropdown is open AND the click target is NOT the dropdown AND NOT the toggle button
            if (dropdown.classList.contains('active') && !dropdown.contains(event.target) && event.target !== toggle) {
                dropdown.classList.remove('active');
            }
        });
    }

    // Optional: Hide preloader once content is ready (using 'load' for the body class 'loaded')
    window.addEventListener('load', function() {
        document.body.classList.add('loaded');
    });
});

</script>
</body>
</html>
