<!DOCTYPE html>
<html lang="ms" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Waktu Solat - JAKIM 2026</title>
    <meta name="description" content="Waktu solat Malaysia hari ini. Imsak 05:40, Subuh 05:50, Zohor 13:15, Asar 16:41, Maghrib 19:24, Isyak 20:40. Data rasmi JAKIM.">
    <meta name="keywords" content="waktu solat kuala lumpur, jadual waktu solat, waktu sembahyang, waktu imsak, waktu subuh, waktu zohor, waktu asar, waktu maghrib, waktu isyak, JAKIM 2026">
    <meta name="author" content="WaktuSolat.AI">
    <meta name="robots" content="index, follow">
    <meta name="google" content="notranslate">

    <!-- Open Graph -->
    <meta property="og:title" content="Waktu Solat - JAKIM 2026">
    <meta property="og:description" content="Waktu solat Malaysia hari ini. Imsak 05:40, Subuh 05:50, Zohor 13:15, Asar 16:41, Maghrib 19:24, Isyak 20:40. Data rasmi JAKIM.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://waktusolat.ai/">
    <meta property="og:image" content="https://waktusolat.ai/wly01.jpg">
    <meta property="og:image:width" content="800">
    <meta property="og:image:height" content="1200">
    <meta property="og:locale" content="ms_MY">
    <meta property="og:site_name" content="WaktuSolat.AI">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Waktu Solat - JAKIM 2026">
    <meta name="twitter:description" content="Waktu solat Malaysia hari ini. Imsak 05:40, Subuh 05:50, Zohor 13:15, Asar 16:41, Maghrib 19:24, Isyak 20:40. Data rasmi JAKIM.">

    <link rel="canonical" href="https://waktusolat.ai/">

    <!-- PWA -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="WaktuSolat">
    <meta name="theme-color" content="#ffffff" id="theme-color-meta">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/waktusolatlogo192px.png?v=2">
    <link rel="icon" type="image/png" sizes="32x32" href="/waktusolatlogo192px.png?v=2">

    <!-- iOS Safari native Smart App Banner -> App Store one-tap -->
    <meta name="apple-itunes-app" content="app-id=6774695575">

    <!-- Tailwind (built) + Custom CSS -->
    <link rel="stylesheet" href="/tailwind.css?v=1780635802">
    <link rel="stylesheet" href="/styl.css?v=1774505413">

    <!-- GA4 -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6367648373464806" crossorigin="anonymous"></script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-P5V6EPCGC4"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-P5V6EPCGC4');
    </script>

    <!-- JSON-LD Schema -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "WaktuSolat.AI",
        "alternateName": "Waktu Solat Malaysia",
        "url": "https://waktusolat.ai/",
        "description": "Jadual waktu solat untuk seluruh Malaysia berdasarkan data rasmi JAKIM",
        "inLanguage": "ms-MY",
        "potentialAction": {
            "@type": "SearchAction",
            "target": {"@type":"EntryPoint","urlTemplate":"https://waktusolat.ai/waktu-solat-{search_term_string}"},
            "query-input": "required name=search_term_string"
        },
        "publisher": {"@type":"Organization","name":"WaktuSolat.AI","url":"https://waktusolat.ai/"}
    }
    </script>

    
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [
            {
                "@type": "Question",
                "name": "Adakah waktu solat yang dipaparkan Google Search tepat?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "AMARAN: Waktu solat yang dipaparkan di Google Search TIDAK SAMA dengan waktu solat rasmi JAKIM. Untuk waktu solat yang tepat, sila rujuk WaktuSolat.AI atau portal e-Solat rasmi JAKIM."
                }
            },
            {
                "@type": "Question",
                "name": "Berapa waktu Subuh di Kuala Lumpur hari ini?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Waktu Subuh Kuala Lumpur hari ini adalah pada pukul 05:50 pagi. Waktu imsak adalah 05:40 pagi."
                }
            },
            {
                "@type": "Question",
                "name": "Berapa waktu berbuka puasa di Kuala Lumpur?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Waktu berbuka puasa Kuala Lumpur adalah sama dengan waktu Maghrib iaitu pada pukul 19:24 petang hari ini."
                }
            },
            {
                "@type": "Question",
                "name": "Bilakah waktu Imsak di Kuala Lumpur hari ini?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Waktu Imsak Kuala Lumpur hari ini adalah pada pukul 05:40 pagi. Imsak adalah 10 minit sebelum waktu Subuh sebagai langkah berjaga-jaga untuk berhenti makan dan minum sebelum masuk waktu puasa."
                }
            },
            {
                "@type": "Question",
                "name": "Berapa waktu Maghrib di Kuala Lumpur hari ini?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Waktu Maghrib Kuala Lumpur hari ini pada pukul 19:24 petang. Maghrib juga merupakan waktu berbuka puasa bagi yang berpuasa."
                }
            },
            {
                "@type": "Question",
                "name": "Apa itu zon waktu solat JAKIM?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "JAKIM membahagikan Malaysia kepada 59 zon waktu solat berdasarkan kedudukan geografi. Setiap zon mempunyai waktu solat yang sedikit berbeza. Kuala Lumpur berada dalam zon WLY01 yang merangkumi Kuala Lumpur, Putrajaya."
                }
            },
            {
                "@type": "Question",
                "name": "Jadual waktu solat Kuala Lumpur bulan ini?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Jadual penuh waktu solat Kuala Lumpur untuk bulan Jun 2026 boleh dilihat di halaman ini. Jadual dikemaskini setiap hari berdasarkan data rasmi JAKIM."
                }
            },
            {
                "@type": "Question",
                "name": "Adakah waktu solat berbeza setiap hari?",
                "acceptedAnswer": {
                    "@type": "Answer",
                    "text": "Ya, waktu solat berubah sedikit setiap hari mengikut pergerakan matahari. Perbezaan biasanya 1-2 minit sahaja antara hari berturutan. Oleh itu, penting untuk merujuk waktu solat terkini dari sumber rasmi JAKIM."
                }
            }
        ]
    }
    </script>
</head>

<body class="bg-white dark:bg-apple-darkbg text-apple-text dark:text-white font-sans transition-colors duration-300 min-h-screen antialiased">

    <!-- ==================== HEADER ==================== -->
    <header class="sticky top-0 z-50 backdrop-blur-xl bg-white/90 dark:bg-apple-darkbg/90 border-b border-black/[0.08] dark:border-white/[0.08]">
        <div class="max-w-3xl mx-auto px-5 h-12 flex items-center justify-between">
            <a href="/" class="no-underline">
                <span class="text-xl font-semibold tracking-tight text-apple-text dark:text-white">Waktu<span class="font-light">Solat</span></span>
            </a>
            <button id="darkToggle" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-black/5 dark:hover:bg-white/10 transition-colors" aria-label="Toggle dark mode">
                <svg id="sunIcon" class="w-[18px] h-[18px] hidden dark:block text-white/80" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"/></svg>
                <svg id="moonIcon" class="w-[18px] h-[18px] block dark:hidden text-apple-text/60" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
            </button>
        </div>
    </header>

    <!-- ==================== APP PROMO BANNER (FLOATING BOTTOM, dismissable, platform-aware) ==================== -->
    <!-- Hidden by default. JS reveals on Android/non-Safari mobile only (iOS Safari shows Apple's own native banner). -->
    <div id="appPromoBanner" class="hidden fixed inset-x-3 bottom-3 z-50 rounded-2xl shadow-2xl bg-white dark:bg-apple-darkcard border border-black/[0.08] dark:border-white/[0.10]" style="animation:slideUp .35s ease-out;padding-bottom:env(safe-area-inset-bottom)">
      <div class="flex items-center gap-2.5 px-3.5 py-3">
        <img src="https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/aa/be/51/aabe5114-fdf0-adce-ca27-a19eea1e40ee/AppIcon-0-0-1x_U007emarketing-0-11-0-85-220.png/512x512bb.jpg"
             alt="Waktu Solat Jakim" width="40" height="40"
             class="rounded-xl" style="width:40px;height:40px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.12)" />
        <div style="flex:1 1 0%;min-width:0">
          <p class="font-semibold text-apple-text dark:text-white text-[14px]" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Waktu Solat Jakim</p>
          <p class="text-apple-textsec text-[12px]" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Azan automatik, percuma</p>
        </div>
        <a id="appPromoGet" href="https://apps.apple.com/my/app/waktu-solat-jakim/id6774695575"
           class="bg-apple-blue hover:bg-apple-bluehover text-white font-medium text-[14px] px-3.5 py-2 rounded-xl transition-all active:scale-[0.97]" style="flex-shrink:0;white-space:nowrap">
          Dapatkan
        </a>
        <button id="appPromoDismiss" aria-label="Tutup"
                class="w-7 h-7 flex items-center justify-center rounded-full text-apple-textsec hover:bg-black/5 dark:hover:bg-white/10 transition-all active:scale-[0.97]" style="flex-shrink:0">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M1 1L13 13M13 1L1 13" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>

    <main class="max-w-3xl mx-auto px-5 py-10 space-y-12">

        <!-- ==================== BREADCRUMB ==================== -->
        
        <!-- ==================== HERO SECTION ==================== -->
        <section class="text-center space-y-3">
            <h1 class="text-[2rem] sm:text-[2.5rem] font-semibold tracking-tight leading-tight">
                Waktu Solat            </h1>
            <p class="text-apple-textsec text-[15px]">
                                    23 Zulhijjah 1447H &middot;
                                09 Jun 2026            </p>
                        <p class="text-[12px] text-apple-textsec/50">Dikemaskini 9 Jun 2026</p>
        </section>

        <!-- ==================== ZONE SELECTOR ==================== -->
        <section class="flex flex-col sm:flex-row items-center gap-3 justify-center">
            <div class="relative w-full sm:w-72">
                <select id="zoneSelect" class="w-full appearance-none bg-apple-gray dark:bg-apple-darksurface border-0 rounded-xl px-4 py-3 pr-10 text-[15px] font-normal focus:ring-2 focus:ring-apple-blue/30 outline-none transition-all cursor-pointer text-apple-text dark:text-white" onchange="if(this.value){if(typeof gtag!=='undefined')gtag('event','zone_change',{event_category:'Navigation',event_label:this.value});window.location.href=this.value}">
                    <option value="">Pilih Lokasi...</option>
                                        <optgroup label="Johor">
                                                <option value="/waktu-solat-pulau-aur-dan-pulau-pemanggil" >
                            Pulau Aur dan Pulau Pemanggil                        </option>
                                                <option value="/waktu-solat-johor-bahru" >
                            Johor Bahru                        </option>
                                                <option value="/waktu-solat-kluang" >
                            Kluang                        </option>
                                                <option value="/waktu-solat-batu-pahat" >
                            Batu Pahat                        </option>
                                            </optgroup>
                                        <optgroup label="Kedah">
                                                <option value="/waktu-solat-kota-setar" >
                            Kota Setar                        </option>
                                                <option value="/waktu-solat-kuala-muda" >
                            Kuala Muda                        </option>
                                                <option value="/waktu-solat-padang-terap" >
                            Padang Terap                        </option>
                                                <option value="/waktu-solat-baling" >
                            Baling                        </option>
                                                <option value="/waktu-solat-bandar-baharu" >
                            Bandar Baharu                        </option>
                                                <option value="/waktu-solat-langkawi" >
                            Langkawi                        </option>
                                                <option value="/waktu-solat-puncak-gunung-jerai" >
                            Puncak Gunung Jerai                        </option>
                                            </optgroup>
                                        <optgroup label="Kelantan">
                                                <option value="/waktu-solat-bachok" >
                            Bachok                        </option>
                                                <option value="/waktu-solat-gua-musang" >
                            Gua Musang                        </option>
                                            </optgroup>
                                        <optgroup label="Melaka">
                                                <option value="/waktu-solat-seluruh-negeri-melaka" >
                            Seluruh Negeri Melaka                        </option>
                                            </optgroup>
                                        <optgroup label="Negeri Sembilan">
                                                <option value="/waktu-solat-tampin" >
                            Tampin                        </option>
                                                <option value="/waktu-solat-jelebu" >
                            Jelebu                        </option>
                                                <option value="/waktu-solat-port-dickson" >
                            Port Dickson                        </option>
                                            </optgroup>
                                        <optgroup label="Pahang">
                                                <option value="/waktu-solat-pulau-tioman" >
                            Pulau Tioman                        </option>
                                                <option value="/waktu-solat-kuantan" >
                            Kuantan                        </option>
                                                <option value="/waktu-solat-jerantut" >
                            Jerantut                        </option>
                                                <option value="/waktu-solat-bentong" >
                            Bentong                        </option>
                                                <option value="/waktu-solat-genting-sempah" >
                            Genting Sempah                        </option>
                                                <option value="/waktu-solat-cameron-highlands" >
                            Cameron Highlands                        </option>
                                            </optgroup>
                                        <optgroup label="Perak">
                                                <option value="/waktu-solat-tapah" >
                            Tapah                        </option>
                                                <option value="/waktu-solat-kuala-kangsar" >
                            Kuala Kangsar                        </option>
                                                <option value="/waktu-solat-lenggong" >
                            Lenggong                        </option>
                                                <option value="/waktu-solat-temengor" >
                            Temengor                        </option>
                                                <option value="/waktu-solat-kg-gajah" >
                            Kg Gajah                        </option>
                                                <option value="/waktu-solat-selama" >
                            Selama                        </option>
                                                <option value="/waktu-solat-bukit-larut" >
                            Bukit Larut                        </option>
                                            </optgroup>
                                        <optgroup label="Perlis">
                                                <option value="/waktu-solat-kangar" >
                            Kangar                        </option>
                                            </optgroup>
                                        <optgroup label="Pulau Pinang">
                                                <option value="/waktu-solat-seluruh-negeri-pulau-pinang" >
                            Seluruh Negeri Pulau Pinang                        </option>
                                            </optgroup>
                                        <optgroup label="Sabah">
                                                <option value="/waktu-solat-sandakan" >
                            Sandakan                        </option>
                                                <option value="/waktu-solat-beluran" >
                            Beluran                        </option>
                                                <option value="/waktu-solat-lahad-datu" >
                            Lahad Datu                        </option>
                                                <option value="/waktu-solat-pensiangan" >
                            Pensiangan                        </option>
                                                <option value="/waktu-solat-beaufort" >
                            Beaufort                        </option>
                                                <option value="/waktu-solat-kota-kinabalu" >
                            Kota Kinabalu                        </option>
                                                <option value="/waktu-solat-kudat" >
                            Kudat                        </option>
                                                <option value="/waktu-solat-gunung-kinabalu" >
                            Gunung Kinabalu                        </option>
                                                <option value="/waktu-solat-sandakan-timur" >
                            Sandakan (Timur)                        </option>
                                            </optgroup>
                                        <optgroup label="Sarawak">
                                                <option value="/waktu-solat-limbang" >
                            Limbang                        </option>
                                                <option value="/waktu-solat-miri" >
                            Miri                        </option>
                                                <option value="/waktu-solat-tatau" >
                            Tatau                        </option>
                                                <option value="/waktu-solat-sibu" >
                            Sibu                        </option>
                                                <option value="/waktu-solat-sarikei" >
                            Sarikei                        </option>
                                                <option value="/waktu-solat-lubok-antu" >
                            Lubok Antu                        </option>
                                                <option value="/waktu-solat-betong" >
                            Betong                        </option>
                                                <option value="/waktu-solat-kuching" >
                            Kuching                        </option>
                                                <option value="/waktu-solat-asajaya" >
                            Asajaya                        </option>
                                            </optgroup>
                                        <optgroup label="Selangor">
                                                <option value="/waktu-solat-gombak" >
                            Gombak                        </option>
                                                <option value="/waktu-solat-kuala-selangor" >
                            Kuala Selangor                        </option>
                                                <option value="/waktu-solat-klang" >
                            Klang                        </option>
                                            </optgroup>
                                        <optgroup label="Terengganu">
                                                <option value="/waktu-solat-kuala-terengganu" >
                            Kuala Terengganu                        </option>
                                                <option value="/waktu-solat-besut" >
                            Besut                        </option>
                                                <option value="/waktu-solat-hulu-terengganu" >
                            Hulu Terengganu                        </option>
                                                <option value="/waktu-solat-dungun" >
                            Dungun                        </option>
                                            </optgroup>
                                        <optgroup label="Wilayah Persekutuan">
                                                <option value="/waktu-solat-kuala-lumpur" selected>
                            Kuala Lumpur                        </option>
                                                <option value="/waktu-solat-labuan" >
                            Labuan                        </option>
                                            </optgroup>
                                    </select>
                <svg class="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-apple-textsec pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </div>
            <button id="geoBtn" onclick="detectLocation()" class="flex items-center gap-2 px-5 py-3 bg-apple-blue hover:bg-apple-bluehover text-white rounded-xl text-[15px] font-medium transition-all active:scale-[0.97]">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Kesan Lokasi
            </button>
        </section>

        <!-- ==================== COUNTDOWN TIMER ==================== -->
        <section id="countdownSection" class="text-center space-y-4">
            <p class="text-[13px] text-apple-textsec uppercase tracking-widest font-medium">
                <span id="nextPrayerName" class="text-apple-text dark:text-white font-semibold">ASAR</span>
            </p>
            <div id="countdownDisplay" class="flex justify-center gap-2">
                <div class="bg-apple-gray dark:bg-apple-darkcard rounded-2xl px-6 py-4 min-w-[80px]">
                    <span id="cdHours" class="text-[2.5rem] font-light text-apple-text dark:text-white tabular-nums">--</span>
                    <p class="text-[11px] text-apple-textsec mt-0.5 uppercase tracking-wider">Jam</p>
                </div>
                <div class="flex items-center text-2xl font-light text-apple-textsec pb-5">:</div>
                <div class="bg-apple-gray dark:bg-apple-darkcard rounded-2xl px-6 py-4 min-w-[80px]">
                    <span id="cdMinutes" class="text-[2.5rem] font-light text-apple-text dark:text-white tabular-nums">--</span>
                    <p class="text-[11px] text-apple-textsec mt-0.5 uppercase tracking-wider">Minit</p>
                </div>
                <div class="flex items-center text-2xl font-light text-apple-textsec pb-5">:</div>
                <div class="bg-apple-gray dark:bg-apple-darkcard rounded-2xl px-6 py-4 min-w-[80px]">
                    <span id="cdSeconds" class="text-[2.5rem] font-light text-apple-text dark:text-white tabular-nums">--</span>
                    <p class="text-[11px] text-apple-textsec mt-0.5 uppercase tracking-wider">Saat</p>
                </div>
            </div>
            <div id="masukWaktu" class="hidden">
                <p class="text-lg font-medium text-apple-blue">Sudah masuk waktu <span id="masukNama"></span></p>
            </div>
        </section>

        <!-- ==================== PRAYER CARDS ==================== -->
        <section>
            <h2 class="sr-only">Jadual Waktu Solat Kuala Lumpur Hari Ini</h2>
            <div class="grid grid-cols-3 gap-3">
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Imsak</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">05:40</p>
                    </div>
                </div>
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Subuh</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">05:50</p>
                    </div>
                </div>
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Syuruk</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">07:03</p>
                    </div>
                </div>
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Zohor</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">13:15</p>
                    </div>
                </div>
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ring-2 ring-apple-blue">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Asar</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white !text-apple-blue">16:41</p>
                    </div>
                </div>
                                <div class="relative">
                    <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                        <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Maghrib</p>
                        <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">19:24</p>
                    </div>
                </div>
                            </div>
            <!-- Isyak full width -->
            <div class="mt-3">
                                <div class="rounded-2xl p-5 text-center transition-all duration-200 bg-apple-gray dark:bg-apple-darkcard ">
                    <p class="text-[11px] font-medium uppercase tracking-widest text-apple-textsec dark:text-white/40 mb-2">Isyak</p>
                    <p class="text-[1.75rem] font-light tabular-nums text-apple-text dark:text-white ">20:40</p>
                </div>
            </div>
        </section>

        <!-- ==================== APP PROMO CARD (in-content, peak intent) ==================== -->
        <section id="appPromoCard" class="rounded-2xl bg-apple-gray dark:bg-apple-darkcard border border-black/[0.06] dark:border-white/[0.08] shadow-lg p-6 sm:p-8">
          <div class="flex items-center gap-3 mb-4">
            <img src="https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/aa/be/51/aabe5114-fdf0-adce-ca27-a19eea1e40ee/AppIcon-0-0-1x_U007emarketing-0-11-0-85-220.png/512x512bb.jpg"
                 alt="Waktu Solat Jakim" width="56" height="56"
                 class="rounded-2xl" style="width:56px;height:56px;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,0.14)" />
            <div>
              <h3 class="text-lg font-semibold tracking-tight text-apple-text dark:text-white" style="line-height:1.2">Berhenti buka web tiap kali</h3>
              <p class="text-apple-textsec text-[13px] mt-0.5">Percuma &middot; Data rasmi JAKIM 59 zon</p>
            </div>
          </div>

          <p class="text-apple-text dark:text-white text-[15px] leading-relaxed mb-4">
            Awak datang sini nak semak waktu solat. Pasang app Waktu Solat Jakim sekali, lepas tu azan bunyi sendiri setiap waktu, tanpa awak buka apa-apa. Data sama dari JAKIM, cuma kali ni telefon yang panggil awak.
          </p>

          <ul class="space-y-3" style="margin-bottom:1.5rem;list-style:none;padding:0">
            <li class="flex gap-3" style="align-items:flex-start">
              <span class="flex items-center justify-center rounded-full" style="width:20px;height:20px;flex-shrink:0;margin-top:2px;background:rgba(0,113,227,0.12)">
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 6.5L4.5 9L10 3" stroke="#0071e3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <span class="text-apple-text dark:text-white text-[15px]">Azan bunyi automatik setiap waktu solat, set sekali jadi sampai bila-bila</span>
            </li>
            <li class="flex gap-3" style="align-items:flex-start">
              <span class="flex items-center justify-center rounded-full" style="width:20px;height:20px;flex-shrink:0;margin-top:2px;background:rgba(0,113,227,0.12)">
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 6.5L4.5 9L10 3" stroke="#0071e3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <span class="text-apple-text dark:text-white text-[15px]">Peringatan 5, 10 atau 15 minit sebelum azan, sempat bersiap</span>
            </li>
            <li class="flex gap-3" style="align-items:flex-start">
              <span class="flex items-center justify-center rounded-full" style="width:20px;height:20px;flex-shrink:0;margin-top:2px;background:rgba(0,113,227,0.12)">
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 6.5L4.5 9L10 3" stroke="#0071e3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <span class="text-apple-text dark:text-white text-[15px]">Widget skrin utama dan arah kiblat dengan kompas, tengok terus tanpa buka app</span>
            </li>
            <li class="flex gap-3" style="align-items:flex-start">
              <span class="flex items-center justify-center rounded-full" style="width:20px;height:20px;flex-shrink:0;margin-top:2px;background:rgba(0,113,227,0.12)">
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 6.5L4.5 9L10 3" stroke="#0071e3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </span>
              <span class="text-apple-text dark:text-white text-[15px]">Berfungsi offline, azan tetap bunyi walau takde internet</span>
            </li>
          </ul>

          <div class="flex flex-col sm:flex-row gap-3">
            <a id="appStoreBtn" href="https://apps.apple.com/my/app/waktu-solat-jakim/id6774695575"
               class="flex items-center justify-center gap-2 text-white rounded-xl px-5 py-3 transition-all active:scale-[0.97] w-full" style="flex:1 1 0%;background:#1d1d1f">
              <svg width="18" height="18" viewBox="0 0 384 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"/></svg>
              <span class="text-left" style="line-height:1.2">
                <span class="block text-[10px]" style="opacity:0.7">Muat turun di</span>
                <span class="block text-[14px] font-semibold">App Store</span>
              </span>
            </a>
            <a id="playStoreBtn" href="https://play.google.com/store/apps/details?id=com.waktusolat.jakim"
               class="flex items-center justify-center gap-2 text-white rounded-xl px-5 py-3 transition-all active:scale-[0.97] w-full" style="flex:1 1 0%;background:#1d1d1f">
              <svg width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z" fill="#34A853"/><path d="M104.6 13L325.3 234.3l60.1-60.1L104.6 13z" fill="#EA4335"/><path d="M104.6 499l280.8-161.2-60.1-60.1L104.6 499z" fill="#FBBC04"/><path d="M25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0C34 6.8 25.3 19.2 25.3 35.3z" fill="#4285F4"/></svg>
              <span class="text-left" style="line-height:1.2">
                <span class="block text-[10px]" style="opacity:0.7">Dapatkan di</span>
                <span class="block text-[14px] font-semibold">Google Play</span>
              </span>
            </a>
          </div>
        </section>

        <!-- ==================== DERMA SECTION (collapsible) ==================== -->
        <details id="dermaDetails" class="group rounded-2xl border border-apple-blue/15 dark:border-apple-blue/10 overflow-hidden">
            <summary class="flex items-center justify-center gap-2 px-5 py-3.5 cursor-pointer bg-apple-blue/[0.04] dark:bg-apple-blue/[0.08] hover:bg-apple-blue/[0.07] dark:hover:bg-apple-blue/[0.12] transition-colors text-[14px] font-medium text-apple-blue select-none list-none [&::-webkit-details-marker]:hidden">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                Sokong WaktuSolat.AI
                <svg class="w-3.5 h-3.5 transition-transform group-open:rotate-180 text-apple-blue/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
            </summary>
            <div class="p-8 sm:p-10 text-center space-y-4 bg-gradient-to-b from-apple-blue/[0.03] to-transparent dark:from-apple-blue/[0.06] dark:to-apple-darkcard">
                <p class="text-[14px] text-apple-textsec max-w-md mx-auto leading-relaxed">Bantu kami tampung kos server dan data JAKIM supaya ribuan Muslim terus dapat manfaat setiap hari.</p>
                <div class="inline-block bg-white rounded-2xl p-5 shadow-lg ring-1 ring-black/[0.04]">
                    <img src="/derma-qr.png?v=1774541987" alt="QR DuitNow WaktuSolat.AI" class="w-56 h-auto mx-auto object-contain">
                </div>
                <p class="text-[15px] text-apple-text dark:text-white font-semibold">Imbas QR dengan mana-mana banking app</p>
                <p class="text-[13px] text-apple-textsec">Seikhlas hati. Semoga Allah gandakan rezeki anda.</p>
            </div>
        </details>

        <!-- ==================== SHARE & NOTIFY ==================== -->
        <section class="flex flex-col sm:flex-row items-center justify-center gap-3">
            <button id="waShareBtn" onclick="shareWhatsApp()" class="flex items-center gap-2 px-6 py-3 bg-[#25D366] hover:bg-[#20BD5A] text-white rounded-xl text-[15px] font-medium transition-all active:scale-[0.97] w-full sm:w-auto justify-center">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                Kongsi WhatsApp
            </button>
            <button id="notifyBtn" onclick="toggleNotify()" class="flex items-center gap-2 px-6 py-3 bg-apple-gray dark:bg-apple-darkcard hover:bg-black/[0.06] dark:hover:bg-white/[0.06] rounded-xl text-[15px] font-medium transition-all active:scale-[0.97] text-apple-text dark:text-white w-full sm:w-auto justify-center">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                <span id="notifyLabel">Peringatan Solat</span>
            </button>
            <button onclick="shareCopy()" class="flex items-center gap-2 px-6 py-3 bg-apple-gray dark:bg-apple-darkcard hover:bg-black/[0.06] dark:hover:bg-white/[0.06] rounded-xl text-[15px] font-medium transition-all active:scale-[0.97] text-apple-text dark:text-white w-full sm:w-auto justify-center">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                Salin
            </button>
        </section>

        <!-- WhatsApp Channel CTA -->
        <section id="waChannelCTA" class="bg-[#25D366]/10 dark:bg-[#25D366]/5 rounded-2xl p-6 text-center ">
            <p class="text-[15px] font-medium text-apple-text dark:text-white mb-2">Terima waktu solat harian di WhatsApp</p>
            <p class="text-[13px] text-apple-textsec mb-4">Join channel kami untuk peringatan automatik setiap hari.</p>
            <a id="waChannelLink" href="https://whatsapp.com/channel/0029VbBufjeEgGfJeUwKxP1E" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-6 py-3 bg-[#25D366] hover:bg-[#20BD5A] text-white rounded-xl text-[15px] font-medium transition-all">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                Join Channel WhatsApp
            </a>
        </section>


        <!-- ==================== MONTHLY TABLE ==================== -->
                <section>
            <h3 class="text-xl font-semibold text-center mb-6">Jadual Jun 2026</h3>
            <div class="overflow-x-auto rounded-2xl bg-apple-gray dark:bg-apple-darkcard">
                <table class="w-full text-[13px]">
                    <thead>
                        <tr class="border-b border-black/[0.06] dark:border-white/[0.06]">
                            <th class="px-3 py-3 text-left font-medium text-gray-500 dark:text-white/70">Tarikh</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Imsak</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Subuh</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70 hidden sm:table-cell">Syuruk</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Zohor</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Asar</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Maghrib</th>
                            <th class="px-2 py-3 text-center font-medium text-gray-500 dark:text-white/70">Isyak</th>
                        </tr>
                    </thead>
                    <tbody>
                                                                                                                                                                                                                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white bg-apple-blue/[0.06] dark:bg-apple-blue/[0.12]">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="text-apple-blue">9 Sel</span>
                                <span class="ml-1.5 text-[10px] bg-apple-blue text-white px-1.5 py-0.5 rounded-full font-medium">Hari Ini</span>                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:40</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:50</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:03</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:15</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:24</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:40</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">10 Rab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:40</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:50</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:03</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:15</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:24</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:40</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">11 Kha</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:40</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:50</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:03</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:16</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:25</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:40</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">12 Jum</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:40</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:50</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:03</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:16</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:25</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:40</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">13 Sab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:03</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:16</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:25</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:41</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">14 Ahd</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:04</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:16</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:25</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:41</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">15 Isn</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:04</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:16</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:26</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:41</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">16 Sel</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:04</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:17</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:26</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:41</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">17 Rab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:04</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:17</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:26</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:42</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">18 Kha</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:41</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:51</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:04</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:17</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:26</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:42</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">19 Jum</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:52</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:05</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:17</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:26</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:42</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">20 Sab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:52</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:05</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:18</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:27</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:42</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">21 Ahd</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:52</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:05</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:18</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:27</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:43</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">22 Isn</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:42</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:52</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:05</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:18</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:27</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:43</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">23 Sel</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:53</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:05</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:18</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:27</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:43</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">24 Rab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:53</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:06</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:18</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:27</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:43</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">25 Kha</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:53</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:06</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:19</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:28</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:43</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">26 Jum</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:53</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:06</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:19</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:45</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:28</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:44</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">27 Sab</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:43</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:53</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:06</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:19</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:45</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:28</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:44</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">28 Ahd</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:54</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:07</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:19</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:45</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:28</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:44</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">29 Isn</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:54</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:07</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:19</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:45</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:28</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:44</td>
                        </tr>
                                                                        <tr class="border-b border-black/[0.04] dark:border-white/[0.04] last:border-0 text-apple-text dark:text-white ">
                            <td class="px-3 py-2.5 whitespace-nowrap font-medium">
                                <span class="">30 Sel</span>
                                                            </td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:44</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">05:54</td>
                            <td class="px-2 py-2.5 text-center tabular-nums hidden sm:table-cell">07:07</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">13:20</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">16:45</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">19:29</td>
                            <td class="px-2 py-2.5 text-center tabular-nums">20:44</td>
                        </tr>
                                            </tbody>
                </table>
            </div>
        </section>
        

        <!-- ==================== FAQ SECTION ==================== -->
        <section class="space-y-px rounded-2xl overflow-hidden">
            <h2 class="text-xl font-semibold mb-4">Soalan Lazim</h2>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Adakah waktu solat Google Search tepat?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Waktu solat di Google Search <strong class="text-apple-text dark:text-white">tidak sama</strong> dengan waktu solat rasmi JAKIM. Sila rujuk WaktuSolat.AI atau <a href="https://www.e-solat.gov.my/" target="_blank" rel="noopener" class="text-apple-blue hover:underline">portal e-Solat JAKIM</a>.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Berapa waktu Subuh di Kuala Lumpur?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Waktu Subuh Kuala Lumpur hari ini pada pukul <strong class="text-apple-text dark:text-white">05:50</strong>. Imsak 05:40.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Waktu berbuka puasa Kuala Lumpur?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Waktu berbuka puasa sama dengan Maghrib iaitu <strong class="text-apple-text dark:text-white">19:24</strong> petang.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Bilakah waktu Imsak di Kuala Lumpur?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Waktu Imsak Kuala Lumpur hari ini pada pukul <strong class="text-apple-text dark:text-white">05:40</strong>. Imsak adalah 10 minit sebelum Subuh sebagai langkah berjaga-jaga untuk berhenti makan dan minum sebelum waktu puasa.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Berapa waktu Maghrib Kuala Lumpur?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Waktu Maghrib di Kuala Lumpur hari ini pada pukul <strong class="text-apple-text dark:text-white">19:24</strong> petang. Ini juga merupakan waktu berbuka puasa.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Apa itu zon waktu solat JAKIM?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>JAKIM membahagikan Malaysia kepada <strong class="text-apple-text dark:text-white">59 zon waktu solat</strong> berdasarkan kedudukan geografi. Kuala Lumpur berada dalam zon <strong class="text-apple-text dark:text-white">WLY01</strong> yang merangkumi Kuala Lumpur, Putrajaya.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Jadual waktu solat Kuala Lumpur bulan ini?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Jadual penuh waktu solat Kuala Lumpur untuk bulan <strong class="text-apple-text dark:text-white">Jun 2026</strong> boleh dilihat di bahagian jadual bulanan di atas. Data dikemaskini setiap hari berdasarkan sumber rasmi <a href="https://www.e-solat.gov.my/" target="_blank" rel="noopener" class="text-apple-blue hover:underline">JAKIM</a>.</p>
                </div>
            </details>

            <details class="group bg-apple-gray dark:bg-apple-darkcard">
                <summary class="px-5 py-4 cursor-pointer text-[15px] font-medium flex justify-between items-center hover:bg-black/[0.02] dark:hover:bg-white/[0.02] transition-colors">
                    Adakah waktu solat berbeza setiap hari?
                    <svg class="w-4 h-4 text-apple-textsec/50 group-open:rotate-180 transition-transform shrink-0 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div class="px-5 pb-4 text-[14px] text-apple-textsec leading-relaxed">
                    <p>Ya, waktu solat berubah sedikit setiap hari mengikut pergerakan matahari. Perbezaan biasanya <strong class="text-apple-text dark:text-white">1-2 minit</strong> sahaja antara hari berturutan. Oleh itu, penting untuk merujuk waktu solat terkini dari sumber rasmi JAKIM setiap hari.</p>
                </div>
            </details>
        </section>

        <!-- ==================== NEARBY ZONES ==================== -->
                <section>
            <h3 class="text-xl font-semibold mb-4">Kawasan Berdekatan</h3>
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                                <a href="/waktu-solat-labuan" class="bg-apple-gray dark:bg-apple-darkcard rounded-xl px-4 py-3 text-[14px] font-medium hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                    Labuan                </a>
                            </div>
        </section>
        
        <!-- ==================== POPULAR LOCATIONS (cross-state internal linking) ==================== -->
        
        <!-- ==================== ALL LOCATIONS (Homepage only) ==================== -->
                <section>
            <h2 class="text-xl font-semibold mb-6 text-center">Semua Lokasi</h2>
            <div class="space-y-6">
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Johor</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-pulau-aur-dan-pulau-pemanggil" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Pulau Aur dan Pulau Pemanggil                        </a>
                                                <a href="/waktu-solat-johor-bahru" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Johor Bahru                        </a>
                                                <a href="/waktu-solat-kluang" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kluang                        </a>
                                                <a href="/waktu-solat-batu-pahat" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Batu Pahat                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Kedah</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-kota-setar" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kota Setar                        </a>
                                                <a href="/waktu-solat-kuala-muda" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuala Muda                        </a>
                                                <a href="/waktu-solat-padang-terap" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Padang Terap                        </a>
                                                <a href="/waktu-solat-baling" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Baling                        </a>
                                                <a href="/waktu-solat-bandar-baharu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Bandar Baharu                        </a>
                                                <a href="/waktu-solat-langkawi" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Langkawi                        </a>
                                                <a href="/waktu-solat-puncak-gunung-jerai" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Puncak Gunung Jerai                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Kelantan</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-bachok" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Bachok                        </a>
                                                <a href="/waktu-solat-gua-musang" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Gua Musang                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Melaka</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-seluruh-negeri-melaka" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Seluruh Negeri Melaka                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Negeri Sembilan</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-tampin" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Tampin                        </a>
                                                <a href="/waktu-solat-jelebu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Jelebu                        </a>
                                                <a href="/waktu-solat-port-dickson" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Port Dickson                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Pahang</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-pulau-tioman" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Pulau Tioman                        </a>
                                                <a href="/waktu-solat-kuantan" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuantan                        </a>
                                                <a href="/waktu-solat-jerantut" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Jerantut                        </a>
                                                <a href="/waktu-solat-bentong" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Bentong                        </a>
                                                <a href="/waktu-solat-genting-sempah" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Genting Sempah                        </a>
                                                <a href="/waktu-solat-cameron-highlands" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Cameron Highlands                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Perak</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-tapah" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Tapah                        </a>
                                                <a href="/waktu-solat-kuala-kangsar" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuala Kangsar                        </a>
                                                <a href="/waktu-solat-lenggong" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Lenggong                        </a>
                                                <a href="/waktu-solat-temengor" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Temengor                        </a>
                                                <a href="/waktu-solat-kg-gajah" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kg Gajah                        </a>
                                                <a href="/waktu-solat-selama" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Selama                        </a>
                                                <a href="/waktu-solat-bukit-larut" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Bukit Larut                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Perlis</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-kangar" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kangar                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Pulau Pinang</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-seluruh-negeri-pulau-pinang" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Seluruh Negeri Pulau Pinang                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Sabah</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-sandakan" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Sandakan                        </a>
                                                <a href="/waktu-solat-beluran" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Beluran                        </a>
                                                <a href="/waktu-solat-lahad-datu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Lahad Datu                        </a>
                                                <a href="/waktu-solat-pensiangan" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Pensiangan                        </a>
                                                <a href="/waktu-solat-beaufort" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Beaufort                        </a>
                                                <a href="/waktu-solat-kota-kinabalu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kota Kinabalu                        </a>
                                                <a href="/waktu-solat-kudat" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kudat                        </a>
                                                <a href="/waktu-solat-gunung-kinabalu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Gunung Kinabalu                        </a>
                                                <a href="/waktu-solat-sandakan-timur" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Sandakan (Timur)                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Sarawak</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-limbang" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Limbang                        </a>
                                                <a href="/waktu-solat-miri" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Miri                        </a>
                                                <a href="/waktu-solat-tatau" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Tatau                        </a>
                                                <a href="/waktu-solat-sibu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Sibu                        </a>
                                                <a href="/waktu-solat-sarikei" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Sarikei                        </a>
                                                <a href="/waktu-solat-lubok-antu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Lubok Antu                        </a>
                                                <a href="/waktu-solat-betong" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Betong                        </a>
                                                <a href="/waktu-solat-kuching" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuching                        </a>
                                                <a href="/waktu-solat-asajaya" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Asajaya                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Selangor</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-gombak" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Gombak                        </a>
                                                <a href="/waktu-solat-kuala-selangor" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuala Selangor                        </a>
                                                <a href="/waktu-solat-klang" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Klang                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Terengganu</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-kuala-terengganu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuala Terengganu                        </a>
                                                <a href="/waktu-solat-besut" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Besut                        </a>
                                                <a href="/waktu-solat-hulu-terengganu" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Hulu Terengganu                        </a>
                                                <a href="/waktu-solat-dungun" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Dungun                        </a>
                                            </div>
                </div>
                                <div>
                    <h4 class="text-[12px] font-semibold text-apple-textsec uppercase tracking-widest mb-2">Wilayah Persekutuan</h4>
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
                                                <a href="/waktu-solat-kuala-lumpur" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Kuala Lumpur                        </a>
                                                <a href="/waktu-solat-labuan" class="bg-apple-gray dark:bg-apple-darkcard rounded-lg px-3 py-2.5 text-[14px] hover:bg-black/[0.06] dark:hover:bg-white/[0.06] transition-colors no-underline text-apple-text dark:text-white">
                            Labuan                        </a>
                                            </div>
                </div>
                            </div>
        </section>
        
        <!-- ==================== SEO CONTENT ==================== -->
        <section class="text-[14px] text-apple-textsec leading-relaxed space-y-4 max-w-2xl mx-auto">
            <h2 class="text-xl font-semibold text-apple-text dark:text-white">Waktu Solat Kuala Lumpur</h2>
            <p>Kuala Lumpur, ibu negara Malaysia, terletak dalam zon waktu solat WLY01 di bawah penyeliaan JAKIM. Zon ini merangkumi seluruh Wilayah Persekutuan Kuala Lumpur termasuk kawasan pusat bandar seperti KLCC, Bukit Bintang, Chow Kit, dan Bangsar. Sebagai pusat urban terbesar di Malaysia, KL mempunyai ratusan masjid dan surau yang memudahkan umat Islam menunaikan solat lima waktu.</p>

                        <h3 class="text-[16px] font-semibold text-apple-text dark:text-white !mt-6">Kawasan Diliputi Zon WLY01</h3>
            <p>Zon waktu solat WLY01 merangkumi kawasan: <strong class="text-apple-text dark:text-white">KLCC, Bukit Bintang, Chow Kit, Bangsar, Sentul, Setapak, Wangsa Maju, Kepong, Segambut, Titiwangsa, Lembah Pantai, Setiawangsa, Batu</strong>. Penduduk di kawasan-kawasan ini menggunakan waktu solat yang sama.</p>
            
                        <h3 class="text-[16px] font-semibold text-apple-text dark:text-white !mt-6">Masjid Utama di Kuala Lumpur</h3>
            <ul class="list-disc list-inside space-y-1">
                                <li>Masjid Negara</li>
                                <li>Masjid Wilayah Persekutuan</li>
                                <li>Masjid Jamek Sultan Abdul Samad</li>
                                <li>Masjid As-Syakirin KLCC</li>
                            </ul>
            
            
            <h3 class="text-[16px] font-semibold text-apple-text dark:text-white !mt-6">Kepentingan Waktu Solat</h3>
            <p>Solat merupakan rukun Islam kedua dan wajib dilakukan oleh setiap Muslim yang baligh dan berakal. Menunaikan solat pada <strong class="text-apple-text dark:text-white">waktu solat</strong> yang betul adalah sangat penting kerana solat yang dilakukan sebelum masuk waktunya adalah tidak sah.</p>
            <p>Kami menyediakan waktu <strong class="text-apple-text dark:text-white">Imsak</strong> untuk persiapan berpuasa, waktu <strong class="text-apple-text dark:text-white">Syuruk</strong> untuk panduan solat Dhuha, serta jadual lengkap Jun 2026. Semua data berdasarkan sumber rasmi <a href="https://www.e-solat.gov.my/" target="_blank" rel="noopener" class="text-apple-blue hover:underline">e-Solat JAKIM</a>.</p>
        </section>
    </main>

    <!-- ==================== FOOTER ==================== -->
    <footer class="border-t border-black/[0.06] dark:border-white/[0.06] mt-16 py-8">
        <div class="max-w-3xl mx-auto px-5 text-center space-y-2">
            <p class="text-[13px] text-apple-textsec">Data rasmi <a href="https://www.e-solat.gov.my/" target="_blank" rel="noopener" class="text-apple-blue hover:underline">JAKIM</a></p>
            <p class="text-[12px] text-apple-textsec/50">&copy; 2026 WaktuSolat.AI &middot; <a href="/about" class="hover:text-apple-textsec transition-colors">Tentang</a> &middot; <a href="/contact" class="hover:text-apple-textsec transition-colors">Hubungi</a> &middot; <a href="/privacy-policy" class="hover:text-apple-textsec transition-colors">Privacy</a> &middot; <a href="/disclaimer" class="hover:text-apple-textsec transition-colors">Disclaimer</a></p>
        </div>
    </footer>

    <!-- ==================== JAVASCRIPT ==================== -->
    <script src="/pushkit/pushkit.js" defer></script>
    <script>
    // ===== Dark Mode =====
    const html = document.documentElement;
    const darkToggle = document.getElementById('darkToggle');
    const themeMeta = document.getElementById('theme-color-meta');

    function setDark(isDark) {
        html.classList.toggle('dark', isDark);
        localStorage.setItem('darkMode', isDark ? '1' : '0');
        if (themeMeta) themeMeta.content = isDark ? '#000000' : '#ffffff';
    }

    if (localStorage.getItem('darkMode') === '1' || (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        setDark(true);
    }

    darkToggle.addEventListener('click', () => {
        const nowDark = !html.classList.contains('dark');
        setDark(nowDark);
        if (typeof gtag !== 'undefined') gtag('event', 'dark_mode_toggle', { event_category: 'UI', event_label: nowDark ? 'dark' : 'light' });
    });

    // ===== Countdown Timer =====
    const prayerTimes = {
        imsak: '05:40',
        subuh: '05:50',
        syuruk: '07:03',
        zohor: '13:15',
        asar: '16:41',
        maghrib: '19:24',
        isyak: '20:40'
    };
    const prayerOrder = ['imsak','subuh','syuruk','zohor','asar','maghrib','isyak'];
    const prayerLabels = {imsak:'IMSAK',subuh:'SUBUH',syuruk:'SYURUK',zohor:'ZOHOR',asar:'ASAR',maghrib:'MAGHRIB',isyak:'ISYAK'};

    function getNextPrayer() {
        const now = new Date();
        const hh = String(now.getHours()).padStart(2,'0');
        const mm = String(now.getMinutes()).padStart(2,'0');
        const currentTime = hh + ':' + mm;

        for (let p of prayerOrder) {
            if (currentTime < prayerTimes[p]) {
                return { name: p, time: prayerTimes[p] };
            }
        }
        return { name: 'imsak', time: prayerTimes.imsak, tomorrow: true };
    }

    function updateCountdown() {
        const next = getNextPrayer();
        const now = new Date();
        const [h, m] = next.time.split(':').map(Number);

        let target = new Date(now);
        target.setHours(h, m, 0, 0);
        if (next.tomorrow) target.setDate(target.getDate() + 1);

        const diff = target - now;

        document.getElementById('nextPrayerName').textContent = prayerLabels[next.name] || next.name.toUpperCase();

        if (diff <= 0 && diff > -60000) {
            document.getElementById('countdownDisplay').classList.add('hidden');
            document.getElementById('masukWaktu').classList.remove('hidden');
            document.getElementById('masukNama').textContent = prayerLabels[next.name];
            return;
        }

        document.getElementById('countdownDisplay').classList.remove('hidden');
        document.getElementById('masukWaktu').classList.add('hidden');

        const hours = Math.floor(diff / 3600000);
        const minutes = Math.floor((diff % 3600000) / 60000);
        const seconds = Math.floor((diff % 60000) / 1000);

        document.getElementById('cdHours').textContent = String(hours).padStart(2, '0');
        document.getElementById('cdMinutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('cdSeconds').textContent = String(seconds).padStart(2, '0');
    }

    updateCountdown();
    setInterval(updateCountdown, 1000);

    // ===== Geolocation =====
    // Zone coordinates for client-side nearest zone detection
    const zoneCoords = {
        'jhr01':[2.45,104.18],'jhr02':[1.49,103.74],'jhr03':[2.03,103.33],'jhr04':[1.85,102.93],
        'kdh01':[6.12,100.37],'kdh02':[5.58,100.47],'kdh03':[6.25,100.62],'kdh04':[5.67,100.92],
        'kdh05':[5.37,100.56],'kdh06':[6.35,99.80],'kdh07':[5.79,100.44],
        'ktn01':[6.13,102.24],'ktn02':[4.88,101.97],
        'mlk01':[2.19,102.25],
        'ngs01':[2.51,102.09],'ngs02':[2.74,102.00],'ngs03':[2.52,101.80],
        'phg01':[2.81,104.17],'phg02':[3.81,103.33],'phg03':[3.45,102.42],'phg04':[3.52,101.91],'phg05':[3.38,101.79],'phg06':[4.47,101.38],
        'prk01':[3.68,101.52],'prk02':[4.60,101.09],'prk03':[5.10,100.97],'prk04':[5.42,101.40],'prk05':[4.02,101.02],'prk06':[4.85,100.73],'prk07':[4.87,100.80],
        'pls01':[6.44,100.20],'png01':[5.42,100.33],
        'sbh01':[5.84,118.12],'sbh02':[5.55,117.50],'sbh03':[4.24,117.89],'sbh04':[5.34,116.16],'sbh05':[5.34,115.75],'sbh06':[5.98,116.07],'sbh07':[6.88,116.85],'sbh08':[6.08,116.56],'sbh09':[5.10,118.40],
        'swk01':[4.75,115.00],'swk02':[4.40,114.01],'swk03':[3.17,113.04],'swk04':[2.30,111.85],'swk05':[2.13,111.52],'swk06':[1.24,111.46],'swk07':[1.41,111.53],'swk08':[1.55,110.36],'swk09':[1.45,110.46],
        'sgr01':[3.07,101.52],'sgr02':[3.59,101.02],'sgr03':[2.90,101.55],
        'trg01':[5.31,103.13],'trg02':[5.75,102.55],'trg03':[5.10,102.90],'trg04':[4.77,103.42],
        'wly01':[3.14,101.69],'wly02':[5.28,115.23]
    };

    // Zone to slug mapping (from PHP)
    const zoneToSlug = {"jhr01":"pulau-aur-dan-pulau-pemanggil","jhr02":"johor-bahru","jhr03":"kluang","jhr04":"batu-pahat","kdh01":"kota-setar","kdh02":"kuala-muda","kdh03":"padang-terap","kdh04":"baling","kdh05":"bandar-baharu","kdh06":"langkawi","kdh07":"puncak-gunung-jerai","ktn01":"bachok","ktn02":"gua-musang","mlk01":"seluruh-negeri-melaka","ngs01":"tampin","ngs02":"jelebu","ngs03":"port-dickson","phg01":"pulau-tioman","phg02":"kuantan","phg03":"jerantut","phg04":"bentong","phg05":"genting-sempah","phg06":"cameron-highlands","prk01":"tapah","prk02":"kuala-kangsar","prk03":"lenggong","prk04":"temengor","prk05":"kg-gajah","prk06":"selama","prk07":"bukit-larut","pls01":"kangar","png01":"seluruh-negeri-pulau-pinang","sbh01":"sandakan","sbh02":"beluran","sbh03":"lahad-datu","sbh04":"pensiangan","sbh05":"beaufort","sbh06":"kota-kinabalu","sbh07":"kudat","sbh08":"gunung-kinabalu","sbh09":"sandakan-timur","swk01":"limbang","swk02":"miri","swk03":"tatau","swk04":"sibu","swk05":"sarikei","swk06":"lubok-antu","swk07":"betong","swk08":"kuching","swk09":"asajaya","sgr01":"gombak","sgr02":"kuala-selangor","sgr03":"klang","trg01":"kuala-terengganu","trg02":"besut","trg03":"hulu-terengganu","trg04":"dungun","wly01":"kuala-lumpur","wly02":"labuan"};

    function detectLocation() {
        const btn = document.getElementById('geoBtn');
        const origHTML = btn.innerHTML;
        btn.innerHTML = '<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg> Mengesan...';

        if (!navigator.geolocation) {
            btn.textContent = 'Tidak disokong';
            setTimeout(() => btn.innerHTML = origHTML, 2000);
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = pos.coords.latitude, lng = pos.coords.longitude;
                let closest = null, minDist = Infinity;
                for (const [code, [zLat, zLng]] of Object.entries(zoneCoords)) {
                    const d = Math.pow(lat-zLat,2) + Math.pow(lng-zLng,2);
                    if (d < minDist) { minDist = d; closest = code; }
                }
                if (closest && zoneToSlug[closest]) {
                    if (typeof gtag !== 'undefined') gtag('event', 'geolocation_detect', { event_category: 'Navigation', event_label: closest });
                    window.location.href = '/waktu-solat-' + zoneToSlug[closest];
                } else {
                    btn.textContent = 'Lokasi tidak dijumpai';
                    setTimeout(() => btn.innerHTML = origHTML, 2000);
                }
            },
            () => {
                btn.textContent = 'Sila benarkan lokasi';
                setTimeout(() => btn.innerHTML = origHTML, 2000);
            },
            { enableHighAccuracy: true, timeout: 10000 }
        );
    }

    // ===== Service Worker (offline / PWA capability kept; custom install bar removed in favour of app promo) =====
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/service-worker.js').catch(() => {});
    }

    // ===== WhatsApp Share =====
    const shareLocation = 'Kuala Lumpur';
    const shareDate = '09 Jun 2026';
    const shareHijri = '23 Zulhijjah 1447H';
    const shareUrl = 'https://waktusolat.ai/';

    function getShareText() {
        return `🕌 Waktu Solat ${shareLocation}\n📅 ${shareDate}${shareHijri ? ' | ' + shareHijri : ''}\n\nImsak  : ${prayerTimes.imsak}\nSubuh  : ${prayerTimes.subuh}\nSyuruk : ${prayerTimes.syuruk}\nZohor  : ${prayerTimes.zohor}\nAsar   : ${prayerTimes.asar}\nMaghrib: ${prayerTimes.maghrib}\nIsyak  : ${prayerTimes.isyak}\n\n📲 ${shareUrl}\n\n✅ Follow channel kami untuk waktu solat harian:\nhttps://whatsapp.com/channel/0029VbBufjeEgGfJeUwKxP1E`;
    }

    function shareWhatsApp() {
        const text = encodeURIComponent(getShareText());
        window.open('https://wa.me/?text=' + text, '_blank');
        if (typeof gtag !== 'undefined') gtag('event', 'share_whatsapp', { event_category: 'Share' });
    }

    function shareCopy() {
        const text = getShareText();
        navigator.clipboard.writeText(text).then(() => {
            const btn = event.currentTarget;
            const origHTML = btn.innerHTML;
            btn.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Disalin!';
            setTimeout(() => btn.innerHTML = origHTML, 2000);
        });
        if (typeof gtag !== 'undefined') gtag('event', 'share_copy', { event_category: 'Share' });
    }

    // ===== PushKit Web Push Notifications =====
    function updateNotifyUI(isSubscribed) {
        const label = document.getElementById('notifyLabel');
        const btn = document.getElementById('notifyBtn');
        if (isSubscribed) {
            label.textContent = 'Peringatan Aktif';
            btn.classList.add('!bg-apple-blue/10', 'dark:!bg-apple-blue/20', '!text-apple-blue');
        } else {
            label.textContent = 'Peringatan Solat';
            btn.classList.remove('!bg-apple-blue/10', 'dark:!bg-apple-blue/20', '!text-apple-blue');
        }
    }

    async function toggleNotify() {
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
            alert('Browser anda tidak menyokong push notification.');
            return;
        }

        if (PushKit.isSubscribed()) {
            await PushKit.unsubscribe();
        } else {
            const ok = await PushKit.subscribe();
            if (ok && typeof gtag !== 'undefined') {
                gtag('event', 'notify_enable', { event_category: 'Notify' });
            }
        }
    }

    // ===== Track FAQ opens, WA channel click, QR view =====
    document.querySelectorAll('details.group').forEach((d, i) => {
        d.addEventListener('toggle', () => {
            if (d.open && typeof gtag !== 'undefined') {
                gtag('event', 'faq_open', { event_category: 'Engagement', event_label: d.querySelector('summary')?.textContent?.trim()?.substring(0, 60) });
            }
        });
    });

    document.getElementById('waChannelLink')?.addEventListener('click', () => {
        if (typeof gtag !== 'undefined') gtag('event', 'wa_channel_click', { event_category: 'Engagement' });
    });

    // Track QR derma section open
    document.getElementById('dermaDetails')?.addEventListener('toggle', function() {
        if (this.open && typeof gtag !== 'undefined') {
            gtag('event', 'derma_qr_view', { event_category: 'Engagement' });
        }
    });

    // Init PushKit
    PushKit.init({
        vapidPublic: 'BCqkrUfLBdVe_i-O7394GlAMkyEHvxER0fHCUBb_Fgow0PJCdm5fgRKanIQB5XNKAiZb_S4THk6VJjjFXhG5YKo',
        subscribeUrl: '/pushkit/subscribe.php',
        swPath: '/pushkit-sw.js',
        zoneId: 'wly01',
        onStatusChange: updateNotifyUI,
    });
    </script>

    <!-- App Promo JS (isolated block so a prior-script error e.g. deferred PushKit cannot halt it) -->
    <script>
    // ===== App Promo (banner + in-content card) =====
    /* gtag already defined globally on the page (G-P5V6EPCGC4). All gtag calls guarded. */
    (function () {
      'use strict';

      var STORE_IOS = 'https://apps.apple.com/my/app/waktu-solat-jakim/id6774695575';
      var STORE_ANDROID = 'https://play.google.com/store/apps/details?id=com.waktusolat.jakim';
      var DISMISS_KEY = 'wsjAppPromoDismissed';
      var DISMISS_DAYS = 14;

      function detectPlatform() {
        var ua = navigator.userAgent || navigator.vendor || window.opera || '';
        if (/android/i.test(ua)) return 'android';
        // iPadOS 13+ reports as Macintosh, so also check touch points
        if (/iPad|iPhone|iPod/.test(ua) || (/Macintosh/.test(ua) && navigator.maxTouchPoints > 1)) return 'ios';
        return 'desktop';
      }

      // iOS Safari shows Apple's own native Smart App Banner from the meta tag,
      // so suppress our custom slim banner there to avoid a double banner.
      function isIosSafari(platform) {
        if (platform !== 'ios') return false;
        var ua = navigator.userAgent || '';
        var isSafari = /Safari/.test(ua) && !/CriOS|FxiOS|EdgiOS|OPiOS|GSA/.test(ua);
        return isSafari;
      }

      function track(name, params) {
        if (typeof gtag === 'function') {
          try { gtag('event', name, params || {}); } catch (e) {}
        }
      }

      // Owned click logger (waktusolat.ai/track-app.php) -> readable via SSH, no GA4 needed.
      function ping(place, plat) {
        try { if (navigator.sendBeacon) navigator.sendBeacon('/track-app.php?p=' + encodeURIComponent(plat) + '&s=' + place); } catch (e) {}
      }

      function isDismissed() {
        try {
          var raw = localStorage.getItem(DISMISS_KEY);
          if (!raw) return false;
          var ts = parseInt(raw, 10);
          if (isNaN(ts)) return false;
          var ageMs = Date.now() - ts;
          var maxMs = DISMISS_DAYS * 24 * 60 * 60 * 1000;
          if (ageMs > maxMs) {
            localStorage.removeItem(DISMISS_KEY);
            return false;
          }
          return true;
        } catch (e) {
          return false;
        }
      }

      function setDismissed() {
        try { localStorage.setItem(DISMISS_KEY, String(Date.now())); } catch (e) {}
      }

      document.addEventListener('DOMContentLoaded', function () {
        var platform = detectPlatform();

        // ===== SLIM BANNER (Android Chrome + non-Safari mobile only) =====
        var banner = document.getElementById('appPromoBanner');
        var getBtn = document.getElementById('appPromoGet');
        var dismissBtn = document.getElementById('appPromoDismiss');

        if (banner && getBtn) {
          var showBanner = (platform !== 'desktop') && !isIosSafari(platform) && !isDismissed();
          if (showBanner) {
            getBtn.href = (platform === 'android') ? STORE_ANDROID : STORE_IOS;
            banner.classList.remove('hidden');
            track('app_banner_view', { platform: platform });
            getBtn.addEventListener('click', function () {
              track('app_banner_click', { platform: platform });
              ping('banner', platform);
            });
          } else {
            banner.classList.add('hidden');
          }

          if (dismissBtn) {
            dismissBtn.addEventListener('click', function () {
              banner.classList.add('hidden');
              setDismissed();
              track('app_banner_dismiss', { platform: platform });
            });
          }
        }

        // ===== IN-CONTENT CARD (always rendered, never dismissable) =====
        var card = document.getElementById('appPromoCard');
        var appStoreBtn = document.getElementById('appStoreBtn');
        var playStoreBtn = document.getElementById('playStoreBtn');

        if (card) {
          // Reduce friction: make the visitor's OWN store the clear primary CTA (apple-blue, shown first).
          var primaryBtn = (platform === 'android') ? playStoreBtn : (platform === 'ios' ? appStoreBtn : null);
          var secondaryBtn = (platform === 'android') ? appStoreBtn : (platform === 'ios' ? playStoreBtn : null);
          if (primaryBtn) {
            primaryBtn.style.background = '#0071e3';
            if (primaryBtn.parentNode && primaryBtn.parentNode.firstChild !== primaryBtn) {
              primaryBtn.parentNode.insertBefore(primaryBtn, primaryBtn.parentNode.firstChild);
            }
          }
          if (secondaryBtn) { secondaryBtn.style.opacity = '0.6'; }
          if (appStoreBtn) {
            appStoreBtn.addEventListener('click', function () {
              track('app_card_click', { platform: platform, store: 'ios' });
              ping('card', platform);
            });
          }
          if (playStoreBtn) {
            playStoreBtn.addEventListener('click', function () {
              track('app_card_click', { platform: platform, store: 'android' });
              ping('card', platform);
            });
          }
        }
      });
    })();

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