<!-- ... existing code ... -->
  <!-- Google Fonts & Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Rubik:wght@400;600;700;900&display=swap" rel="stylesheet">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

  <style>
<!-- ... existing code ... -->
      <div class="flex items-center gap-2">
        <button id="soundToggleBtn" onclick="toggleSound()" class="bg-[#282a2d] border border-[#ffc800] text-[#ffc800] px-3 py-1.5 rounded-lg text-xs font-bold hover:bg-[#ffc800] hover:text-black transition">
          🔊 Sound: ON
        </button>
        <button onclick="openDownloadModal()" class="bg-[#e02424] hover:bg-[#ff3b3b] text-white px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-1">
          📦 Theme ZIP / Code
        </button>
        <button id="menuToggle" class="md:hidden bg-[#00a2ff] text-white px-3 py-1.5 rounded-lg font-extrabold text-sm">
          ☰
        </button>
      </div>

      <nav id="menu" class="hidden md:flex items-center gap-1.5 absolute md:relative top-[75px] md:top-0 left-0 right-0 bg-[#191b1d] md:bg-transparent p-4 md:p-0 border-b-2 md:border-b-0 border-[#393b3d]">
<!-- ... existing code ... -->
          <div class="flex flex-wrap gap-3 mt-6">
            <button onclick="addSupportLike()" class="btn-game bg-[#e02424] text-white px-5 py-3 rounded-xl font-extrabold text-xs uppercase tracking-wider flex items-center gap-2">
              ❤️ Kirim Support (<span id="likeCount">128</span>)
            </button>
            <button onclick="openPage('tentang')" class="btn-game bg-[#00e266] text-black px-5 py-3 rounded-xl font-extrabold text-xs uppercase tracking-wider">
              Kenali Saya 👋
            </button>
            <button onclick="openDownloadModal()" class="btn-game bg-[#00a2ff] text-white px-5 py-3 rounded-xl font-extrabold text-xs uppercase tracking-wider flex items-center gap-2">
              📂 Source Theme WP
            </button>
          </div>
        </div>
<!-- ... existing code ... -->
  <!-- LIGHTBOX MODAL PHOTO -->
  <div id="lightboxModal" class="lightbox-modal" onclick="closeLightbox(event)">
    <button class="absolute top-5 right-6 text-white text-4xl font-bold hover:text-[#e02424]" onclick="closeLightbox(event)">&times;</button>
    <img id="lightboxImg" class="max-w-[90vw] max-h-[85vh] rounded-2xl border-4 border-[#00a2ff] shadow-[0_0_35px_rgba(0,162,255,0.6)] object-contain" src="" alt="Zoom Photo">
  </div>

  <!-- WORDPRESS THEME DOWNLOAD & CODE VIEWER MODAL -->
  <div id="downloadModal" class="lightbox-modal bg-black/80 backdrop-blur-md">
    <div class="bg-[#191b1d] border-2 border-[#393b3d] rounded-2xl max-w-4xl w-[95%] p-6 max-h-[90vh] flex flex-col shadow-2xl relative">
      <div class="flex justify-between items-center pb-4 border-b border-[#393b3d]">
        <h3 class="text-xl font-bold text-white flex items-center gap-2">
          <span>📦</span> WordPress Theme File Manager & Downloader
        </h3>
        <button onclick="closeDownloadModal()" class="text-[#a3a8b0] hover:text-white text-2xl font-bold">&times;</button>
      </div>

      <!-- File Navigation Tabs -->
      <div class="flex flex-wrap gap-2 my-4">
        <button onclick="switchCodeTab('style.css')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#00a2ff] text-white text-xs font-bold">style.css</button>
        <button onclick="switchCodeTab('functions.php')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#191b1d] text-[#a3a8b0] hover:text-white text-xs font-bold">functions.php</button>
        <button onclick="switchCodeTab('header.php')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#191b1d] text-[#a3a8b0] hover:text-white text-xs font-bold">header.php</button>
        <button onclick="switchCodeTab('index.php')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#191b1d] text-[#a3a8b0] hover:text-white text-xs font-bold">index.php</button>
        <button onclick="switchCodeTab('footer.php')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#191b1d] text-[#a3a8b0] hover:text-white text-xs font-bold">footer.php</button>
        <button onclick="switchCodeTab('js/script.js')" class="tab-btn px-3 py-1.5 rounded-lg bg-[#191b1d] text-[#a3a8b0] hover:text-white text-xs font-bold">js/script.js</button>
      </div>

      <!-- Code Viewer Block -->
      <pre class="flex-1 bg-[#111216] border border-[#393b3d] rounded-xl p-4 overflow-auto text-xs font-mono text-[#00e266] max-h-[50vh]"><code id="codeViewer">/* Loading code... */</code></pre>

      <!-- Action Footer -->
      <div class="flex flex-wrap items-center justify-between gap-3 pt-4 mt-2 border-t border-[#393b3d]">
        <button onclick="copyCurrentCode()" class="bg-[#282a2d] hover:bg-[#393b3d] text-white px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-2 border border-[#393b3d]">
          📋 Salin Kode
        </button>
        <button onclick="downloadZipTheme()" class="bg-[#00e266] hover:bg-[#00c855] text-black px-6 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider flex items-center gap-2 shadow-[inset_0_-3px_0_rgba(0,0,0,0.2)]">
          ⬇️ Download WordPress Theme (.ZIP)
        </button>
      </div>
    </div>
  </div>

  <!-- TOAST NOTIFICATION -->
  <div id="toast">Berhasil disalin!</div>
<!-- ... existing code ... -->
    const themeFiles = {
      'style.css': `/*
Theme Name: Fathan Roblox Theme
Theme URI: https://fathan-roblox.local
Author: Muhammad Fathan Rafandy
Version: 1.2.0
Description: Theme WordPress Roblox Interactive Portfolio Lengkap
Text Domain: fathan-roblox
*/

:root {
  --bg-main: #111216;
  --bg-card: #232527;
  --bg-card-hover: #2c2e31;
  --text-light: #ffffff;
  --text-muted: #a3a8b0;
  --roblox-red: #e02424;
  --roblox-blue: #00a2ff;
  --roblox-green: #00e266;
  --roblox-yellow: #ffc800;
  --border: #393b3d;
}

body {
  margin: 0;
  background-color: var(--bg-main);
  background-image: radial-gradient(#232527 15%, transparent 16%);
  background-size: 20px 20px;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
}`,
      'functions.php': `<?php
function fathan_roblox_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'fathan_roblox_setup' );

function fathan_roblox_scripts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Rubik:wght@400;600;700;900&display=swap', array(), null );
    wp_enqueue_style( 'fathan-style', get_stylesheet_uri() );
    wp_enqueue_script( 'tailwind-cdn', 'https://cdn.tailwindcss.com', array(), null, false );
    wp_enqueue_script( 'fathan-script', get_template_directory_uri() . '/js/script.js', array(), '1.2.0', true );
}
add_action( 'wp_enqueue_scripts', 'fathan_roblox_scripts' );`,
      'header.php': `<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Rubik:wght@400;600;700;900&display=swap" rel="stylesheet">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> class="bg-[#111216] text-white font-['Rubik'] min-h-screen flex flex-col">
<header class="sticky top-0 z-50 bg-[#191b1d]/95 backdrop-blur-md border-b-2 border-[#393b3d]">
  <div class="max-w-6xl mx-auto px-4 min-h-[75px] flex items-center justify-between gap-4">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex items-center gap-2.5 font-['Fredoka'] font-bold text-2xl text-white">
      <span class="w-10 h-10 bg-[#e02424] rounded-lg flex items-center justify-center text-xl shadow-[inset_0_-4px_0_rgba(0,0,0,0.3)]">🟥</span>
      <span><?php bloginfo( 'name' ); ?></span>
    </a>
  </div>
</header>`,
      'index.php': `<?php get_header(); ?>
<main class="flex-1 max-w-6xl w-full mx-auto px-4 py-8">
  <div class="grid md:grid-cols-12 gap-8 items-center">
    <div class="md:col-span-7">
      <span class="bg-[#ffc800] text-black px-3 py-1 rounded-md text-xs font-black uppercase inline-block">
        ⭐ Level 7 Player
      </span>
      <h1 class="text-4xl sm:text-6xl font-bold mt-4 leading-tight font-['Fredoka']">
        Muhammad<br><span class="text-[#00a2ff]">Fathan Rafandy</span>
      </h1>
      <p class="text-[#a3a8b0] mt-4 leading-relaxed text-sm sm:text-base">
        Selamat datang di dunia saya! Saya adalah pemain Roblox cilik berusia 7 tahun yang suka belajar, bermain Obby, dan membuat karya!
      </p>
      <div class="mt-6 bg-[#191b1d] border border-[#393b3d] rounded-xl p-3.5 max-w-md">
        <div class="flex justify-between text-xs font-bold mb-1.5">
          <span>XP Player Progress</span>
          <span class="text-[#00e266]">450 / 1000 XP</span>
        </div>
        <div class="bg-black h-3.5 rounded-full overflow-hidden border border-[#393b3d]">
          <div class="bg-gradient-to-r from-[#00a2ff] to-[#00e266] h-full w-[45%]"></div>
        </div>
      </div>
    </div>
    <div class="md:col-span-5">
      <div class="bg-[#232527] border-2 border-[#393b3d] rounded-2xl p-6 text-center shadow-2xl">
        <div class="w-40 h-40 rounded-2xl mx-auto bg-[#191b1d] border-4 border-[#00a2ff] shadow-[0_0_20px_rgba(0,162,255,0.4)] overflow-hidden">
          <img src="https://images.rbxcdn.com/3199e52542ff5eb5ea87f7a0709a304e.png" alt="Avatar Roblox" class="w-full h-full object-cover">
        </div>
        <h2 class="text-2xl font-bold mt-4 font-['Fredoka']">Fathan Rafandy</h2>
        <span class="inline-block bg-[#00e266]/15 text-[#00e266] border border-[#00e266] px-3 py-1 rounded-full text-xs font-bold mt-2">
          🟢 Status: Active Gamer
        </span>
      </div>
    </div>
  </div>
</main>
<?php get_footer(); ?>`,
      'footer.php': `<footer class="py-6 border-t-2 border-[#393b3d] bg-[#151719] text-center text-xs text-[#a3a8b0]">
  <div class="max-w-6xl mx-auto px-4">
    <strong class="text-white text-sm">Fathan Roblox Portfolio ⭐</strong><br>
    Interactive Gaming Web Portfolio<br>
    <div class="inline-block bg-[#232527] border border-[#393b3d] px-4 py-1 rounded-full mt-2 text-[#00e266]">
      &copy; <?php echo date('Y'); ?> Fathan Roblox Theme
    </div>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>`,
      'js/script.js': `console.log("Fathan Roblox Theme Loaded Successfully!");`
    };

    let activeTab = 'style.css';
<!-- ... existing code ... -->
```

### Penjelasan Perubahan:
1. **Lengkap dengan Tailwind CSS CDN & Font Google**: Menambahkan pustaka Tailwind CSS dan font Fredoka/Rubik ke dalam file `header.php` dan `functions.php` pada WordPress Theme agar tampilan tidak polos/hitam putih saat dipasang di WordPress.
2. **Kesesuaian Layout PHP**: Mengisi `index.php` di dalam `themeFiles` dengan layout Roblox lengkap (Level status, XP Bar progress, kartu Avatar, dan styling Tailwind) agar saat diekspor sebagai file `.zip` theme WordPress hasilnya presisi seperti pratinjau interaktif web.
3. **Modal & JSZip Library**: Menambahkan pustaka `JSZip` & `FileSaver.js` serta elemen UI Modal File Downloader agar tombol **"📦 Theme ZIP / Code"** dapat menyalin kode dan mengunduh file `.zip` tema secara langsung.