<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Akses Tidak Diperbolehkan | Efata Gemilang Jaya</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        * { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }
        body { background-color: #faf7f2; }

        /* Animasi pulse untuk ikon */
        @keyframes softPulse {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        .animate-soft-pulse {
            animation: softPulse 2s infinite ease-in-out;
        }

        /* Animasi float untuk elemen dekoratif */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .animate-float {
            animation: float 6s infinite ease-in-out;
        }

        /* Countdown circle animation */
        .countdown-circle {
            transition: stroke-dashoffset 1s linear;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }

        .progress-ring {
            transition: stroke-dashoffset 1s linear;
        }

        /* Hover effect untuk tombol */
        .btn-home {
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }
        .btn-home:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px -10px rgba(74, 63, 56, 0.3);
        }
        .btn-home::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        .btn-home:hover::after {
            width: 300px;
            height: 300px;
        }

        /* Mobile menu styles (untuk konsistensi, meskipun halaman ini tidak perlu navbar) */
        .mobile-menu {
            transition: all 0.3s ease-in-out;
        }
        .hamburger-line {
            transition: all 0.3s ease;
        }
        .mobile-menu.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .mobile-menu.closed {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
        }
        .glass-nav {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
        }
    </style>
</head>
<body class="text-stone-800 antialiased min-h-screen flex flex-col">

    <!-- NAVBAR (sama dengan halaman lain, untuk konsistensi) -->
    <nav class="glass-nav sticky top-0 z-50 border-b border-white/30 shadow-sm">
        <div class="flex justify-between items-center px-6 md:px-12 py-5">
            <!-- Logo -->
            <div class="flex items-center gap-3 group">
                <div class="w-11 h-11 bg-[#4a3f38] rounded-2xl flex items-center justify-center text-white font-extrabold text-2xl rotate-3 group-hover:rotate-0 transition-transform duration-300 shadow-md">E</div>
                <span class="font-bold text-2xl tracking-tight text-[#4a3f38]">Efata<span class="text-[#828E75]">Gemilang</span></span>
            </div>

            <!-- Desktop Menu (hidden on mobile) -->
            <div class="hidden md:flex gap-10 font-medium text-stone-700">
                <a href="../home/" class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-[#4a3f38] after:transition-all after:duration-300 pb-1">Beranda</a>
                <a href="../about/" class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-[#4a3f38] after:transition-all after:duration-300 pb-1">Tentang</a>
                <a href="../services/" class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-[#4a3f38] after:transition-all after:duration-300 pb-1">Layanan</a>
                <a href="../contact/" class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-[#4a3f38] after:transition-all after:duration-300 pb-1">Kontak</a>
                <a href="../testimony/" class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-[#4a3f38] after:transition-all after:duration-300 pb-1">Testimoni</a>
            </div>

            <!-- Desktop CTA & Mobile Hamburger -->
            <div class="flex items-center gap-4">
                <button class="hidden md:block bg-[#4a3f38] text-white px-6 py-3 rounded-full text-sm font-semibold hover:bg-[#5f534b] transition shadow-lg">Hubungi Kami</button>
                
                <!-- Mobile Hamburger Button -->
                <button id="menuToggle" class="md:hidden w-10 h-10 flex flex-col items-center justify-center gap-1.5 focus:outline-none group">
                    <span class="hamburger-line block w-6 h-0.5 bg-[#4a3f38] transition-all group-hover:w-8"></span>
                    <span class="hamburger-line block w-6 h-0.5 bg-[#4a3f38] transition-all group-hover:w-8"></span>
                    <span class="hamburger-line block w-6 h-0.5 bg-[#4a3f38] transition-all group-hover:w-8"></span>
                </button>
            </div>
        </div>

        <!-- Mobile Menu Dropdown -->
        <div id="mobileMenu" class="mobile-menu closed absolute left-0 right-0 top-full bg-white/95 backdrop-blur-md border-b border-stone-200 shadow-lg md:hidden">
            <div class="flex flex-col px-6 py-8 space-y-5 text-center">
                <a href="../home/" class="text-lg font-medium text-stone-700 hover:text-[#4a3f38] py-2 transition-colors">Beranda</a>
                <a href="../about/" class="text-lg font-medium text-stone-700 hover:text-[#4a3f38] py-2 transition-colors">Tentang</a>
                <a href="../services/" class="text-lg font-medium text-stone-700 hover:text-[#4a3f38] py-2 transition-colors">Layanan</a>
                <a href="../contact/" class="text-lg font-medium text-stone-700 hover:text-[#4a3f38] py-2 transition-colors">Kontak</a>
                <a href="../testimony/" class="text-lg font-medium text-stone-700 hover:text-[#4a3f38] py-2 transition-colors">Testimoni</a>
                <button class="mt-4 bg-[#4a3f38] text-white px-8 py-4 rounded-full text-base font-semibold hover:bg-[#5f534b] transition shadow-lg w-full">Hubungi Kami</button>
            </div>
        </div>
    </nav>

    <!-- MAIN CONTENT - FORBIDDEN ACCESS -->
    <main class="flex-1 flex items-center justify-center px-6 py-12 md:py-20">
        <div class="max-w-3xl mx-auto text-center relative">
            <!-- Decorative elements -->
            <div class="absolute -top-20 -left-20 w-64 h-64 bg-[#E6D5B8]/20 rounded-full blur-3xl -z-10 animate-float"></div>
            <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-[#828E75]/20 rounded-full blur-3xl -z-10 animate-float" style="animation-delay: 2s;"></div>
            
            <!-- Icon dengan animasi -->
            <div class="relative inline-block mb-6 md:mb-8">
                <div class="w-28 h-28 md:w-36 md:h-36 bg-[#E6D5B8] rounded-full flex items-center justify-center mx-auto shadow-xl animate-soft-pulse">
                    <span class="text-5xl md:text-6xl">🚫</span>
                </div>
                <div class="absolute -top-2 -right-2 w-10 h-10 md:w-12 md:h-12 bg-[#4a3f38] rounded-full flex items-center justify-center text-white text-lg md:text-xl font-bold shadow-lg">403</div>
            </div>

            <!-- Title -->
            <h1 class="text-3xl md:text-5xl font-extrabold text-[#4a3f38] mb-3">Akses Tidak Diperbolehkan</h1>
            
            <!-- Description -->
            <p class="text-stone-600 text-base md:text-lg mb-6 max-w-xl mx-auto">
                Maaf, Anda tidak memiliki izin untuk mengakses halaman ini. Silakan kembali ke halaman utama atau tunggu, Anda akan dialihkan secara otomatis.
            </p>

            <!-- Countdown Circle & Timer -->
            <div class="flex justify-center items-center gap-4 md:gap-6 mb-8 md:mb-10">
                <!-- Circular Progress -->
                <div class="relative w-20 h-20 md:w-24 md:h-24">
                    <svg class="w-full h-full" viewBox="0 0 100 100">
                        <!-- Background circle -->
                        <circle cx="50" cy="50" r="45" fill="none" stroke="#E6D5B8" stroke-width="6" />
                        <!-- Progress circle -->
                        <circle id="progress-circle" cx="50" cy="50" r="45" fill="none" stroke="#4a3f38" stroke-width="6" 
                                stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="0"
                                style="transition: stroke-dashoffset 0.1s linear; transform: rotate(-90deg); transform-origin: 50% 50%;" />
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span id="countdown" class="text-2xl md:text-3xl font-bold text-[#4a3f38]">5</span>
                    </div>
                </div>
                <span class="text-stone-500 text-sm md:text-base">detik menuju halaman utama</span>
            </div>

            <!-- Manual Redirect Button -->
            <a href="../home/" class="btn-home inline-block bg-[#4a3f38] text-white px-8 md:px-12 py-4 md:py-5 rounded-full font-bold shadow-xl hover:bg-[#5f534b] transition-all transform hover:scale-105 text-sm md:text-base relative overflow-hidden">
                Kembali ke Beranda Sekarang
            </a>

            <!-- Additional Links -->
            <div class="mt-8 flex flex-wrap justify-center gap-4 text-xs md:text-sm">
                <a href="../home/" class="text-[#828E75] hover:text-[#4a3f38] transition underline underline-offset-2">Beranda</a>
                <span class="text-stone-300">|</span>
                <a href="../contact/" class="text-[#828E75] hover:text-[#4a3f38] transition underline underline-offset-2">Hubungi Kami</a>
                <span class="text-stone-300">|</span>
                <a href="../services/" class="text-[#828E75] hover:text-[#4a3f38] transition underline underline-offset-2">Layanan</a>
            </div>
        </div>
    </main>

    <!-- FOOTER (sama dengan halaman lain, untuk konsistensi) -->
    <footer class="bg-stone-50 border-t border-stone-200/70 py-8 md:py-12 relative">
        <div class="max-w-7xl mx-auto px-6 text-center text-stone-400 text-xs md:text-sm">
            <p>&copy; 2026 Efata Gemilang Jaya — semua hak dilindungi. | Desain dengan ✦ untuk kenyamanan rumah Anda.</p>
        </div>
    </footer>

    <!-- Mobile Menu Toggle Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuToggle = document.getElementById('menuToggle');
            const mobileMenu = document.getElementById('mobileMenu');
            
            if (menuToggle && mobileMenu) {
                menuToggle.addEventListener('click', function() {
                    if (mobileMenu.classList.contains('open')) {
                        mobileMenu.classList.remove('open');
                        mobileMenu.classList.add('closed');
                    } else {
                        mobileMenu.classList.remove('closed');
                        mobileMenu.classList.add('open');
                    }
                });

                // Close menu when clicking on a link
                const mobileLinks = mobileMenu.querySelectorAll('a');
                mobileLinks.forEach(link => {
                    link.addEventListener('click', function() {
                        mobileMenu.classList.remove('open');
                        mobileMenu.classList.add('closed');
                    });
                });
            }
        });
    </script>

    <!-- Countdown Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Countdown logic
            let countdownElement = document.getElementById('countdown');
            let progressCircle = document.getElementById('progress-circle');
            let timeLeft = 5; // 5 seconds
            const totalTime = 5;
            const circumference = 2 * Math.PI * 45; // 2πr ≈ 283

            // Set initial stroke-dasharray
            progressCircle.style.strokeDasharray = circumference;

            // Update countdown every second
            const timer = setInterval(function() {
                timeLeft -= 1;
                
                // Update text
                countdownElement.textContent = timeLeft;

                // Update circle progress (dashoffset = circumference * (1 - progress))
                const progress = timeLeft / totalTime;
                const offset = circumference * (1 - progress);
                progressCircle.style.strokeDashoffset = offset;

                // Redirect when timer reaches 0
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    window.location.href = '../home/'; // Redirect to home
                }
            }, 1000);

            // Optional: Stop countdown if user clicks redirect manually
            // But redirect will happen anyway
        });
    </script>
</body>
</html>