<?php
// Mencegah Undefined Index 'module' saat pertama dibuka
$module = isset($_GET['module']) ? $_GET['module'] : 'home';

/*** BEGIN .Halaman Utama (Beranda atau Home) ***/
if ($module == 'home') {
    
  
$queryterbarul = "SELECT * FROM menu WHERE aktif='Y'";
$hasilterbarul = mysqli_query($konek, $queryterbarul);

$layanan = [];

while ($row = mysqli_fetch_assoc($hasilterbarul)) {
    $layanan[$row['id_menu']] = $row;
}


    
?>
   <!-- HERO BANNER MAIN SECTION -->
<section class="relative w-full bg-slate-950 overflow-hidden font-sans">
  
  <!-- Banner Container -->
  <div id="rtHeroBanner" class="relative w-full h-[520px] sm:h-[600px] lg:h-[680px]">

    <?php
    $query_banner = "SELECT * FROM banner ORDER BY id_banner DESC";
    $hasil_banner = mysqli_query($konek, $query_banner);
    $no = 0;

    if ($hasil_banner && mysqli_num_rows($hasil_banner) > 0) {
      while ($r = mysqli_fetch_array($hasil_banner)) { 
        $judul = htmlspecialchars($r['judul'] ?? '', ENT_QUOTES, 'UTF-8');
        $isi = $r['isi_banner'] ?? '';
        $imgUrl = ($d['alamat_website'] ?? '') . "/foto_banner/" . $r['gambar'];
    ?>

    <!-- Slide Item -->
    <div class="rt-banner-slide absolute inset-0 w-full h-full transition-opacity duration-1000 ease-in-out <?php echo ($no === 0) ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'; ?>">
      
      <!-- GAMBAR BACKGROUND -->
      <img src="<?php echo htmlspecialchars($imgUrl); ?>" 
           alt="<?php echo $judul; ?>" 
           class="w-full h-full object-cover object-center transform scale-105 transition-transform duration-[10000ms] ease-out">

      <!-- OVERLAY GRADIENT PROFESIONAL (Menggelapkan Sisi Kiri Agar Teks Menonjol) -->
      <div class="absolute inset-0 bg-gradient-to-r from-slate-950/95 via-slate-950/70 to-transparent z-10"></div>
      <div class="absolute inset-0 bg-gradient-to-t from-slate-950/80 via-transparent to-slate-950/30 z-10"></div>

      <!-- KONTEN TEKS & CTA (Melayang Di Atas Gambar) -->
      <div class="absolute inset-0 z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
        <div class="max-w-2xl text-left pt-8">
          
          <!-- Badge aksen -->
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/30 backdrop-blur-md mb-5">
            <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
            <span class="text-xs font-bold uppercase tracking-wider text-amber-400">Official Company Announcement</span>
          </div>

          <!-- JUDUL UTAMA -->
          <h1 class="text-3xl sm:text-5xl lg:text-6xl font-black text-white tracking-tight leading-[1.15] mb-5 drop-shadow-lg">
            <?php echo $judul; ?>
          </h1>

          <!-- DESKRIPSI -->
          <div class="text-slate-300 text-sm sm:text-base lg:text-lg leading-relaxed mb-8 line-clamp-3 font-normal max-w-xl">
            <?php echo $isi; ?>
          </div>

          <!-- TOMBOL CTA (CALL TO ACTION) -->
          <div class="flex flex-wrap items-center gap-4">
            <a href="<?php echo $d['alamat_website']; ?>/kontak" 
               class="px-6 py-3.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-extrabold text-sm tracking-wide uppercase shadow-lg shadow-amber-500/20 hover:shadow-amber-500/40 transition-all duration-300 transform hover:-translate-y-0.5 flex items-center gap-2">
              <span>Hubungi Kami</span>
              <i class="fa-solid fa-arrow-right text-xs"></i>
            </a>

            <a href="<?php echo $d['alamat_website']; ?>/tentang-kami" 
               class="px-6 py-3.5 rounded-xl bg-white/10 hover:bg-white/20 border border-white/20 backdrop-blur-md text-white font-bold text-sm tracking-wide uppercase transition-all duration-300 transform hover:-translate-y-0.5">
              Pelajari Lebih Lanjut
            </a>
          </div>

        </div>
      </div>

    </div>

    <?php 
        $no++;
      }
    } else {
    ?>
    <div class="w-full h-full flex items-center justify-center text-slate-500">
      Belum ada data banner.
    </div>
    <?php } ?>

    <!-- Navigasi Panah -->
    <?php if ($no > 1): ?>
    <button type="button" id="rtBannerPrev" 
            class="absolute left-4 lg:left-8 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-slate-900/40 hover:bg-amber-500 text-white hover:text-slate-950 border border-white/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 shadow-xl">
      <i class="fa-solid fa-chevron-left text-base"></i>
    </button>
    <button type="button" id="rtBannerNext" 
            class="absolute right-4 lg:right-8 top-1/2 -translate-y-1/2 z-30 w-12 h-12 rounded-full bg-slate-900/40 hover:bg-amber-500 text-white hover:text-slate-950 border border-white/10 backdrop-blur-md flex items-center justify-center transition-all duration-300 shadow-xl">
      <i class="fa-solid fa-chevron-right text-base"></i>
    </button>

    <!-- Indikator Dots Bottom -->
    <div id="rtBannerDots" class="absolute bottom-8 left-1/2 -translate-x-1/2 z-30 flex items-center gap-3 bg-slate-950/40 px-4 py-2 rounded-full border border-white/10 backdrop-blur-md">
      <?php for ($i = 0; $i < $no; $i++): ?>
        <button type="button" onclick="rtSetBanner(<?php echo $i; ?>)" 
                class="rt-banner-dot h-2 rounded-full transition-all duration-300 <?php echo ($i === 0) ? 'w-8 bg-amber-500' : 'w-2 bg-white/40 hover:bg-white'; ?>">
        </button>
      <?php endfor; ?>
    </div>
    <?php endif; ?>

  </div>

</section>

<!-- PURE VANILLA JS ENGINE -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const slides = document.querySelectorAll('#rtHeroBanner .rt-banner-slide');
  const dots = document.querySelectorAll('#rtBannerDots .rt-banner-dot');
  const prevBtn = document.getElementById('rtBannerPrev');
  const nextBtn = document.getElementById('rtBannerNext');

  if (!slides.length) return;

  let current = 0;
  let timer = null;

  function showSlide(index) {
    if (index >= slides.length) index = 0;
    if (index < 0) index = slides.length - 1;

    slides.forEach((slide, i) => {
      if (i === index) {
        slide.classList.remove('opacity-0', 'z-0', 'pointer-events-none');
        slide.classList.add('opacity-100', 'z-10');
      } else {
        slide.classList.remove('opacity-100', 'z-10');
        slide.classList.add('opacity-0', 'z-0', 'pointer-events-none');
      }
    });

    dots.forEach((dot, i) => {
      if (i === index) {
        dot.classList.remove('w-2', 'bg-white/40');
        dot.classList.add('w-8', 'bg-amber-500');
      } else {
        dot.classList.remove('w-8', 'bg-amber-500');
        dot.classList.add('w-2', 'bg-white/40');
      }
    });

    current = index;
  }

  window.rtSetBanner = function(index) {
    showSlide(index);
    resetTimer();
  };

  function nextSlide() { showSlide(current + 1); }
  function prevSlide() { showSlide(current - 1); }

  function startTimer() {
    if (slides.length > 1) {
      timer = setInterval(nextSlide, 6000);
    }
  }

  function resetTimer() {
    clearInterval(timer);
    startTimer();
  }

  if (nextBtn) nextBtn.addEventListener('click', () => { nextSlide(); resetTimer(); });
  if (prevBtn) prevBtn.addEventListener('click', () => { prevSlide(); resetTimer(); });

  showSlide(0);
  startTimer();
});
</script>


    <!-- PROFIL -->
    <?php 
    $querystatis1  = "SELECT * FROM profil ORDER BY id_profil ASC LIMIT 1";
    $detailstatis1 = mysqli_query($konek, $querystatis1);
    $r           = mysqli_fetch_array($detailstatis1);
    ?>
   <section class="bg-white font-sans text-brand-navy py-12 md:py-16 border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 items-center">
      
      <!-- Grid Kiri: Teks Profil (Lebar 7 Kolom) -->
      <div class="lg:col-span-7">
        <!-- Badge Section -->
        <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border-l-4 border-brand-yellow mb-2">
          <h2>Profil</h2>
        </div>

        <!-- Judul Profil -->
        <h3 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-brand-navy tracking-tight mt-2 mb-2">
          <?php echo htmlspecialchars($r['judul_profil'] ?? 'Tentang Kami', ENT_QUOTES, 'UTF-8'); ?>
        </h3>
        <div class="w-12 h-1 bg-brand-yellow rounded mb-6"></div>

        <!-- Isi Profil (Format Rich Text/WYSIWYG Friendly) -->
        <div class="text-brand-body text-sm sm:text-base leading-relaxed space-y-4 prose max-w-none">
          <?php echo $r['isi_profil'] ?? ''; ?>
        </div>
      </div>

      <!-- Grid Kanan: Foto Profil (Lebar 5 Kolom) -->
      <div class="lg:col-span-5">
        <div class="relative mx-auto max-w-md lg:max-w-none">
          <!-- Hiasan Background Accent Kuning -->
          <div class="absolute -inset-2 bg-brand-yellow/20 rounded-2xl transform rotate-2 transition-transform duration-300 group-hover:rotate-0"></div>
          
          <!-- Frame Foto -->
          <div class="relative rounded-2xl overflow-hidden border border-gray-200 bg-brand-card shadow-lg">
            <?php if (!empty($r['gambar'])): ?>
              <img 
                src="<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_profil/<?php echo htmlspecialchars($r['gambar'], ENT_QUOTES, 'UTF-8'); ?>" 
                alt="<?php echo htmlspecialchars($r['judul_profil'] ?? 'Foto Profil', ENT_QUOTES, 'UTF-8'); ?>" 
                class="w-full h-[320px] sm:h-[400px] object-cover object-center transition-transform duration-500 hover:scale-105"
              />
            <?php else: ?>
              <!-- Placeholder Jika Foto Belum Ada / Kosong -->
              <div class="w-full h-[320px] sm:h-[400px] bg-brand-card flex flex-col items-center justify-center text-gray-400 p-6 text-center">
                <i class="fa-solid fa-image text-5xl mb-3 text-brand-yellow"></i>
                <span class="text-sm font-medium text-brand-body">Foto Profil Perusahaan</span>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>





   <!-- SECTION LAYANAN PREMIUM (DARK GLASS EDITION) -->
<section class="relative py-20 md:py-28 bg-slate-950 text-white font-sans overflow-hidden">
  
  <!-- Decorative Ambient Glow Background -->
  <div class="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] bg-amber-500/10 blur-[130px] rounded-full pointer-events-none"></div>
  <div class="absolute bottom-0 right-0 w-[400px] h-[400px] bg-blue-600/10 blur-[150px] rounded-full pointer-events-none"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- HEADER SECTION -->
    <div class="flex flex-col lg:flex-row lg:items-end justify-between mb-12 lg:mb-16 gap-6">
      <div class="max-w-2xl">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-900 border border-amber-500/30 text-amber-400 text-xs font-semibold uppercase tracking-widest mb-4 backdrop-blur-md">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-ping"></span>
          <span>Exclusive Services</span>
        </div>
        <h2 class="text-3xl sm:text-5xl font-black text-white tracking-tight leading-tight">
          Layanan <span class="bg-gradient-to-r from-amber-200 via-amber-400 to-amber-500 bg-clip-text text-transparent">Unggulan</span>
        </h2>
        <p class="mt-3 text-slate-400 text-sm sm:text-base leading-relaxed">
          Pengalaman profesional dengan standar kualitas tertinggi untuk kebutuhan bisnis dan kenyamanan Anda.
        </p>
      </div>

      <!-- NAVIGASI SLIDER & BUTTON LIHAT SEMUA -->
      <div class="flex items-center gap-3">
        <!-- Prev/Next Control -->
        <div class="flex items-center p-1 rounded-2xl bg-slate-900/80 border border-slate-800 backdrop-blur-xl">
          <button id="rtServicePrev" type="button" aria-label="Previous Slide" 
                  class="w-11 h-11 rounded-xl bg-transparent hover:bg-slate-800 text-slate-400 hover:text-amber-400 transition-all duration-300 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed">
            <i class="fa-solid fa-arrow-left text-sm"></i>
          </button>
          <div class="w-[1px] h-6 bg-slate-800"></div>
          <button id="rtServiceNext" type="button" aria-label="Next Slide" 
                  class="w-11 h-11 rounded-xl bg-transparent hover:bg-slate-800 text-slate-400 hover:text-amber-400 transition-all duration-300 flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed">
            <i class="fa-solid fa-arrow-right text-sm"></i>
          </button>
        </div>

        <!-- Tombol Lihat Semua Layanan -->
        <a href="<?php echo $d['alamat_website']; ?>/services" 
           class=" items-center gap-2 px-6 py-3.5 rounded-2xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-bold text-xs uppercase tracking-wider transition-all duration-300 shadow-lg shadow-amber-500/20 hover:shadow-amber-500/40 hover:-translate-y-0.5">
          <span>Lihat Semua</span>
          <i class="fa-solid fa-arrow-right-long text-xs"></i>
        </a>
      </div>
    </div>

    <!-- CAROUSEL TRACK WRAPPER -->
    <div class="relative w-full">
      <div id="rtServiceTrack" 
           class="flex gap-6 overflow-x-auto scroll-smooth snap-x snap-mandatory no-scrollbar pt-4 pb-8 px-1">
        
        <?php
        $query_produk = "SELECT * FROM layanan ORDER BY id_layanan DESC";
        $hasil_produk = mysqli_query($konek, $query_produk);

        if ($hasil_produk && mysqli_num_rows($hasil_produk) > 0) {
          while ($r = mysqli_fetch_array($hasil_produk)) {
            $link_detail = $d['alamat_website'] . "/service-" . $r['judul_seo'];
            
            $deskripsi_raw = strip_tags($r['isi_layanan']);
            $deskripsi_singkat = (mb_strlen($deskripsi_raw) > 90) ? mb_substr($deskripsi_raw, 0, 90) . "..." : $deskripsi_raw;
            
            $pesan_wa = "Halo " . ($d['nama_pemilik'] ?? '') . ". Saya tertarik dengan layanan " . $r['judul'];
            
            $queryterbaru1 = "SELECT nama_file FROM semua_gambar WHERE id_layanan = " . (int)$r['id_layanan'] . " ORDER BY id_gambar ASC LIMIT 1";
            $hasilterbaru1 = mysqli_query($konek, $queryterbaru1);
            $tt = mysqli_fetch_array($hasilterbaru1);

            $path_gambar = (!empty($tt['nama_file']) && file_exists("foto_layanan/" . $tt['nama_file'])) 
                            ? $d['alamat_website'] . "/foto_layanan/" . $tt['nama_file'] 
                            : $d['alamat_website'] . "/foto_icon/nofoto.webp";
        ?>
          
          <!-- PREMIUM CARD ITEM -->
          <div class="rt-service-card shrink-0 w-[300px] sm:w-[340px] md:w-[380px] snap-start group relative flex flex-col bg-gradient-to-b from-slate-900/90 to-slate-950/90 border border-slate-800/80 hover:border-amber-500/40 rounded-3xl overflow-hidden backdrop-blur-xl transition-all duration-500 hover:shadow-2xl hover:shadow-amber-500/10 hover:-translate-y-2">
            
            <!-- Glassmorphism Top Glow on Hover -->
            <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-transparent via-amber-500 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

            <!-- Image Wrapper dengan Overlays -->
            <div class="relative w-full h-52 overflow-hidden bg-slate-950">
              <img src="<?php echo htmlspecialchars($path_gambar); ?>" 
                   alt="<?php echo htmlspecialchars($r['judul']); ?>" 
                   class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-700 ease-out">
              
              <!-- Multi-tier Gradient Mask -->
              <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent"></div>
              
              <!-- Floating Premium Badge -->
              <div class="absolute top-4 right-4 px-3 py-1 rounded-full bg-slate-950/70 border border-white/10 backdrop-blur-md flex items-center gap-1.5 shadow-md">
                <i class="fa-solid fa-shield-halved text-amber-400 text-xs"></i>
                <span class="text-[10px] font-bold text-slate-200 uppercase tracking-wider">Premium</span>
              </div>
            </div>

            <!-- Content Area -->
            <div class="p-6 sm:p-7 flex-1 flex flex-col justify-between">
              <div>
                <!-- Title -->
                <h3 class="text-xl font-bold text-white group-hover:text-amber-400 transition-colors duration-300 line-clamp-1 mb-2.5">
                  <?php echo htmlspecialchars($r['judul']); ?>
                </h3>

                <!-- Short Description -->
                <p class="text-xs sm:text-sm text-slate-400 leading-relaxed line-clamp-3 mb-6 font-normal">
                  <?php echo htmlspecialchars($deskripsi_singkat); ?>
                </p>
              </div>

              <!-- Premium Action Grid -->
              <div class="space-y-3 pt-5 border-t border-slate-800/80">
                <!-- Detail Button -->
                <a href="<?php echo htmlspecialchars($link_detail); ?>" 
                   class="w-full py-3 px-4 rounded-xl bg-slate-800/60 hover:bg-slate-800 border border-slate-700/50 text-slate-200 hover:text-white font-semibold text-xs flex items-center justify-between transition-all group/btn">
                  <span>Eksplor Layanan</span>
                  <i class="fa-solid fa-arrow-right text-xs text-slate-400 group-hover/btn:translate-x-1 group-hover/btn:text-amber-400 transition-all"></i>
                </a>

                <!-- WhatsApp Button (Glowing Border) -->
                <a href="https://api.whatsapp.com/send?phone=<?php echo urlencode($kontak['wa'] ?? ''); ?>&text=<?php echo urlencode($pesan_wa); ?>" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   class="w-full py-3 px-4 rounded-xl bg-emerald-500/10 hover:bg-emerald-500 border border-emerald-500/30 text-emerald-400 hover:text-slate-950 font-bold text-xs flex items-center justify-center gap-2 transition-all duration-300 shadow-lg hover:shadow-emerald-500/25">
                  <i class="fa-brands fa-whatsapp text-sm"></i>
                  <span>Konsultasi WhatsApp</span>
                </a>
              </div>

            </div>
          </div>
          <!-- END PREMIUM CARD -->

        <?php 
          }
        } else {
        ?>
          <div class="w-full py-16 text-center text-slate-500 text-sm">
            Belum ada layanan yang tersedia.
          </div>
        <?php } ?>

      </div>
    </div>

 

  </div>
</section>

<!-- HIDE SCROLLBAR STYLE -->
<style>
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>

<!-- VANILLA JS CONTROLLER WITH TOUCH DRAG SUPPORT -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const track = document.getElementById("rtServiceTrack");
  const prevBtn = document.getElementById("rtServicePrev");
  const nextBtn = document.getElementById("rtServiceNext");

  if (!track || !prevBtn || !nextBtn) return;

  const getScrollAmount = () => {
    const card = track.querySelector(".rt-service-card");
    return card ? card.offsetWidth + 24 : 360; 
  };

  nextBtn.addEventListener("click", () => {
    track.scrollBy({ left: getScrollAmount(), behavior: "smooth" });
  });

  prevBtn.addEventListener("click", () => {
    track.scrollBy({ left: -getScrollAmount(), behavior: "smooth" });
  });

  const updateButtons = () => {
    const maxScrollLeft = track.scrollWidth - track.clientWidth;
    prevBtn.disabled = track.scrollLeft <= 5;
    nextBtn.disabled = track.scrollLeft >= maxScrollLeft - 5;
  };

  track.addEventListener("scroll", updateButtons);
  window.addEventListener("resize", updateButtons);
  updateButtons();
});
</script>







 <?php echo $layanan[31]['keterangan']; ?>









  <?php 
  // Sanitasi Nomor WA
  $wa_clean = preg_replace('/[^0-9]/', '', $kontak['wa'] ?? '');
  if (substr($wa_clean, 0, 1) === '0') {
    $wa_clean = '62' . substr($wa_clean, 1);
  }
?>

<!-- SERVICE FAQ SECTION - DARK PREMIUM EDITION -->
<section class="relative bg-slate-950 font-sans text-slate-300 py-16 md:py-24 border-t border-b border-slate-800/80 overflow-hidden" id="rtFaqSection">
  
  <!-- Ambient Gold Glow Effect Background -->
  <div class="absolute top-1/2 left-0 -translate-y-1/2 w-[500px] h-[500px] bg-amber-500/5 blur-[160px] rounded-full pointer-events-none"></div>

  <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-start">
      
      <!-- LEFT GRID: INFO & CALL TO ACTION (4 KOLOM) -->
      <div class="lg:col-span-4 space-y-6 text-center lg:text-left">
        
        <!-- Badge Section -->
        <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-amber-500/30 text-amber-400 text-xs font-bold uppercase tracking-widest backdrop-blur-md">
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
          <span>FAQ & Help Center</span>
        </div>

        <!-- Section Title (Dipanggil dari DB / Custom Heading) -->
        <div class="text-white tracking-tight leading-snug [&>h2]:text-2xl [&>h2]:sm:text-4xl [&>h2]:font-extrabold [&>h2]:text-white">
          <?php echo $layanan[43]['keterangan'] ?? '<h2 class="text-3xl font-bold text-white">Pertanyaan Sering Diajukan</h2>'; ?>
        </div>

        

        <!-- WhatsApp Consultation Button -->
        <div class="pt-2">
          <a href="https://wa.me/<?php echo $wa_clean; ?>" 
             target="_blank" 
             rel="noopener noreferrer"
             class="inline-flex items-center justify-center gap-3 bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 text-white font-extrabold text-sm px-7 py-4 rounded-2xl border border-emerald-400/30 shadow-lg shadow-emerald-600/20 hover:shadow-emerald-500/40 transition-all duration-300 transform hover:-translate-y-0.5 no-underline">
            <i class="fa-brands fa-whatsapp text-xl"></i>
            <span>Konsultasi via WhatsApp</span>
          </a>
        </div>

      </div>

      <!-- RIGHT GRID: FAQ ACCORDION (8 KOLOM) -->
      <div class="lg:col-span-8 space-y-4">
        <?php
        $queryterbaru = "SELECT * FROM faq ORDER BY id_faq ASC";
        $hasilterbaru = mysqli_query($konek, $queryterbaru);
        $no = 0;
        
        if ($hasilterbaru && mysqli_num_rows($hasilterbaru) > 0) {
          while($t = mysqli_fetch_array($hasilterbaru)) {
            $no++;
            $isFirst = ($no == 1);
        ?>
        
        <!-- Accordion Item Card -->
        <details class="rt-faq-item group bg-slate-900/80 rounded-2xl border border-slate-800/80 hover:border-amber-500/40 shadow-xl overflow-hidden transition-all duration-300 backdrop-blur-sm" <?php echo $isFirst ? 'open' : ''; ?>>
          
          <!-- Accordion Header -->
          <summary class="flex items-center justify-between p-5 sm:p-6 cursor-pointer list-none select-none text-white font-bold text-base sm:text-lg group-open:text-amber-400 transition-colors duration-200">
            <div class="flex items-center gap-4 pr-4">
              <!-- Icon Container -->
              <div class="w-10 h-10 bg-slate-800 text-amber-400 rounded-xl border border-slate-700/60 flex items-center justify-center text-base shrink-0 group-open:bg-amber-500 group-open:text-slate-950 group-open:border-amber-400 transition-all duration-300 shadow-md">
                <i class="fa-regular fa-circle-question"></i>
              </div>
              
              <!-- Question Text -->
              <span class="tracking-tight leading-snug">
                <?php echo htmlspecialchars($t['pertanyaan'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
              </span>
            </div>

            <!-- Chevron Icon Indicator -->
            <div class="w-8 h-8 rounded-lg bg-slate-800/50 flex items-center justify-center text-slate-400 group-open:rotate-180 group-open:text-amber-400 group-open:bg-amber-500/10 transition-all duration-300 shrink-0">
              <i class="fa-solid fa-chevron-down text-xs"></i>
            </div>
          </summary>

          <!-- Accordion Body -->
          <div class="px-5 pb-6 sm:px-6 sm:pb-6 pt-0">
            <div class="border-t border-slate-800/80 pt-4 sm:pl-14 text-slate-300 text-sm sm:text-base leading-relaxed prose prose-invert max-w-none">
              <?php echo $t['jawaban'] ?? ''; ?>
            </div>
          </div>

        </details>

        <?php 
          }
        } else {
        ?>
          <div class="p-8 text-center text-slate-500 bg-slate-900/50 rounded-2xl border border-slate-800">
            Belum ada data FAQ yang tersedia.
          </div>
        <?php } ?>
      </div>

    </div>
  </div>
</section>
<!-- SERVICE FAQ SECTION END -->

<!-- CSS Khusus Sembunyikan Marker bawaan <details> -->
<style>
  summary::-webkit-details-marker,
  summary::marker {
    display: none !important;
  }
</style>





 <!-- Gallery Section Start -->
<section class="bg-white font-sans text-brand-body py-12 md:py-20" id="rtGallerySection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-10 md:mb-14">
      <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3.5 py-1.5 rounded border-l-4 border-brand-yellow mb-3">
        FIELD DOCUMENTATION
      </div>
      <?php echo $layanan[40]['keterangan']; ?>
    </div>

    <!-- Responsive CSS Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6" id="rt_gallery">
      <?php
      $query = "SELECT * FROM galeri ORDER BY id_galeri ASC";
      $result = mysqli_query($konek, $query);
      $no = 1;

      if ($result && mysqli_num_rows($result) > 0) {
        while ($g = mysqli_fetch_array($result)) {
            $imgUrl = htmlspecialchars(($d['alamat_website'] ?? '') . '/foto_galeri/' . $g['gambar']);
            $albumName = htmlspecialchars($g['judul_galeri'] ?? '', ENT_QUOTES, 'UTF-8');
      ?>

      <!-- Gallery Item Item -->
      <div class="rt_gal_item group cursor-pointer" onclick="openGalleryModal('modal-<?php echo $no; ?>')">
        <div class="relative w-full aspect-[4/3] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 group-hover:border-brand-yellow group-hover:shadow-lg group-hover:shadow-brand-yellow/20">
          
          <!-- Image -->
          <img src="<?php echo $imgUrl; ?>" 
               alt="<?php echo $albumName; ?>" 
               loading="lazy"
               class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110">
          
          <!-- Hover Overlay -->
          <div class="absolute inset-0 bg-gradient-to-t from-brand-navy/90 via-brand-navy/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4">
            <div class="text-center text-white transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 flex flex-col items-center">
              
              <!-- Icon Holder -->
              <span class="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-brand-yellow/20 border border-brand-yellow text-brand-yellow flex items-center justify-center text-sm sm:text-base mb-2 shadow-sm">
                <i class="fa-solid fa-magnifying-glass-plus"></i>
              </span>
              
              <!-- Title -->
              <span class="text-xs sm:text-sm font-bold line-clamp-2 leading-snug">
                <?php echo $albumName; ?>
              </span>
            </div>
          </div>

        </div>
      </div>

      <!-- Lightbox Modal Item -->
      <div id="modal-<?php echo $no; ?>" class="rt_gal_modal fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm transition-opacity duration-300">
        <div class="relative w-full max-w-4xl max-h-[90vh] flex flex-col items-center justify-center">
          
          <!-- Modal Close Button -->
          <button type="button" 
                  onclick="closeGalleryModal('modal-<?php echo $no; ?>')"
                  class="absolute -top-10 right-0 text-white hover:text-brand-yellow text-2xl font-bold transition-colors duration-200 focus:outline-none">
            <i class="fa-solid fa-xmark"></i>
          </button>
          
          <!-- Image Container -->
          <div class="w-full bg-black rounded-t-xl border border-brand-yellow/30 border-b-0 overflow-hidden flex justify-center">
            <img src="<?php echo $imgUrl; ?>" 
                 alt="<?php echo $albumName; ?>" 
                 class="max-h-[70vh] w-auto object-contain">
          </div>
          
          <!-- Caption Box -->
          <div class="w-full bg-brand-navy border border-brand-yellow/30 border-t-0 rounded-b-xl p-3.5 sm:p-4 text-center text-white text-xs sm:text-sm font-bold flex items-center justify-center space-x-2">
            <i class="fa-solid fa-mountain text-brand-yellow"></i>
            <span><?php echo $albumName; ?></span>
          </div>

        </div>
      </div>

      <?php
            $no++;
        }
      }
      ?>
    </div>

    <!-- Load More Button -->
    <div class="text-center mt-10 md:mt-12">
      <button id="loadMoreBtn" class="inline-flex items-center space-x-2 bg-transparent border-2 border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white text-xs sm:text-sm font-extrabold uppercase tracking-wider py-3 px-8 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5">
        <i class="fa-solid fa-images"></i>
        <span>View More Documentation</span>
      </button>
    </div>
    
  </div>
</section>
<!-- Gallery Section End -->

<!-- Gallery Dynamic Load & Modal Vanilla JS -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const items = document.querySelectorAll(".rt_gal_item");
  const loadMoreBtn = document.getElementById("loadMoreBtn");
  
  if (items.length && loadMoreBtn) {
    let currentVisible = 6; // Jumlah gambar awal yang ditampilkan

    // Sembunyikan item selebihnya dari batas
    for (let i = currentVisible; i < items.length; i++) {
      items[i].classList.add('hidden');
    }

    if (items.length <= currentVisible) {
      loadMoreBtn.classList.add('hidden');
    }

    // Event tombol View More
    loadMoreBtn.addEventListener("click", function() {
      let nextVisible = currentVisible + 6;
      
      for (let i = currentVisible; i < nextVisible && i < items.length; i++) {
        items[i].classList.remove('hidden');
        items[i].classList.add('animate-fade-in');
      }
      
      currentVisible = nextVisible;

      if (currentVisible >= items.length) {
        loadMoreBtn.classList.add('hidden');
      }
    });
  }
});

// Modal Actions
function openGalleryModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.body.style.overflow = 'hidden'; // Stop background scroll
  }
}

function closeGalleryModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    document.body.style.overflow = 'auto'; // Restore scroll
  }
}

// Close Modal when clicking outside the content
window.addEventListener('click', function(e) {
  if (e.target.classList.contains('rt_gal_modal')) {
    e.target.classList.add('hidden');
    e.target.classList.remove('flex');
    document.body.style.overflow = 'auto';
  }
});
</script>









<?php
} 
/*** END .Halaman Utama ***/


/*** BEGIN .Modul Services ***/
elseif ($module == 'services') {
       $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    ?>
    
    <!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->


<!-- Services Section Start -->
<section class="bg-slate-50 font-sans text-brand-body py-12 md:py-20" id="rtServicesSection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16">
     <?php echo"$r5[keterangan]"?>
    </div>

    <!-- Responsive CSS Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <?php
      $query_layanan = "SELECT * FROM layanan ORDER BY id_layanan DESC";
      $hasil_layanan = mysqli_query($konek, $query_layanan);
      
      if ($hasil_layanan && mysqli_num_rows($hasil_layanan) > 0) {
        while ($t = mysqli_fetch_array($hasil_layanan)) {
            // Ambil gambar pertama dari relasi tabel semua_gambar
            $query_gambar = "SELECT nama_file FROM semua_gambar WHERE id_layanan = " . (int)$t['id_layanan'] . " ORDER BY id_gambar ASC LIMIT 1";
            $hasil_gambar = mysqli_query($konek, $query_gambar);
            $tt = mysqli_fetch_array($hasil_gambar);

            // Validasi file gambar
            $has_photo = !empty($tt['nama_file']) && file_exists("foto_layanan/" . $tt['nama_file']);
            $path_gambar = $has_photo 
                ? ($d['alamat_website'] ?? '') . "/foto_layanan/" . $tt['nama_file'] 
                : ($d['alamat_website'] ?? '') . "/foto_layanan/nofoto.webp";

            $judul = htmlspecialchars($t['judul'] ?? '', ENT_QUOTES, 'UTF-8');
            $judul_seo = htmlspecialchars($t['judul_seo'] ?? '', ENT_QUOTES, 'UTF-8');
            $ringkasan = htmlspecialchars(mb_substr(strip_tags($t['isi_layanan'] ?? ''), 0, 115), ENT_QUOTES, 'UTF-8') . '...';
            $link_detail = ($d['alamat_website'] ?? '') . "/service-" . $judul_seo;
            $wa_number = preg_replace('/[^0-9]/', '', $kontak['wa'] ?? '');
            $link_wa = "https://wa.me/" . $wa_number . "?text=" . urlencode("Halo, saya ingin bertanya mengenai layanan: " . $t['judul']);
      ?>

      <!-- Service Card Item -->
      <div class="group flex flex-col bg-white rounded-2xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-xl hover:border-brand-yellow transition-all duration-300 transform hover:-translate-y-1">
        
        <!-- Thumbnail Container -->
        <div class="relative w-full aspect-[16/10] overflow-hidden bg-brand-navy">
          <img src="<?php echo htmlspecialchars($path_gambar); ?>" 
               alt="<?php echo $judul; ?>" 
               loading="lazy"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
          
          <!-- Gradient Overlay -->
          <div class="absolute inset-0 bg-gradient-to-t from-brand-navy/60 via-transparent to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-300"></div>

          <!-- Category Badge -->
          <span class="absolute top-4 left-4 bg-brand-navy/80 backdrop-blur-md text-brand-yellow text-[10px] font-extrabold uppercase px-3 py-1 rounded-full border border-brand-yellow/30 tracking-wider">
            Featured Service
          </span>
        </div>

        <!-- Card Body -->
        <div class="p-5 sm:p-6 flex flex-col flex-grow justify-between">
          <div>
            <!-- Service Title -->
            <h3 class="text-lg sm:text-xl font-extrabold text-brand-navy group-hover:text-brand-yellow-dark transition-colors duration-200 leading-snug mb-2.5">
              <a href="<?php echo $link_detail; ?>">
                <?php echo $judul; ?>
              </a>
            </h3>

            <!-- Short Description -->
            <p class="text-xs sm:text-sm text-brand-muted leading-relaxed line-clamp-3 mb-6">
              <?php echo $ringkasan; ?>
            </p>
          </div>

          <!-- Action Buttons Area -->
          <div class="pt-4 border-t border-gray-100 grid grid-cols-2 gap-2.5 mt-auto">
            
            <!-- Detail Button -->
            <a href="<?php echo $link_detail; ?>" 
               class="inline-flex items-center justify-center space-x-1.5 bg-slate-100 hover:bg-brand-navy text-brand-navy hover:text-white text-xs font-extrabold py-2.5 px-3 rounded-xl transition-all duration-200 border border-slate-200 hover:border-brand-navy text-center">
              <span>Detail Service</span>
              <i class="fa-solid fa-arrow-right text-[10px]"></i>
            </a>

            <!-- WhatsApp Order Button -->
            <a href="<?php echo $link_wa; ?>" 
               target="_blank" 
               rel="noopener noreferrer" 
               class="inline-flex items-center justify-center space-x-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-extrabold py-2.5 px-3 rounded-xl transition-all duration-200 shadow-sm hover:shadow-md text-center">
              <i class="fa-brands fa-whatsapp text-sm"></i>
              <span>Pesan WA</span>
            </a>

          </div>
        </div>

      </div>

      <?php
        }
      } else {
      ?>
      <div class="col-span-full text-center py-12 bg-white rounded-2xl border border-dashed border-gray-300">
        <i class="fa-solid fa-concierge-bell text-4xl text-gray-300 mb-3"></i>
        <p class="text-brand-muted text-sm font-medium">Belum ada layanan yang tersedia saat ini.</p>
      </div>
      <?php } ?>
    </div>

  </div>
</section>
<!-- Services Section End -->
    
    
    <?php
}


/*** BEGIN .Modul Detail Service ***/
elseif ($module == 'detailservice') {
   $judul_seo = mysqli_real_escape_string($konek, $_GET['judul_seo'] ?? '');
$query5 = "SELECT * FROM layanan WHERE judul_seo = '$judul_seo'";        
$hasil5 = mysqli_query($konek, $query5);
$r = mysqli_fetch_array($hasil5);

if ($r) {
    $id_target = (int)$r['id_layanan'];
    $judul = htmlspecialchars($r['judul'] ?? '', ENT_QUOTES, 'UTF-8');
    $wa_number = preg_replace('/[^0-9]/', '', $kontak['wa'] ?? '');
    $link_wa = "https://wa.me/" . $wa_number . "?text=" . urlencode("Halo, saya berminat dan ingin konsultasi/pesan layanan: " . $r['judul']);
    
    // Ambil semua gambar layanan
    $query_gambar = "SELECT nama_file FROM semua_gambar WHERE id_layanan = '$id_target' ORDER BY id_gambar ASC";
    $result_gambar = mysqli_query($konek, $query_gambar);
    $gambar_list = [];

    if ($result_gambar && mysqli_num_rows($result_gambar) > 0) {
        while ($img = mysqli_fetch_array($result_gambar)) {
            $has_photo = !empty($img['nama_file']) && file_exists("foto_layanan/" . $img['nama_file']);
            if ($has_photo) {
                $gambar_list[] = ($d['alamat_website'] ?? '') . "/foto_layanan/" . $img['nama_file'];
            }
        }
    }

    // Jika tidak ada gambar, gunakan fallback image
    if (empty($gambar_list)) {
        $gambar_list[] = ($d['alamat_website'] ?? '') . "/foto_layanan/nofoto.webp";
    }
?>

<!-- Service Detail Section Start -->
<section class="bg-slate-50 font-sans text-brand-body py-8 md:py-14" id="rtServiceDetail">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Breadcrumb Navigation -->
    <nav class="flex mb-6 text-xs sm:text-sm text-brand-muted" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-2">
        <li>
          <a href="<?php echo $d['alamat_website'] ?? '#'; ?>" class="hover:text-brand-navy transition-colors">
            <i class="fa-solid fa-house mr-1"></i> Beranda
          </a>
        </li>
        <li><i class="fa-solid fa-chevron-right text-[10px] text-gray-400"></i></li>
        <li>
          <a href="<?php echo ($d['alamat_website'] ?? '') . '#rtServicesSection'; ?>" class="hover:text-brand-navy transition-colors">
            Layanan
          </a>
        </li>
        <li><i class="fa-solid fa-chevron-right text-[10px] text-gray-400"></i></li>
        <li class="text-brand-navy font-bold truncate max-w-[200px] sm:max-w-xs">
          <?php echo $judul; ?>
        </li>
      </ol>
    </nav>

    <!-- Content Grid Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
      
      <!-- Left Main Column (Gallery & Description) -->
      <div class="lg:col-span-8 bg-white rounded-2xl p-5 sm:p-8 border border-gray-200 shadow-sm">
        
        <!-- Service Title Header -->
        <div class="border-b border-gray-100 pb-6 mb-6">
          <span class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border-l-4 border-brand-yellow mb-3">
            EXPETITION & SERVICE PACKAGE
          </span>
          <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-brand-navy tracking-tight leading-snug">
            <?php echo $judul; ?>
          </h1>
        </div>

        <!-- Service Image Showcase / Gallery -->
        <div class="mb-8">
          <!-- Main Display Image -->
          <div class="relative w-full aspect-[16/9] bg-brand-navy rounded-2xl overflow-hidden shadow-sm border border-gray-200">
            <img id="mainServiceImg" 
                 src="<?php echo htmlspecialchars($gambar_list[0]); ?>" 
                 alt="<?php echo $judul; ?>" 
                 class="w-full h-full object-cover transition-all duration-300">
          </div>

          <!-- Thumbnail Strip (Hanya tampil jika gambar > 1) -->
          <?php if (count($gambar_list) > 1): ?>
          <div class="flex items-center space-x-3 mt-4 overflow-x-auto pb-2 scrollbar-thin">
            <?php foreach ($gambar_list as $index => $imgUrl): ?>
              <button type="button" 
                      onclick="changeMainImg('<?php echo htmlspecialchars($imgUrl); ?>', this)"
                      class="rt_thumb_btn relative flex-shrink-0 w-20 h-16 sm:w-24 sm:h-20 rounded-xl overflow-hidden border-2 <?php echo $index === 0 ? 'border-brand-yellow ring-2 ring-brand-yellow/30' : 'border-gray-200 opacity-70'; ?> hover:opacity-100 transition-all duration-200">
                <img src="<?php echo htmlspecialchars($imgUrl); ?>" alt="Thumbnail" class="w-full h-full object-cover">
              </button>
            <?php endforeach; ?>
          </div>
          <?php endif; ?>
        </div>

        <!-- Article Content (Rich Text Input from CMS) -->
        <div class="prose prose-slate max-w-none text-sm sm:text-base leading-relaxed text-slate-700">
          <?php echo $r['isi_layanan']; ?>
        </div>

      </div>

      <!-- Right Column: Sticky Booking & CTA Sidebar -->
      <div class="lg:col-span-4 lg:sticky lg:top-24 space-y-6">
        
        <!-- WhatsApp CTA Card -->
        <div class="bg-brand-navy text-white rounded-2xl p-6 shadow-xl border border-brand-yellow/30 relative overflow-hidden">
          
          <!-- Decorative Background Badge -->
          <div class="absolute -right-6 -bottom-6 w-28 h-28 bg-brand-yellow/10 rounded-full blur-2xl"></div>

          <div class="flex items-center space-x-3 mb-4">
            <span class="w-10 h-10 rounded-xl bg-brand-yellow/20 text-brand-yellow flex items-center justify-center text-lg">
              <i class="fa-solid fa-calendar-check"></i>
            </span>
            <div>
              <h3 class="font-extrabold text-base text-white">Tertarik Layanan Ini?</h3>
              <p class="text-xs text-slate-300">Respon cepat via WhatsApp</p>
            </div>
          </div>

          <p class="text-xs sm:text-sm text-slate-300 leading-relaxed mb-6">
            Dapatkan konsultasi gratis, penyesuaian jadwal trip, serta informasi harga paket terbaik dari tim ahli kami.
          </p>

          <!-- WhatsApp Button -->
          <a href="<?php echo $link_wa; ?>" 
             target="_blank" 
             rel="noopener noreferrer" 
             class="w-full inline-flex items-center justify-center space-x-2 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold text-sm py-3.5 px-4 rounded-xl transition-all duration-200 shadow-lg shadow-emerald-600/30 hover:-translate-y-0.5">
            <i class="fa-brands fa-whatsapp text-lg"></i>
            <span>Pesan / Konsultasi via WA</span>
          </a>

          <!-- Guarantees Badge -->
          <div class="mt-6 pt-5 border-t border-white/10 grid grid-cols-2 gap-3 text-center text-[11px] text-slate-300">
            <div class="flex items-center justify-center space-x-1.5">
              <i class="fa-solid fa-shield-halved text-brand-yellow"></i>
              <span>Pemandu Berlisensi</span>
            </div>
            <div class="flex items-center justify-center space-x-1.5">
              <i class="fa-solid fa-headset text-brand-yellow"></i>
              <span>Dukungan 24/7</span>
            </div>
          </div>

        </div>

        <!-- Back to Services Button -->
        <a href="<?php echo ($d['alamat_website'] ?? '') . '#rtServicesSection'; ?>" 
           class="w-full inline-flex items-center justify-center space-x-2 bg-white hover:bg-slate-100 text-brand-navy font-bold text-xs sm:text-sm py-3 px-4 rounded-xl border border-gray-200 transition-all duration-200 shadow-sm">
          <i class="fa-solid fa-arrow-left"></i>
          <span>Lihat Layanan Lainnya</span>
        </a>

      </div>

    </div>

  </div>
</section>
<!-- Service Detail Section End -->

<!-- Dynamic Image Switcher JS -->
<script>
function changeMainImg(src, btn) {
  const mainImg = document.getElementById('mainServiceImg');
  if (mainImg) {
    mainImg.src = src;
  }
  
  // Reset active border thumbnail
  document.querySelectorAll('.rt_thumb_btn').forEach(el => {
    el.classList.remove('border-brand-yellow', 'ring-2', 'ring-brand-yellow/30');
    el.classList.add('border-gray-200', 'opacity-70');
  });

  // Highlight thumbnail aktif
  btn.classList.remove('border-gray-200', 'opacity-70');
  btn.classList.add('border-brand-yellow', 'ring-2', 'ring-brand-yellow/30');
}
</script>

<?php 
} else { 
?>
<!-- 404 Service Not Found State -->
<section class="bg-white font-sans py-20 text-center">
  <div class="max-w-md mx-auto px-4">
    <div class="w-16 h-16 bg-red-100 text-red-500 rounded-full flex items-center justify-center mx-auto text-2xl mb-4">
      <i class="fa-solid fa-triangle-exclamation"></i>
    </div>
    <h2 class="text-2xl font-extrabold text-brand-navy mb-2">Layanan Tidak Ditemukan</h2>
    <p class="text-sm text-brand-muted mb-6">Maaf, paket atau layanan yang Anda cari tidak tersedia atau telah dihapus.</p>
    <a href="<?php echo $d['alamat_website'] ?? '#'; ?>" class="inline-flex items-center space-x-2 bg-brand-navy text-white text-xs font-bold py-3 px-6 rounded-xl hover:bg-brand-navy-dark transition-all">
      <i class="fa-solid fa-arrow-left"></i>
      <span>Kembali ke Beranda</span>
    </a>
  </div>
</section>
<?php 
}
}


/*** BEGIN .Modul FAQ ***/
elseif ($module == 'faq') {
     $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    
    
    
    $querystatis  = "SELECT * FROM profil WHERE id_profil=1";
    $detailstatis = mysqli_query($konek, $querystatis);
    $r            = mysqli_fetch_array($detailstatis);

    $querystatis2  = "SELECT * FROM profil WHERE id_profil=2";
    $detailstatis2 = mysqli_query($konek, $querystatis2);
    $r2            = mysqli_fetch_array($detailstatis2);

    $querystatis3  = "SELECT * FROM profil WHERE id_profil=3";
    $detailstatis3 = mysqli_query($konek, $querystatis3);
    $r3            = mysqli_fetch_array($detailstatis3);
?>


<!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->
    
    
    
   
    
    
    <?php 
  // Sanitasi Nomor WA
  $wa_clean = preg_replace('/[^0-9]/', '', $kontak['wa'] ?? '');
  if (substr($wa_clean, 0, 1) === '0') {
    $wa_clean = '62' . substr($wa_clean, 1);
  }
?>

<!-- Service FAQ Section Start - Tailwind Version -->
<section class="bg-brand-card font-sans text-brand-navy py-12 md:py-16 border-t border-b border-gray-200" id="rtFaqSection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
      
      <!-- Left Grid: Info & Call to Action (Lebar 4 Kolom) -->
      <div class="lg:col-span-4 space-y-6 text-center lg:text-left">
        <!-- Badge Section -->
        <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border-l-4 border-brand-yellow">
          FAQ & Help
        </div>

        <!-- Section Title -->
        <?php echo $r5['keterangan']; ?>

        <!-- WhatsApp Consultation Button -->
        <div>
          <a href="https://wa.me/<?php echo $wa_clean; ?>" 
             target="_blank" 
             rel="noopener noreferrer"
             class="inline-flex items-center justify-center space-x-2.5 bg-brand-navy hover:bg-brand-wa text-white hover:text-white font-bold text-sm px-6 py-3.5 rounded-full border-2 border-brand-yellow hover:border-brand-wa shadow-lg hover:shadow-brand-wa/30 transition-all duration-300 transform hover:-translate-y-0.5 no-underline">
            <i class="fa-brands fa-whatsapp text-lg"></i>
            <span>Consultation</span>
          </a>
        </div>
      </div>

      <!-- Right Grid: FAQ Accordion (PHP Loop - Lebar 8 Kolom) -->
      <div class="lg:col-span-8 space-y-4">
        <?php
        $queryterbaru = "SELECT * FROM faq ORDER BY id_faq ASC";
        $hasilterbaru = mysqli_query($konek, $queryterbaru);
        $no = 0;
        while($t = mysqli_fetch_array($hasilterbaru)) {
            $no++;
            $isFirst = ($no == 1);
        ?>
        
        <!-- Accordion Item (Native Details/Summary for Clean Interaction) -->
        <details class="group bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden transition-all duration-300 hover:border-brand-yellow hover:shadow-md" <?php echo $isFirst ? 'open' : ''; ?>>
          
          <!-- Accordion Header -->
          <summary class="flex items-center justify-between p-4 sm:p-5 cursor-pointer list-none select-none text-brand-navy font-bold text-base group-open:text-brand-navy transition-colors">
            <div class="flex items-center space-x-3 pr-4">
              <!-- Question Icon -->
              <div class="w-8 h-8 bg-brand-yellow/20 text-brand-yellow-dark rounded-lg flex items-center justify-center text-sm shrink-0 group-open:bg-brand-yellow group-open:text-brand-navy transition-colors">
                <i class="fa-regular fa-circle-question"></i>
              </div>
              <!-- Question Text -->
              <span class="text-sm sm:text-base tracking-tight">
                <?php echo htmlspecialchars($t['pertanyaan'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
              </span>
            </div>

            <!-- Chevron Icon Toggle (Rotates on Open) -->
            <div class="text-gray-400 group-open:rotate-180 group-open:text-brand-yellow transition-transform duration-300 shrink-0">
              <i class="fa-solid fa-chevron-down text-sm"></i>
            </div>
          </summary>

          <!-- Accordion Body -->
          <div class="px-4 pb-5 sm:px-5 sm:pb-5 pt-0">
            <div class="border-t border-gray-100 pt-4 pl-11 text-brand-body text-sm sm:text-base leading-relaxed prose max-w-none">
              <?php echo $t['jawaban'] ?? ''; ?>
            </div>
          </div>

        </details>

        <?php } ?>
      </div>

    </div>
  </div>
</section>
<!-- Service FAQ Section End -->
    
    <?php
}


/*** BEGIN .Modul Detail Blog ***/
elseif ($module == 'detailblog') {
    $blog_seo = mysqli_real_escape_string($konek, $_GET['blog_seo'] ?? '');
    $query5 = "SELECT * FROM blog WHERE blog_seo = '$blog_seo'";       
    $hasil5 = mysqli_query($konek, $query5);
    $r = mysqli_fetch_array($hasil5);

   ?>
   
   <section class="bg-white font-sans text-brand-body py-10 md:py-16" id="rtBlogDetail">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">

      <!-- Main Article Content (Left Side - 8 Kolom) -->
      <main class="lg:col-span-8">
        <article class="space-y-6">
          
          <!-- Category Badge -->
          <div>
            <span class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3.5 py-1.5 rounded border-l-4 border-brand-yellow">
              <i class="fa-regular fa-newspaper mr-1.5"></i> Article & Insights
            </span>
          </div>

          <!-- Article Title -->
          <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-brand-navy leading-tight tracking-tight">
            <?php echo htmlspecialchars($r['judul_blog'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
          </h1>

          <!-- Meta Information Row -->
          <div class="bg-brand-card border border-gray-200 rounded-xl p-3.5 sm:p-4 text-xs sm:text-sm text-brand-muted font-medium flex flex-wrap items-center gap-4 sm:gap-6">
            <div class="flex items-center space-x-2">
              <i class="fa-regular fa-user text-brand-yellow-dark"></i>
              <span>By Editorial Team</span>
            </div>
            <div class="flex items-center space-x-2">
              <i class="fa-regular fa-calendar text-brand-yellow-dark"></i>
              <span><?php echo $tanggal; ?></span>
            </div>
            <div class="flex items-center space-x-2">
              <i class="fa-regular fa-eye text-brand-yellow-dark"></i>
              <span>Views: <?php echo number_format($r['dibaca'] ?? 0, 0, ',', '.'); ?> x</span>
            </div>
          </div>

          <!-- Featured Hero Image -->
          <?php if (!empty($r['gambar'])) { ?>
          <div class="relative w-full overflow-hidden rounded-2xl border border-gray-200 bg-brand-navy shadow-sm max-h-[480px]">
            <img src="<?php echo htmlspecialchars(($d['alamat_website'] ?? '') . '/foto_blog/' . $r['gambar']); ?>" 
                 class="w-full h-full object-cover block" 
                 alt="<?php echo htmlspecialchars($r['judul_blog'] ?? '', ENT_QUOTES, 'UTF-8'); ?>" 
                 loading="lazy">
          </div>
          <?php } ?>

          <!-- WYSIWYG Content Body -->
          <div class="text-brand-body text-base leading-relaxed space-y-4 pt-2 [&>p]:mb-4 [&>h2]:text-2xl [&>h2]:font-bold [&>h2]:text-brand-navy [&>h2]:mt-6 [&>h2]:mb-3 [&>h3]:text-xl [&>h3]:font-bold [&>h3]:text-brand-navy [&>h3]:mt-5 [&>h3]:mb-2 [&>blockquote]:border-l-4 [&>blockquote]:border-brand-yellow [&>blockquote]:bg-brand-card [&>blockquote]:p-4 [&>blockquote]:rounded-r-lg [&>blockquote]:italic [&>blockquote]:my-4 [&>ul]:list-disc [&>ul]:pl-5 [&>ol]:list-decimal [&>ol]:pl-5 [&>img]:rounded-xl [&>img]:my-4 [&>img]:max-w-full [&>img]:h-auto">
            <?php echo $r['isi_blog'] ?? ''; ?>
          </div>

          <!-- Footer Share & Back Button Box -->
          <div class="bg-brand-card border border-gray-200 rounded-xl p-4 sm:p-5 flex flex-col sm:flex-row items-center justify-between gap-4 mt-8">
            <div class="text-xs sm:text-sm font-semibold text-brand-navy flex items-center space-x-2 text-center sm:text-left">
              <i class="fa-solid fa-shield-halved text-brand-yellow-dark text-base"></i>
              <span>Official Article Publication</span>
            </div>
            
            <div>
              <a href="javascript:history.back()" 
                 class="inline-flex items-center space-x-2 bg-brand-navy hover:bg-brand-yellow text-white hover:text-brand-navy text-xs sm:text-sm font-bold px-5 py-2.5 rounded-full transition-all duration-300 no-underline shadow-sm">
                <i class="fa-solid fa-arrow-left"></i>
                <span>Back to Articles</span>
              </a>
            </div>
          </div>

        </article>
      </main>

      <!-- Sidebar Content (Right Side - 4 Kolom) -->
      <aside class="lg:col-span-4">
        <div class="sticky top-24 space-y-6">
          
          <!-- Recent Articles Widget Box -->
          <div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm">
            <!-- Widget Header -->
            <div class="border-b border-gray-200 pb-3 mb-4">
              <h3 class="text-lg font-extrabold text-brand-navy flex items-center justify-between">
                <span>Recent Articles</span>
                <span class="w-8 h-1 bg-brand-yellow rounded-full inline-block"></span>
              </h3>
            </div>

            <!-- Widget List -->
            <div class="space-y-4">
              <?php 
              $current_id = isset($r['id_blog']) ? intval($r['id_blog']) : 0;
              $query2  = "SELECT * FROM blog WHERE id_blog != $current_id ORDER BY id_blog DESC LIMIT 4";
              $tampil2 = mysqli_query($konek, $query2);
              
              if ($tampil2 && mysqli_num_rows($tampil2) > 0) {
                  while ($r2 = mysqli_fetch_array($tampil2)) {
                      $tanggal2 = function_exists('tgl_indo') ? tgl_indo($r2['tgl_posting']) : $r2['tgl_posting'];  
                      $url_artikel2 = htmlspecialchars(($d['alamat_website'] ?? '') . "/article-" . $r2['blog_seo']);
                      $url_gambar2 = !empty($r2['gambar']) ? htmlspecialchars(($d['alamat_website'] ?? '') . "/foto_blog/" . $r2['gambar']) : 'assets/img/default-article.jpg';
              ?>

              <!-- Related Post Item -->
              <div class="group flex items-start space-x-3.5 pb-3.5 border-b border-dashed border-gray-200 last:border-b-0 last:pb-0">
                <!-- Thumbnail -->
                <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg overflow-hidden bg-gray-100 shrink-0">
                  <a href="<?php echo $url_artikel2; ?>" class="block w-full h-full">
                    <img src="<?php echo $url_gambar2; ?>" 
                         alt="<?php echo htmlspecialchars($r2['judul_blog'] ?? '', ENT_QUOTES, 'UTF-8'); ?>" 
                         loading="lazy"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                  </a>
                </div>
                
                <!-- Content -->
                <div class="flex-grow space-y-1">
                  <h4 class="text-xs sm:text-sm font-bold text-brand-navy leading-snug line-clamp-2">
                    <a href="<?php echo $url_artikel2; ?>" class="hover:text-brand-yellow-dark transition-colors duration-200">
                      <?php echo htmlspecialchars($r2['judul_blog'] ?? '', ENT_QUOTES, 'UTF-8'); ?>
                    </a>
                  </h4>
                  <div class="text-[11px] text-brand-muted flex items-center space-x-1">
                    <i class="fa-regular fa-calendar text-brand-yellow-dark"></i>
                    <span><?php echo $tanggal2; ?></span>
                  </div>
                </div>
              </div>

              <?php 
                  }
              } else {
              ?>
              <p class="text-xs text-brand-muted py-2">No other articles available.</p>
              <?php } ?>
            </div>

          </div>

        </div>
      </aside>

    </div>
  </div>
</section>
   
   <?php
}


/*** BEGIN .Modul Blog List ***/
elseif ($module == 'blog') {
    
     $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    ?>
    
    <!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->





<!-- Universal Blog & Articles Section Start -->
<section class="bg-brand-card font-sans text-brand-navy py-12 md:py-16 border-t border-b border-gray-200" id="rtBlogSection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-10 md:mb-14 space-y-3">
      <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3.5 py-1.5 rounded border-l-4 border-brand-yellow">
        <i class="fa-regular fa-newspaper mr-1.5"></i> Latest Updates & Articles
      </div>
      <?php echo $r5['keterangan'] ?? ''; ?>
    </div>

    <!-- Container Grid Artikel (Akan Didiisi via AJAX) -->
    <div id="blogGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 items-stretch min-h-[300px]">
      <!-- Loading Skeleton/Spinner Awal -->
      <div class="col-span-full flex justify-center items-center py-12">
        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-brand-navy"></div>
      </div>
    </div>

    <!-- Container Paginasi JS -->
    <div id="jsPaginationWrapper" class="mt-10 sm:mt-12 flex justify-center items-center space-x-1 sm:space-x-2"></div>

  </div>
</section>

<!-- AJAX Pagination Engine -->
<script>
document.addEventListener('DOMContentLoaded', function () {
  const blogGrid = document.getElementById('blogGrid');
  const paginationWrapper = document.getElementById('jsPaginationWrapper');
  const maxPageButtons = 5;

  function loadArticles(page) {
    // 1. Tampilkan loading spinner saat ambil data
    blogGrid.innerHTML = `
      <div class="col-span-full flex justify-center items-center py-12">
        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-brand-navy"></div>
      </div>`;

    // 2. Panggil API get_articles.php
    fetch(`get_articles.php?page=${page}`)
      .then(response => response.json())
      .then(data => {
        if (data.status === 'success') {
          renderGrid(data.articles);
          renderControls(data.current_page, data.total_pages);
        }
      })
      .catch(error => {
        console.error('Error fetching articles:', error);
        blogGrid.innerHTML = `
          <div class="col-span-full text-center py-12 bg-white rounded-xl border border-gray-200">
            <p class="text-red-500 text-sm font-medium">Gagal memuat artikel.</p>
          </div>`;
      });
  }

  function renderGrid(articles) {
    if (articles.length === 0) {
      blogGrid.innerHTML = `
        <div class="col-span-full text-center py-12 bg-white rounded-xl border border-gray-200">
          <i class="fa-regular fa-folder-open text-4xl text-gray-300 mb-3 block"></i>
          <p class="text-brand-body text-sm font-medium">No articles or updates published yet.</p>
        </div>`;
      return;
    }

    let html = '';
    articles.forEach(item => {
      html += `
      <article class="group bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-yellow/60 transition-all duration-300 flex flex-col h-full transform hover:-translate-y-1">
        <div class="relative w-full aspect-[16/10] overflow-hidden bg-gray-100">
          <a href="${item.link}" class="block w-full h-full">
            <img src="${item.img}" alt="${item.judul}" loading="lazy" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
          </a>
          <div class="absolute top-3 left-3 bg-brand-navy/90 backdrop-blur-sm text-white text-xs font-semibold px-3 py-1 rounded shadow-sm flex items-center space-x-1.5">
            <i class="fa-regular fa-calendar text-brand-yellow text-[11px]"></i>
            <span>${item.tgl}</span>
          </div>
        </div>
        <div class="p-5 flex flex-col flex-grow">
          <h3 class="font-bold text-base sm:text-lg leading-snug text-brand-navy mb-2.5 line-clamp-2">
            <a href="${item.link}" class="hover:text-brand-yellow-dark transition-colors duration-200">${item.judul}</a>
          </h3>
          <p class="text-brand-body text-xs sm:text-sm leading-relaxed mb-4 flex-grow">${item.isi}</p>
          <div class="mt-auto pt-3 border-t border-dashed border-gray-200">
            <a href="${item.link}" class="inline-flex items-center justify-between w-full font-bold text-xs sm:text-sm text-brand-navy group-hover:text-brand-yellow-dark transition-colors duration-200">
              <span>Read More</span>
              <div class="w-7 h-7 rounded-full bg-brand-card border border-gray-200 flex items-center justify-center text-xs text-brand-navy group-hover:bg-brand-yellow group-hover:border-brand-yellow group-hover:translate-x-1 transition-all duration-200 shrink-0">
                <i class="fa-solid fa-arrow-right"></i>
              </div>
            </a>
          </div>
        </div>
      </article>`;
    });

    blogGrid.innerHTML = html;
  }

  function renderControls(currentPage, totalPages) {
    if (totalPages <= 1) {
      paginationWrapper.innerHTML = '';
      return;
    }

    paginationWrapper.innerHTML = '';

    // Prev Button
    const prevBtn = document.createElement('button');
    prevBtn.type = 'button';
    prevBtn.className = currentPage > 1
      ? 'px-3 py-2 rounded-lg border border-gray-300 bg-white text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow text-xs sm:text-sm font-semibold transition-colors duration-200 flex items-center space-x-1 cursor-pointer'
      : 'px-3 py-2 rounded-lg border border-gray-200 bg-gray-100 text-gray-400 text-xs sm:text-sm font-semibold cursor-not-allowed flex items-center space-x-1';
    prevBtn.innerHTML = `<i class="fa-solid fa-chevron-left text-[10px]"></i><span class="hidden sm:inline">Prev</span>`;
    if (currentPage > 1) {
      prevBtn.addEventListener('click', () => {
        loadArticles(currentPage - 1);
        scrollToGridTop();
      });
    } else {
      prevBtn.disabled = true;
    }
    paginationWrapper.appendChild(prevBtn);

    // Number Buttons (Maksimal 5 - Sliding Window)
    let startPage = Math.max(1, currentPage - Math.floor(maxPageButtons / 2));
    let endPage = Math.min(totalPages, startPage + maxPageButtons - 1);

    if (endPage - startPage + 1 < maxPageButtons) {
      startPage = Math.max(1, endPage - maxPageButtons + 1);
    }

    const numbersContainer = document.createElement('div');
    numbersContainer.className = 'flex items-center space-x-1 sm:space-x-2';

    for (let i = startPage; i <= endPage; i++) {
      if (i === currentPage) {
        const activeSpan = document.createElement('span');
        activeSpan.className = 'w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-lg bg-brand-navy text-brand-yellow font-bold text-xs sm:text-sm shadow-sm';
        activeSpan.textContent = i;
        numbersContainer.appendChild(activeSpan);
      } else {
        const numBtn = document.createElement('button');
        numBtn.type = 'button';
        numBtn.className = 'w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-lg border border-gray-300 bg-white text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow font-semibold text-xs sm:text-sm transition-colors duration-200 cursor-pointer';
        numBtn.textContent = i;
        numBtn.addEventListener('click', () => {
          loadArticles(i);
          scrollToGridTop();
        });
        numbersContainer.appendChild(numBtn);
      }
    }
    paginationWrapper.appendChild(numbersContainer);

    // Next Button
    const nextBtn = document.createElement('button');
    nextBtn.type = 'button';
    nextBtn.className = currentPage < totalPages
      ? 'px-3 py-2 rounded-lg border border-gray-300 bg-white text-brand-navy hover:bg-brand-yellow hover:border-brand-yellow text-xs sm:text-sm font-semibold transition-colors duration-200 flex items-center space-x-1 cursor-pointer'
      : 'px-3 py-2 rounded-lg border border-gray-200 bg-gray-100 text-gray-400 text-xs sm:text-sm font-semibold cursor-not-allowed flex items-center space-x-1';
    nextBtn.innerHTML = `<span class="hidden sm:inline">Next</span><i class="fa-solid fa-chevron-right text-[10px]"></i>`;
    if (currentPage < totalPages) {
      nextBtn.addEventListener('click', () => {
        loadArticles(currentPage + 1);
        scrollToGridTop();
      });
    } else {
      nextBtn.disabled = true;
    }
    paginationWrapper.appendChild(nextBtn);
  }

  function scrollToGridTop() {
    document.getElementById('rtBlogSection').scrollIntoView({ behavior: 'smooth' });
  }

  // Load halaman pertama pertama kali
  loadArticles(1);
});
</script>













    <?php
}


/*** BEGIN .Modul Video ***/
elseif ($module == 'video') {
           $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    ?>
    
    <!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->



    

<section class="bg-white font-sans text-brand-body py-12 md:py-20" id="rtVideoGallerySection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-10 md:mb-14">
      <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3.5 py-1.5 rounded border-l-4 border-brand-yellow mb-3">
        VIDEO DOCUMENTATION
      </div>
     <?php echo"$r5[keterangan]"?>
    </div>

    <!-- Responsive CSS Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="rt_video_gallery">
      <?php
      $query = "SELECT * FROM video ORDER BY id_video DESC";
      $result = mysqli_query($konek, $query);
      $no = 1;

      if ($result && mysqli_num_rows($result) > 0) {
        while ($g = mysqli_fetch_array($result)) {
            $judul = htmlspecialchars($g['judul_video'] ?? '', ENT_QUOTES, 'UTF-8');
            $embed_id = htmlspecialchars($g['link_youtube'] ?? '', ENT_QUOTES, 'UTF-8');
            // Mengambil High Quality Thumbnail bawaan YouTube secara otomatis
            $thumbnailUrl = "https://img.youtube.com/vi/" . $embed_id . "/hqdefault.jpg";
      ?>

      <!-- Video Card Item -->
      <div class="rt_video_item group flex flex-col bg-brand-card rounded-2xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-xl hover:border-brand-yellow transition-all duration-300">
        
        <!-- Video Thumbnail Wrap (16:9 Aspect Ratio) -->
        <div class="relative w-full aspect-video overflow-hidden bg-brand-navy cursor-pointer" onclick="openVideoModal('video-modal-<?php echo $no; ?>', '<?php echo $embed_id; ?>')">
          <img src="<?php echo $thumbnailUrl; ?>" 
               alt="<?php echo $judul; ?>" 
               loading="lazy"
               class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 opacity-90 group-hover:opacity-100">
          
          <!-- Dark Overlay -->
          <div class="absolute inset-0 bg-brand-navy/30 group-hover:bg-brand-navy/10 transition-colors duration-300"></div>

          <!-- Play Button Overlay Center -->
          <div class="absolute inset-0 flex items-center justify-center">
            <span class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-brand-yellow text-brand-navy flex items-center justify-center text-lg sm:text-xl font-bold shadow-lg shadow-brand-yellow/40 group-hover:scale-110 group-hover:bg-brand-yellow-dark transition-all duration-300">
              <i class="fa-solid fa-play ml-1"></i>
            </span>
          </div>

          <!-- YouTube Badge -->
          <span class="absolute top-3 right-3 bg-red-600/90 text-white text-[10px] font-bold px-2.5 py-1 rounded-md tracking-wider uppercase flex items-center gap-1 shadow-sm">
            <i class="fa-brands fa-youtube"></i> HD
          </span>
        </div>

        <!-- Video Info -->
        <div class="p-4 sm:p-5 flex flex-col flex-grow justify-between bg-white">
          <h3 class="text-sm sm:text-base font-bold text-brand-navy line-clamp-2 leading-snug group-hover:text-brand-yellow-dark transition-colors duration-200">
            <?php echo $judul; ?>
          </h3>
          <div class="mt-3 pt-3 border-t border-dashed border-gray-200 flex items-center justify-between text-xs text-brand-muted">
            <span class="inline-flex items-center gap-1.5 font-medium">
              <i class="fa-solid fa-circle-play text-brand-yellow-dark"></i> Watch Video
            </span>
            <button type="button" 
                    onclick="openVideoModal('video-modal-<?php echo $no; ?>', '<?php echo $embed_id; ?>')" 
                    class="font-bold text-brand-navy hover:underline">
              Play Now &rarr;
            </button>
          </div>
        </div>

      </div>

      <!-- Lightbox Video Modal Item -->
      <div id="video-modal-<?php echo $no; ?>" class="rt_video_modal fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm transition-opacity duration-300">
        <div class="relative w-full max-w-4xl flex flex-col items-center justify-center">
          
          <!-- Modal Close Button -->
          <button type="button" 
                  onclick="closeVideoModal('video-modal-<?php echo $no; ?>')"
                  class="absolute -top-10 right-0 text-white hover:text-brand-yellow text-2xl font-bold transition-colors duration-200 focus:outline-none">
            <i class="fa-solid fa-xmark"></i>
          </button>
          
          <!-- Responsive iframe Container (16:9 Aspect Ratio) -->
          <div class="w-full aspect-video bg-black rounded-t-2xl overflow-hidden border border-brand-yellow/30 border-b-0 shadow-2xl">
            <iframe id="iframe-modal-<?php echo $no; ?>" 
                    class="w-full h-full" 
                    src="" 
                    title="<?php echo $judul; ?>" 
                    frameborder="0" 
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                    allowfullscreen>
            </iframe>
          </div>
          
          <!-- Video Caption Footer -->
          <div class="w-full bg-brand-navy border border-brand-yellow/30 border-t-0 rounded-b-2xl p-4 text-center text-white text-xs sm:text-sm font-bold flex items-center justify-between">
            <div class="flex items-center space-x-2 truncate">
              <i class="fa-solid fa-video text-brand-yellow"></i>
              <span class="truncate"><?php echo $judul; ?></span>
            </div>
            <button type="button" 
                    onclick="closeVideoModal('video-modal-<?php echo $no; ?>')"
                    class="text-xs bg-white/10 hover:bg-brand-yellow hover:text-brand-navy text-white px-3 py-1.5 rounded-lg transition-all duration-200 shrink-0 ml-2">
              Close
            </button>
          </div>

        </div>
      </div>

      <?php
            $no++;
        }
      } else {
      ?>
      <div class="col-span-full text-center py-10 text-brand-muted">
        <i class="fa-solid fa-film text-3xl text-gray-300 mb-2"></i>
        <p>Belum ada video dokumentasi yang diunggah.</p>
      </div>
      <?php } ?>
    </div>

    <!-- Load More Button -->
    <div class="text-center mt-10 md:mt-12">
      <button id="loadMoreVideoBtn" class="inline-flex items-center space-x-2 bg-transparent border-2 border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white text-xs sm:text-sm font-extrabold uppercase tracking-wider py-3 px-8 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5">
        <i class="fa-solid fa-play"></i>
        <span>View More Videos</span>
      </button>
    </div>
    
  </div>
</section>
<!-- Video Gallery Section End -->

<!-- Video Gallery Dynamic Load & Modal Controller -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const items = document.querySelectorAll(".rt_video_item");
  const loadMoreBtn = document.getElementById("loadMoreVideoBtn");
  
  if (items.length && loadMoreBtn) {
    let currentVisible = 6; // Jumlah video awal yang ditampilkan

    for (let i = currentVisible; i < items.length; i++) {
      items[i].classList.add('hidden');
    }

    if (items.length <= currentVisible) {
      loadMoreBtn.classList.add('hidden');
    }

    loadMoreBtn.addEventListener("click", function() {
      let nextVisible = currentVisible + 6;
      
      for (let i = currentVisible; i < nextVisible && i < items.length; i++) {
        items[i].classList.remove('hidden');
      }
      
      currentVisible = nextVisible;

      if (currentVisible >= items.length) {
        loadMoreBtn.classList.add('hidden');
      }
    });
  }
});

// Modal Actions with Auto Play and Auto Stop Support
function openVideoModal(modalId, videoId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    const iframe = modal.querySelector('iframe');
    if (iframe && videoId) {
      // Set Youtube AutoPlay saat modal terbuka
      iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1&rel=0";
    }
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.body.style.overflow = 'hidden';
  }
}

function closeVideoModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    const iframe = modal.querySelector('iframe');
    if (iframe) {
      // Reset src agar audio/video otomatis mati saat ditutup
      iframe.src = "";
    }
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    document.body.style.overflow = 'auto';
  }
}

// Close modal when clicking dark backdrop
window.addEventListener('click', function(e) {
  if (e.target.classList.contains('rt_video_modal')) {
    const modalId = e.target.id;
    closeVideoModal(modalId);
  }
});
</script>
    
    
    <?php
}


/*** BEGIN .Modul Galeri ***/
elseif ($module == 'galeri') {
    
       $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    ?>
    
    <!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->

 
 
 
 <!-- Gallery Section Start -->
<section class="bg-white font-sans text-brand-body py-12 md:py-20" id="rtGallerySection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-10 md:mb-14">
      <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3.5 py-1.5 rounded border-l-4 border-brand-yellow mb-3">
        FIELD DOCUMENTATION
      </div>
      <?php echo"$r5[keterangan]"?>
    </div>

    <!-- Responsive CSS Grid -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6" id="rt_gallery">
      <?php
      $query = "SELECT * FROM galeri ORDER BY id_galeri ASC";
      $result = mysqli_query($konek, $query);
      $no = 1;

      if ($result && mysqli_num_rows($result) > 0) {
        while ($g = mysqli_fetch_array($result)) {
            $imgUrl = htmlspecialchars(($d['alamat_website'] ?? '') . '/foto_galeri/' . $g['gambar']);
            $albumName = htmlspecialchars($g['judul_galeri'] ?? '', ENT_QUOTES, 'UTF-8');
      ?>

      <!-- Gallery Item Item -->
      <div class="rt_gal_item group cursor-pointer" onclick="openGalleryModal('modal-<?php echo $no; ?>')">
        <div class="relative w-full aspect-[4/3] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-300 group-hover:border-brand-yellow group-hover:shadow-lg group-hover:shadow-brand-yellow/20">
          
          <!-- Image -->
          <img src="<?php echo $imgUrl; ?>" 
               alt="<?php echo $albumName; ?>" 
               loading="lazy"
               class="w-full h-full object-cover transition-transform duration-500 ease-out group-hover:scale-110">
          
          <!-- Hover Overlay -->
          <div class="absolute inset-0 bg-gradient-to-t from-brand-navy/90 via-brand-navy/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center p-4">
            <div class="text-center text-white transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300 flex flex-col items-center">
              
              <!-- Icon Holder -->
              <span class="w-10 h-10 sm:w-11 sm:h-11 rounded-full bg-brand-yellow/20 border border-brand-yellow text-brand-yellow flex items-center justify-center text-sm sm:text-base mb-2 shadow-sm">
                <i class="fa-solid fa-magnifying-glass-plus"></i>
              </span>
              
              <!-- Title -->
              <span class="text-xs sm:text-sm font-bold line-clamp-2 leading-snug">
                <?php echo $albumName; ?>
              </span>
            </div>
          </div>

        </div>
      </div>

      <!-- Lightbox Modal Item -->
      <div id="modal-<?php echo $no; ?>" class="rt_gal_modal fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm transition-opacity duration-300">
        <div class="relative w-full max-w-4xl max-h-[90vh] flex flex-col items-center justify-center">
          
          <!-- Modal Close Button -->
          <button type="button" 
                  onclick="closeGalleryModal('modal-<?php echo $no; ?>')"
                  class="absolute -top-10 right-0 text-white hover:text-brand-yellow text-2xl font-bold transition-colors duration-200 focus:outline-none">
            <i class="fa-solid fa-xmark"></i>
          </button>
          
          <!-- Image Container -->
          <div class="w-full bg-black rounded-t-xl border border-brand-yellow/30 border-b-0 overflow-hidden flex justify-center">
            <img src="<?php echo $imgUrl; ?>" 
                 alt="<?php echo $albumName; ?>" 
                 class="max-h-[70vh] w-auto object-contain">
          </div>
          
          <!-- Caption Box -->
          <div class="w-full bg-brand-navy border border-brand-yellow/30 border-t-0 rounded-b-xl p-3.5 sm:p-4 text-center text-white text-xs sm:text-sm font-bold flex items-center justify-center space-x-2">
            <i class="fa-solid fa-mountain text-brand-yellow"></i>
            <span><?php echo $albumName; ?></span>
          </div>

        </div>
      </div>

      <?php
            $no++;
        }
      }
      ?>
    </div>

    <!-- Load More Button -->
    <div class="text-center mt-10 md:mt-12">
      <button id="loadMoreBtn" class="inline-flex items-center space-x-2 bg-transparent border-2 border-brand-navy text-brand-navy hover:bg-brand-navy hover:text-white text-xs sm:text-sm font-extrabold uppercase tracking-wider py-3 px-8 rounded-lg transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5">
        <i class="fa-solid fa-images"></i>
        <span>View More Documentation</span>
      </button>
    </div>
    
  </div>
</section>
<!-- Gallery Section End -->

<!-- Gallery Dynamic Load & Modal Vanilla JS -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const items = document.querySelectorAll(".rt_gal_item");
  const loadMoreBtn = document.getElementById("loadMoreBtn");
  
  if (items.length && loadMoreBtn) {
    let currentVisible = 6; // Jumlah gambar awal yang ditampilkan

    // Sembunyikan item selebihnya dari batas
    for (let i = currentVisible; i < items.length; i++) {
      items[i].classList.add('hidden');
    }

    if (items.length <= currentVisible) {
      loadMoreBtn.classList.add('hidden');
    }

    // Event tombol View More
    loadMoreBtn.addEventListener("click", function() {
      let nextVisible = currentVisible + 6;
      
      for (let i = currentVisible; i < nextVisible && i < items.length; i++) {
        items[i].classList.remove('hidden');
        items[i].classList.add('animate-fade-in');
      }
      
      currentVisible = nextVisible;

      if (currentVisible >= items.length) {
        loadMoreBtn.classList.add('hidden');
      }
    });
  }
});

// Modal Actions
function openGalleryModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.remove('hidden');
    modal.classList.add('flex');
    document.body.style.overflow = 'hidden'; // Stop background scroll
  }
}

function closeGalleryModal(modalId) {
  const modal = document.getElementById(modalId);
  if (modal) {
    modal.classList.add('hidden');
    modal.classList.remove('flex');
    document.body.style.overflow = 'auto'; // Restore scroll
  }
}

// Close Modal when clicking outside the content
window.addEventListener('click', function(e) {
  if (e.target.classList.contains('rt_gal_modal')) {
    e.target.classList.add('hidden');
    e.target.classList.remove('flex');
    document.body.style.overflow = 'auto';
  }
});
</script>


    <?php
}


/*** BEGIN .Modul About Us ***/
elseif ($module == 'aboutus') {
    
    
       $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    
    
    
    $querystatis  = "SELECT * FROM profil WHERE id_profil=1";
    $detailstatis = mysqli_query($konek, $querystatis);
    $r            = mysqli_fetch_array($detailstatis);

    $querystatis2  = "SELECT * FROM profil WHERE id_profil=2";
    $detailstatis2 = mysqli_query($konek, $querystatis2);
    $r2            = mysqli_fetch_array($detailstatis2);

    $querystatis3  = "SELECT * FROM profil WHERE id_profil=3";
    $detailstatis3 = mysqli_query($konek, $querystatis3);
    $r3            = mysqli_fetch_array($detailstatis3);
?>


<!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->


<!-- Section Profil 2 Grid (Background Putih) -->
<section class="bg-white font-sans text-brand-navy py-12 md:py-16 border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 items-center">
      
      <!-- Grid Kiri: Teks Profil (Lebar 7 Kolom) -->
      <div class="lg:col-span-7">
        <!-- Badge Section -->
        <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border-l-4 border-brand-yellow mb-2">
          <h2>Profil</h2>
        </div>

        <!-- Judul Profil -->
        <h3 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-brand-navy tracking-tight mt-2 mb-2">
          <?php echo htmlspecialchars($r['judul_profil'] ?? 'Tentang Kami', ENT_QUOTES, 'UTF-8'); ?>
        </h3>
        <div class="w-12 h-1 bg-brand-yellow rounded mb-6"></div>

        <!-- Isi Profil (Format Rich Text/WYSIWYG Friendly) -->
        <div class="text-brand-body text-sm sm:text-base leading-relaxed space-y-4 prose max-w-none">
          <?php echo $r['isi_profil'] ?? ''; ?>
        </div>
      </div>

      <!-- Grid Kanan: Foto Profil (Lebar 5 Kolom) -->
      <div class="lg:col-span-5">
        <div class="relative mx-auto max-w-md lg:max-w-none">
          <!-- Hiasan Background Accent Kuning -->
          <div class="absolute -inset-2 bg-brand-yellow/20 rounded-2xl transform rotate-2 transition-transform duration-300 group-hover:rotate-0"></div>
          
          <!-- Frame Foto -->
          <div class="relative rounded-2xl overflow-hidden border border-gray-200 bg-brand-card shadow-lg">
            <?php if (!empty($r['gambar'])): ?>
              <img 
                src="<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_profil/<?php echo htmlspecialchars($r['gambar'], ENT_QUOTES, 'UTF-8'); ?>" 
                alt="<?php echo htmlspecialchars($r['judul_profil'] ?? 'Foto Profil', ENT_QUOTES, 'UTF-8'); ?>" 
                class="w-full h-[320px] sm:h-[400px] object-cover object-center transition-transform duration-500 hover:scale-105"
              />
            <?php else: ?>
              <!-- Placeholder Jika Foto Belum Ada / Kosong -->
              <div class="w-full h-[320px] sm:h-[400px] bg-brand-card flex flex-col items-center justify-center text-gray-400 p-6 text-center">
                <i class="fa-solid fa-image text-5xl mb-3 text-brand-yellow"></i>
                <span class="text-sm font-medium text-brand-body">Foto Profil Perusahaan</span>
              </div>
            <?php endif; ?>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- Section Visi & Misi Modern Professional (Background Dark / Navy) -->
<section class="bg-brand-navy font-sans text-white py-12 md:py-16 relative overflow-hidden">
  <!-- Accent Glow Effect Background -->
  <div class="absolute top-0 right-0 -mt-12 -mr-12 w-96 h-96 bg-brand-yellow/5 rounded-full blur-3xl pointer-events-none"></div>
  <div class="absolute bottom-0 left-0 -mb-12 -ml-12 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl pointer-events-none"></div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    
    <!-- Section Header Centered -->
    <div class="text-center max-w-3xl mx-auto mb-12">
      <div class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border border-white/10 mb-2">
        Arah & Tujuan
      </div>
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-white tracking-tight mt-2 mb-3">
        Visi & Misi Perusahaan
      </h2>
      <div class="w-12 h-1 bg-brand-yellow rounded mx-auto"></div>
    </div>

    <!-- Grid Visi & Misi -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
      
      <!-- Box Visi (Lebar 5 Kolom) -->
      <div class="lg:col-span-5 bg-slate-800/80 backdrop-blur-sm p-6 sm:p-8 rounded-2xl border border-slate-700/80 hover:border-brand-yellow/50 transition-all duration-300 flex flex-col justify-between shadow-xl">
        <div>
          <!-- Header Card -->
          <div class="flex items-center space-x-3 mb-6">
            <div class="w-12 h-12 bg-brand-yellow text-brand-navy rounded-xl flex items-center justify-center text-xl font-bold shrink-0 shadow-lg shadow-brand-yellow/20">
              <i class="fa-solid fa-eye"></i>
            </div>
            <div>
              <span class="text-[11px] uppercase tracking-widest font-extrabold text-brand-yellow block">Landasan Masa Depan</span>
              <h2 class="text-lg font-bold text-white uppercase tracking-wider">VISI</h2>
            </div>
          </div>

          <!-- Judul Visi -->
          <h3 class="text-xl md:text-2xl font-bold text-white mb-4 leading-snug">
            <?php echo htmlspecialchars($r2['judul_profil'] ?? 'Visi Kami', ENT_QUOTES, 'UTF-8'); ?>
          </h3>

          <!-- Isi Visi -->
          <div class="text-slate-300 text-sm sm:text-base leading-relaxed prose prose-invert max-w-none">
            <?php echo $r2['isi_profil'] ?? ''; ?>
          </div>
        </div>

        <!-- Decorative Bottom Accent -->
        <div class="mt-8 pt-4 border-t border-slate-700/50 flex items-center text-xs text-slate-400">
          <i class="fa-solid fa-compass text-brand-yellow mr-2"></i>
          <span>Fokus Utama Pengembangan Berkelanjutan</span>
        </div>
      </div>

      <!-- Box Misi (Lebar 7 Kolom) -->
      <div class="lg:col-span-7 bg-slate-800/80 backdrop-blur-sm p-6 sm:p-8 rounded-2xl border border-slate-700/80 hover:border-brand-yellow/50 transition-all duration-300 flex flex-col justify-between shadow-xl">
        <div>
          <!-- Header Card -->
          <div class="flex items-center space-x-3 mb-6">
            <div class="w-12 h-12 bg-brand-yellow text-brand-navy rounded-xl flex items-center justify-center text-xl font-bold shrink-0 shadow-lg shadow-brand-yellow/20">
              <i class="fa-solid fa-bullseye"></i>
            </div>
            <div>
              <span class="text-[11px] uppercase tracking-widest font-extrabold text-brand-yellow block">Langkah Strategis</span>
              <h2 class="text-lg font-bold text-white uppercase tracking-wider">MISI</h2>
            </div>
          </div>

          <!-- Judul Misi -->
          <h3 class="text-xl md:text-2xl font-bold text-white mb-4 leading-snug">
            <?php echo htmlspecialchars($r3['judul_profil'] ?? 'Misi Kami', ENT_QUOTES, 'UTF-8'); ?>
          </h3>

          <!-- Isi Misi (Perbaikan CSS Ikon Centang) -->
          <div class="text-slate-300 text-sm sm:text-base leading-relaxed max-w-none 
                      [&_ul]:space-y-3 [&_ul]:list-none [&_ul]:pl-0
                      [&_ol]:space-y-3 [&_ol]:list-decimal [&_ol]:pl-5
                      [&_li]:relative [&_li]:pl-9 [&_li]:py-2 [&_li]:px-3 [&_li]:bg-slate-900/40 [&_li]:rounded-lg [&_li]:border [&_li]:border-slate-700/40
                      [&_li::before]:content-['\f00c'] [&_li::before]:absolute [&_li::before]:left-3 [&_li::before]:top-2.5 
                      [&_li::before]:text-brand-yellow [&_li::before]:text-sm
                      [&_li::before]:[font-family:'Font_Awesome_6_Free'] [&_li::before]:font-black">
            <?php echo $r3['isi_profil'] ?? ''; ?>
          </div>
        </div>

        <!-- Decorative Bottom Accent -->
        <div class="mt-8 pt-4 border-t border-slate-700/50 flex items-center text-xs text-slate-400">
          <i class="fa-solid fa-circle-check text-brand-yellow mr-2"></i>
          <span>Komitmen Eksekusi & Kualitas Layanan</span>
        </div>
      </div>

    </div>
  </div>
</section>




 <?php echo $r5['keterangan']; ?>


<?php
}


/*** BEGIN .Modul Contact ***/
elseif ($module == 'contact') {
    $link = mysqli_real_escape_string($konek, $_GET['link']);
  
  
                // Tampilkan 5 headline berita terbaru
                $queryterbaruz = "SELECT * FROM banner ORDER BY rand() DESC LIMIT 1";
                $hasilterbaruz = mysqli_query($konek, $queryterbaruz);
                $tz=mysqli_fetch_array($hasilterbaruz);
                
             $query5 = "SELECT * FROM menu WHERE link='$_GET[link]'";       
              $hasil5 = mysqli_query($konek, $query5);
              $r5=mysqli_fetch_array($hasil5);
    
?>




<?php 
  // Sanitasi Nomor WhatsApp biar pasti valid untuk wa.me
  $wa_clean = preg_replace('/[^0-9]/', '', $kontak['wa'] ?? '');
  if (substr($wa_clean, 0, 1) === '0') {
    $wa_clean = '62' . substr($wa_clean, 1);
  }
?>

<!-- Banner Header Component Start -->
<section 
  class="relative bg-cover bg-center py-16 px-4"
  style="background-image: linear-gradient(180deg, var(--kbt-banner-overlay-top, rgba(15,23,42,0.6)) 0%, var(--kbt-banner-overlay-bottom, rgba(15,23,42,0.8)) 100%), url('<?php echo htmlspecialchars($d['alamat_website'] ?? '', ENT_QUOTES, 'UTF-8'); ?>/foto_banner/<?php echo htmlspecialchars($tz['gambar'] ?? '', ENT_QUOTES, 'UTF-8'); ?>');"
>
  <div class="max-w-7xl mx-auto text-center text-white">
    <!-- Tagline / Badge -->
    <?php if (!empty($d['nama_pemilik'])): ?>
    <span class="inline-block bg-white/10 backdrop-blur-md text-brand-yellow font-bold text-xs uppercase tracking-widest px-3 py-1 rounded mb-3 border border-white/20">
      <?php echo htmlspecialchars($d['nama_pemilik'], ENT_QUOTES, 'UTF-8'); ?>
    </span>
    <?php endif; ?>

    <!-- Page Heading -->
    <h1 class="text-3xl md:text-5xl font-extrabold tracking-tight mb-4">
      <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
    </h1>

    <!-- Breadcrumb Navigation -->
    <ol class="flex items-center justify-center space-x-2 text-sm text-gray-300 font-medium">
      <li>
        <a href="<?php echo htmlspecialchars($d['alamat_website'] ?? '#', ENT_QUOTES, 'UTF-8'); ?>" class="hover:text-brand-yellow transition-colors">Home</a>
      </li>
      <li class="text-xs text-gray-400">
        <i class="fas fa-chevron-right"></i>
      </li>
      <li class="text-brand-yellow" aria-current="page">
        <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
      </li>
    </ol>
  </div>
</section>
<!-- Banner Header Component End -->


<!-- Contact Us Section Start -->
<section class="bg-white font-sans text-brand-navy py-12 md:py-16 border-t border-b border-gray-200" id="kbtContactSection">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
      
      <!-- Contact Details Column (Left) -->
      <div class="lg:col-span-6 space-y-6">
        
        <!-- Badge & Header -->
        <div>
          <div class="inline-block bg-brand-yellow/20 text-brand-navy text-[11px] font-extrabold uppercase tracking-widest px-3 py-1 rounded border-l-4 border-brand-yellow mb-2">
            <?php echo htmlspecialchars($r5['nama_menu'] ?? 'Contact Us', ENT_QUOTES, 'UTF-8'); ?>
          </div>
         
         
          
            <?php echo $r5['keterangan']; ?>
        
         
        </div>

        <!-- Office Address Card -->
        <?php if (!empty($kontak['alamat'])): ?>
        <div class="group flex items-center bg-brand-card p-5 rounded-xl border border-gray-200 transition-all duration-300 hover:bg-white hover:border-brand-yellow hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-yellow/20">
          <div class="w-11 h-11 bg-brand-navy text-brand-yellow rounded-lg flex items-center justify-center text-lg mr-4 shrink-0 transition-colors duration-300 group-hover:bg-brand-yellow group-hover:text-brand-navy">
            <i class="fa-solid fa-location-dot"></i>
          </div>
          <div>
            <h5 class="text-sm font-bold text-brand-navy mb-0.5">Operational Office</h5>
            <p class="text-xs sm:text-sm text-brand-body leading-snug">
              <?php echo htmlspecialchars($kontak['alamat'], ENT_QUOTES, 'UTF-8'); ?>
            </p>
          </div>
        </div>
        <?php endif; ?>

        <!-- Phone & WhatsApp Quick Actions -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          
          <!-- Direct Call -->
          <?php if (!empty($kontak['tlp'])): ?>
          <a href="tel:<?php echo htmlspecialchars($kontak['tlp'], ENT_QUOTES, 'UTF-8'); ?>" class="group flex items-center bg-brand-card p-4 rounded-xl border border-gray-200 no-underline transition-all duration-300 hover:bg-white hover:border-brand-yellow hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-yellow/20">
            <div class="w-9 h-9 bg-brand-navy text-brand-yellow rounded-lg flex items-center justify-center text-sm mr-3 shrink-0 transition-colors duration-300 group-hover:bg-brand-yellow group-hover:text-brand-navy">
              <i class="fa-solid fa-phone-volume"></i>
            </div>
            <div>
              <h5 class="text-sm font-bold text-brand-navy mb-0.5">Direct Call</h5>
              <span class="text-xs sm:text-sm text-brand-body block">
                <?php echo htmlspecialchars($kontak['tlp'], ENT_QUOTES, 'UTF-8'); ?>
              </span>
            </div>
          </a>
          <?php endif; ?>

          <!-- WhatsApp -->
          <?php if (!empty($wa_clean)): ?>
          <a href="https://wa.me/<?php echo $wa_clean; ?>" target="_blank" rel="noopener noreferrer" class="group flex items-center bg-brand-card p-4 rounded-xl border border-gray-200 no-underline transition-all duration-300 hover:bg-white hover:border-brand-wa hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-wa/20">
            <div class="w-9 h-9 bg-brand-navy text-brand-wa rounded-lg flex items-center justify-center text-sm mr-3 shrink-0 transition-colors duration-300 group-hover:bg-brand-wa group-hover:text-white">
              <i class="fa-brands fa-whatsapp"></i>
            </div>
            <div>
              <h5 class="text-sm font-bold text-brand-navy mb-0.5">WhatsApp</h5>
              <span class="text-xs sm:text-sm text-brand-body block">Fast Chat (24/7)</span>
            </div>
          </a>
          <?php endif; ?>

        </div>

        <!-- Email Support Card -->
        <?php if (!empty($kontak['email'])): ?>
        <div class="group flex items-center bg-brand-card p-5 rounded-xl border border-gray-200 transition-all duration-300 hover:bg-white hover:border-brand-yellow hover:-translate-y-1 hover:shadow-xl hover:shadow-brand-yellow/20">
          <div class="w-11 h-11 bg-brand-navy text-brand-yellow rounded-lg flex items-center justify-center text-lg mr-4 shrink-0 transition-colors duration-300 group-hover:bg-brand-yellow group-hover:text-brand-navy">
            <i class="fa-solid fa-envelope-open-text"></i>
          </div>
          <div>
            <h5 class="text-sm font-bold text-brand-navy mb-0.5">Email Support</h5>
            <p class="text-xs sm:text-sm text-brand-body leading-snug">
              <a href="mailto:<?php echo htmlspecialchars($kontak['email'], ENT_QUOTES, 'UTF-8'); ?>" class="no-underline text-current hover:text-brand-yellow transition-colors">
                <?php echo htmlspecialchars($kontak['email'], ENT_QUOTES, 'UTF-8'); ?>
              </a>
            </p>
          </div>
        </div>
        <?php endif; ?>

      </div>

      <!-- Google Maps Column (Right) -->
      <?php if (!empty($kontak['maps'])): ?>
      <div class="lg:col-span-6">
        <div class="rounded-2xl overflow-hidden border border-gray-200 bg-brand-card shadow-lg [&_iframe]:w-full [&_iframe]:h-[320px] md:[&_iframe]:h-[480px] [&_iframe]:block [&_iframe]:border-0">
          <?php echo $kontak['maps']; ?>
        </div>
      </div>
      <?php endif; ?>

    </div>
  </div>
</section>
<!-- Contact Us Section End -->
    
<?php
}
?>