<!-- Chosen Palette: Modern Tech Blue & Neon Accents -->
<!-- Application Structure Plan: SPA interaktif bertema teknologi server berperforma tinggi ("Monster"). Struktur dirancang dengan Hero Section yang menampilkan visual 3D perangkat keras, diikuti oleh profil Founder yang personal, dan diakhiri dengan tabel harga yang fungsional. Navigasi menggunakan sistem scroll smooth. Pendekatan ini dipilih untuk membangun kepercayaan teknis sekaligus kemudahan akses bagi pengguna. -->
<!-- Visualization & Content Choices: Perangkat keras PC -> Memberikan kesan visual kekuatan server -> Model 3D Three.js -> Interaksi rotasi mouse -> Menunjukkan transparansi infrastruktur. Fitur Paket -> Perbandingan harga -> Grid Layout dengan hover effect -> Menjelaskan nilai produk secara efisien. Foto Profil Founder -> Otoritas & Kepercayaan -> Rounded Image dengan Neon Glow -> Membangun relasi personal antara CEO dan pelanggan. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->

<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JualHosting.com - Hosting Performa Monster</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Library Three.js dari CDN yang stabil -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#0066FF',
                        secondary: '#00D1FF',
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            transition: background-color 0.3s ease;
        }
        #canvas-container {
            width: 100%;
            height: 550px; 
            cursor: grab;
        }
        #canvas-container:active {
            cursor: grabbing;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .dark .glass-card {
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #0066FF;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #theme-toggle {
            position: relative;
            display: inline-flex;
            align-items: center;
            height: 2rem;
            width: 3.5rem;
            border-radius: 9999px;
            padding: 0.25rem;
            background-color: #cbd5e1;
            transition: background-color 0.3s ease;
            box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
        }
        .dark #theme-toggle {
            background-color: #1e293b;
        }
        #toggle-knob {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 1.5rem;
            width: 1.5rem;
            border-radius: 9999px;
            background-color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateX(0);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
        }
        .dark #toggle-knob {
            transform: translateX(1.5rem);
            background-color: #0066FF;
        }
        .logo-cloud img {
            filter: grayscale(100%);
            transition: all 0.3s ease;
            opacity: 0.6;
        }
        .logo-cloud img:hover {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.1);
        }
    </style>
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white transition-colors duration-500">

    <!-- Navigasi -->
    <nav class="fixed w-full z-50 transition-all duration-300 glass-card">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <div class="flex items-center gap-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center text-white font-bold text-xl">JH</div>
                    <span class="text-xl font-extrabold tracking-tight">JualHosting<span class="text-primary">.com</span></span>
                </div>
                
                <div class="hidden md:flex space-x-8 font-medium items-center">
                    <a href="#" data-i18n="nav-home" class="hover:text-primary transition text-sm">Beranda</a>
                    <a href="#hosting" data-i18n="nav-hosting" class="hover:text-primary transition text-sm">Hosting</a>
                    <div class="flex flex-col items-center group">
                        <a href="#vps" data-i18n="nav-vps" class="hover:text-primary transition text-sm">VPS</a>
                        <span data-i18n="coming-soon" class="text-[8px] text-primary font-bold uppercase tracking-tighter -mt-0.5 opacity-80 group-hover:opacity-100 transition-opacity">Coming Soon</span>
                    </div>
                    <a href="#kontak" data-i18n="nav-contact" class="hover:text-primary transition text-sm">Kontak</a>
                </div>

                <div class="flex items-center gap-4">
                    <button id="theme-toggle" aria-label="Tukar Mod Siang/Malam">
                        <div id="toggle-knob">
                            <svg id="sun-icon" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414zm2.12 10.607a1 1 0 010-1.414l.706-.707a1 1 0 111.414 1.414l-.707.707a1 1 0 01-1.414 0zM5 9a1 1 0 100 2h1a1 1 0 100-2H5z"></path></svg>
                            <svg id="moon-icon" class="w-4 h-4 text-white hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
                        </div>
                    </button>
                    <!-- UPDATED LOGIN LINK -->
                    <a href="https://member.jualhosting.com/index.php?rp=/login" data-i18n="btn-login" class="bg-primary hover:bg-blue-700 text-white px-6 py-2 rounded-full font-bold transition">Login</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="relative pt-32 pb-10 overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    <span data-i18n="hero-tag" class="inline-block py-1 px-4 rounded-full bg-primary/10 text-primary text-sm font-bold mb-4">#1 Hosting Indonesia</span>
                    <h1 class="text-5xl lg:text-7xl font-extrabold mb-6 leading-tight">
                        <span data-i18n="hero-title-prefix">Power of the</span> <span class="text-primary">SSD NVME</span> <span data-i18n="hero-title-suffix">for Your Website.</span>
                    </h1>
                    <p data-i18n="hero-desc" class="text-lg text-slate-600 dark:text-slate-400 mb-8 max-w-lg">
                        Server monster dengan performa secepat hiu. Keamanan tingkat tinggi dan dukungan teknis 24/7 untuk kesuksesan bisnismu.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <!-- UPDATED GET STARTED LINK -->
                        <a href="https://member.jualhosting.com/register.php" data-i18n="btn-start" class="bg-primary hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold text-lg transition shadow-xl shadow-primary/30 text-center">Mulai Sekarang</a>
                        <a href="#hosting" data-i18n="btn-plans" class="border border-slate-300 dark:border-slate-700 hover:bg-slate-100 dark:hover:bg-slate-800 px-8 py-4 rounded-xl font-bold text-lg transition text-center">Lihat Paket</a>
                    </div>
                </div>
                
                <!-- Area Model 3D -->
                <div class="relative">
                    <div class="absolute inset-0 bg-primary/20 blur-[120px] rounded-full"></div>
                    <div class="relative glass-card rounded-3xl p-4 floating border-white/20">
                        <div class="flex justify-between items-center px-4 py-2 border-b border-white/10 mb-4">
                            <span class="text-xs font-mono text-slate-400">HARDWARE 3D PREVIEW: SERVER-JUALHOSTING.COM</span>
                            <div class="flex gap-1">
                                <div class="w-2 h-2 rounded-full bg-red-500"></div>
                                <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
                                <div class="w-2 h-2 rounded-full bg-green-500"></div>
                            </div>
                        </div>
                        <div id="canvas-container" class="relative flex items-center justify-center">
                            <div id="canvas-loader" class="absolute inset-0 flex flex-col items-center justify-center bg-slate-100/50 dark:bg-slate-900/50 rounded-2xl">
                                <div class="loader mb-4"></div>
                                <p data-i18n="loading-3d" class="text-xs font-bold animate-pulse">Memuat Hardware 3D...</p>
                            </div>
                        </div>
                        <p data-i18n="3d-instruction" class="text-center text-xs text-slate-500 mt-2">Gunakan mouse untuk memutar interior PC Server JualHosting</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Founder Section (Muhammad Syafri, S.Kom) -->
    <section class="py-16 bg-white/50 dark:bg-slate-900/50 overflow-hidden border-y border-slate-200 dark:border-slate-800">
        <div class="max-w-4xl mx-auto px-4 flex flex-col md:flex-row items-center gap-10 text-center md:text-left">
            <div class="relative group shrink-0">
                <div class="absolute -inset-2 bg-gradient-to-tr from-primary to-secondary rounded-full blur-md opacity-30 group-hover:opacity-100 transition duration-700 animate-pulse"></div>
                <div class="relative w-40 h-40 md:w-48 md:h-48 rounded-full border-4 border-white dark:border-slate-700 overflow-hidden shadow-2xl bg-slate-200">
                    <img 
                        src="https://jualhosting.com/pp.jpeg" 
                        alt="Muhammad Syafri, S.Kom - Founder JualHosting.com" 
                        class="w-full h-full object-cover grayscale hover:grayscale-0 transition duration-500 transform hover:scale-110"
                        onerror="this.src='https://ui-avatars.com/api/?name=Muhammad+Syafri+S.Kom&background=0066FF&color=fff&size=512'"
                    >
                </div>
            </div>
            <div class="flex-1">
                <h2 class="text-2xl md:text-4xl font-extrabold mb-1 tracking-tight">Muhammad <span class="text-primary">Syafri, S.Kom</span></h2>
                <p class="text-primary font-bold uppercase tracking-[0.2em] text-xs mb-6">Founder JualHosting.com</p>
                
                <div class="space-y-4 text-slate-600 dark:text-slate-400 leading-relaxed">
                    <p class="text-lg">
                        Saya membangun <strong>JualHosting.com</strong> dengan satu tujuan: memberikan kecepatan akses tanpa batas dan stabilitas server  bagi bisnis Anda. 
                    </p>
                    <p>
                        Kami menjamin website Anda berjalan secepat kilat menggunakan infrastruktur hardware paling tangguh yang pernah ada di Indonesia.
                    </p>
                    <div class="inline-flex items-center gap-2 py-2 px-4 bg-primary/5 rounded-full border border-primary/10">
                        <span class="w-2 h-2 rounded-full bg-green-500 animate-ping"></span>
                        <span class="text-sm font-bold text-primary italic">"Kecepatan dan Kestabilan Anda, Janji Kami."</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Logo Section -->
    <section class="py-12 bg-white/30 dark:bg-slate-900/30 border-b border-slate-200 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-sm font-bold text-slate-500 mb-8 uppercase tracking-widest">Didukung Oleh Teknologi Infrastruktur Terbaik</p>
            <div class="logo-cloud flex flex-wrap justify-center items-center gap-8 md:gap-16 px-4">
                <img src="https://cdn.simpleicons.org/cpanel/FF6C2C" alt="cPanel" class="h-10 w-auto" onerror="this.src='https://upload.wikimedia.org/wikipedia/commons/d/df/CPanel_logo.svg'">
                <img src="https://cdn.simpleicons.org/wordpress/21759B" alt="WordPress" class="h-10 w-auto">
                <img src="https://cdn.simpleicons.org/mysql/4479A1" alt="MySQL" class="h-10 w-auto">
                <img src="https://cdn.simpleicons.org/python/3776AB" alt="Python" class="h-10 w-auto">
                <img src="https://cdn.simpleicons.org/nodedotjs/339933" alt="Node.js" class="h-10 w-auto">
            </div>
        </div>
    </section>

    <!-- Harga -->
    <section id="hosting" class="py-20 bg-slate-100 dark:bg-slate-900/50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-extrabold mb-4"><span data-i18n="pricing-title">Pilih Paket</span> <span class="text-primary">Hosting</span></h2>
                <p data-i18n="pricing-desc" class="text-slate-600 dark:text-slate-400">Harga kompetitif dengan fitur premium yang lengkap.</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Starter -->
                <div class="bg-white dark:bg-slate-800 p-8 rounded-3xl shadow-xl hover:scale-105 transition duration-300 border border-transparent hover:border-primary/20 flex flex-col h-full">
                    <h3 class="text-xl font-bold mb-2">Starter</h3>
                    <div class="text-3xl font-bold mb-6">Rp 15.000<span class="text-sm font-normal text-slate-500">/bln</span></div>
                    <ul class="space-y-4 mb-8 text-slate-600 dark:text-slate-400 text-sm flex-grow">
                        <li>✅ 1 Website</li>
                        <li>✅ 1GB SSD Storage</li>
                        <li>✅ Unlimited Bandwidth</li>
                        <li>✅ Free SSL Certificate</li>
                    </ul>
                    <a href="https://member.jualhosting.com/index.php?rp=/store/hosting/starter-plan" class="w-full py-3 rounded-xl border-2 border-primary text-primary font-bold hover:bg-primary hover:text-white transition text-center">Pilih Paket</a>
                </div>

                <!-- Professional -->
                <div class="bg-primary p-8 rounded-3xl shadow-2xl shadow-primary/40 text-white scale-110 relative overflow-hidden flex flex-col h-full">
                    <div data-i18n="best-seller" class="absolute top-4 right-4 bg-white/20 px-3 py-1 rounded-full text-xs font-bold uppercase">Terlaris</div>
                    <h3 class="text-xl font-bold mb-2 text-blue-100">Professional</h3>
                    <div class="text-3xl font-bold mb-6">Rp 45.000<span class="text-sm font-normal text-blue-200">/bln</span></div>
                    <ul class="space-y-4 mb-8 text-blue-50 text-sm flex-grow">
                        <li>✅ 10 Website</li>
                        <li>✅ 5GB SSD Storage</li>
                        <li>✅ Unlimited Bandwidth</li>
                        <li>✅ Managed WP Tools</li>
                        <li>✅ Premium Support</li>
                    </ul>
                    <a href="https://member.jualhosting.com/index.php?rp=/store/hosting/professional-plan" class="w-full py-3 rounded-xl bg-white text-primary font-bold hover:bg-blue-50 transition text-center">Pilih Paket</a>
                </div>

                <!-- Enterprise -->
                <div class="bg-white dark:bg-slate-800 p-8 rounded-3xl shadow-xl hover:scale-105 transition duration-300 border border-transparent hover:border-primary/20 flex flex-col h-full">
                    <h3 class="text-xl font-bold mb-2">Enterprise</h3>
                    <div class="text-3xl font-bold mb-6">Rp 99.000<span class="text-sm font-normal text-slate-500">/bln</span></div>
                    <ul class="space-y-4 mb-8 text-slate-600 dark:text-slate-400 text-sm flex-grow">
                        <li>✅ Unlimited Website</li>
                        <li>✅ 10GB SSD Storage</li>
                        <li>✅ Dedicated Resources</li>
                        <li>✅ Managed WP Tools</li>
                        <li>✅ Backup Harian</li>
                    </ul>
                    <a href="https://member.jualhosting.com/index.php/store/hosting/e" class="w-full py-3 rounded-xl border-2 border-primary text-primary font-bold hover:bg-primary hover:text-white transition text-center">Pilih Paket</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Widget WhatsApp -->
    <a href="https://wa.me/6281277457431" target="_blank" class="fixed bottom-6 right-6 z-[60] group">
        <div class="flex items-center gap-3">
            <div class="bg-white dark:bg-slate-800 px-4 py-2 rounded-2xl shadow-xl border border-slate-200 dark:border-slate-700 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-4 group-hover:translate-x-0">
                <p data-i18n="wa-help" class="text-xs font-bold text-slate-900 dark:text-white">Butuh Bantuan?</p>
                <p data-i18n="wa-chat" class="text-[10px] text-slate-500">Chat Admin Sekarang</p>
            </div>
            <div class="bg-emerald-500 p-4 rounded-full shadow-2xl shadow-emerald-500/50 hover:scale-110 transition duration-300">
                <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
            </div>
        </div>
    </a>

    <!-- Footer -->
    <footer id="kontak" class="py-12 border-t border-slate-200 dark:border-slate-800">
        <div class="max-w-7xl mx-auto px-4 text-center flex flex-col items-center gap-4">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center text-white font-bold text-sm">JH</div>
                <span class="text-lg font-bold">JualHosting<span class="text-primary">.com</span></span>
            </div>
            <p class="text-slate-500 text-sm">© 2025 JualHosting.com. Hak Cipta Terpelihara.</p>
        </div>
    </footer>

    <script>
        const translations = {
            id: {
                'nav-home': 'Beranda',
                'nav-hosting': 'Hosting',
                'nav-vps': 'VPS',
                'nav-contact': 'Kontak',
                'coming-soon': 'Segera Hadir',
                'btn-login': 'Masuk',
                'hero-tag': '#1 Hosting Indonesia',
                'hero-title-prefix': 'Tenaga',
                'hero-title-suffix': 'Untuk Web Anda.',
                'hero-desc': 'Server monster dengan performa secepat hiu. Keamanan tingkat tinggi dan dukungan teknis 24/7 untuk kesuksesan bisnismu.',
                'btn-start': 'Mulai Sekarang',
                'btn-plans': 'Lihat Paket',
                'loading-3d': 'Memuat Hardware 3D...',
                '3d-instruction': 'Gunakan mouse untuk memutar interior PC Server JualHosting',
                'pricing-title': 'Pilih Paket',
                'pricing-desc': 'Harga kompetitif dengan fitur premium yang lengkap.',
                'best-seller': 'Terlaris',
                'btn-choose': 'Pilih Paket',
                'wa-help': 'Butuh Bantuan?',
                'wa-chat': 'Chat Admin Sekarang'
            },
            en: {
                'nav-home': 'Home',
                'nav-hosting': 'Hosting',
                'nav-vps': 'VPS',
                'nav-contact': 'Contact',
                'coming-soon': 'Coming Soon',
                'btn-login': 'Login',
                'hero-tag': '#1 Indonesia Hosting',
                'hero-title-prefix': 'Power of',
                'hero-title-suffix': 'for Your Website.',
                'hero-desc': 'Monster server with shark-speed performance. High-level security and 24/7 technical support for your business success.',
                'btn-start': 'Get Started',
                'btn-plans': 'View Plans',
                'loading-3d': 'Loading 3D Hardware...',
                '3d-instruction': 'Use mouse to view JualHosting PC interior',
                'pricing-title': 'Choose Your',
                'pricing-desc': 'Competitive pricing with complete premium features.',
                'best-seller': 'Popular',
                'btn-choose': 'Select Plan',
                'wa-help': 'Need Help?',
                'wa-chat': 'Chat With Admin'
            }
        };

        function applySettings() {
            const userLang = navigator.language || navigator.userLanguage;
            const lang = userLang.startsWith('id') ? 'id' : 'en';
            
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                if (translations[lang] && translations[lang][key]) {
                    el.textContent = translations[lang][key];
                }
            });

            const hour = new Date().getHours();
            const isNight = hour < 6 || hour >= 18;
            if (isNight) {
                document.documentElement.classList.add('dark');
                updateIcons(true);
            } else {
                document.documentElement.classList.remove('dark');
                updateIcons(false);
            }
        }

        const themeToggle = document.getElementById('theme-toggle');
        const sunIcon = document.getElementById('sun-icon');
        const moonIcon = document.getElementById('moon-icon');
        const html = document.documentElement;

        const updateIcons = (isDark) => {
            if (isDark) {
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
            } else {
                sunIcon.classList.remove('hidden');
                moonIcon.classList.add('hidden');
            }
        };

        themeToggle.addEventListener('click', () => {
            html.classList.toggle('dark');
            const isDark = html.classList.contains('dark');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            updateIcons(isDark);
        });

        // Konfigurasi 3D
        let scene, camera, renderer, pcGroup;
        let fans = [];
        let isDragging = false;
        let previousMouseX = 0;
        let previousMouseY = 0;

        function tryInit3D(retries = 20) {
            const loaderEl = document.getElementById('canvas-loader');
            if (typeof THREE !== 'undefined') {
                if (loaderEl) loaderEl.style.display = 'none';
                init3D();
            } else if (retries > 0) {
                setTimeout(() => tryInit3D(retries - 1), 500);
            }
        }

        function createNeonTextTexture(text, width, height, fontSize, neonColor = '#00D1FF') {
            const canvas = document.createElement('canvas');
            canvas.width = width; canvas.height = height;
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = '#0a0a0a'; 
            ctx.fillRect(0, 0, width, height);
            ctx.font = `bold ${fontSize}px "Plus Jakarta Sans", Arial`;
            ctx.textAlign = 'center'; 
            ctx.textBaseline = 'middle';
            ctx.shadowColor = neonColor;
            ctx.shadowBlur = 25;
            ctx.strokeStyle = neonColor;
            ctx.lineWidth = 4;
            ctx.strokeText(text, width/2, height/2);
            ctx.shadowBlur = 10;
            ctx.fillStyle = neonColor;
            ctx.fillText(text, width/2, height/2);
            ctx.shadowBlur = 0;
            ctx.fillStyle = '#FFFFFF';
            ctx.fillText(text, width/2, height/2);
            return new THREE.CanvasTexture(canvas);
        }

        function init3D() {
            const container = document.getElementById('canvas-container');
            if (!container) return;

            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(55, container.offsetWidth / container.offsetHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            renderer.setSize(container.offsetWidth, container.offsetHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            container.appendChild(renderer.domElement);

            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            const spotLight = new THREE.SpotLight(0x0066FF, 20);
            spotLight.position.set(15, 15, 15);
            scene.add(spotLight);

            pcGroup = new THREE.Group();
            pcGroup.scale.set(1.3, 1.3, 1.3);

            const darkMetal = new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.9, roughness: 0.1 });
            const moboMat = new THREE.MeshStandardMaterial({ color: 0x050505, roughness: 0.8 });
            const rgbMat = new THREE.MeshBasicMaterial({ color: 0x00ffff });
            const gpuMat = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, metalness: 0.8 });
            
            const chassisNeonMat = new THREE.MeshBasicMaterial({ map: createNeonTextTexture('JualHosting.com', 512, 128, 55, '#00D1FF') });
            const vgaNeonMat = new THREE.MeshBasicMaterial({ map: createNeonTextTexture('GeForce RTX 4080', 512, 128, 48, '#39FF14') });
            const ssdNeonMat = new THREE.MeshBasicMaterial({ map: createNeonTextTexture('SSD', 256, 128, 70, '#00D1FF') }); 

            const shroud = new THREE.Mesh(new THREE.BoxGeometry(3.5, 0.8, 2.2), darkMetal);
            shroud.position.y = -1.35;
            pcGroup.add(shroud);

            const psuNeonTop = new THREE.Mesh(new THREE.BoxGeometry(3.55, 0.05, 0.1), rgbMat);
            psuNeonTop.position.set(0, -0.95, 1.11);
            pcGroup.add(psuNeonTop);

            const shroudBrand = new THREE.Mesh(new THREE.PlaneGeometry(2.0, 0.5), chassisNeonMat);
            shroudBrand.position.set(0, -1.35, 1.12);
            pcGroup.add(shroudBrand);

            const mobo = new THREE.Mesh(new THREE.BoxGeometry(0.1, 3.2, 2.2), moboMat);
            mobo.position.set(-1.3, 0.4, 0);
            pcGroup.add(mobo);

            const gpu = new THREE.Mesh(new THREE.BoxGeometry(2.4, 0.5, 0.7), gpuMat);
            gpu.position.set(-0.1, -0.1, 0.4);
            pcGroup.add(gpu);

            const vgaPlate = new THREE.Mesh(new THREE.PlaneGeometry(2.0, 0.4), vgaNeonMat);
            vgaPlate.position.set(-0.1, -0.1, 0.76);
            vgaPlate.renderOrder = 1;
            pcGroup.add(vgaPlate);

            for(let i=0; i<4; i++) {
                const ram = new THREE.Mesh(new THREE.BoxGeometry(0.05, 0.8, 0.05), gpuMat);
                ram.position.set(-1.15, 1.0, -0.3 + (i * 0.15));
                pcGroup.add(ram);
                const ramNeon = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.1, 0.051), rgbMat);
                ramNeon.position.set(-1.15, 1.35, -0.3 + (i * 0.15));
                pcGroup.add(ramNeon);
            }

            const cpuBlock = new THREE.Mesh(new THREE.BoxGeometry(0.45, 0.45, 0.45), darkMetal);
            cpuBlock.position.set(-1.1, 0.9, 0.4);
            pcGroup.add(cpuBlock);
            const cpuNeon = new THREE.Mesh(new THREE.TorusGeometry(0.15, 0.02, 16, 32), rgbMat);
            cpuNeon.position.set(-0.87, 0.9, 0.4);
            cpuNeon.rotation.y = Math.PI / 2;
            pcGroup.add(cpuNeon);

            for(let row=0; row<2; row++) {
                for(let i=0; i<4; i++) {
                    const ssdGroup = new THREE.Group();
                    const ssd = new THREE.Mesh(new THREE.BoxGeometry(0.4, 0.04, 0.6), darkMetal);
                    ssdGroup.add(ssd);
                    const ssdPlate = new THREE.Mesh(new THREE.PlaneGeometry(0.3, 0.4), ssdNeonMat);
                    ssdPlate.rotation.x = -Math.PI / 2;
                    ssdPlate.position.y = 0.021;
                    ssdGroup.add(ssdPlate);
                    ssdGroup.position.set(-0.8 + (i * 0.5), 0.5 + (row * 0.2), 0.4); 
                    pcGroup.add(ssdGroup);
                }
            }

            const fanGeo = new THREE.TorusGeometry(0.4, 0.03, 8, 32);
            function createFan(x, y, z, rx, ry) {
                const fGroup = new THREE.Group();
                fGroup.add(new THREE.Mesh(fanGeo, rgbMat));
                for(let j=0; j<4; j++) {
                    const blade = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.05, 0.01), rgbMat);
                    blade.rotation.z = (Math.PI / 2) * j;
                    fGroup.add(blade);
                }
                fGroup.position.set(x, y, z);
                fGroup.rotation.x = rx; fGroup.rotation.y = ry;
                fans.push(fGroup);
                pcGroup.add(fGroup);
            }

            createFan(-1.4, 1.2, 0.3, 0, Math.PI/2);
            createFan(-1.4, 0.2, 0.3, 0, Math.PI/2);
            createFan(1.6, 1.2, 0.3, 0, Math.PI/2);
            createFan(1.6, 0.2, 0.3, 0, Math.PI/2);
            createFan(0, 1.8, 0.3, Math.PI/2, 0);
            createFan(1.1, 1.8, 0.3, Math.PI/2, 0);

            scene.add(pcGroup);
            camera.position.set(7, 4, 10);
            camera.lookAt(0, 0, 0);

            container.addEventListener('mousedown', () => isDragging = true);
            window.addEventListener('mouseup', () => isDragging = false);
            window.addEventListener('mousemove', (e) => {
                if (isDragging && pcGroup) {
                    pcGroup.rotation.y += (e.clientX - previousMouseX) * 0.01;
                    pcGroup.rotation.x += (e.clientY - previousMouseY) * 0.01;
                }
                previousMouseX = e.clientX; previousMouseY = e.clientY;
            });
            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            if (!isDragging && pcGroup) {
                pcGroup.rotation.y += 0.005;
                pcGroup.position.y = Math.sin(Date.now() * 0.001) * 0.1;
            }
            fans.forEach(f => f.children.forEach((c, i) => { if(i>0) c.rotation.z += 0.2; }));
            renderer.render(scene, camera);
        }

        window.addEventListener('resize', () => {
            const container = document.getElementById('canvas-container');
            if (camera && renderer && container) {
                camera.aspect = container.offsetWidth / container.offsetHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(container.offsetWidth, container.offsetHeight);
            }
        });

        window.addEventListener('DOMContentLoaded', () => {
            applySettings();
            tryInit3D();
        });
    </script>
</body>
</html>