PageSourceSearch

https://kepriprov.go.id/

html kepriprov.go.id collected 2026-10-01 11:36:35 UTC 209,363 bytes, 2,830 lines download raw bytes

1<!doctype html>
2<html lang="id" class="scroll-smooth">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
9  
10  <title>Beranda - Portal Pemerintah Provinsi Kepulauan Riau</title>
11  <meta name="description" content="Selamat datang di website resmi Pemerintah Provinsi Kepulauan Riau, yang berisi informasi mengenai layanan publik, program pembangunan daerah, investasi, dan potensi wisata di Kepulauan Riau. Temukan informasi tentang struktur birokrasi pemerintahan, dinas-dinas, badan-badan, dan kabupaten/kota di wilayah ini. Kami juga menampilkan program pemberdayaan masyarakat, penanggulangan kemiskinan, peningkatan kualitas pendidikan, pengembangan ekonomi kreatif, pengembangan infrastruktur, perlindungan lingkungan hidup, dan kesehatan masyarakat.">
12  <meta name="robots" content="index, follow">
13
14  <!-- Canonical URL -->
15  <link rel="canonical" href="https://kepriprov.go.id/">
16
17  <!-- Open Graph -->
18  <meta property="og:type" content="website">
19  <meta property="og:title" content="Beranda - Portal Pemerintah Provinsi Kepulauan Riau">
20  <meta property="og:description" content="Selamat datang di website resmi Pemerintah Provinsi Kepulauan Riau, yang berisi informasi mengenai layanan publik, program pembangunan daerah, investasi, dan potensi wisata di Kepulauan Riau. Temukan informasi tentang struktur birokrasi pemerintahan, dinas-dinas, badan-badan, dan kabupaten/kota di wilayah ini. Kami juga menampilkan program pemberdayaan masyarakat, penanggulangan kemiskinan, pe
20ningkatan kualitas pendidikan, pengembangan ekonomi kreatif, pengembangan infrastruktur, perlindungan lingkungan hidup, dan kesehatan masyarakat.">
21  <meta property="og:url" content="https://kepriprov.go.id/">
22  <meta property="og:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp">
23  <meta property="og:image:alt" content="Beranda - Portal Pemerintah Provinsi Kepulauan Riau">
24  <meta property="og:image:width" content="1200">
25  <meta property="og:image:height" content="630">
26  <meta property="og:locale" content="id_ID">
27  <meta property="og:site_name" content="Portal Pemerintah Provinsi Kepulauan Riau">
28
29  
30  <!-- Twitter Card -->
31  <meta name="twitter:card" content="summary_large_image">
32  <meta name="twitter:title" content="Beranda - Portal Pemerintah Provinsi Kepulauan Riau">
33  <meta name="twitter:description" content="Selamat datang di website resmi Pemerintah Provinsi Kepulauan Riau, yang berisi informasi mengenai layanan publik, program pembangunan daerah, investasi, dan potensi wisata di Kepulauan Riau. Temukan informasi tentang struktur birokrasi pemerintahan, dinas-dinas, badan-badan, dan kabupaten/kota di wilayah ini. Kami juga menampilkan program pemberdayaan masyarakat, penanggulangan kemiskinan, pe
33ningkatan kualitas pendidikan, pengembangan ekonomi kreatif, pengembangan infrastruktur, perlindungan lingkungan hidup, dan kesehatan masyarakat.">
34  <meta name="twitter:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp">
35  <meta name="theme-color" content="#006db0">
36
37  <!-- Favicon -->
38  <link rel="icon" type="image/png" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png">
39  <link rel="shortcut icon" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png">
40  <link rel="apple-touch-icon" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png">
41
42  <!-- DNS Prefetch & Preconnect -->
43  <link rel="preconnect" href="https://fonts.googleapis.com">
44  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
45  <link rel="dns-prefetch" href="https://unpkg.com">
46  <link rel="preconnect" href="https://unpkg.com">
47
48  <!-- Google Fonts — Non-blocking (preload trick) -->
49  <link rel="preload" as="style"
50    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap"
51    onload="this.onload=null;this.rel='stylesheet'">
52  <noscript>
53    <link rel="stylesheet"
54      href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap">
55  </noscript>
56
57  <!-- Phosphor Icons — Async, non-blocking -->
58  
58<script>
59    (function () {
60      var s = document.createElement('script');
61      s.src = 'https://unpkg.com/@phosphor-icons/[email protected]';
62      s.async = true;
63      document.head.appendChild(s);
64    })();
65  </script>
65
66
67  <!-- App CSS (Tailwind compiled) -->
68  <link rel="stylesheet" href="https://kepriprov.go.id/assets/css/app.css?v=?v=20260506">
69
70      <!-- Dynamic theme color override -->
71    <style>
72      :root {
73        --color-primary:
74          #006db0        ;
75        --color-secondary:
76          #edbc1b        ;
77      }
78    </style>
79  
80  <style>
81    /* Semantic line-clamp utilities */
82    .line-clamp-1,
83    .line-clamp-2,
84    .line-clamp-3 {
85      display: -webkit-box;
86      -webkit-box-orient: vertical;
87      overflow: hidden;
88    }
89
90    .line-clamp-1 {
91      -webkit-line-clamp: 1;
92    }
93
94    .line-clamp-2 {
95      -webkit-line-clamp: 2;
96    }
97
98    .line-clamp-3 {
99      -webkit-line-clamp: 3;
100    }
101
102    @media (min-width: 768px) {
103      .md\:line-clamp-1 {
104        -webkit-line-clamp: 1 !important;
105        display: -webkit-box;
106        -webkit-box-orient: vertical;
107        overflow: hidden;
108      }
109
110      .md\:line-clamp-2 {
111        -webkit-line-clamp: 2 !important;
112        display: -webkit-box;
113        -webkit-box-orient: vertical;
114        overflow: hidden;
115      }
116
117      .md\:line-clamp-3 {
118        -webkit-line-clamp: 3 !important;
119        display: -webkit-box;
120        -webkit-box-orient: vertical;
121        overflow: hidden;
122      }
123    }
124  </style>
125</head>
126
127<body class="bg-slate-50 text-slate-800 antialiased font-sans overflow-x-hidden relative">
128
129  
130<style>
131  .glass-nav {
132    overflow: visible;
133  }
134
135  .group-hover-menu {
136    position: relative;
137  }
138
139  .group-hover-menu::after {
140    content: '';
141    position: absolute;
142    bottom: -15px;
143    left: 0;
144    width: 100%;
145    height: 15px;
146  }
147
148  .group-hover-menu:hover > .nav-dropdown-l2 {
149    opacity: 1;
150    visibility: visible;
151    transform: scale(1);
152    pointer-events: auto;
153  }
154
155  .nav-item-l2:hover > .nav-dropdown-l3 {
156    opacity: 1;
157    visibility: visible;
158    transform: scale(1);
159    pointer-events: auto;
160  }
161
162  /* bridge hover area level 2 -> level 3 agar tidak terlalu sensitif */
163  .nav-item-l2::after {
164    content: '';
165    position: absolute;
166    top: 0;
167    right: -18px;
168    width: 18px;
169    height: 100%;
170  }
171
172  .nav-dropdown-l2,
173  .nav-dropdown-l3 {
174    pointer-events: none;
175    width: max-content;
176    max-width: min(92vw, 34rem);
177  }
178
179  /* pastikan dropdown level 2 benar-benar berada di bawah navbar/menu level 1 */
180  .nav-dropdown-l2 {
181    top: calc(100% + 6px);
182    left: 0;
183    min-width: 16rem;
184    z-index: 50;
185  }
186
187  /* pastikan dropdown level 3 selalu flyout ke kanan dari level 2 */
188  .nav-dropdown-l3 {
189    top: 0;
190    left: 100%;
191    margin-left: 0 !important;
192    min-width: 18rem;
193    z-index: 60;
194  }
195
196  .nav-dropdown-l2 a,
197  .nav-dropdown-l3 a {
198    white-space: nowrap;
199  }
200
201  .sub-menu-gap::before {
202    content: '';
203    position: absolute;
204    top: 0;
205    left: -15px;
206    width: 15px;
207    height: 100%;
208  }
209
210  .mobile-menu-overlay {
211    transition: opacity 0.3s ease-in-out;
212  }
213
214  .mobile-menu-panel {
215    transition: transform 0.3s ease-in-out;
216  }
217
218  .accordion-content {
219    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
220    max-height: 0;
221    opacity: 0;
222    overflow: hidden;
223  }
224
225  .accordion-content.active {
226    max-height: 500px;
227    opacity: 1;
228  }
229</style>
230
231<nav class="fixed w-full z-50 glass-nav transition-all duration-300 shadow-sm" id="navbar">
232  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
233    <div class="flex justify-between items-center h-16 md:h-20">
234
235      <!-- Logo -->
236      <a href="https://kepriprov.go.id/" class="flex items-center gap-2 md:gap-3 group cursor-pointer shrink-0">
237        <div class="relative">
238          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/fe699190-71f5-4eda-a63d-d6416df27cd1.png" alt="Logo Pemerintah Provinsi"
239            class="h-8 md:h-11 relative z-10 transition-transform group-hover:scale-105 duration-300">
240        </div>
241        <div class="leading-tight">
242                      <h1 class="font-bold text-penyengat-green text-xs md:text-sm tracking-wide">Pemerintah Provinsi</h1>
243            <p class="font-extrabold text-penyengat-yellow text-sm md:text-base">Kepulauan Riau            </p>
244                  </div>
245      </a>
246
247      <!-- Desktop Menu -->
248      <div class="hidden lg:flex items-center h-full">
249        <ul class="flex space-x-2 h-full items-center">
250                      <li class="h-full flex items-center"><a href="https://kepriprov.go.id/" class="px-3 py-2 text-sm font-semibold transition-colors relative text-penyengat-green border-b-2 border-penyengat-yellow">Beranda</a></li>                      <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/laman/tentang-kami" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Profil Pemda<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/laman/tentang-kepri" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Sejarah</a></li><li><a href="https://kepriprov.go.id/laman/visi-dan-misi" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Visi dan Misi</a></li><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Perangkat Derah</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu
250-gap">Kepala Daerah<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Ketua DPRD</a></li></ul></div></li></ul></div></li>                      <li class="h-full flex items-center"><a href="https://kepriprov.go.id/layanan" class="px-3 py-2 text-sm font-semibold transition-colors relative text-slate-600 hover:text-penyengat-green">Layanan</a></li>                      <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Publikasi<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/berita" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Pengumuman</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu-gap">Statistik<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Aset Multimedia</a></li></ul></div></li>                      <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/dokumen" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Dokumen &amp; Peraturan<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/dokumen" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Produk Hukum (JDIH)</a></li></ul></div></li>                  </ul>
251
252        <a href="https://kepriprov.go.id/pencarian" id="btn-search-nav"
253          class="w-10 h-10 ml-4 rounded-full bg-penyengat-softgreen flex items-center justify-center text-penyengat-green hover:bg-penyengat-yellow hover:text-white transition shadow-sm hover:shadow-glow shrink-0"
254          title="Pencarian">
255          <i class="ph ph-magnifying-glass text-lg"></i>
256        </a>
257      </div>
258
259      <!-- Mobile menu button -->
260      <div class="lg:hidden flex items-center">
261        <button id="btn-mobile-menu" class="text-penyengat-green hover:text-penyengat-yellow focus:outline-none p-2"
262          aria-label="Menu">
263          <i class="ph ph-list text-3xl"></i>
264        </button>
265      </div>
266    </div>
267  </div>
268
269  <!-- Mobile Menu Overlay & Panel (Full Screen Drawer) -->
270  <div id="mobile-menu-wrapper" class="fixed inset-0 z-[100] hidden">
271    <div id="mobile-backdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm op
271acity-0 mobile-menu-overlay"></div>
272
273    <div id="mobile-panel"
274      class="absolute inset-0 w-full h-full max-w-none bg-white shadow-2xl transform translate-y-full mobile-menu-panel flex flex-col">
275
276      <div class="flex items-center justify-between p-5 border-b border-slate-200">
277        <div class="flex items-center gap-2">
278          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/fe699190-71f5-4eda-a63d-d6416df27cd1.png" alt="Logo" class="h-8">
279          <span class="font-bold text-penyengat-green">Menu Navigasi</span>
280        </div>
281        <button id="btn-close-menu"
282          class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition-colors"
283          type="button">
284          <i class="ph-bold ph-x text-lg"></i>
285        </button>
286      </div>
287
288      <div class="flex-grow overflow-y-auto pb-8 custom-scroll">
289        <ul class="flex flex-col w-full">
290                      <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-penyengat-green bg-penyengat-softgreen/60">Beranda</a></li>                      <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-1-8b024091', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Profil Pemda</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-1-8b024091" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/laman/tentang-kepri" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Sejarah</a></li><li><a href="https://kepriprov.go.id/laman/visi-dan-misi" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Visi dan Misi</a></li><li><a href="#" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Perangkat Derah</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-1-8b024091-3-108f6edd', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Kepala Daerah</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-1-8b024091-3-108f6edd" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Ketua DPRD</a></li></ul></div></li></ul></div></li>                      <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/layanan" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700">Layanan</a></li>                      <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Publikasi</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-3-219bddd0" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/berita" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Pengumuman</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0-3-77c23c3f', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Statistik</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-3-219bddd0-3-77c23c3f" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="#" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Aset Multimedia</a></li></ul></div></li>                      <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-4-f487b38b', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Dokumen &amp; Peraturan</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-4-f487b38b" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/dokumen" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Produk Hukum (JDIH)</a></li></ul></div></li>                  </ul>
291      </div>
292    </div>
293  </div>
294</nav>
295
296<script>
297  // ── Sticky navbar ─────────────────────────────────────────────────────────
298  window.addEventListener('scroll', () => {
299    document.getElementById('navbar').classList.toggle('shadow-md', window.scrollY > 20);
300  });
301
302  // ── Mobile menu toggle (drawer) ───────────────────────────────────────────
303  const btnMenu = document.getElementById('btn-mobile-menu');
304  const btnCloseMenu = document.getElementById('btn-close-menu');
305  const mobileMenuWrapper = document.getElementById('mobile-menu-wrapper');
306  const mobileBackdrop = document.getElementById('mobile-backdrop');
307  const mobilePanel = document.getElementById('mobile-panel');
308
309  window.openMobileMenu = function() {
310    if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return;
311    mobileMenuWrapper.classList.remove('hidden');
312      setTimeout(() => {
313        mobileBackdrop.classList.remove('opacity-0');
314        mobilePanel.classList.remove('translate-y-full');
315        document.body.style.overflow = 'hidden';
316      }, 10);
317  }
318
319  window.closeMobileMenu = function() {
320    if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return;
321    mobileBackdrop.classList.add('opacity-0');
322    mobilePanel.classList.add('translate-y-full');
323    document.body.style.overflow = 'auto';
324
325    setTimeout(() => {
326      mobileMenuWrapper.classList.add('hidden');
327    }, 300);
328  }
329
330  if (btnMenu) btnMenu.addEventListener('click', openMobileMenu);
331  if (btnCloseMenu) btnCloseMenu.addEventListener('click', closeMobileMenu);
332  if (mobileBackdrop) mobileBackdrop.addEventListener('click', closeMobileMenu);
333
334  // Auto-close mobile menu when an internal link is clicked (excluding dropdown triggers)
335  if (mobilePanel) {
336    mobilePanel.addEventListener('click', (e) => {
337      const link = e.target.closest('a');
338      if (link) {
339        const href = link.getAttribute('href');
340        // Close only if it's an internal link (not starting with http/https unless it's the same domain)
341        // and it's not a dropdown toggle (though mobile uses buttons for toggles, let's be safe)
342        const isExternal = href.startsWith('http') && !href.includes(window.location.hostname);
343        const isAnchor = href.startsWith('#');
344        
345        if (!isExternal && !isAnchor) {
346          closeMobileMenu();
347        }
348      }
349    });
350  }
351
352  // ── Mobile accordion ──────────────────────────────────────────────────────
353  function toggleAccordion(contentId, buttonElement) {
354    const content = document.getElementById(contentId);
355    const icon = buttonElement.querySelector('i');
356
357    if (!content) return;
358
359    if (content.classList.contains('active')) {
360      content.classList.remove('active');
361      if (icon) icon.classList.remove('rotate-180');
362      buttonElement.classList.remove('text-penyengat-green');
363    } else {
364      content.classList.add('active');
365      if (icon) icon.classList.add('rotate-180');
366      buttonElement.classList.add('text-penyengat-green');
367    }
368  }
369</script>
369
370
371  <main id="main-content">
372    
373
374<style>
375  .bg-video-overlay {
376    position: absolute;
377    inset: 0;
378    z-index: 1;
379    background-image: url('https://kepriprov.go.id/assets/media/patterns-video.png');
380    background-repeat: repeat;
381    opacity: 0.4; /* Adjust opacity as needed for visual balance */
382    pointer-events: none;
383  }
384</style>
385
386<!-- Hero Section -->
387<section class="relative pt-28 pb-40 lg:pt-48 lg:pb-56 overflow-hidden bg-penyengat-dark leading-normal">
388  <!-- Background Layer 1: Image Placeholder -->
389  <div class="absolute inset-0 z-0 bg-cover bg-center transition-opacity duration-1000" 
390       style="background-image: url('https://kepriprov.go.id/assets/media/kepri-background.webp');">
391  </div>
392  
393  <!-- Background Layer 2: Video (Initially hidden) -->
394  <video id="hero-video" 
395         class="absolute inset-0 w-full h-full object-cover z-0 opacity-0 transition-opacity duration-1000" 
396         muted loop playsinline preload="none">
397  </video>
398
399  <!-- Background Layer 3: Pattern Overlay -->
400  <div class="bg-video-overlay"></div>
401
402  <!-- Background Layer 4: Gradient Overlay for readability -->
403  <div class="absolute inset-0 bg-gradient-to-r from-penyengat-dark/95 via-penyengat-dark/70 to-penyengat-dark/30 z-[2]"></div>
404
405  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
406    <div class="max-w-3xl">
407      <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight mb-4 md:mb-6 tracking-tight">
408        Bersauh Marwah,<br>
409        <span class="text-transparent bg-clip-text bg-gradient-to-r from-penyengat-yellow to-yellow-200 drop-shadow-sm">Menuju Kepri Gemilang</span>      </h1>
410      <p class="text-base md:text-xl text-green-50 mb-8 md:mb-10 max-w-xl font-medium leading-relaxed opacity-90">
411        Melayani masyarakat dengan transparansi, inovasi, dan dedikasi. Jelajahi pesona, layanan, dan perkembangan Kepulauan Riau.      </p>
412
413      <!-- Search Bar -->
414      <form action="https://kepriprov.go.id/pencarian" method="GET" class="flex items-center bg-white/10 backdrop-blur-md rounded-full p-2 border border-white/20 max-w-xl group focus-within:bg-white focus-within:border-white transition-all duration-500">
415        <i class="ph ph-magnifying-glass text-xl md:text-2xl text-white group-focus-within:text-penyengat-dark ml-3 transition-colors"></i>
416        <input type="text" name="keyword" placeholder="Cari informasi layanan atau berita..." id="search-hero"
417          class="flex-1 bg-transparent border-none focus:ring-0 px-3 md:px-4 text-sm md:text-base text-white group-focus-within:text-slate-800 outline-none placeholder-white/60 group-focus-within:placeholder-slate-400 transition-colors">
418        <button type="submit" class="bg-penyengat-yellow text-penyengat-dark px-6 md:px-8 py-2 md:py-3 rounded-full font-bold text-sm md:text-base hover:bg-yellow-400 transition-all transform hover:scale-105">
419          Cari
420        </button>
421      </form>
422    </div>
423  </div>
424</section>
425
426<!-- Quick Menu (Overlapping Cards) -->
427<div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-20 md:-mt-28 mb-12">
428  <div class="rounded-[2rem] md:rounded-[2.5rem] p-3 md:p-6 relative overflow-hidden group bg-white border border-slate-200">
429    <div class="absolute inset-0 bg-gradient-to-r from-penyengat-softgreen/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"></div>
430
431    <!-- Quick Menu Controls (Desktop Only) -->
432    <div class="hidden md:block">
433      <button type="button" data-quick-prev
434        class="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 backdrop-blur border border-slate-200 flex items-center justify-center text-penyengat-dark shadow-sm z-20 opacity-0 group-hover:opacity-100 transition-all hover:bg-white hover:border-penyengat-green hover:text-penyengat-green">
435        <i class="ph-bold ph-caret-left"></i>
436      </button>
437      <button type="button" data-quick-next
438        class="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/90 backdrop-blur border border-slate-200 flex items-center justify-center text-penyengat-dark shadow-sm z-20 opacity-0 group-hover:opacity-100 transition-all hover:bg-white hover:border-penyengat-green hover:text-penyengat-green">
439        <i class="ph-bold ph-caret-right"></i>
440      </button>
441    </div>
442
443    <div data-quick-track class="flex flex-nowrap overflow-x-auto hide-scroll gap-3 md:gap-4 justify-start lg:justify-between items-center px-2 relative z-10 swipeable-row">
444              <a href="https://kepriprov.go.id/laman/tentang-kepri"
445          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-penyengat-softgreen hover:border-green-100">
446          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
447                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/b92d47f3-574b-42fa-9c22-14a7d49e19b8.png" alt="Profil" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
448                      </div>
449          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-green">
450            Profil<br>          </span>
451        </a>
452              <a href="https://kepriprov.go.id/berita"
453          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-yellow-50 hover:border-yellow-100">
454          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
455                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/371649dc-eedf-4b02-9c13-b1c9daf860fd.png" alt="Berita" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
456                      </div>
457          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-yellow-hover">
458            Berita<br>          </span>
459        </a>
460              <a href="https://kepriprov.go.id/siaran-pers"
461          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-penyengat-softgreen hover:border-green-100">
462          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
463                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/70635daf-7e86-43bd-8293-cb53f7129ff3.png" alt="Siaran Pers" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
464                      </div>
465          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-green">
466            Siaran<br>Pers          </span>
467        </a>
468              <a href="https://kepriprov.go.id/layanan"
469          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-yellow-50 hover:border-yellow-100">
470          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
471                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/dbf20246-0fb6-49b8-92f5-8524c8e1e0cb.png" alt="Layanan" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
472                      </div>
473          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-yellow-hover">
474            Layanan<br>          </span>
475        </a>
476              <a href="https://kepriprov.go.id/instansi"
477          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-penyengat-softgreen hover:border-green-100">
478          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
479                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/063c07d4-7b09-4fe8-a521-ce80d2c29238.png" alt="Instansi" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
480                      </div>
481          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-green">
482            Instansi<br>          </span>
483        </a>
484              <a href="https://kepriprov.go.id/dokumen"
485          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-yellow-50 hover:border-yellow-100">
486          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
487                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/e6232b29-2f55-4ea5-90b0-b6c20122e0ba.png" alt="IPKD" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
488                      </div>
489          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-yellow-hover">
490            IPKD<br>          </span>
491        </a>
492              <a href="https://kepri.lapor.go.id/"
493          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-penyengat-softgreen hover:border-green-100">
494          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
495                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/b1a5e9f0-6876-4c06-9a83-a453fdfcfc8d.png" alt="Lapor" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
496                      </div>
497          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-green">
498            Lapor<br>          </span>
499        </a>
500              <a href="https://ppid.kepriprov.go.id/"
501          class="flex flex-col items-center justify-center gap-3 p-3 md:p-4 min-w-[95px] md:min-w-[130px] aspect-square rounded-[1.5rem] md:rounded-[2rem] border border-slate-200 transition-all duration-300 group/link shrink-0 swipeable-card-start hover:bg-yellow-50 hover:border-yellow-100">
502          <div class="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center group-hover/link:-translate-y-2 transition-all duration-300 bg-white/90 text-penyengat-green group-hover/link:bg-white">
503                          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/7721eee7-06c8-4e56-9e73-620b3ae41ea1.png" alt="PPID" class="w-6 h-6 md:w-9 md:h-9 object-contain opacity-90 group-hover/link:opacity-100 transition-all">
504                      </div>
505          <span class="text-[10px] md:text-xs font-extrabold text-slate-700 text-center leading-tight group-hover/link:text-penyengat-yellow-hover">
506            PPID<br>          </span>
507        </a>
508          </div>
509    
510    <!-- Mobile Swipe Hint -->
511    <div class="flex justify-center items-center gap-2 mt-4 text-slate-400 text-[10px] font-medium sm:hidden relative z-10">
512      <i class="ph-bold ph-arrows-left-right"></i> Geser untuk menu lainnya
513    </div>
514  </div>
515</div>
516
517<script>
518  // --- Home Hero Video Background — Lazy Load via IntersectionObserver ---
519  (function () {
520    const videoSrc = 'https://kepriprov.go.id/assets/media/kepri-video-bg.mp4';
521    const videoElement = document.getElementById('hero-video');
522    const heroSection = videoElement ? videoElement.closest('section') : null;
523
524    if (!videoElement || !heroSection) return;
525
526    // Only load video after LCP/Hero is visible; avoids competing with critical resources
527    const observer = new IntersectionObserver(function(entries) {
528      if (!entries[0].isIntersecting) return;
529      observer.disconnect();
530
531      videoElement.src = videoSrc;
532      videoElement.load();
533
534      videoElement.addEventListener('canplay', function onCanPlay() {
535        videoElement.removeEventListener('canplay', onCanPlay);
536        videoElement.play().catch(() => {});
537        // Fade in the video over the static background image
538        videoElement.style.transition = 'opacity 1s ease';
539        videoElement.style.opacity = '1';
540      });
541    }, { threshold: 0.1 });
542
543    // Start observing after a short delay so LCP image has priority
544    setTimeout(() => observer.observe(heroSection), 1500);
545  })();
546
547  // --- Quick Menu Slider ---
548  (function initQuickSlider() {
549    const track   = document.querySelector('[data-quick-track]');
550    const prevBtn = document.querySelector('[data-quick-prev]');
551    const nextBtn = document.querySelector('[data-quick-next]');
552    
553    if (!track || !prevBtn || !nextBtn) return;
554
555    const getStep = () => {
556      const firstCard = track.querySelector('.swipeable-card-start');
557      if (!firstCard) return track.clientWidth * 0.7;
558      const styles = window.getComputedStyle(track);
559      const gap = parseFloat(styles.columnGap || styles.gap || '0') || 0;
560      return firstCard.getBoundingClientRect().width + gap;
561    };
562
563    prevBtn.addEventListener('click', () => {
564      track.scrollBy({ left: -getStep(), behavior: 'smooth' });
565    });
566    nextBtn.addEventListener('click', () => {
567      track.scrollBy({ left: getStep(), behavior: 'smooth' });
568    });
569  })();
570</script>
570
571<!-- SECTION 1: Layanan Publik -->
572<section id="layanan" class="pb-16 md:pb-20 relative overflow-hidden">
573  <div class="absolute -top-12 -right-16 w-64 h-64 bg-penyengat-yellow/15 rounded-full blur-[95px] pointer-events-none">
574  </div>
575  <div
576    class="absolute -bottom-16 -left-16 w-72 h-72 bg-penyengat-green/10 rounded-full blur-[100px] pointer-events-none">
577  </div>
578  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-4">
579    <div
580      class="flex flex-col md:flex-row justify-between items-center md:items-end mb-10 md:mb-14 gap-6 text-center md:text-left">
581      <div>
582        <h2 class="text-2xl md:text-3xl font-extrabold text-penyengat-dark tracking-tight">Layanan Publik</h2>
583        <p class="text-slate-600 mt-4 max-w-2xl mx-auto md:mx-0 text-sm md:text-base leading-relaxed">Akses cepat
584          layanan pemerintahan dan fasilitas publik Kepulauan Riau.</p>
585      </div>
586      <a href="https://kepriprov.go.id/layanan"
587        class="inline-flex items-center justify-center gap-2 bg-penyengat-softgreen text-penyengat-green font-bold px-6 py-3 rounded-full hover:bg-penyengat-green hover:text-white border border-green-200 transition-all hover:-translate-y-1 w-full md:w-auto">
588        Semua Layanan <i class="ph-bold ph-arrow-right"></i>
589      </a>
590    </div>
591
592    <div class="grid grid-cols-2 lg:grid-cols-3 gap-3 md:gap-6">
593              <a href="https://kepriprov.go.id/layanan" data-slug="informasi-publik"
594          data-title="Informasi Publik" data-desc=""
595          data-services='[{&quot;title&quot;:&quot;Daftar Informasi Publik&quot;,&quot;description&quot;:&quot;Katalog informasi yang tersedia bagi masyarakat&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/d46a1698-1ca6-4844-9403-576c25aa3a59_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/ppid.kepriprov.go.id\/daftar-informasi&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Informasi Berkala&quot;,&quot;description&quot;:&quot;Data dan informasi yang diterbitkan secara rutin.&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/40b333ec-0b74-4a9f-a15c-9a2e7ce95450_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/ppid.kepriprov.go.id\/laman\/ringkasan-informasi-berkala&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;PPID Pelaksana&quot;,&quot;description&quot;:&quot;Daftar Pejabat Pengelola Informasi dan Dokumentasi di setiap OPD&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/28f3d713-2d45-4ec4-9995-9ff7502c9165_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/ppid.kepriprov.go.id\/daftar-ppid&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Produk Hukum (JIDH)&quot;,&quot;description&quot;:&quot;Jaringan Dokumentasi dan Informasi Hukum Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/6b86d54e-2f30-4c07-a441-fc3182f17fa5_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/jdih.kepriprov.go.id\/dokumenhukum.phtml&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Portal Satu Data&quot;,&quot;description&quot;:&quot;Integrasi data antar OPD dalam rangka satu data Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2f24481d-25b2-4663-a2df-6e4d3ff51e8e_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/satudata.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Dashboard Keuangan&quot;,&quot;description&quot;:&quot;Visualisasi data keuangan daerah secara transparan&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/586e1f3d-f99a-4be1-b1fb-b85b0bf63b8f_thumb.webp&quot;,&quot;target_url&quot;:&quot;http:\/\/dashboard.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;}]'
596          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
597          <i class="ph-fill ph-folder-lock watermark-icon text-slate-100"></i>
598          <div
599            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-green group-hover:bg-penyengat-green group-hover:text-white">
600            <i class="ph-fill ph-folder-lock text-xl md:text-3xl"></i>
601          </div>
602          <h3
603            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-green line-clamp-1">
604            Informasi Publik          </h3>
605          <p
606            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
607                      </p>
608        </a>
609              <a href="https://kepriprov.go.id/layanan" data-slug="layanan-spbe"
610          data-title="Layanan SPBE" data-desc=""
611          data-services='[{&quot;title&quot;:&quot;SILAT Kepri&quot;,&quot;description&quot;:&quot;Sistem Informasi Layanan Aparatur Terpadu&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/ea38ae8
6111-7926-450f-b771-d049cca98c6c_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/silat.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIMANJA Kepri&quot;,&quot;description&quot;:&quot;Sistem Informasi Manajemen Kinerja ASN&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/814faae8-7bc0-4780-8a64-1b5db28fe7ce_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/simanja.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIAP Kepri&quot;,&quot;description&quot;:&quot;Sistem Informasi Aktivitas &amp; Presensi ASN&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/6b2b9f24-44db-4139-ab95-c4bf1c76636a_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/siap.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;LIGAT Kepri&quot;,&quot;description&quot;:&quot;Aplikasi Ruang Belajar Online untuk Aparatur Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/a0594f9e-06f9-40a4-9062-0a9f00511193_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/bpsdm.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIAPRI Kepri&quot;,&quot;description&quot;:&quot;Sistem Aplikasi Penyusunan Rencana Kebutuhan Barang Milik Daerah&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/fe699190-71f5-4eda-a63d-d6416df27cd1.png&quot;,&quot;target_url&quot;:&quot;https:\/\/www.siapri.bkad.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Manajemen Talenta&quot;,&quot;description&quot;:&quot;Sistem pemetaan potensi dan pengembangan karier ASN Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/3d969186-2404-4832-9410-ff7f18338ee5_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/talenta.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SRIKANDI&quot;,&quot;description&quot;:&quot;Sistem Informasi Kearsipan Dinamis Terintegrasi Nasional&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/46bd001b-ade3-4be3-a597-4c2b2bbd9e9f_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/srikandi.arsip.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Pendaftaran TTE&quot;,&quot;description&quot;:&quot;Permohonan Tanda Tangan Elektronik ASN &amp; OPD&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/fd4b46b7-cdf6-4cd7-99ca-49aaca43d797_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/kepriprov.go.id\/tte&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Webmail Kepriprov&quot;,&quot;description&quot;:&quot;Akses email resmi pegawai Pemprov Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/4f0efdf6-69ce-486f-9b67-f49ffb419b81_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/webmail.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;}]'
612          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
613          <i class="ph-fill ph-laptop watermark-icon text-slate-100"></i>
614          <div
615            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-yellow group-hover:bg-penyengat-yellow group-hover:text-white">
616            <i class="ph-fill ph-laptop text-xl md:text-3xl"></i>
617          </div>
618          <h3
619            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-yellow-hover line-clamp-1">
620            Layanan SPBE          </h3>
621          <p
622            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
623                      </p>
624        </a>
625              <a href="https://kepriprov.go.id/layanan" data-slug="layanan-kesehatan"
626          data-title="Layanan Kesehatan" data-desc=""
627          data-services='[{&quot;title&quot;:&quot;JAMKESDA&quot;,&quot;description&quot;:&quot;
627Layanan Jaminan Kesehatan Daerah untuk warga tidak mampu&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/97ea5a5a-bb44-4781-9c8b-a2f68e67ba11_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/www.dinkesprovkepri.org\/layanan\/jamkesmas&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIBADANG&quot;,&quot;description&quot;:&quot;Sistem Informasi &amp; Bank Data Kesehatan Kepri Gemilang&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/84e63bbc-44e9-427b-80d3-183ada18e2a1_thumb.webp&quot;,&quot;target_url&quot;:&quot;http:\/\/sibadang.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Izin &amp; Rekom Dinkes&quot;,&quot;description&quot;:&quot;Layanan perizinan fasilitas &amp; tenaga kesehatan&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/a3a09d55-4df4-42ca-810c-3a22a68dec7f_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/www.dinkesprovkepri.org\/layanan\/rekomendasi&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Rumah Singgah Kepri&quot;,&quot;description&quot;:&quot;Fasilitas tempat tinggal sementara bagi warga berobat ke luar daerah&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2466f2f1-cc1f-43ac-9f74-1a2bcb99bf69_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/rumsing.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;RSUD Raja Ahmad Tabib&quot;,&quot;description&quot;:&quot;Rumah Skit Umum Daerah Raja Ahmad Tabib&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/745f51ec-246f-41b7-9ed6-ce866f0728a0_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/rsudtpi.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;RSJKO Engku Haji Daud&quot;,&quot;description&quot;:&quot;Rumah Sakit Jiwa dan Ketergantungan Obat Engku Haji Daud&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/03cd3c3f-c7c1-4055-9f9c-8b394c2d6afd_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/rsjkoehd.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;}]'
628          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
629          <i class="ph-fill ph-heartbeat watermark-icon text-slate-100"></i>
630          <div
631            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-green group-hover:bg-penyengat-green group-hover:text-white">
632            <i class="ph-fill ph-heartbeat text-xl md:text-3xl"></i>
633          </div>
634          <h3
635            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-green line-clamp-1">
636            Layanan Kesehatan          </h3>
637          <p
638            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
639                      </p>
640        </a>
641              <a href="https://kepriprov.go.id/layanan" data-slug="layanan-pendidikan"
642          data-title="Layanan Pendidikan" data-desc=""
643          data-services='[{&quot;title&quot;:&quot;SISPMB 2025\/2026&quot;,&quot;description&quot;:&quot;Sistem Penerimaan Murid Baru SMA\/SMK\/SLB Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/e2fd17b
6436-d091-4e39-a8ac-611d3a5ad61a_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/sispmb.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Beasiswa Kepri 2025&quot;,&quot;description&quot;:&quot;Program bantuan pendidikan untuk mahasiswa\/i Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/dd3aa92a-541b-4380-961e-a77ba259702c_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/beasiswa.kepriprov.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;Layanan Dinas Pendidikan&quot;,&quot;description&quot;:&quot;Informasi dan layanan dari Dinas Pendidikan Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2d0c210d-a29a-4739-a01a-e77cecb6b88a_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/dinaspendidikan.kepriprov.go.id\/laman\/standar-pelayanan-publik&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;iKepri Digital Library&quot;,&quot;description&quot;:&quot;Akses perpustakaan digital untuk pelajar dan masyarakat umum&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2df2d825-d6f7-46ed-8948-5e74b13723b8_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/ikepri.kepriprov.go.id\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;}]'
644          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
645          <i class="ph-fill ph-student watermark-icon text-slate-100"></i>
646          <div
647            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-yellow group-hover:bg-penyengat-yellow group-hover:text-white">
648            <i class="ph-fill ph-student text-xl md:text-3xl"></i>
649          </div>
650          <h3
651            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-yellow-hover line-clamp-1">
652            Layanan Pendidikan          </h3>
653          <p
654            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
655                      </p>
656        </a>
657              <a href="https://kepriprov.go.id/layanan" data-slug="info-pajak-harga"
658          data-title="Info Pajak &amp; Harga" data-desc=""
659          data-services='[]'
660          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
661          <i class="ph-fill ph-squares-four watermark-icon text-slate-100"></i>
662          <div
663            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-green group-hover:bg-penyengat-green group-hover:text-white">
664            <i class="ph-fill ph-squares-four text-xl md:text-3xl"></i>
665          </div>
666          <h3
667            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-green line-clamp-1">
668            Info Pajak &amp; Harga          </h3>
669          <p
670            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
671                      </p>
672        </a>
673              <a href="https://kepriprov.go.id/layanan" data-slug="investasi-perizinan"
674          data-title="Investasi &amp; Perizinan" data-desc=""
675          data-services='[{&quot;title&quot;:&quot;OSS&quot;,&quot;description&quot;:&quot;Perizinan Usaha Berbasis Risiko secara nasional&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/4315e1bd-686d-4cb4-9745-f86a6d054b75_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/oss.go.id&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIJARIMU&quot;,&quot;description&quot;:&quot;Sistem Informasi Perizinan Non-OSS Daerah&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/bf561b3b-8c54-4df6-9e75-294f096be6d6_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/sijarimu-v2.kepri.pro\/app\/login&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;},{&quot;title&quot;:&quot;SIDASI&quot;,&quot;description&quot;:&quot;Sistem Informasi Data &amp; Investasi Daerah Kepri&quot;,&quot;icon&quot;:&quot;https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/cf53ef71-23f8-4fcd-b133-1124b7ba1f13_thumb.webp&quot;,&quot;target_url&quot;:&quot;https:\/\/sidasi.kepri.pro\/&quot;,&quot;is_external&quot;:true,&quot;agency&quot;:&quot;Pemerintah Provinsi Kepulauan Riau&quot;}]'
676          class="btn-open-service-sheet bg-white/90 backdrop-blur-sm rounded-2xl md:rounded-[2rem] p-4 md:p-8 hover:bg-white border border-slate-200 transition-all duration-300 hover:-translate-y-2 hover:border-penyengat-green group relative overflow-hidden flex flex-col shadow-sm hover:shadow-md">
677          <i class="ph-fill ph-handshake watermark-icon text-slate-100"></i>
678          <div
679            class="w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl bg-slate-50 border border-slate-100 flex items-center justify-center mb-4 md:mb-6 transition-colors relative z-10 text-penyengat-green group-hover:bg-penyengat-green group-hover:text-white">
680            <i class="ph-fill ph-handshake text-xl md:text-3xl"></i>
681          </div>
682          <h3
683            class="text-sm md:text-xl font-bold text-slate-800 mb-1.5 md:mb-3 relative z-10 transition-colors group-hover:text-penyengat-green line-clamp-1">
684            Investasi &amp; Perizinan          </h3>
685          <p
686            class="text-slate-500 text-[10px] md:text-sm leading-relaxed relative z-10 flex-grow line-clamp-2 md:line-clamp-none">
687                      </p>
688        </a>
689          </div>
690
691    <!-- Banner Slider (Merged) -->
692    <div class="mt-10">
693            <div class="flex gap-4 md:gap-6 overflow-x-auto hide-scroll swipeable-row px-1 pb-4 snap-x snap-mandatory">
694              </div>
695          </div>
696
697  </div>
698</section>
699<!-- SECTION 3: Profil & Visi Misi Gubernur -->
700<section id="profil" class="py-16 md:py-24 bg-white relative overflow-hidden bg-grid border-b border-slate-200">
701  <div
702    class="absolute top-0 right-0 w-80 h-80 bg-penyengat-cream rounded-full filter blur-[100px] opacity-70 pointer-events-none">
703  </div>
704  <div
705    class="absolute bottom-0 left-0 w-80 h-80 bg-penyengat-softgreen rounded-full filter blur-[100px] opacity-80 pointer-events-none">
706  </div>
707  <div class="absolute top-10 left-10 text-slate-300 opacity-50"><i class="ph ph-plus text-2xl"></i></div>
708  <div class="absolute bottom-10 right-20 text-slate-300 opacity-50"><i class="ph ph-plus text-2xl"></i></div>
709
710  <!-- Lingkaran Dekorasi -->
711  <div
712    class="absolute -top-10 -right-10 w-48 h-48 md:w-64 md:h-64 roun
712ded-full border-[20px] md:border-[40px] border-penyengat-green/10 animate-[spin_30s_linear_infinite] pointer-events-none">
713  </div>
714  <div
715    class="absolute -bottom-20 -left-20 w-64 h-64 md:w-80 md:h-80 rounded-full border-[15px] md:border-[20px] border-penyengat-yellow/10 pointer-events-none">
716  </div>
717
718  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
719    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 md:gap-16 items-center">
720
721      <!-- Foto Side-by-Side (Left) -->
722      <div class="lg:col-span-5 flex flex-col justify-center items-center gap-3 sm:gap-6 mt-10 md:mt-0 px-2 sm:px-0">
723        <div class="flex flex-row justify-center items-center gap-3 sm:gap-6 w-full">
724          <!-- Foto Gubernur -->
725          <div
726            class="relative w-1/2 max-w-[240px] rounded-xl border border-slate-200 shadow-soft overflow-hidden bg-slate-200 h-auto transform -translate-y-4 sm:-translate-y-6 hover:scale-105 transition-transform duration-500">
727            <img src="https://kepriprov.go.id/assets/media/gubernur-kepri.webp"
728              alt="Gubernur Kepulauan Riau" class="w-full h-auto block rounded-sm" loading="lazy" decoding="async">
729          </div>
730
731          <!-- Foto Wakil Gubernur -->
732          <div
733            class="relative w-1/2 max-w-[240px] rounded-xl border border-slate-200 shadow-soft overflow-hidden bg-slate-300 h-auto transform translate-y-4 sm:translate-y-6 hover:scale-105 transition-transform duration-500">
734            <img src="https://kepriprov.go.id/assets/media/wakil-gubernur-kepri.webp"
735              alt="Wakil Gubernur Kepulauan Riau" class="w-full h-auto block rounded-sm" loading="lazy" decoding="async">
736          </div>
737        </div>
738
739        <!-- Desktop CTA Grid (Below Photos) -->
740        <div class="hidden lg:grid grid-cols-2 w-full mt-12 gap-4 lg:gap-5">
741          <a href="https://kepriprov.go.id/dokumen/dokumen-perencanaan/rencana-pembangunan-jangka-menengah-daerah-rpjmd-provinsi-kepulauan-riau-tahun-20252029"
742            class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 hover:-translate-y-1 transition-all group/cta shadow-sm">
743            <div
744              class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
745              <i class="ph-bold ph-clipboard-text text-lg"></i>
746            </div>
747            <div class="flex flex-col min-w-0">
748              <span
749                class="text-[8px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Perencanaan</span>
750              <span
751                class="text-sm font-bold text-slate-800 group-hover/cta:text-penyengat-green transition-colors truncate">Dokumen
752                RPJMD</span>
753            </div>
754          </a>
755
756          <a href="https://kepriprov.go.id/dokumen/dokumen-perencanaan/rencana-kerja-pemerintah-daerah-rkpd-provinsi-kepulauan-riau-tahun-2026"
757            class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 hover:-translate-y-1 transition-all group/cta shadow-sm">
758            <div
759              class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
760              <i class="ph-bold ph-clipboard-text text-lg"></i>
761            </div>
762            <div class="flex flex-col min-w-0">
763              <span
764                class="text-[8px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Perencanaan</span>
765              <span
766                class="text-sm font-bold text-slate-800 group-hover/cta:text-penyengat-green transition-colors truncate">Dokumen
767                RKPD</span>
768            </div>
769          </a>
770
771          <a href="https://performance.kepriprov.go.id" target="_blank" rel="noopener noreferrer"
772            class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 hover:-translate-y-1 transition-all group/cta shadow-sm">
773            <div
774              class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
775              <i class="ph-bold ph-gauge text-lg"></i>
776            </div>
777            <div class="flex flex-col min-w-0">
778              <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">SAKIP
779                Kepri</span>
780              <span
781                class="text-sm font-bold text-slate-800 group-hover/cta:text-penyengat-green transition-colors truncate text-left">Akuntabilitas
782                Kinerja</span>
783            </div>
784          </a>
785
786          <a href="https://kepriprov.go.id/dokumen/produk-hukum/peraturan-gubernur-pergub-provinsi-kepulauan-riau-nomor-12-tahun-2023"
787            class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 hover:-translate-y-1 transition-all group/cta shadow-sm">
788            <div
789              class="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
790              <i class="ph-bold ph-tree-structure text-lg"></i>
791            </div>
792            <div class="flex flex-col min-w-0">
793              <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest leading-none mb-1">Tata
794                Kelola</span>
795              <span
796                class="text-sm font-bold text-slate-800 group-hover/cta:text-penyengat-green transition-colors truncate">Struktur
797                Organisasi</span>
798            </div>
799          </a>
800        </div>
801      </div>
802
803      <!-- Visi & Misi Text (Right) -->
804      <div class="lg:col-span-7 lg:pl-10 text-center md:text-left mt-8 md:mt-0">
805        <h2
806          class="text-2xl md:text-3xl font-extrabold text-penyengat-dark mb-6 md:mb-8 tracking-tight leading-tight text-center md:text-left">
807          Visi &amp; Misi <br class="hidden md:block">Pembangunan Daerah
808        </h2>
809
810        <!-- Visi -->
811        <div
812          class="mb-6 md:mb-8 p-6 md:p-8 bg-penyengat-softgreen rounded-3xl border border-green-100 relative overflow-hidden group text-left hover:border-penyengat-green transition-colors">
813          <svg class="watermark-icon text-green-200" viewBox="0 0 100 100" fill="currentColor"
814            xmlns="http://www.w3.org/2000/svg">
815            <path d="M50 0 C60 40 100 50 100 50 C60 60 50 100 50 100 C40 60 0 50 0 50 C40 40 50 0 50 0 Z" />
816          </svg>
817          <h3 class="text-lg md:text-xl font-bold text-penyengat-green mb-2 flex items-center gap-2"><i
818              class="ph-fill ph-eye"></i> Visi</h3>
819          <p class="text-slate-800 font-extrabold text-lg md:text-2xl leading-relaxed relative z-10 italic">
820            "KEPULAUAN RIAU MAJU, MAKMUR, DAN MERATA"
821          </p>
822        </div>
823
824        <!-- Misi -->
825        <div class="text-left">
826          <h3 class="text-lg md:text-xl font-bold text-penyengat-dark mb-4 flex items-center gap-2"><i
827              class="ph-fill ph-target"></i> Misi</h3>
828          <ul class="space-y-4 md:space-y-5">
829            <li class="flex items-start gap-4 group">
830              <div
831                class="mt-1 w-7 h-7 rounded-full bg-yellow-50 text-penyengat-yellow flex items-center justify-center shrink-0 border border-penyengat-yellow/30 group-hover:bg-penyengat-yellow group-hover:text-white transition-colors">
832                <i class="ph-bold ph-check text-sm"></i>
833              </div>
834              <p class="text-slate-600 font-semibold leading-relaxed text-base md:text-lg">Meningkatkan Pertumbuhan dan
835                Pemerataan Ekonomi Berbasis Maritim dan Keunggulan Wilayah</p>
836            </li>
837            <li class="flex items-start gap-4 group">
838              <div
839                class="mt-1 w-7 h-7 rounded-full bg-yellow-50 text-penyengat-yellow flex items-center justify-center shrink-0 border border-penyengat-yellow/30 group-hover:bg-penyengat-yellow group-hover:text-white transition-colors">
840                <i class="ph-bold ph-check text-sm"></i>
841              </div>
842              <p class="text-slate-600 font-semibold leading-relaxed text-base md:text-lg">Meningkatkan Pemerataan
843                Pembangunan Infrastruktur dan Konektivitas Antar Wilayah</p>
844            </li>
845            <li class="flex items-start gap-4 group">
846              <div
847                class="mt-1 w-7 h-7 rounded-full bg-yellow-50 text-penyengat-yellow flex items-center justify-center shrink-0 border border-penyengat-yellow/30 group-hover:bg-penyengat-yellow group-hover:text-white transition-colors">
848                <i class="ph-bold ph-check text-sm"></i>
849              </div>
850              <p class="text-slate-600 font-semibold leading-relaxed text-base md:text-lg">Mewujudkan Pemerataan dan
851                Meningkatkan Kualitas Sumber Daya Manusia yang berdaya Saing dan berkarakter</p>
852            </li>
853            <li class="flex items-start gap-4 group">
854              <div
855                class="mt-1 w-7 h-7 rounded-full bg-yellow-50 text-penyengat-yellow flex items-center justify-center shrink-0 border border-penyengat-yellow/30 group-hover:bg-penyengat-yellow group-hover:text-white transition-colors">
856                <i class="ph-bold ph-check text-sm"></i>
857              </div>
858              <p class="text-slate-600 font-semibold leading-relaxed text-base md:text-lg">Melaksanakan Tata Kelola
859                Pemerintahan yang Bersih, Demokratis, Terbuka, Berbasis Teknologi Informasi dan Berorientasi Pelayanan
860              </p>
861            </li>
862            <li class="flex items-start gap-4 group">
863              <div
864                class="mt-1 w-7 h-7 rounded-full bg-yellow-50 text-penyengat-yellow flex items-center justify-center shrink-0 border border-penyengat-yellow/30 group-hover:bg-penyengat-yellow group-hover:text-white transition-colors">
865                <i class="ph-bold ph-check text-sm"></i>
866              </div>
867              <p class="text-slate-600 font-semibold leading-relaxed text-base md:text-lg">Mengembangkan dan
868                Melestarikan Budaya Melayu dan Nasional serta Ekologi dalam Mendukung Pembangunan Berkelanjutan</p>
869            </li>
870          </ul>
871        </div>
872      </div>
873    </div>
874
875    <!-- Mobile CTA Grid (Bottom) -->
876    <div class="lg:hidden mt-12 grid grid-cols-2 gap-4 border-t border-slate-100 pt-8">
877      <a href="https://kepriprov.go.id/dokumen/dokumen-perencanaan/rencana-pembangunan-jangka-menengah-daerah-rpjmd-provinsi-kepulauan-riau-tahun-20252029"
878        class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 transition-all group/cta shadow-sm">
879        <div
880          class="w-11 h-11 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
881          <i class="ph-bold ph-strategy text-lg"></i>
882        </div>
883        <span
884          class="text-[12px] font-extrabold text-slate-700 group-hover/cta:text-penyengat-green transition-colors leading-tight">Dokumen
885          RPJMD</span>
886      </a>
887
888      <a href="https://kepriprov.go.id/dokumen/dokumen-perencanaan/rencana-kerja-pemerintah-daerah-rkpd-provinsi-kepulauan-riau-tahun-2026"
889        class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 transition-all group/cta shadow-sm">
890        <div
891          class="w-11 h-11 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
892          <i class="ph-bold ph-clipboard-text text-lg"></i>
893        </div>
894        <span
895          class="text-[12px] font-extrabold text-slate-700 group-hover/cta:text-penyengat-green transition-colors leading-tight">Dokumen
896          RKPD</span>
897      </a>
898
899      <a href="https://performance.kepriprov.go.id" target="_blank" rel="noopener noreferrer"
900        class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 transition-all group/cta shadow-sm">
901        <div
902          class="w-11 h-11 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
903          <i class="ph-bold ph-medal text-lg"></i>
904        </div>
905        <span
906          class="text-[12px] font-extrabold text-slate-700 group-hover/cta:text-penyengat-green transition-colors leading-tight">Akuntabilitas<br>Kinerja</span>
907      </a>
908
909      <a href="https://kepriprov.go.id/dokumen/produk-hukum/peraturan-gubernur-pergub-provinsi-kepulauan-riau-nomor-12-tahun-2023"
910        class="flex items-center gap-3 p-4 rounded-2xl border border-slate-100 bg-white hover:border-penyengat-green hover:bg-penyengat-softgreen/30 transition-all group/cta shadow-sm">
911        <div
912          class="w-11 h-11 rounded-xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover/cta:bg-penyengat-green group-hover/cta:text-white transition-colors shrink-0">
913          <i class="ph-bold ph-tree-structure text-lg"></i>
914        </div>
915        <span
916          class="text-[12px] font-extrabold text-slate-700 group-hover/cta:text-penyengat-green transition-colors leading-tight">Struktur
917          Organisasi</span>
918      </a>
919    </div>
920  </div>
921</section>
922<!-- SECTION 4: Proyek Strategis & Program Unggulan -->
923<section id="proyek" class="py-16 md:py-24 bg-penyengat-cream relative border-b border-yellow-200/50 overflow-hidden">
924  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
925    <div
926      class="flex flex-col md:flex-row justify-between items-center md:items-end mb-12 md:mb-16 gap-6 text-center md:text-left">
927      <div>
928        <h2 class="text-2xl md:text-4xl font-extrabold text-penyengat-dark tracking-tight leading-tight">Proyek &amp;
929          Program Unggulan</h2>
930        <p class="text-slate-600 mt-4 max-w-2xl mx-auto md:mx-0 text-sm md:text-lg leading-relaxed">Kawal bersama
931          perkembangan infrastruktur dan program strategis Kepri.</p>
932      </div>
933      <a href="https://kepriprov.go.id/proyek"
934        class="inline-flex items-center justify-center gap-2 bg-white text-penyengat-green font-bold px-8 py-4 rounded-full hover:bg-penyengat-softgreen border border-green-200 hover:border-penyengat-green transition-all hover:-translate-y-1 w-full md:w-auto shadow-sm hover:shadow-soft text-base">
935        Semua Proyek <i class="ph-bold ph-arrow-right"></i>
936      </a>
937    </div>
938
939    <!-- Container for Groups -->
940    <div class="relative">
941                      <div class="proyek-group transition-all duration-700 opacity-100 block"
942          data-index="0">
943          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:grid-rows-2">
944
945                                        <a href="https://kepriprov.go.id/proyek/tugu-bahasa-nasional-di-pulau-penyengat-simbol-abadi-akar-bahasa-indonesia-ikon-wisata-budaya-kepulauan-riau" class="zoom-wrapper relative rounded-[2.5rem] bg-white group cursor-pointer overflow-hidden border border-slate-200 hover:border-penyengat-green transition-all shadow-soft hover:shadow-float md:col-span-2 lg:row-span-2 h-[340px] md:h-[480px] lg:h-full lg:min-h-[560px]">
946                <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/2ba1bc0c-85eb-42f7-af50-0c4585c4f213.jpeg" alt="Tugu Bahasa Nasional di Pulau Penyengat: Simbol Abadi Akar Bahasa Indonesia, Ikon Wisata Budaya Kepulauan Riau"
947                  class="absolute inset-0 w-full h-full object-cover" loading="lazy" decoding="async">
948                <div class="absolute inset-0 bg-gradient-to-t from-penyengat-dark/95 via-penyengat-dark/60 to-transparent">
949                </div>
950
951                <div class="absolute bottom-0 left-0 p-6 md:p-8 lg:p-10 w-full">
952                  <h3
953                    class="text-2xl md:text-3xl lg:text-4xl font-extrabold text-white mb-1 tracking-tight leading-snug drop-shadow-lg line-clamp-3">
954                    Tugu Bahasa Nasional di Pulau Penyengat: Simbol Abadi Akar Bahasa Indonesia, Ikon Wisata Budaya Kepulauan Riau                  </h3>
955                </div>
956              </a>
957                                        <a href="https://kepriprov.go.id/proyek/kek-galang-batang-dari-bintan-untuk-indonesia-mengolah-kekayaan-bumi-menjadi-nilai-tambah-bangsa" class="zoom-wrapper relative rounded-[2.5rem] bg-white group cursor-pointer overflow-hidden border border-slate-200 hover:border-penyengat-green transition-all shadow-soft hover:shadow-float h-[240px] md:h-[260px]">
958                <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/8b010188-4172-4166-9517-33df1ae0a031.jpg" alt="KEK Galang Batang: Dari Bintan untuk Indonesia - Me
958ngolah Kekayaan Bumi Menjadi Nilai Tambah Bangsa"
959                  class="absolute inset-0 w-full h-full object-cover" loading="lazy" decoding="async">
960                <div class="absolute inset-0 bg-gradient-to-t from-penyengat-dark/95 via-penyengat-dark/60 to-transparent">
961                </div>
962
963                <div class="absolute bottom-0 left-0 p-6 md:p-8  w-full">
964                  <h3
965                    class="text-xl md:text-2xl font-extrabold text-white mb-1 tracking-tight leading-snug drop-shadow-lg line-clamp-3">
966                    KEK Galang Batang: Dari Bintan untuk Indonesia - Mengolah Kekayaan Bumi Menjadi Nilai Tambah Bangsa                  </h3>
967                </div>
968              </a>
969                                        <a href="https://kepriprov.go.id/proyek/rumah-singgah-kepri-ketika-negara-hadir-di-sisi-pasien-gratis-nyaman-dan-penuh-kepedulian" class="zoom-wrapper relative rounded-[2.5rem] bg-white group cursor-pointer overflow-hidden border border-slate-200 hover:border-penyengat-green transition-all shadow-soft hover:shadow-float h-[240px] md:h-[260px]">
970                <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/df1ea09d-c102-42bd-b97d-0a2d25574c8b.jpg" alt="Rumah Singgah Kepri: Ketika Negara Hadir di Sisi Pasien - Gratis, Nyaman, dan Penuh Kepedulian"
971                  class="absolute inset-0 w-full h-full object-cover" loading="lazy" decoding="async">
972                <div class="absolute inset-0 bg-gradient-to-t from-penyengat-dark/95 via-penyengat-dark/60 to-transparent">
973                </div>
974
975                <div class="absolute bottom-0 left-0 p-6 md:p-8  w-full">
976                  <h3
977                    class="text-xl md:text-2xl font-extrabold text-white mb-1 tracking-tight leading-snug drop-shadow-lg line-clamp-3">
978                    Rumah Singgah Kepri: Ketika Negara Hadir di Sisi Pasien - Gratis, Nyaman, dan Penuh Kepedulian                  </h3>
979                </div>
980              </a>
981            
982            
983          </div>
984        </div>
985          </div>
986
987      </div>
988</section>
989
990<script>
991  (function () {
992    const groups = document.querySelectorAll('.proyek-group');
993    const dots = document.querySelectorAll('.proyek-dot');
994    if (groups.length <= 1) return;
995
996    let current = 0;
997    let timer = null;
998    let isAnimating = false;
999
1000    function goTo(idx) {
1001      if (isAnimating || idx === current) return;
1002      isAnimating = true;
1003
1004      const prev = groups[current];
1005      const next = groups[idx];
1006
1007      // Fade out current
1008      prev.classList.remove('opacity-100');
1009      prev.classList.add('opacity-0');
1010      dots[current]?.classList.remove('bg-penyengat-green', 'w-6');
1011      dots[current]?.classList.add('bg-slate-300', 'w-2');
1012
1013      setTimeout(() => {
1014        prev.classList.add('hidden');
1015        prev.classList.remove('block');
1016
1017        // Fade in next
1018        next.classList.add('block');
1019        next.classList.remove('hidden');
1020
1021        // Force reflow then add opacity
1022        void next.offsetWidth;
1023        next.classList.remove('opacity-0');
1024        next.classList.add('opacity-100');
1025
1026        dots[idx]?.classList.remove('bg-slate-300', 'w-2');
1027        dots[idx]?.classList.add('bg-penyengat-green', 'w-6');
1028
1029        current = idx;
1030        isAnimating = false;
1031      }, 400);
1032    }
1033
1034    function next() {
1035      goTo((current + 1) % groups.length);
1036    }
1037
1038    function startTimer() {
1039      timer = setInterval(next, 6000);
1040    }
1041
1042    dots.forEach((dot, i) => {
1043      dot.addEventListener('click', () => {
1044        clearInterval(timer);
1045        goTo(i);
1046        startTimer();
1047      });
1048    });
1049
1050    startTimer();
1051  })();
1052</script>
1052<!-- SECTION 5: Data & Angka (Dashboard Style) -->
1053<section id="data"
1054  class="py-16 md:py-24 bg-penyengat-dark relative overflow-hidden text-white border-b border-white/10">
1055  <!-- Batik Pucuk Rebung Top Border -->
1056  <div class="absolute top-0 left-0 w-full h-12 md:h-16 z-20 opacity-60 mix-blend-screen rotate-180"
1057    style="background-image: url('https://kepriprov.go.id/assets/media/patterns-batik-1.webp'); background-repeat: repeat-x; background-size: auto 100%;">
1058  </div>
1059
1060  <div
1061    class="absolute top-0 right-0 w-[600px] h-[600px] bg-penyengat-green rounded-full filter blur-[150px] opacity-40 pointer-events-none">
1062  </div>
1063
1064  <!-- Particles background -->
1065  <div id="particles-js-data" class="absolute inset-0 z-0 pointer-events-none"></div>
1066
1067  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 pt-8">
1068    
1069    <!-- Full Width Macro Indicators -->
1070    <div class="flex flex-col justify-center overflow-hidden w-full mb-16">
1071      <div class="mb-6 md:mb-8 text-center md:text-left flex flex-col sm:flex-row sm:items-end justify-between gap-4">
1072        <div>
1073          <h2 class="text-2xl md:text-3xl font-extrabold flex items-center justify-center md:justify-start gap-3 tracking-tight">
1074            Indikator Makro Daerah
1075          </h2>
1076        </div>
1077        <div class="hidden sm:flex gap-2">
1078          <button type="button" data-macro-prev
1079            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition"><i
1080              class="ph-bold ph-caret-left"></i></button>
1081          <button type="button" data-macro-next
1082            class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition"><i
1083              class="ph-bold ph-caret-right"></i></button>
1084        </div>
1085      </div>
1086
1087      <div data-macro-track
1088        class="grid grid-rows-2 grid-flow-col gap-3 md:gap-4 overflow-x-auto hide-scroll pb-4 pt-2 swipeable-row px-1">
1089                  <div
1090            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1091            <div class="flex items-start justify-between gap-2">
1092              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1093                Jumlah Penduduk Miskin, Maret 2026              </p>
1094              <i
1095                class="ph-fill ph-users text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1096            </div>
1097            <div>
1098              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">111,22</h4>
1099              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Ribu Jiwa</span>
1100            </div>
1101          </div>
1102                  <div
1103            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1104            <div class="flex items-start justify-between gap-2">
1105              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1106                Pertumbuhan Ekonomi (C to C), Triwulan II 2026              </p>
1107              <i
1108                class="ph-fill ph-trend-up text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1109            </div>
1110            <div>
1111              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">7,02</h4>
1112              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1113            </div>
1114          </div>
1115                  <div
1116            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1117            <div class="flex items-start justify-between gap-2">
1118              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1119                Pertumbuhan Ekonomi (Q to Q), Triwulan II 2026              </p>
1120              <i
1121                class="ph-fill ph-trend-up text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1122            </div>
1123            <div>
1124              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">2,46</h4>
1125              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1126            </div>
1127          </div>
1128                  <div
1129            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1130            <div class="flex items-start justify-between gap-2">
1131              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1132                Pertumbuhan Ekonomi (Y on Y), Triwulan II 2026              </p>
1133              <i
1134                class="ph-fill ph-trend-up text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1135            </div>
1136            <div>
1137              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">6,99</h4>
1138              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1139            </div>
1140          </div>
1141                  <div
1142            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1143            <div class="flex items-start justify-between gap-2">
1144              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1145                Pertumbuhan Ekonomi (Tahunan), 2025              </p>
1146              <i
1147                class="ph-fill ph-trend-up text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1148            </div>
1149            <div>
1150              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">6,94</h4>
1151              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1152            </div>
1153          </div>
1154                  <div
1155            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1156            <div class="flex items-start justify-between gap-2">
1157              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1158                Tingkat Pengangguran Terbuka, Mei 2026              </p>
1159              <i
1160                class="ph-fill ph-user-minus text-xl text-purple-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1161            </div>
1162            <div>
1163              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">6,45</h4>
1164              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1165            </div>
1166          </div>
1167                  <div
1168            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1169            <div class="flex items-start justify-between gap-2">
1170              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1171                Inflasi Batam, Agustus 2026              </p>
1172              <i
1173                class="ph-fill ph-chart-bar text-xl text-red-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1174            </div>
1175            <div>
1176              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">-0,20</h4>
1177              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1178            </div>
1179          </div>
1180                  <div
1181            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1182            <div class="flex items-start justify-between gap-2">
1183              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1184                Inflasi Tanjungpinang, Agustus 2026              </p>
1185              <i
1186                class="ph-fill ph-chart-bar text-xl text-red-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1187            </div>
1188            <div>
1189              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">-0,14</h4>
1190              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1191            </div>
1192          </div>
1193                  <div
1194            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1195            <div class="flex items-start justify-between gap-2">
1196              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1197                Inflasi Karimun, Agustus 2026              </p>
1198              <i
1199                class="ph-fill ph-chart-bar text-xl text-red-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1200            </div>
1201            <div>
1202              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">0,18</h4>
1203              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1204            </div>
1205          </div>
1206                  <div
1207            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1208            <div class="flex items-start justify-between gap-2">
1209              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1210                Inflasi Kepulauan Riau, Agustus 2026              </p>
1211              <i
1212                class="ph-fill ph-chart-bar text-xl text-red-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1213            </div>
1214            <div>
1215              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">-0,17</h4>
1216              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1217            </div>
1218          </div>
1219                  <div
1220            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1221            <div class="flex items-start justify-between gap-2">
1222              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1223                Persentase Penduduk Miskin, Maret 2026              </p>
1224              <i
1225                class="ph-fill ph-users text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1226            </div>
1227            <div>
1228              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">4,09</h4>
1229              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Persen</span>
1230            </div>
1231          </div>
1232                  <div
1233            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1234            <div class="flex items-start justify-between gap-2">
1235              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1236                Indeks Pembangunan Manusia, 2025              </p>
1237              <i
1238                class="ph-fill ph-graduation-cap text-xl text-emerald-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1239            </div>
1240            <div>
1241              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">80,53</h4>
1242              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1243            </div>
1244          </div>
1245                  <div
1246            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1247            <div class="flex items-start justify-between gap-2">
1248              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1249                Gini Rasio, Maret 2026              </p>
1250              <i
1251                class="ph-fill ph-scales text-xl text-blue-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1252            </div>
1253            <div>
1254              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">0,35</h4>
1255              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1256            </div>
1257          </div>
1258                  <div
1259            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1260            <div class="flex items-start justify-between gap-2">
1261              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1262                Nilai Ekspor Kepri, Juli 2026              </p>
1263              <i
1264                class="ph-fill ph-export text-xl text-penyengat-yellow shrink-0 group-hover:scale-110 transition-transform"></i>
1265            </div>
1266            <div>
1267              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">2.087,66 Juta</h4>
1268              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">US$</span>
1269            </div>
1270          </div>
1271                  <div
1272            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1273            <div class="flex items-start justify-between gap-2">
1274              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1275                Nilai Impor Kepri, Juli 2026              </p>
1276              <i
1277                class="ph-fill ph-download text-xl text-orange-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1278            </div>
1279            <div>
1280              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">2.031,54 Juta</h4>
1281              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">US$</span>
1282            </div>
1283          </div>
1284                  <div
1285            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1286            <div class="flex items-start justify-between gap-2">
1287              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1288                Jumlah Kunjungan Wisman, Juli 2026              </p>
1289              <i
1290                class="ph-fill ph-airplane-tilt text-xl text-orange-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1291            </div>
1292            <div>
1293              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">399.890</h4>
1294              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Perjalanan</span>
1295            </div>
1296          </div>
1297                  <div
1298            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1299            <div class="flex items-start justify-between gap-2">
1300              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1301                Nilai Tukar Petani, Agustus 2026              </p>
1302              <i
1303                class="ph-fill ph-plant text-xl text-lime-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1304            </div>
1305            <div>
1306              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">111,24</h4>
1307              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1308            </div>
1309          </div>
1310                  <div
1311            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1312            <div class="flex items-start justify-between gap-2">
1313              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1314                Indeks Pembangunan Gender (IPG) (menggunakan UHH hasil SP2020 LF), 2024              </p>
1315              <i
1316                class="ph-fill ph-gender-intersex text-xl text-purple-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1317            </div>
1318            <div>
1319              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">95,11</h4>
1320              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1321            </div>
1322          </div>
1323                  <div
1324            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1325            <div class="flex items-start justify-between gap-2">
1326              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1327                Indeks Ketimpangan Gender (IKG), 2025              </p>
1328              <i
1329                class="ph-fill ph-gender-intersex text-xl text-purple-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1330            </div>
1331            <div>
1332              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">0,29</h4>
1333              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1334            </div>
1335          </div>
1336                  <div
1337            class="swipeable-card shrink-0 w-48 md:w-56 bg-white/5 backdrop-blur-md rounded-2xl p-4 border border-white/10 hover:border-penyengat-yellow hover:bg-white/10 transition-all group flex flex-col justify-between h-[120px]">
1338            <div class="flex items-start justify-between gap-2">
1339              <p class="text-[10px] md:text-xs text-green-50/90 font-medium leading-snug line-clamp-2 pr-2">
1340                Indeks Pemberdayaan Gender (IDG), 2024              </p>
1341              <i
1342                class="ph-fill ph-gender-intersex text-xl text-purple-400 shrink-0 group-hover:scale-110 transition-transform"></i>
1343            </div>
1344            <div>
1345              <h4 class="text-lg md:text-xl font-black text-white truncate mb-0.5">65,21</h4>
1346              <span class="text-[8px] md:text-[9px] text-white/50 block truncate">Tidak Ada Satuan</span>
1347            </div>
1348          </div>
1349              </div>
1350
1351      <div class="flex justify-center md:justify-start items-center gap-2 mt-4 text-white/50 text-xs font-medium sm:hidden">
1352        <i class="ph-bold ph-arrows-left-right"></i> Geser untuk melihat indikator lainnya
1353      </div>
1354    </div>
1355
1356    <!-- Publications Grid: Pemda + BPS -->
1357    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 w-full">
1358      <div class="flex flex-col justify-start">
1359        <div class="mb-5 md:mb-6 text-center md:text-left flex flex-col sm:flex-row justify-between items-center sm:items-end gap-2">
1360          <div>
1361            <h3 class="text-2xl md:text-3xl font-bold text-white mb-1">Publikasi Statistik Pemda</h3>
1362            <p class="text-green-50/70 text-xs md:text-sm">Dokumen dan laporan statistik resmi instansi daerah.</p>
1363          </div>
1364          <a href="https://kepriprov.go.id/statistik"
1365            class="text-[10px] md:text-xs font-bold text-penyengat-yellow hover:underline">Lihat Semua <i
1366              class="ph-bold ph-arrow-right"></i></a>
1367        </div>
1368
1369        <div class="flex flex-col gap-3 mb-4 md:mb-6">
1370                                                  <a href="https://kepriprov.go.id/statistik/potret-statistik-data-ketenagakerjaan-dan-transmigrasi-provinsi-kepulauan-riau-tahun-2025-2026" target="_blank" rel="noopener noreferrer"                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1371                <div
1372                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1373                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/badc4981-d6df-458e-a0e9-bf6e13af29c3_thumb.webp"
1374                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1375                                  </div>
1376                <div>
1377                  <h4
1378                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1379                    Potret Statistik - Data Ketenagakerjaan dan Transmigrasi Provinsi Kepulauan Riau Tahun 2025                  </h4>
1380                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1381                    <span><i class="ph-fill ph-calendar-blank"></i> 15 Sep 2026</span>
1382                    <span>•</span>
1383                    <span class="truncate">Dinas Tenaga Kerja dan Transmigrasi Provinsi Kepulauan Riau | diolah oleh Dinas Komunikasi dan Informatika Provinsi Kepulauan Riau</span>
1384                  </div>
1385                </div>
1386              </a>
1387                                        <a href="https://kepriprov.go.id/statistik/potret-statistik-data-industri-provinsi-kepulauan-riau-tahun-2025-2026" target="_blank" rel="noopener noreferrer"                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1388                <div
1389                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1390                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/08/02ce7e96-5ef0-4b91-bfaa-898d1213d551_thumb.webp"
1391                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1392                                  </div>
1393                <div>
1394                  <h4
1395                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1396                    Potret Statistik - Data Industri Provinsi Kepulauan Riau Tahun 2025                  </h4>
1397                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1398                    <span><i class="ph-fill ph-calendar-blank"></i> 05 Agu 2026</span>
1399                    <span>•</span>
1400                    <span class="truncate">Dinas Perindustrian dan Perdagangan. Diolah oleh Dinas Komunikasi dan Informatika</span>
1401                  </div>
1402                </div>
1403              </a>
1404                                        <a href="https://kepriprov.go.id/statistik/potret-statistik-perkembangan-realisasi-investasi-provinsi-kepulauan-riau-tahun-2023-triwulan-i-2026-2026" target="_blank" rel="noopener noreferrer"                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1405                <div
1406                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1407                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/07/b958ceff-29b5-4edf-90cd-0df3e4acd5bd_thumb.webp"
1408                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1409                                  </div>
1410                <div>
1411                  <h4
1412                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1413                    Potret Statistik - Perkembangan Realisasi Investasi Provinsi Kepulauan Riau Tahun 2023–Triwulan I 2026                  </h4>
1414                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1415                    <span><i class="ph-fill ph-calendar-blank"></i> 30 Jul 2026</span>
1416                    <span>•</span>
1417                    <span class="truncate">Dinas Penanaman Modal dan Pelayanan Terpadu Satu Pintu Provinsi Kepulauan Riau</span>
1418                  </div>
1419                </div>
1420              </a>
1421                                        <a href="https://kepriprov.go.id/statistik/potret-statistik-graduasi-dari-kemiskinan-provinsi-kepulauan-riau-tahun-2025-2026" target="_blank" rel="noopener noreferrer"                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1422                <div
1423                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1424                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/06/2ca0a1d6-ef99-413c-b2b0-d154ce88c589_thumb.webp"
1425                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1426                                  </div>
1427                <div>
1428                  <h4
1429                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1430                    Potret Statistik - Graduasi dari Kemiskinan Provinsi Kepulauan Riau Tahun 2025                  </h4>
1431                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1432                    <span><i class="ph-fill ph-calendar-blank"></i> 11 Jun 2026</span>
1433                    <span>•</span>
1434                    <span class="truncate">Dinas Sosial Provinsi Kepulauan Riau</span>
1435                  </div>
1436                </div>
1437              </a>
1438                              </div>
1439      </div>
1440
1441      <div class="flex flex-col justify-start">
1442        <div class="mb-5 md:mb-6 text-center md:text-left flex flex-col sm:flex-row justify-between items-center sm:items-end gap-2">
1443          <div>
1444            <h3 class="text-2xl md:text-3xl font-bold text-white mb-1">Publikasi Statistik BPS Kepri</h3>
1445            <p class="text-green-50/70 text-xs md:text-sm">Data dan publikasi resmi dari BPS Provinsi Kepulauan Riau.</p>
1446          </div>
1447          <a href="https://www.bps.go.id/id/publication" target="_blank" rel="noopener noreferrer"
1448            class="text-[10px] md:text-xs font-bold text-penyengat-yellow hover:underline">Lihat Semua <i
1449              class="ph-bold ph-arrow-right"></i></a>
1450        </div>
1451
1452        <div class="flex flex-col gap-3 mb-4 md:mb-6">
1453                                                  <a href="https://webapi.bps.go.id/download.php?f=I9fIhBKfGWfiJ90hQjAeOlAzNytuMmhYOEFGQUl0UWtVL0RWWEx1dncwb2ZjeTVuQ1haQU42akJxdU1CYzBDYlpBUVBEam5peGo0Q3J4R1VHMVJEU1h2NHVsbmhHVzEyWXJKNlNsdGlhYkI1cUVobGFqWVpCVDNLQnBIMFhKR3BjUURZNHo0SkFvQVpyNTdFZHhoNHdmdXh5SHR4Zy9xYXlCNk5sVGQvbFF4eFNZUTJYa1JCTlJXblcwdkNYemFnZzBPVlFtelZHWUlNKzg1K0RSV0lheWd4dTlhQ3hpVGNwdlE5cFJ0RkphTHBiVXVCMnJZVnl1MVFmSGU2MmVYT2xUbTJJaUVSU1FiTFJPOWl1NnlYVThCSkVBWXlPVVZBT3lwY1hnPT0=" target="_blank" rel="noopener noreferrer"
1454                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1455                <div
1456                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1457                                      <img src="https://webapi.bps.go.id/cover.php?f=MFtG9KgZVxflOGFDVw5BYzY3ekY3NG1LVmptcURhNWpTaEZLeHdXUFVtSFplTGk0cURMNmhnUHVFUlNWTUxyZ21QTGZFRm1Dd3pmVWEyd1dueVgvZDRsRlE4ZVRqNEgzWVYxNVhRc2M3TzBSSkxnUTdaU3RpdHl5ZDQvN05XZ1ZvZHlsajBLR1ZqcXpKcXNT"
1458                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1459                                  </div>
1460                <div>
1461                  <h4
1462                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1463                    Statistik Daerah Provinsi Kepulauan Riau 2026                  </h4>
1464                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1465                    <span><i class="ph-fill ph-calendar-blank"></i> 28 Sep 2026</span>
1466                    <span>•</span>
1467                    <span class="truncate">BPS Provinsi Kepulauan Riau</span>
1468                  </div>
1469                </div>
1470              </a>
1471                                        <a href="https://webapi.bps.go.id/download.php?f=v8n6DxFIV/MBEct3NeLH9U1FK0xmaW9TVmxJMS8zazRvdDMyaXIwL29sNEl5VWJqWjdBRFlzT3RFdXBzMXJrTWFhcFJ5S0o2TWltcm9yT2c0enRHd01Pa0NEVkRHczBOOEttWHdna083bWtKM1AycitaRDdlTlhXeGJJNmtESGF6TTBIMDBFSitsWkFzaTRvMks4eFM2K3g5YllNZ0h1QUpseGJFMWl4allncnpXTXprR3FQRXF6UlM3cDNRNEVvQ3lOaUZ6N1NndXlPL0pxNkJ5dS9vanRtNmZCSWlHdjNlWk5CQnhlNlNoS05BSWR1WGxFYUxCZ2xZUW9XczBUWno0cisveFB5Y2Q4RHZ3MkhBbFk2WVAyN0tkNmZnM2JtaUxHcXlnPT0=" target="_blank" rel="noopener noreferrer"
1472                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1473                <div
1474                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1475                                      <img src="https://webapi.bps.go.id/cover.php?f=6VF47JhjlbWxm8jpsqAfMWMrdm14MHQyYklvc2liemlwcC9LSHRFRmg1YWVpcEVRSkhEWTd6bVpkdzFxZ3E2NHVjelo5WVpiQ3pBRFRZK2p6WndHN2tiMmsyc25BQjhPV2RYT2wveUM4d2Q2dnVvZVBXZ3NyR2lsdnhvR09yWGh2cnJUMlo5RE0rMXdmMVhP"
1476                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1477                                  </div>
1478                <div>
1479                  <h4
1480                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1481                    Tinjauan Perekonomian Provinsi Kepulauan Riau 2025                  </h4>
1482                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1483                    <span><i class="ph-fill ph-calendar-blank"></i> 18 Sep 2026</span>
1484                    <span>•</span>
1485                    <span class="truncate">BPS Provinsi Kepulauan Riau</span>
1486                  </div>
1487                </div>
1488              </a>
1489                                        <a href="https://webapi.bps.go.id/download.php?f=r1rO8rU4Nnpdne/DmT23/GNsZk0xUlJ5YXhtbzdOS1NLWmhaL3BiSWpza0x4UFprQkJSb1ptbVo5ODViQ0xveS8rZVIvdlY1dmFWdzRuNG9sMlFBMHNtM00yeGJkaHdRd0wvOVRoYnEwL3ptdXNJekRtVmFLY0FkNktDTHhkNzloU0xiRWpwT3d2a2IyZUVQaGZ4bkYxVFJVWVZsb3JlaUdMWTlCT2JicGRqYTErWDVkam1oMGE1K3A0bXE4TmpCdVlXSXp6VTVEcUVHemlIUm56S0xGd0xiajNLcEUxdUYwUk40cGdISVZ3enN2WVVPWURPYWIxcjU0dXZQakJRYlR2V2F1S1pqMjRCZWhtQ0dqdmlKcWwvWDNaYkRSSi95U3NiYnVLSG1NOG1iczBkSHRaTEFtQ0QyRFMrV1NZbitYN0JoKy96Uzhab05VNVRLTmI2d2NKbCsrdVl3ZnF3M2FqQU5CNHRPQXgyaVNoOG1mVFcxYzFEcGhUd0N1T29xWVRhZHJQd3hWaFRBZkFZZmNOVmk2T3hmbEdGdzdPeDZSVWNjTlFwK056R1RQNU9tYnN5RXhjbU1sSUtHS01aeS9CdUhEMi9iVHdxU1Uycm0=" target="_blank" rel="noopener noreferrer"
1490                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1491                <div
1492                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1493                                      <img src="https://webapi.bps.go.id/cover.php?f=MrHo7LP7p6UGo/91NKH76zB6bVZxSkxYdS9jVFpjb1g0RG5IV240Qis1c2hmdFBzUEtIVXFaUktTUitVSXduV2JldjFmSCtZU0FYUENNSllhT004WmJZNmY5YVFTb3BjN3ppekJZd3Z2U3lYTXNIZ01UdmcvaW1LbWIvSnZ6NFJmSjRQV2M1a0JiUUl6Nm1E"
1494                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1495                                  </div>
1496                <div>
1497                  <h4
1498                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1499                    Luas Panen dan Produksi Padi di Provinsi Kepulauan Riau 2025: Hasil Kegiatan Pendataan Statistik Pertanian Tanaman Pangan Terintegrasi dengan Metode Kerangka Sampel Area 2025                  </h4>
1500                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1501                    <span><i class="ph-fill ph-calendar-blank"></i> 03 Sep 2026</span>
1502                    <span>•</span>
1503                    <span class="truncate">BPS Provinsi Kepulauan Riau</span>
1504                  </div>
1505                </div>
1506              </a>
1507                                        <a href="https://webapi.bps.go.id/download.php?f=TMygcoxkIxhDKFAXA8jQCjFxZ3pjcHh5eE5KWXF1ejdKNi9vcmtVMndtT09oQjRPZFE3OXdWSTNyN040cW15T3BnMFJIQVp4d0huTHdWVktiUThsOUVaQjEwUEQzSDBYaWpIblNjRHlrdG5aT2JoS0VtZklhbmdDNWU2YW5hdGYwK2hNZzYrZTk3V0h1ak5ZZ0Q2ZDBwdHBnMzFvMWhWeWFkSThlMU5EVUUrNUZJdGFXUVA0QmZ1c2Q5NlVnSk9RV2p1MCs3ZFRCSmFJMEVxNnB2OGluQ0NYVmU0ZkZZVTdKZE1TQXRBQk5iN3VndWgwbkYrTUFBRXVibjhwMWdJeVJzdGkvWEdyMjdTejVMNkwrZkN1dXpuemU5eXRoV3lEN3VkTjlHaHVCVlcrUDZ1M0w4Sjc4YUUzaWpLSVNkaWV4cUhMd05RWXN6QktzTWZk" target="_blank" rel="noopener noreferrer"
1508                class="flex gap-4 items-center bg-white/5 hover:bg-white/10 border border-white/10 p-3 rounded-2xl transition-all group min-h-[95px] md:min-h-[110px]">
1509                <div
1510                  class="w-16 h-20 bg-white/10 rounded-lg overflow-hidden shrink-0 border border-white/20 flex items-center justify-center">
1511                                      <img src="https://webapi.bps.go.id/cover.php?f=I+TCdJuTYi4LniaEioSJJ00wbUR1cXl4czl1TGFyOUJNZlZLKzdZbW00WHJMZm9jTkdJUWwycHRoQmh2N1BMZTNwLzltYTlMd1Q5eURHbXVGN2Iwclp5NnQ5M1R1c05iTHpYY2F5ejBBWXpVOXZheU9kdzlsZE1rWXcvclJDVWp6RGM4MjhOTVFlVXEwTStz"
1512                      class="w-full h-full object-cover opacity-80 group-hover:scale-110 group-hover:opacity-100 transition-all">
1513                                  </div>
1514                <div>
1515                  <h4
1516                    class="text-base font-bold text-white group-hover:text-penyengat-yellow transition-colors line-clamp-2 leading-snug">
1517                    Statistik Angkutan Udara dan Angkutan Laut Provinsi Kepulauan Riau 2025                  </h4>
1518                  <div class="flex items-center gap-2 text-[10px] text-green-50/60 mt-1.5">
1519                    <span><i class="ph-fill ph-calendar-blank"></i> 31 Agu 2026</span>
1520                    <span>•</span>
1521                    <span class="truncate">BPS Provinsi Kepulauan Riau</span>
1522                  </div>
1523                </div>
1524              </a>
1525                              </div>
1526      </div>
1527    </div>
1528
1529    <!-- Dashboard Links (Full Width Row) -->
1530    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mt-8 pt-8 border-t border-white/10 relative z-10">
1531                      <a href="#"
1532                    class="bg-white/10 hover:bg-white/20 backdrop-blur-xl border border-white/20 p-4 rounded-2xl transition-all flex flex-col sm:flex-row items-center justify-center gap-3 group">
1533          <i
1534            class="ph-fill ph-chart-bar text-3xl text-penyengat-yellow group-hover:scale-110 transition-transform"></i>
1535          <span
1536            class="text-sm font-bold text-white leading-tight text-center sm:text-left group-hover:text-penyengat-yellow">Dasbor Keuangan</span>
1537        </a>
1538                      <a href="https://inbok.disperindag.kepriprov.go.id/"
1539          target="_blank" rel="noopener noreferrer"          class="bg-white/10 hover:bg-white/20 backdrop-blur-xl border border-white/20 p-4 rounded-2xl transition-all flex flex-col sm:flex-row items-center justify-center gap-3 group">
1540          <i
1541            class="ph-fill ph-basket text-3xl text-penyengat-yellow group-hover:scale-110 transition-transform"></i>
1542          <span
1543            class="text-sm font-bold text-white leading-tight text-center sm:text-left group-hover:text-penyengat-yellow">Harga Bahan Pokok</span>
1544        </a>
1545                      <a href="https://sibadang.kepriprov.go.id/#map"
1546          target="_blank" rel="noopener noreferrer"          class="bg-white/10 hover:bg-white/20 backdrop-blur-xl border border-white/20 p-4 rounded-2xl transition-all flex flex-col sm:flex-row items-center justify-center gap-3 group">
1547          <i
1548            class="ph-fill ph-first-aid text-3xl text-penyengat-yellow group-hover:scale-110 transition-transform"></i>
1549          <span
1550            class="text-sm font-bold text-white leading-tight text-center sm:text-left group-hover:text-penyengat-yellow">Fasilitas Kesehatan</span>
1551        </a>
1552                      <a href="https://satudata.kepriprov.go.id/"
1553          target="_blank" rel="noopener noreferrer"          class="bg-white/10 hover:bg-white/20 backdrop-blur-xl border border-white/20 p-4 rounded-2xl transition-all flex flex-col sm:flex-row items-center justify-center gap-3 group">
1554          <i
1555            class="ph-fill ph-database text-3xl text-penyengat-yellow group-hover:scale-110 transition-transform"></i>
1556          <span
1557            class="text-sm font-bold text-white leading-tight text-center sm:text-left group-hover:text-penyengat-yellow">Satu Data Kepri</span>
1558        </a>
1559          </div>
1560
1561  </div>
1562</section>
1563
1564<script>
1565  (function initMacroSliderControls() {
1566    var section = document.getElementById('data');
1567    if (!section || section.dataset.macroSliderInit === '1') {
1568      return;
1569    }
1570
1571    var track = section.querySelector('[data-macro-track]');
1572    var prevBtn = section.querySelector('[data-macro-prev]');
1573    var nextBtn = section.querySelector('[data-macro-next]');
1574
1575    if (!track || !prevBtn || !nextBtn) {
1576      return;
1577    }
1578
1579    section.dataset.macroSliderInit = '1';
1580
1581    var getStep = function () {
1582      var firstCard = track.querySelector('.swipeable-card');
1583      if (!firstCard) {
1584        return Math.max(220, Math.floor(track.clientWidth * 0.7));
1585      }
1586
1587      var styles = window.getComputedStyle(track);
1588      var gap = parseFloat(styles.columnGap || styles.gap || '0') || 0;
1589      return firstCard.getBoundingClientRect().width + gap;
1590    };
1591
1592    prevBtn.addEventListener('click', function () {
1593      track.scrollBy({ left: -getStep(), behavior: 'smooth' });
1594    });
1595
1596    nextBtn.addEventListener('click', function () {
1597      track.scrollBy({ left: getStep(), behavior: 'smooth' });
1598    });
1599
1600    // Init particles
1601    var initParticles = function () {
1602      if (typeof particlesJS !== 'undefined') {
1603        particlesJS('particles-js-data', {
1604          particles: {
1605            number: { value: 50 },
1606            color: { value: '#ffffff' },
1607            shape: { type: 'circle' },
1608            opacity: { value: 0.08 },
1609            size: { value: 2.5 },
1610            line_linked: {
1611              enable: true,
1612              distance: 180,
1613              color: '#ffffff',
1614              opacity: 0.06,
1615              width: 1
1616            },
1617            move: { enable: true, speed: 0.6 }
1618          },
1619          retina_detect: true
1620        });
1621      } else {
1622        window.addEventListener('load', initParticles, { once: true });
1623      }
1624    };
1625    initParticles();
1626  })();
1627</script>
1627
1628<!-- SECTION 6: Berita, Agenda & Hoaks -->
1629<section id="berita" class="py-16 md:py-24 bg-slate-50 relative border-b border-slate-200">
1630  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
1631    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">
1632
1633      <!-- Kiri: Berita (2 cols) -->
1634      <div class="lg:col-span-2">
1635        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8 md:mb-12 gap-4">
1636          <div>
1637            <h2 class="text-2xl md:text-3xl font-extrabold text-penyengat-dark tracking-tight">Kabar Kepri</h2>
1638            <p class="text-slate-600 mt-4 max-w-2xl text-sm md:text-base leading-relaxed">Berita dan informasi pemerintahan daerah terkini.</p>
1639          </div>
1640          <a href="https://kepriprov.go.id/berita"
1641            class="inline-flex items-center justify-center gap-2 bg-white text-penyengat-green border border-slate-200 px-5 py-3 rounded-xl font-bold text-xs md:text-sm hover:bg-penyengat-softgreen transition-all shadow-sm w-full sm:w-auto">
1642            Indeks Berita <i class="ph-bold ph-arrow-right"></i>
1643          </a>
1644        </div>
1645
1646        <!-- Highlight News -->
1647                  <a href="https://kepriprov.go.id/berita/pemprov-kepri/satgas-pasti-hentikan-aktivitas-pt-malahayati-nusantara-raya-masyarakat-diimbau-waspada-jasa-penyelesaian-pinjol" class="group block mb-6 md:mb-8 bg-white rounded-[2rem] p-3 md:p-4 transition-all duration-300 border border-slate-100 hover:border-penyengat-yellow">
1648            <div class="zoom-wrapper relative rounded-[1.5rem] md:rounded-[2rem] overflow-hidden mb-4 md:mb-6 h-[200px] sm:h-[300px] md:h-[350px]">
1649                              <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/f6c20b42-fb59-4424-8b7d-a85200e63662.jpeg" alt="Satgas PASTI Hentikan Aktivitas PT Malahayati Nusantara Raya, Masyarakat Diimbau Waspada Jasa Penyelesaian Pinjol" class="absolute inset-0 w-full h-full object-cover" loading="lazy" decoding="async">
1650                            <div class="absolute top-4 left-4 bg-white/95 backdrop-blur rounded-full px-3 py-1.5 md:px-4 md:py-2 flex items-center gap-1.5 md:gap-2 text-[10px] md:text-xs font-bold text-red-600 border border-red-100">
1651                <i class="ph-fill ph-fire animate-pulse text-sm"></i> Berita Utama
1652              </div>
1653            </div>
1654            <div class="px-2 pb-2">
1655              <div class="flex gap-3 md:gap-4 text-xs md:text-sm text-slate-500 mb-2 md:mb-3 font-semibold items-center">
1656                <span class="text-penyengat-dark font-bold bg-penyengat-cream px-2.5 py-0.5 md:px-3 md:py-1 rounded-full border border-penyengat-yellow/30">
1657                  Pemprov Kepri                </span>
1658                <span class="flex items-center gap-1.5"><i class="ph-bold ph-calendar-blank text-penyengat-green"></i>28 Apr 2026</span>
1659              </div>
1660              <h3 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-slate-800 mb-2 md:mb-3 group-hover:text-penyengat-green transition-colors leading-snug">
1661                Satgas PASTI Hentikan Aktivitas PT Malahayati Nusantara Raya, Masyarakat Diimbau Waspada Jasa Penyelesaian Pinjol              </h3>
1662              <p class="text-slate-600 line-clamp-2 text-sm md:text-base leading-relaxed">DISKOMINFO KEPRI – Satuan Tugas Pemberantasan Aktivitas Keuangan Ilegal (Satgas PASTI) menghentikan kegiatan PT Malahayati Nusanta...</p>
1663            </div>
1664          </a>
1665        
1666        <!-- List News -->
1667                <div class="flex flex-col gap-4">
1668                      <a href="https://kepriprov.go.id/berita/pkk/dewi-ansar-kukuhkan-fk-tagana-kepri-garda-terdepan-tanggap-bencana" class="flex flex-col sm:flex-row gap-4 md:gap-5 group items-start p-3 rounded-3xl bg-white hover:bg-slate-50 border border-slate-100 hover:border-penyengat-green transition-all">
1669              <div class="zoom-wrapper w-full sm:w-32 md:w-40 h-40 sm:h-24 md:h-28 shrink-0 rounded-2xl bg-slate-100">
1670                                  <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/92687294-0cb9-4341-b600-b6b392cde45d.jpeg" alt="Dewi Ansar Kukuhkan FK Tagana Kepri, Garda Terdepan Tanggap Bencana" class="w-full h-full object-cover" loading="lazy" decoding="async">
1671                              </div>
1672              <div class="flex-1 py-1 pr-2">
1673                <div class="flex items-center gap-3 mb-1.5 md:mb-2">
1674                  <span class="text-[9px] md:text-[10px] font-extrabold tracking-wider border px-2 py-0.5 rounded-md text-slate-600 bg-slate-50 border-slate-100">
1675                    PKK                  </span>
1676                  <span class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1">
1677                    <i class="ph-fill ph-clock"></i> 30 Sep 2026                  </span>
1678                </div>
1679                <h3 class="text-base font-bold text-slate-800 group-hover:text-penyengat-green transition-colors leading-tight line-clamp-3">
1680                  Dewi Ansar Kukuhkan FK Tagana Kepri, Garda Terdepan Tanggap Bencana                </h3>
1681              </div>
1682            </a>
1683                      <a href="https://kepriprov.go.id/berita/wakil-gubernur/ketua-mpr-ri-tinjau-kampung-nelayan-merah-putih-di-kabupaten-natuna" class="flex flex-col sm:flex-row gap-4 md:gap-5 group items-start p-3 rounded-3xl bg-white hover:bg-slate-50 border border-slate-100 hover:border-penyengat-green transition-all">
1684              <div class="zoom-wrapper w-full sm:w-32 md:w-40 h-40 sm:h-24 md:h-28 shrink-0 rounded-2xl bg-slate-100">
1685                                  <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/940ff484-6822-494e-ab7d-f5fcec601b6f.jpeg" alt="Ketua MPR RI Tinjau Kampung Nelayan Merah Putih di Kabupaten Natuna" class="w-full h-full object-cover" loading="lazy" decoding="async">
1686                              </div>
1687              <div class="flex-1 py-1 pr-2">
1688                <div class="flex items-center gap-3 mb-1.5 md:mb-2">
1689                  <span class="text-[9px] md:text-[10px] font-extrabold tracking-wider border px-2 py-0.5 rounded-md text-slate-600 bg-slate-50 border-slate-100">
1690                    Wakil Gubernur                  </span>
1691                  <span class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1">
1692                    <i class="ph-fill ph-clock"></i> 30 Sep 2026                  </span>
1693                </div>
1694                <h3 class="text-base font-bold text-slate-800 group-hover:text-penyengat-green transition-colors leading-tight line-clamp-3">
1695                  Ketua MPR RI Tinjau Kampung Nelayan Merah Putih di Kabupaten Natuna                </h3>
1696              </div>
1697            </a>
1698                      <a href="https://kepriprov.go.id/berita/wakil-gubernur/wagub-kepri-nyanyang-dan-bupati-cen-sui-lan-sampaikan-aspirasi-natuna-kepada-ketua-mpr-ri" class="flex flex-col sm:flex-row gap-4 md:gap-5 group items-start p-3 rounded-3xl bg-white hover:bg-slate-50 border border-slate-100 hover:border-penyengat-green transition-all">
1699              <div class="zoom-wrapper w-full sm:w-32 md:w-40 h-40 sm:h-24 md:h-28 shrink-0 rounded-2xl bg-slate-100">
1700                                  <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/fba68e89-2751-4f55-8108-80814dbbd7c3.jpeg" alt="Wagub Kepri Nyanyang dan Bupati Cen Sui Lan Sampaikan Aspirasi Natuna kepada Ketua MPR RI" class="w-full h-full object-cover" loading="lazy" decoding="async">
1701                              </div>
1702              <div class="flex-1 py-1 pr-2">
1703                <div class="flex items-center gap-3 mb-1.5 md:mb-2">
1704                  <span class="text-[9px] md:text-[10px] font-extrabold tracking-wider border px-2 py-0.5 rounded-md text-slate-600 bg-slate-50 border-slate-100">
1705                    Wakil Gubernur                  </span>
1706                  <span class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1">
1707                    <i class="ph-fill ph-clock"></i> 30 Sep 2026                  </span>
1708                </div>
1709                <h3 class="text-base font-bold text-slate-800 group-hover:text-penyengat-green transition-colors leading-tight line-clamp-3">
1710                  Wagub Kepri Nyanyang dan Bupati Cen Sui Lan Sampaikan Aspirasi Natuna kepada Ketua MPR RI                </h3>
1711              </div>
1712            </a>
1713                      <a href="https://kepriprov.go.id/berita/pkk/dinkes-dan-yki-kepri-laksanakan-program-sejuta-vaksin-korpri-untuk-asn-dan-keluarga" class="flex flex-col sm:flex-row gap-4 md:gap-5 group items-start p-3 rounded-3xl bg-white hover:bg-slate-50 border border-slate-100 hover:border-penyengat-green transition-all">
1714              <div class="zoom-wrapper w-full sm:w-32 md:w-40 h-40 sm:h-24 md:h-28 shrink-0 rounded-2xl bg-slate-100">
1715                                  <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/6b3a073b-c742-46c8-8a08-70c0c59246e2.jpeg" alt="Dinkes dan YKI Kepri Laksanakan Program Sejuta Vaksin KORPRI untuk ASN dan Keluarga" class="w-full h-full object-cover" loading="lazy" decoding="async">
1716                              </div>
1717              <div class="flex-1 py-1 pr-2">
1718                <div class="flex items-center gap-3 mb-1.5 md:mb-2">
1719                  <span class="text-[9px] md:text-[10px] font-extrabold tracking-wider border px-2 py-0.5 rounded-md text-slate-600 bg-slate-50 border-slate-100">
1720                    PKK                  </span>
1721                  <span class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1">
1722                    <i class="ph-fill ph-clock"></i> 29 Sep 2026                  </span>
1723                </div>
1724                <h3 class="text-base font-bold text-slate-800 group-hover:text-penyengat-green transition-colors leading-tight line-clamp-3">
1725                  Dinkes dan YKI Kepri Laksanakan Program Sejuta Vaksin KORPRI untuk ASN dan Keluarga                </h3>
1726              </div>
1727            </a>
1728                      <a href="https://kepriprov.go.id/berita/wakil-gubernur/wagub-kepri-sambut-praktisi-medis-internasional-kesempatan-bangun-jejaring-dari-berbagai-negara" class="flex flex-col sm:flex-row gap-4 md:gap-5 group items-start p-3 rounded-3xl bg-white hover:bg-slate-50 border border-slate-100 hover:border-penyengat-green transition-all">
1729              <div class="zoom-wrapper w-full sm:w-32 md:w-40 h-40 sm:h-24 md:h-28 shrink-0 rounded-2xl bg-slate-100">
1730                                  <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/09/d2ebaa6a-722e-470f-9dbe-572490204b11.jpeg" alt="Wagub Kepri Sambut Praktisi Medis Internasional, Kesempatan Bangun Jejaring dari Berbagai Negara" class="w-full h-full object-cover" loading="lazy" decoding="async">
1731                              </div>
1732              <div class="flex-1 py-1 pr-2">
1733                <div class="flex items-center gap-3 mb-1.5 md:mb-2">
1734                  <span class="text-[9px] md:text-[10px] font-extrabold tracking-wider border px-2 py-0.5 rounded-md text-slate-600 bg-slate-50 border-slate-100">
1735                    Wakil Gubernur                  </span>
1736                  <span class="text-[10px] md:text-xs text-slate-400 font-medium flex items-center gap-1">
1737                    <i class="ph-fill ph-clock"></i> 29 Sep 2026                  </span>
1738                </div>
1739                <h3 class="text-base font-bold text-slate-800 group-hover:text-penyengat-green transition-colors leading-tight line-clamp-3">
1740                  Wagub Kepri Sambut Praktisi Medis Internasional, Kesempatan Bangun Jejaring dari Berbagai Negara                </h3>
1741              </div>
1742            </a>
1743                  </div>
1744      </div>
1745
1746      <!-- Kanan: Agenda & Hoaks (1 col) -->
1747      <div class="lg:col-span-1 flex flex-col gap-6 md:gap-8">
1748
1749        <!-- Card Agenda -->
1750        <div class="bg-penyengat-dark rounded-[2rem] md:rounded-[2.5rem] p-6 md:p-8 border border-penyengat-green relative overflow-hidden lg:flex-1">
1751          <i class="ph-fill ph-calendar-blank watermark-icon text-white/5 top-10 right-10"></i>
1752          <div class="relative z-10 lg:h-full flex flex-col justify-between">
1753            <div>
1754              <div class="flex items-center gap-3 mb-6 md:mb-8 border-b border-white/10 pb-4 md:pb-6">
1755                <div class="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-2xl bg-penyengat-yellow text-penyengat-dark flex items-center justify-center shrink-0">
1756                  <i class="ph-fill ph-calendar-check text-xl md:text-2xl"></i>
1757                </div>
1758                <div>
1759                  <h3 class="text-xl md:text-2xl font-bold text-white">Agenda Pemda</h3>
1760                  <p class="text-[10px] md:text-xs text-green-50/70 font-medium mt-0.5">Jadwal Kegiatan Terkini</p>
1761                </div>
1762              </div>
1763
1764              <div class="space-y-4 md:space-y-5">
1765                                  <a href="https://kepriprov.go.id/agenda/pengambilan-sumpah-dan-pelantikan-sekretaris-daerah-provinsi-kepulauan-riau-tahun-2026" class="flex items-center gap-3 md:gap-4 group/event bg-white/5 hover:bg-white/10 p-3 md:p-4 roun
1765ded-xl md:rounded-2xl border border-white/10 transition-colors backdrop-blur-sm">
1766                    <div class="w-12 h-12 md:w-14 md:h-14 shrink-0 bg-white rounded-lg md:rounded-xl flex flex-col items-center justify-center overflow-hidden">
1767                      <div class="bg-penyengat-green w-full text-center text-[8px] md:text-[10px] text-white font-bold py-0.5">
1768                        APR                      </div>
1769                      <div class="text-lg md:text-xl font-black text-penyengat-dark group-hover/event:text-penyengat-green transition-colors">
1770                        27                      </div>
1771                    </div>
1772                    <div class="flex-1 flex items-center min-h-[3.25rem] md:min-h-[3.5rem]">
1773                      <h4 class="text-base font-bold text-white group-hover/event:text-penyengat-yellow transition-colors leading-snug line-clamp-2 md:line-clamp-none">
1774                        Pengambilan Sumpah dan Pelantikan Sekretaris Daerah Provinsi Kepulauan Riau Tahun 2026                      </h4>
1775                    </div>
1776                  </a>
1777                                  <a href="https://kepriprov.go.id/agenda/halal-bihalal-keluarga-besar-kepulauan-riau-di-jabodetabek-tahun-2026" class="flex items-center gap-3 md:gap-4 group/event bg-white/5 hover:bg-white/10 p-3 md:p-4 roun
1777ded-xl md:rounded-2xl border border-white/10 transition-colors backdrop-blur-sm">
1778                    <div class="w-12 h-12 md:w-14 md:h-14 shrink-0 bg-white rounded-lg md:rounded-xl flex flex-col items-center justify-center overflow-hidden">
1779                      <div class="bg-penyengat-green w-full text-center text-[8px] md:text-[10px] text-white font-bold py-0.5">
1780                        APR                      </div>
1781                      <div class="text-lg md:text-xl font-black text-penyengat-dark group-hover/event:text-penyengat-green transition-colors">
1782                        19                      </div>
1783                    </div>
1784                    <div class="flex-1 flex items-center min-h-[3.25rem] md:min-h-[3.5rem]">
1785                      <h4 class="text-base font-bold text-white group-hover/event:text-penyengat-yellow transition-colors leading-snug line-clamp-2 md:line-clamp-none">
1786                        Halal Bihalal Keluarga Besar Kepulauan Riau di Jabodetabek Tahun 2026                      </h4>
1787                    </div>
1788                  </a>
1789                              </div>
1790            </div>
1791
1792            <a href="https://kepriprov.go.id/agenda" class="block text-center w-full bg-penyengat-yellow text-penyengat-dark font-extrabold py-3 md:py-3.5 rounded-xl mt-6 md:mt-8 hover:bg-yellow-400 transition-all transform hover:-translate-y-1 text-sm md:text-base">
1793              Seluruh Agenda
1794            </a>
1795          </div>
1796        </div>
1797
1798        <!-- Card Hoaks -->
1799        <div class="bg-red-50/80 rounded-[2rem] md:rounded-[2.5rem] p-6 md:p-8 border border-red-100 relative overflow-hidden group lg:flex-1">
1800          <i class="ph-fill ph-warning-octagon watermark-icon text-red-200/50 top-10 right-10"></i>
1801          <div class="relative z-10 lg:h-full flex flex-col justify-between">
1802            <div>
1803              <div class="flex items-center gap-3 mb-6 border-b border-red-200/60 pb-4 md:pb-5">
1804                <div class="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-2xl bg-red-500 text-white flex items-center justify-center shrink-0">
1805                  <i class="ph-bold ph-shield-warning text-xl md:text-2xl"></i>
1806                </div>
1807                <div>
1808                  <h3 class="text-xl md:text-2xl font-bold text-red-600">Cek Fakta Hoaks</h3>
1809                  <p class="text-[10px] md:text-xs text-red-500/80 font-bold mt-0.5 tracking-wide whitespace-nowrap">Klarifikasi informasi menyesatkan</p>
1810                </div>
1811              </div>
1812
1813                                            <div class="space-y-3 md:space-y-4">
1814                                      <a href="https://kepriprov.go.id/berita/ho
1814aks-disinformasi/waspadai-penipuan-lelang-tertutup-pengadaan-material-mengatasnamakan-dinas-perkim-kepri" class="block bg-white p-3 md:p-4 rounded-xl md:rounded-2xl border border-red-100 hover:border-red-300 transition-all">
1815                      <div class="flex gap-3 md:gap-4 items-start">
1816                                                <div class="w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden bg-red-100/70 border border-red-100 shrink-0">
1817                                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/b74f1675-69b6-404c-a5ac-3e321a577585_thumb.webp" alt="Waspadai Penipuan Lelang Tertutup Pengadaan Material Mengatasnamakan Dinas Perkim Kepri " class="w-full h-full object-cover" loading="lazy" decoding="async">
1818                                                  </div>
1819                        <div class="min-w-0">
1820                          <h4 class="text-xs md:text-sm font-bold text-slate-800 leading-snug line-clamp-3 overflow-hidden text-ellipsis break-words">Waspadai Penipuan Lelang Tertutup Pengadaan Material Mengatasnamakan Dinas Perkim Kepri </h4>
1821                                                    <p class="text-[10px] md:text-xs text-slate-500 mt-1">10 Apr 2026</p>
1822                        </div>
1823                      </div>
1824                    </a>
1825                                      <a href="https://kepriprov.go.id/berita/ho
1825aks-disinformasi/satgas-pasti-kepri-imbau-masyarakat-waspadai-penipuan-berkedok-investasi-kripto" class="block bg-white p-3 md:p-4 rounded-xl md:rounded-2xl border border-red-100 hover:border-red-300 transition-all">
1826                      <div class="flex gap-3 md:gap-4 items-start">
1827                                                <div class="w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden bg-red-100/70 border border-red-100 shrink-0">
1828                                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/b923dd2c-1f06-41dd-8bb4-c0235e9da194_thumb.webp" alt="Satgas PASTI Kepri Imbau Masyarakat Waspadai Penipuan Berkedok Investasi Kripto " class="w-full h-full object-cover" loading="lazy" decoding="async">
1829                                                  </div>
1830                        <div class="min-w-0">
1831                          <h4 class="text-xs md:text-sm font-bold text-slate-800 leading-snug line-clamp-3 overflow-hidden text-ellipsis break-words">Satgas PASTI Kepri Imbau Masyarakat Waspadai Penipuan Berkedok Investasi Kripto </h4>
1832                                                    <p class="text-[10px] md:text-xs text-slate-500 mt-1">30 Jul 2025</p>
1833                        </div>
1834                      </div>
1835                    </a>
1836                                      <a href="https://kepriprov.go.id/berita/ho
1836aks-disinformasi/modus-penipuan-dengan-mencatut-nama-sekdaprov-kepri-adi-prihantara-beredar-masyarakat-diminta-waspada" class="block bg-white p-3 md:p-4 rounded-xl md:rounded-2xl border border-red-100 hover:border-red-300 transition-all">
1837                      <div class="flex gap-3 md:gap-4 items-start">
1838                                                <div class="w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden bg-red-100/70 border border-red-100 shrink-0">
1839                                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/374f18ad-8204-43ed-a062-4b6a081382e9_thumb.webp" alt="Modus Penipuan Dengan Mencatut Nama Sekdaprov Kepri Adi Prihantara Beredar, Masyarakat Diminta Waspada" class="w-full h-full object-cover" loading="lazy" decoding="async">
1840                                                  </div>
1841                        <div class="min-w-0">
1842                          <h4 class="text-xs md:text-sm font-bold text-slate-800 leading-snug line-clamp-3 overflow-hidden text-ellipsis break-words">Modus Penipuan Dengan Mencatut Nama Sekdaprov Kepri Adi Prihantara Beredar, Masyarakat Diminta Waspada</h4>
1843                                                    <p class="text-[10px] md:text-xs text-slate-500 mt-1">09 Okt 2024</p>
1844                        </div>
1845                      </div>
1846                    </a>
1847                                      <a href="https://kepriprov.go.id/berita/ho
1847aks-disinformasi/awas-waspada-penipuan-melalui-wa-oknum-mengaku-sebagai-gubernur-ansar-ahmad" class="block bg-white p-3 md:p-4 rounded-xl md:rounded-2xl border border-red-100 hover:border-red-300 transition-all">
1848                      <div class="flex gap-3 md:gap-4 items-start">
1849                                                <div class="w-16 h-16 md:w-20 md:h-20 rounded-lg overflow-hidden bg-red-100/70 border border-red-100 shrink-0">
1850                                                      <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/2c42ff44-123d-44dd-85f2-f210ffa43a43_thumb.webp" alt="Awas! Waspada Penipuan Melalui WA, Oknum Mengaku Sebagai Gubernur Ansar Ahmad" class="w-full h-full object-cover" loading="lazy" decoding="async">
1851                                                  </div>
1852                        <div class="min-w-0">
1853                          <h4 class="text-xs md:text-sm font-bold text-slate-800 leading-snug line-clamp-3 overflow-hidden text-ellipsis break-words">Awas! Waspada Penipuan Melalui WA, Oknum Mengaku Sebagai Gubernur Ansar Ahmad</h4>
1854                                                    <p class="text-[10px] md:text-xs text-slate-500 mt-1">30 Des 2022</p>
1855                        </div>
1856                      </div>
1857                    </a>
1858                                  </div>
1859                          </div>
1860
1861            <a href="https://kepriprov.go.id/berita/hoaks-disinformasi" class="block text-center w-full bg-white border-2 border-red-200 text-red-600 font-extrabold py-2.5 md:py-3 rounded-xl mt-6 hover:bg-red-500 hover:text-white hover:border-red-500 transition-all text-sm md:text-base">
1862              Lihat Semua Hoaks
1863            </a>
1864          </div>
1865        </div>
1866
1867      </div>
1868    </div>
1869  </div>
1870</section>
1871<section class="py-16 md:py-24 bg-penyengat-cream relative border-b border-yellow-200/50 overflow-hidden">
1872  <!-- Dekorasi Background -->
1873  <div class="absolute inset-0 bg-penyengat-cream z-0"></div>
1874  <div
1875    class="absolute -top-16 right-0 w-72 h-72 bg-penyengat-yellow opacity-20 rounded-full blur-[110px] pointer-events-none">
1876  </div>
1877  <div
1878    class="absolute -bottom-20 left-0 w-80 h-80 bg-penyengat-green opacity-10 rounded-full blur-[120px] pointer-events-none">
1879  </div>
1880  <div class="absolute top-10 left-10 text-penyengat-green opacity-5 pointer-events-none">
1881    <i class="ph-fill ph-circles-four text-8xl"></i>
1882  </div>
1883  <div class="absolute bottom-8 right-10 text-penyengat-yellow opacity-10 pointer-events-none">
1884    <i class="ph-fill ph-diamonds-four text-6xl"></i>
1885  </div>
1886
1887  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
1888    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-stretch">
1889
1890      <!-- Pengumuman -->
1891      <div
1892        class="bg-white rounded-[2rem] p-6 md:p-8 border border-slate-200 flex flex-col h-full shadow-soft hover:shadow-md transition-shadow">
1893        <div class="flex-grow">
1894          <div class="flex justify-between items-center mb-6 md:mb-8">
1895            <div>
1896              <h2
1897                class="text-2xl md:text-3xl font-extrabold text-penyengat-dark flex items-center gap-2 tracking-tight">
1898                Pengumuman
1899              </h2>
1900            </div>
1901          </div>
1902
1903          <div class="space-y-3 md:space-y-4">
1904                          <a href="https://kepriprov.go.id/pengumuman/seleksi-penerimaan-calon-praja-spcp-institut-pemerintahan-dalam-negeri-ipdn-tahun-anggaran-2026-1787376929776"
1905                class="block p-4 md:p-5 rounded-2xl border border-slate-200 hover:border-penyengat-yellow transition-all duration-300 group bg-slate-50 hover:bg-yellow-50/50 hover:shadow-sm">
1906                <div class="flex gap-4 md:gap-5 items-center">
1907                  <div
1908                    class="bg-white text-slate-700 rounded-2xl p-2 md:p-2.5 text-center shrink-0 w-14 md:w-16 border border-slate-200 group-hover:bg-penyengat-yellow group-hover:text-white group-hover:border-penyengat-yellow transition-colors">
1909                    <span class="block text-lg md:text-xl font-black">22</span>
1910                    <span
1911                      class="block text-[8px] md:text-[10px] font-bold tracking-wider">Agu</span>
1912                  </div>
1913                  <div>
1914                    <h4 class="text-base font-bold text-slate-800 group-hover:text-penyengat-yellow-hover line-clamp-2 mb-1 md:mb-1.5 transition-colors">
1915                      SELEKSI PENERIMAAN CALON PRAJA (SPCP)INSTITUT PEMERINTAHAN DALAM NEGERI (IPDN) TAHUN ANGGARAN 2026                    </h4>
1916                                      </div>
1917                </div>
1918              </a>
1919                          <a href="https://kepriprov.go.id/pengumuman/imbauan-partisipasi-sosialisasi-dan-implementasi-penggunaan-logo-resmi-peringatan-hut-ke-81-kemerdekaan-ri-tahun-2026-di-lingkungan-pemerintah-daerah-kabupaten-kota-se-provinsi-kepulauan-riau"
1920                class="block p-4 md:p-5 rounded-2xl border border-slate-200 hover:border-penyengat-yellow transition-all duration-300 group bg-slate-50 hover:bg-yellow-50/50 hover:shadow-sm">
1921                <div class="flex gap-4 md:gap-5 items-center">
1922                  <div
1923                    class="bg-white text-slate-700 rounded-2xl p-2 md:p-2.5 text-center shrink-0 w-14 md:w-16 border border-slate-200 group-hover:bg-penyengat-yellow group-hover:text-white group-hover:border-penyengat-yellow transition-colors">
1924                    <span class="block text-lg md:text-xl font-black">13</span>
1925                    <span
1926                      class="block text-[8px] md:text-[10px] font-bold tracking-wider">Jul</span>
1927                  </div>
1928                  <div>
1929                    <h4 class="text-base font-bold text-slate-800 group-hover:text-penyengat-yellow-hover line-clamp-2 mb-1 md:mb-1.5 transition-colors">
1930                      Imbauan Partisipasi Sosialisasi dan Implementasi Penggunaan Logo Resmi Peringatan HUT Ke-81 Kemerdekaan RI Tahun 2026 di Lingkungan Pemerintah Daerah Kabupaten/Kota se-Provinsi Kepulauan Riau                    </h4>
1931                                      </div>
1932                </div>
1933              </a>
1934                          <a href="https://kepriprov.go.id/pengumuman/pengumuman-hasil-seleksi-tahap-ii-seleksi-psikotes-dan-seleksi-wawancara-calon-penerima-beasiswa-pendidikan-kedokteran-provinsi-kepulauan-riau-tahun-2026"
1935                class="block p-4 md:p-5 rounded-2xl border border-slate-200 hover:border-penyengat-yellow transition-all duration-300 group bg-slate-50 hover:bg-yellow-50/50 hover:shadow-sm">
1936                <div class="flex gap-4 md:gap-5 items-center">
1937                  <div
1938                    class="bg-white text-slate-700 rounded-2xl p-2 md:p-2.5 text-center shrink-0 w-14 md:w-16 border border-slate-200 group-hover:bg-penyengat-yellow group-hover:text-white group-hover:border-penyengat-yellow transition-colors">
1939                    <span class="block text-lg md:text-xl font-black">18</span>
1940                    <span
1941                      class="block text-[8px] md:text-[10px] font-bold tracking-wider">Mei</span>
1942                  </div>
1943                  <div>
1944                    <h4 class="text-base font-bold text-slate-800 group-hover:text-penyengat-yellow-hover line-clamp-2 mb-1 md:mb-1.5 transition-colors">
1945                      Pengumuman Hasil Seleksi Tahap II Seleksi Psikotes dan Seleksi Wawancara Calon Penerima Beasiswa Pendidikan Kedokteran Provinsi Kepulauan Riau Tahun 2026                    </h4>
1946                                      </div>
1947                </div>
1948              </a>
1949                          <a href="https://kepriprov.go.id/pengumuman/hasil-seleksi-tahap-ii-seleksi-administrasi-calon-penerima-beasiswa-pendidikan-kedokteran-provinsi-kepulauan-riau-tahun-2026"
1950                class="block p-4 md:p-5 rounded-2xl border border-slate-200 hover:border-penyengat-yellow transition-all duration-300 group bg-slate-50 hover:bg-yellow-50/50 hover:shadow-sm">
1951                <div class="flex gap-4 md:gap-5 items-center">
1952                  <div
1953                    class="bg-white text-slate-700 rounded-2xl p-2 md:p-2.5 text-center shrink-0 w-14 md:w-16 border border-slate-200 group-hover:bg-penyengat-yellow group-hover:text-white group-hover:border-penyengat-yellow transition-colors">
1954                    <span class="block text-lg md:text-xl font-black">07</span>
1955                    <span
1956                      class="block text-[8px] md:text-[10px] font-bold tracking-wider">Mei</span>
1957                  </div>
1958                  <div>
1959                    <h4 class="text-base font-bold text-slate-800 group-hover:text-penyengat-yellow-hover line-clamp-2 mb-1 md:mb-1.5 transition-colors">
1960                      Hasil Seleksi Tahap II Seleksi Administrasi Calon Penerima Beasiswa Pendidikan Kedokteran Provinsi Kepulauan Riau Tahun 2026                    </h4>
1961                                      </div>
1962                </div>
1963              </a>
1964                          <a href="https://kepriprov.go.id/pengumuman/seleksi-tahap-ii-calon-penerima-beasiswa-pendidikan-kedokteran-provinsi-kepulauan-riau-tahun-2026"
1965                class="block p-4 md:p-5 rounded-2xl border border-slate-200 hover:border-penyengat-yellow transition-all duration-300 group bg-slate-50 hover:bg-yellow-50/50 hover:shadow-sm">
1966                <div class="flex gap-4 md:gap-5 items-center">
1967                  <div
1968                    class="bg-white text-slate-700 rounded-2xl p-2 md:p-2.5 text-center shrink-0 w-14 md:w-16 border border-slate-200 group-hover:bg-penyengat-yellow group-hover:text-white group-hover:border-penyengat-yellow transition-colors">
1969                    <span class="block text-lg md:text-xl font-black">27</span>
1970                    <span
1971                      class="block text-[8px] md:text-[10px] font-bold tracking-wider">Apr</span>
1972                  </div>
1973                  <div>
1974                    <h4 class="text-base font-bold text-slate-800 group-hover:text-penyengat-yellow-hover line-clamp-2 mb-1 md:mb-1.5 transition-colors">
1975                      Seleksi Tahap II Calon Penerima Beasiswa Pendidikan Kedokteran Provinsi Kepulauan Riau Tahun 2026                    </h4>
1976                                      </div>
1977                </div>
1978              </a>
1979                      </div>
1980        </div>
1981
1982        <div class="mt-auto pt-6">
1983          <a href="https://kepriprov.go.id/pengumuman"
1984            class="text-sm md:text-base font-bold text-penyengat-yellow bg-white px-6 py-3 rounded-xl hover:bg-penyengat-yellow hover:text-white transition whitespace-nowrap block text-center border-2 border-yellow-200">
1985            Lihat Seluruh Pengumuman
1986          </a>
1987        </div>
1988      </div>
1989
1990      <!-- Transparansi Laporan -->
1991      <div
1992        class="bg-penyengat-dark rounded-[2rem] p-6 md:p-10 text-white relative overflow-hidden flex flex-col h-full shadow-soft hover:shadow-md transition-shadow">
1993        <!-- Decorative circles -->
1994        <div
1995          class="absolute -top-10 -right-10 w-48 h-48 md:w-64 md:h-64 rounded-full border-[20px] md:border-[40px] border-white/5 animate-[spin_20s_linear_infinite]">
1996        </div>
1997        <div
1998          class="absolute -bottom-20 -left-20 w-64 h-64 md:w-80 md:h-80 rounded-full border-[15px] md:border-[20px] border-white opacity-10">
1999        </div>
2000
2001        <div class="flex-grow relative z-10">
2002          <h2 class="text-2xl md:text-3xl font-extrabold mb-4 leading-tight">Transparansi Keuangan Daerah</h2>
2003          <p class="text-green-50/90 text-sm md:text-base mb-6 md:mb-8 max-w-sm leading-relaxed font-medium">
2004            Akses terbuka dokumen perencanaan, pelaksanaan anggaran, dan capaian kinerja pemerintah provinsi Kepulauan
2005            Riau.
2006          </p>
2007
2008                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
2009                          <a href="https://kepriprov.go.id/dokumen?categories=15a9e606-9b95-456a-aaf9-cd8500245cd8"
2010                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2011                <div
2012                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2013                  <i class="ph-fill ph-chart-pie-slice text-xl md:text-2xl"></i>
2014                </div>
2015                <div class="leading-tight">
2016                  <span class="font-bold text-xs md:text-sm block">Perencanaan Anggaran Daerah</span>
2017                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">36 dokumen</span>
2018                </div>
2019              </a>
2020                          <a href="https://kepriprov.go.id/dokumen?categories=c56d18bf-bac1-4871-be7a-3822c9a90a62"
2021                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2022                <div
2023                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2024                  <i class="ph-fill ph-file-text text-xl md:text-2xl"></i>
2025                </div>
2026                <div class="leading-tight">
2027                  <span class="font-bold text-xs md:text-sm block">Laporan Keuangan Daerah</span>
2028                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">26 dokumen</span>
2029                </div>
2030              </a>
2031                          <a href="https://kepriprov.go.id/dokumen?categories=b81642d5-7670-4b4d-a354-c1ba7af7d83e"
2032                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2033                <div
2034                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2035                  <i class="ph-fill ph-scales text-xl md:text-2xl"></i>
2036                </div>
2037                <div class="leading-tight">
2038                  <span class="font-bold text-xs md:text-sm block">Peraturan Daerah Tentang APBD</span>
2039                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">20 dokumen</span>
2040                </div>
2041              </a>
2042                          <a href="https://kepriprov.go.id/dokumen?categories=80a77458-2151-4bb9-ab9b-715010abb30b"
2043                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2044                <div
2045                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2046                  <i class="ph-fill ph-receipt text-xl md:text-2xl"></i>
2047                </div>
2048                <div class="leading-tight">
2049                  <span class="font-bold text-xs md:text-sm block">Pertanggungjawaban Keuangan</span>
2050                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">11 dokumen</span>
2051                </div>
2052              </a>
2053                          <a href="https://kepriprov.go.id/dokumen?categories=97ed7b50-305b-4585-a5a8-b7b422dad00a"
2054                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2055                <div
2056                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2057                  <i class="ph-fill ph-check-circle text-xl md:text-2xl"></i>
2058                </div>
2059                <div class="leading-tight">
2060                  <span class="font-bold text-xs md:text-sm block">Penyelenggaraan Pemda (LPPD)</span>
2061                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">7 dokumen</span>
2062                </div>
2063              </a>
2064                          <a href="https://kepriprov.go.id/dokumen?categories=eb59b3ab-b3c4-403b-8f5d-b5c7954cbb88"
2065                class="bg-penyengat-dark/40 hover:bg-penyengat-dark/80 backdrop-blur-md rounded-2xl p-3 md:p-4 flex items-center gap-3 md:gap-4 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow hover:-translate-y-1 group hover:shadow-soft">
2066                <div
2067                  class="w-10 h-10 md:w-12 md:h-12 rounded-full bg-penyengat-yellow flex items-center justify-center text-white shrink-0 group-hover:scale-110 transition-transform">
2068                  <i class="ph-fill ph-chart-bar text-xl md:text-2xl"></i>
2069                </div>
2070                <div class="leading-tight">
2071                  <span class="font-bold text-xs md:text-sm block">Kinerja Instansi Pemerintah (LKIP)</span>
2072                  <span class="text-[10px] md:text-xs text-green-50/80 font-semibold">7 dokumen</span>
2073                </div>
2074              </a>
2075                        </div>
2076                  </div>
2077
2078        <div class="mt-auto pt-6 relative z-10">
2079          <a href="https://kepriprov.go.id/dokumen"
2080            class="bg-white/10 hover:bg-white/20 backdrop-blur-md rounded-xl md:rounded-2xl p-3 md:p-3.5 flex items-center justify-center gap-2 transition-all duration-300 border border-white/20 hover:border-penyengat-yellow font-bold text-xs md:text-sm text-center">
2081            Seluruh Daftar Dokumen <i class="ph-bold ph-arrow-right"></i>
2082          </a>
2083        </div>
2084      </div>
2085
2086    </div>
2087  </div>
2088</section>
2089<!-- SECTION 8: Pesona Pariwisata & Budaya -->
2090<section id="pariwisata" class="py-16 md:py-24 relative overflow-hidden bg-penyengat-dark">
2091  <!-- Background Image Overlay with Mix Blend & Parallax -->
2092  <div class="absolute inset-0 z-0 pointer-events-none overflow-hidden bg-fixed bg-center bg-cover bg-no-repeat opacity-[0.14] mix-blend-overlay"
2093       style="background-image: url('https://kepriprov.go.id/assets/media/kepri-background.webp');">
2094  </div>
2095  <!-- Subtle Gradient for depth -->
2096  <div class="absolute inset-0 z-0 bg-gradient-to-b from-black/20 via-trans
2096parent to-black/20 pointer-events-none"></div>
2097
2098  <!-- Batik Pucuk Rebung Top Border -->
2099  <div class="absolute top-0 left-0 w-full h-12 md:h-16 z-20 opacity-60 mix-blend-screen rotate-180"
2100    style="background-image: url('https://kepriprov.go.id/assets/media/patterns-batik-1.webp'); background-repeat: repeat-x; background-size: auto 100%;">
2101  </div>
2102
2103
2104
2105  <!-- Decoration -->
2106  <div
2107    class="absolute top-0 right-0 w-[500px] h-[500px] bg-penyengat-green rounded-full blur-[100px] opacity-40 translate-x-1/3 -translate-y-1/4 animate-pulse-slow pointer-events-none">
2108  </div>
2109  <div class="absolute bottom-10 left-8 text-white/10 pointer-events-none"><i class="ph-fill ph-star-four text-7xl"></i>
2110  </div>
2111
2112  <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-6 md:mt-10">
2113    <div
2114      class="flex flex-col md:flex-row justify-between items-center md:items-end mb-10 md:mb-16 gap-6 text-center md:text-left">
2115      <div class="max-w-2xl">
2116        <h2 class="text-2xl md:text-3xl font-extrabold text-white tracking-tight">Jelajahi Wisata &amp; Budaya</h2>
2117        <p class="text-green-100 mt-4 text-sm md:text-base leading-relaxed px-2 md:px-0">
2118          Dari situs bersejarah hingga pantai berpasir putih, Kepulauan Riau menawarkan keajaiban alam dan kearifan
2119          lokal.
2120        </p>
2121      </div>
2122      <div class="hidden sm:flex gap-2">
2123        <button type="button" data-pariwisata-prev
2124          class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition text-white"><i
2125            class="ph-bold ph-caret-left"></i></button>
2126        <button type="button" data-pariwisata-next
2127          class="w-10 h-10 rounded-full border border-white/20 flex items-center justify-center hover:bg-white/10 transition text-white"><i
2128            class="ph-bold ph-caret-right"></i></button>
2129      </div>
2130    </div>
2131
2132    <div data-pariwisata-track class="swipeable-row hide-scroll flex gap-6 md:gap-8 overflow-x-auto pb-4 px-1">
2133          </div>
2134
2135    <div class="flex justify-center items-center gap-2 mt-4 text-white/50 text-xs font-medium sm:hidden relative z-10">
2136      <i class="ph-bold ph-arrows-left-right"></i> Geser untuk melihat destinasi lainnya
2137    </div>
2138
2139    <div class="text-center mt-12 relative z-20">
2140      <a href="https://kepriprov.go.id/pariwisata"
2141        class="inline-flex items-center justify-center gap-2 bg-white border-2 border-white text-penyengat-green hover:bg-slate-100 hover:text-penyengat-dark font-bold px-8 md:px-10 py-3 md:py-4 rounded-full transition-all duration-300 hover:-translate-y-1 text-sm md:text-base w-full sm:w-auto">
2142        <i class="ph-bold ph-compass"></i> Lihat Direktori Pariwisata
2143      </a>
2144    </div>
2145  </div>
2146
2147  <!-- Bottom Batik Motifs -->
2148  <svg class="absolute bottom-0 left-0 w-48 md:w-96 z-10 opacity-[0.06] text-penyengat-green pointer-events-none"
2149    viewBox="0 0 100 100" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2150    <path d="M 0 100 C 40 100 80 80 100 0 C 100 40 80 90 0 100 Z" />
2151    <path d="M 0 100 C 20 100 50 80 60 30 C 60 60 40 90 0 100 Z" opacity="0.6" />
2152    <path d="M 0 100 C 10 100 30 80 35 50 C 35 70 20 90 0 100 Z" opacity="0.3" />
2153    <circle cx="20" cy="80" r="3" />
2154    <circle cx="40" cy="60" r="2" />
2155    <circle cx="55" cy="35" r="1.5" />
2156  </svg>
2157  <svg
2158    class="absolute bottom-0 right-0 w-48 md:w-96 z-10 opacity-[0.06] text-penyengat-green pointer-events-none transform scale-x-[-1]"
2159    viewBox="0 0 100 100" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2160    <path d="M 0 100 C 40 100 80 80 100 0 C 100 40 80 90 0 100 Z" />
2161    <path d="M 0 100 C 20 100 50 80 60 30 C 60 60 40 90 0 100 Z" opacity="0.6" />
2162    <path d="M 0 100 C 10 100 30 80 35 50 C 35 70 20 90 0 100 Z" opacity="0.3" />
2163    <circle cx="20" cy="80" r="3" />
2164    <circle cx="40" cy="60" r="2" />
2165    <circle cx="55" cy="35" r="1.5" />
2166  </svg>
2167  <div id="particles-js-pariwisata" class="absolute inset-0 z-0 pointer-events-none"></div>
2168</section>
2169
2170<script>
2171  (function initPariwisataSlider() {
2172    var section = document.getElementById('pariwisata');
2173    if (!section || section.dataset.pariwisataSliderInit === '1') return;
2174
2175    var track = section.querySelector('[data-pariwisata-track]');
2176    var prevBtn = section.querySelector('[data-pariwisata-prev]');
2177    var nextBtn = section.querySelector('[data-pariwisata-next]');
2178
2179    if (!track || !prevBtn || !nextBtn) return;
2180    section.dataset.pariwisataSliderInit = '1';
2181
2182    var getStep = function () {
2183      var firstCard = track.querySelector('.swipeable-card-start');
2184      if (!firstCard) return track.clientWidth * 0.7;
2185      var styles = window.getComputedStyle(track);
2186      var gap = parseFloat(styles.gap || '0') || 0;
2187      return firstCard.getBoundingClientRect().width + gap;
2188    };
2189
2190    prevBtn.addEventListener('click', function () {
2191      track.scrollBy({ left: -getStep(), behavior: 'smooth' });
2192    });
2193    nextBtn.addEventListener('click', function () {
2194      track.scrollBy({ left: getStep(), behavior: 'smooth' });
2195    });
2196
2197    // Particles
2198    const initParticles = () => {
2199      if (typeof particlesJS !== 'undefined') {
2200        particlesJS("particles-js-pariwisata", {
2201          "particles": {
2202            "number": { "value": 40 },
2203            "color": { "value": "#ffffff" },
2204            "shape": { "type": "circle" },
2205            "opacity": { "value": 0.12 },
2206            "size": { "value": 3 },
2207            "line_linked": {
2208              "enable": true,
2209              "distance": 200,
2210              "color": "#ffffff",
2211              "opacity": 0.08,
2212              "width": 1
2213            },
2214            "move": { "enable": true, "speed": 0.8 }
2215          },
2216          "retina_detect": true
2217        });
2218      } else {
2219        window.addEventListener('load', initParticles, { once: true });
2220      }
2221    };
2222    initParticles();
2223  })();
2224</script>
2224
2225<!-- SECTION: PPID & LAPOR! (CTA Aspirasi Publik) -->
2226<section id="layanan-aspirasi" class="py-16 md:py-24 bg-slate-50 relative border-t border-slate-200 overflow-hidden">
2227  <!-- Ornamen Abstrak -->
2228  <div
2229    class="absolute top-0 right-0 w-64 h-64 bg-penyengat-yellow rounded-full filter blur-[120px] opacity-20 pointer-events-none">
2230  </div>
2231  <div
2232    class="absolute bottom-0 left-0 w-64 h-64 bg-penyengat-green rounded-full filter blur-[120px] opacity-10 pointer-events-none">
2233  </div>
2234
2235  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
2236    <div class="text-center mb-10 md:mb-14">
2237      <h2 class="text-2xl md:text-3xl font-extrabold text-penyengat-dark tracking-tight">Aspirasi &amp; Informasi</h2>
2238      <p class="text-slate-500 mt-4 max-w-2xl mx-auto text-sm md:text-base leading-relaxed">Gunakan kanal resmi untuk memohon
2239        informasi publik atau menyampaikan aspirasi dan pengaduan layanan pemerintahan.</p>
2240    </div>
2241
2242    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
2243      <!-- Card PPID -->
2244      <div
2245        class="bg-white rounded-[2rem] p-8 md:p-10 border border-slate-200 hover:border-penyengat-green transition-all group flex flex-col sm:flex-row items-center sm:items-start gap-6 text-center sm:text-left shadow-soft hover:shadow-float">
2246        <div
2247          class="w-20 h-20 bg-green-50 text-penyengat-green rounded-2xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform border border-green-100">
2248          <i class="ph-fill ph-folder-lock text-4xl"></i>
2249        </div>
2250        <div class="flex-1">
2251          <h3
2252            class="text-2xl font-extrabold text-slate-800 mb-2 group-hover:text-penyengat-green transition-colors leading-tight">
2253            Keterbukaan Informasi (PPID)</h3>
2254          <p class="text-slate-500 mb-6 text-sm md:text-base leading-relaxed">Ajukan permohonan informasi publik
2255            secara transparan, mudah, dan terintegrasi sesuai amanat Undang-Undang KIP.</p>
2256          <a href="https://ppid.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"
2257            class="inline-flex items-center gap-2 bg-penyengat-green text-white px-6 py-3 rounded-xl font-bold hover:bg-penyengat-dark transition w-full sm:w-auto justify-center">Buat
2258            Permohonan <i class="ph-bold ph-arrow-right"></i></a>
2259        </div>
2260      </div>
2261
2262      <!-- Card LAPOR SPAN -->
2263      <div
2264        class="bg-white rounded-[2rem] p-8 md:p-10 border border-slate-200 hover:border-red-500 transition-all group flex flex-col sm:flex-row items-center sm:items-start gap-6 text-center sm:text-left shadow-soft hover:shadow-float">
2265        <div
2266          class="w-20 h-20 bg-red-50 text-red-600 rounded-2xl flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform border border-red-100">
2267          <i class="ph-fill ph-megaphone text-4xl"></i>
2268        </div>
2269        <div class="flex-1">
2270          <h3 class="text-2xl font-extrabold text-slate-800 mb-2 group-hover:text-red-600 transition-colors leading-tight">
2271            Sampaikan Aspirasi (Lapor SPAN)</h3>
2272          <p class="text-slate-500 mb-6 text-sm md:text-base leading-relaxed">Kanal resmi pengaduan pelayanan publik
2273            nasional (SP4N). Kami siap menindaklanjuti keluhan dan saran Anda.</p>
2274          <a href="https://kepri.lapor.go.id/" target="_blank" rel="noopener noreferrer"
2275            class="inline-flex items-center gap-2 bg-red-600 text-white px-6 py-3 rounded-xl font-bold hover:bg-red-700 transition w-full sm:w-auto justify-center">Lapor
2276            Sekarang <i class="ph-bold ph-arrow-right"></i></a>
2277        </div>
2278      </div>
2279    </div>
2280  </div>
2281</section>
2282<!-- SECTION 9: Daftar Kabupaten/Kota (Mitra Daerah) -->
2283<section class="py-16 md:py-20 relative overflow-hidden bg-penyengat-cream border-t border-yellow-200/50">
2284  <div class="absolute -top-14 -left-10 w-64 h-64 bg-penyengat-yellow/15 rounded-full blur-[95px] pointer-events-none">
2285  </div>
2286  <div
2287    class="absolute -bottom-16 -right-12 w-72 h-72 bg-penyengat-green/10 rounded-full blur-[110px] pointer-events-none">
2288  </div>
2289  <div class="absolute top-8 right-12 text-penyengat-green/10 pointer-events-none"><i
2290      class="ph-fill ph-sparkle text-6xl"></i></div>
2291  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
2292    <h3 class="text-2xl md:text-3xl font-extrabold text-penyengat-dark mb-2 md:mb-3">Kabupaten &amp; Kota</h3>
2293    <p class="text-xs md:text-sm text-slate-500 mb-8 md:mb-12 font-medium">Jelajahi portal resmi pemerintah kabupaten
2294      dan kota se-Provinsi Kepri</p>
2295
2296    <div class="flex flex-wrap justify-center items-center gap-6 md:gap-12">
2297                    <a href="https://www.tanjungpinangkota.go.id" target="_blank" rel="noopener noreferrer"
2298          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2299          <div
2300            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2301            <img src="https://kepriprov.go.id/assets/media/logo-tanjungpinang.webp" alt="Tanjungpinang" class="w-8 sm:w-10 md:w-12">
2302          </div>
2303          <span
2304            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2305            Tanjungpinang          </span>
2306        </a>
2307              <a href="https://batam.go.id" target="_blank" rel="noopener noreferrer"
2308          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2309          <div
2310            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2311            <img src="https://kepriprov.go.id/assets/media/logo-batam.webp" alt="Batam" class="w-8 sm:w-10 md:w-12">
2312          </div>
2313          <span
2314            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2315            Batam          </span>
2316        </a>
2317              <a href="https://bintankab.go.id" target="_blank" rel="noopener noreferrer"
2318          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2319          <div
2320            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2321            <img src="https://kepriprov.go.id/assets/media/logo-bintan.webp" alt="Bintan" class="w-8 sm:w-10 md:w-12">
2322          </div>
2323          <span
2324            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2325            Bintan          </span>
2326        </a>
2327              <a href="https://karimunkab.go.id" target="_blank" rel="noopener noreferrer"
2328          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2329          <div
2330            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2331            <img src="https://kepriprov.go.id/assets/media/logo-karimun.webp" alt="Karimun" class="w-8 sm:w-10 md:w-12">
2332          </div>
2333          <span
2334            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2335            Karimun          </span>
2336        </a>
2337              <a href="https://linggakab.go.id" target="_blank" rel="noopener noreferrer"
2338          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2339          <div
2340            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2341            <img src="https://kepriprov.go.id/assets/media/logo-lingga.webp" alt="Lingga" class="w-8 sm:w-10 md:w-12">
2342          </div>
2343          <span
2344            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2345            Lingga          </span>
2346        </a>
2347              <a href="https://natunakab.go.id" target="_blank" rel="noopener noreferrer"
2348          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2349          <div
2350            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2351            <img src="https://kepriprov.go.id/assets/media/logo-natuna.webp" alt="Natuna" class="w-8 sm:w-10 md:w-12">
2352          </div>
2353          <span
2354            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2355            Natuna          </span>
2356        </a>
2357              <a href="https://anambaskab.go.id" target="_blank" rel="noopener noreferrer"
2358          class="group flex flex-col items-center gap-2 md:gap-3 w-16 sm:w-20 md:w-28">
2359          <div
2360            class="w-14 h-14 sm:w-16 sm:h-16 md:w-20 md:h-20 bg-white rounded-full flex items-center justify-center border border-slate-200 group-hover:border-penyengat-yellow group-hover:-translate-y-2 transition-all duration-300">
2361            <img src="https://kepriprov.go.id/assets/media/logo-anambas.webp" alt="Kep. Anambas" class="w-8 sm:w-10 md:w-12">
2362          </div>
2363          <span
2364            class="text-[10px] md:text-xs font-bold text-slate-600 group-hover:text-penyengat-dark transition-colors text-center">
2365            Kep. Anambas          </span>
2366        </a>
2367          </div>
2368  </div>
2369</section>  </main>
2370
2371  <footer
2372  class="bg-penyengat-dark pt-28 md:pt-36 pb-0 text-green-50/70 overflow-hidden relative shadow-[0_-10px_30px_rgba(0,0,0,0.15)]">
2373  <!-- Batik Frame Border Top -->
2374  <div class="absolute top-0 left-0 w-full h-8 md:h-12 z-20 opacity-100"
2375    style="background-image: url('https://kepriprov.go.id/assets/media/patterns-batik-2.png'); background-repeat: repeat-x; background-size: auto 100%;">
2376  </div>
2377
2378  <!-- Footer Pattern Background -->
2379  <div class="absolute inset-0 z-0 pointer-events-none"
2380    style="background-image: url('https://kepriprov.go.id/assets/media/patterns-footer.png'); background-position: bottom center; background-size: 100% auto; background-repeat: no-repeat;">
2381  </div>
2382
2383  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
2384
2385    <!-- ── TOP GRID ── -->
2386    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-20 mb-12 pb-12">
2387
2388      <!-- Col 1: Identitas Instansi + Kontak + Sosmed -->
2389      <div class="lg:col-span-4">
2390        <!-- Logo & nama -->
2391        <div class="flex items-center gap-4 mb-8">
2392          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png" alt="Logo Portal Pemerintah Provinsi Kepulauan Riau" class="h-12" loading="lazy">
2393          <div class="border-l border-white/10 pl-4">
2394            <p class="text-white font-semibold text-sm tracking-tight leading-tight uppercase">Portal Pemerintah Provinsi Kepulauan Riau</p>
2395                      </div>
2396        </div>
2397
2398        <!-- Alamat -->
2399        <p class="text-sm leading-relaxed mb-6 max-w-sm text-green-50/60 font-normal">
2400          Pusat Pemerintahan Provinsi Kepulauan Riau Istana Kota Piring Gedung Sultan Mahmud Riayat Syah, Pulau Dompak, Kec. Bukit Bestari, Kota Tanjungpinang.        </p>
2401
2402        <p
2403          class="text-xs text-green-50/40 font-medium leading-relaxed max-w-xs mt-8 italic border-t border-white/5 pt-6">
2404          Portal ini dikembangkan dan dikelola oleh Dinas Komunikasi dan Informatika Provinsi Kepulauan Riau.
2405        </p>
2406      </div>
2407
2408      <!-- Col 2: Navigasi Portal -->
2409      <div class="lg:col-span-3">
2410        <h3 class="text-white font-bold mb-6 text-base tracking-wide">
2411          Navigasi Utama
2412        </h3>
2413        <ul class="space-y-4">
2414                      <li>
2415              <a href="https://kepriprov.go.id/profil"
2416                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2417                <span
2418                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Profil Pimpinan</span>
2419              </a>
2420            </li>
2421                      <li>
2422              <a href="https://kepriprov.go.id/laman/visi-misi"
2423                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2424                <span
2425                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Visi &amp; Misi Daerah</span>
2426              </a>
2427            </li>
2428                      <li>
2429              <a href="https://kepriprov.go.id/berita"
2430                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2431                <span
2432                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Berita &amp; Siaran Pers</span>
2433              </a>
2434            </li>
2435                      <li>
2436              <a href="https://kepriprov.go.id/agenda"
2437                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2438                <span
2439                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Agenda Kegiatan</span>
2440              </a>
2441            </li>
2442                      <li>
2443              <a href="https://kepriprov.go.id/program"
2444                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2445                <span
2446                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Program Unggulan</span>
2447              </a>
2448            </li>
2449                      <li>
2450              <a href="https://kepriprov.go.id/proyek"
2451                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2452                <span
2453                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Proyek Strategis</span>
2454              </a>
2455            </li>
2456                      <li>
2457              <a href="https://kepriprov.go.id/dokumen"
2458                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2459                <span
2460                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Dokumen &amp; Laporan</span>
2461              </a>
2462            </li>
2463                      <li>
2464              <a href="https://kepriprov.go.id/#kontak"
2465                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2466                <span
2467                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Kontak &amp; Bantuan</span>
2468              </a>
2469            </li>
2470                  </ul>
2471      </div>
2472
2473      <!-- Col 3: Informasi Publik -->
2474      <div class="lg:col-span-3">
2475        <h3 class="text-white font-bold mb-6 text-base tracking-wide">
2476          Tautan Terintegrasi
2477        </h3>
2478        <ul class="space-y-4">
2479                      <li>
2480              <a href="https://ppid.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2481                <span
2482                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal PPID Kepri</span>
2483              </a>
2484            </li>
2485                      <li>
2486              <a href="https://jdih.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2487                <span
2488                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">JDIH Produk Hukum</span>
2489              </a>
2490            </li>
2491                      <li>
2492              <a href="https://kepri.lapor.go.id/instansi/pemerintah-provinsi-kepulauan-riau" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2493                <span
2494                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Satu Data Kepri</span>
2495              </a>
2496            </li>
2497                      <li>
2498              <a href="https://www.lapor.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2499                <span
2500                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal SP4N LAPOR!</span>
2501              </a>
2502            </li>
2503                      <li>
2504              <a href="https://spse.inaproc.id/kepriprov" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2505                <span
2506                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">LPSE Pengadaan</span>
2507              </a>
2508            </li>
2509                      <li>
2510              <a href="https://beasiswa.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2511                <span
2512                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Beasiswa Kepri</span>
2513              </a>
2514            </li>
2515                      <li>
2516              <a href="https://dpmptsp.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2517                <span
2518                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Simpadu Perizinan</span>
2519              </a>
2520            </li>
2521                      <li>
2522              <a href="https://bapenda.kepriprov.go.id/" target="_blank" rel="noopener noreferrer"                class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
2523                <span
2524                  class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Info Pajak Kendaraan</span>
2525              </a>
2526            </li>
2527                  </ul>
2528      </div>
2529
2530      <!-- Col 4: Statistik -->
2531      <div class="lg:col-span-2">
2532        <h3 class="text-white font-bold mb-6 text-base tracking-wide">
2533          Visitor
2534        </h3>
2535
2536        <!-- Visitor Stats -->
2537        <div class="space-y-4">
2538          <div
2539            class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-penyengat-yellow/30 transition-colors group">
2540            <p
2541              class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-penyengat-yellow/50 transition-colors">
2542              Online</p>
2543            <p id="visitor-online" class="text-2xl font-bold text-penyengat-yellow leading-none">
2544              96            </p>
2545          </div>
2546          <div
2547            class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-white/30 transition-colors group">
2548            <p
2549              class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-white/50 transition-colors">
2550              Hari Ini</p>
2551            <p id="visitor-today" class="text-2xl font-bold text-white leading-none">
2552              27,939            </p>
2553          </div>
2554          <div
2555            class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-green-400/30 transition-colors group">
2556            <p
2557              class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-green-400/50 transition-colors">
2558              Kemarin</p>
2559            <p id="visitor-yesterday" class="text-xl font-bold text-green-400 leading-none">
2560              30,323            </p>
2561          </div>
2562        </div>
2563      </div>
2564
2565    </div>
2566
2567    <!-- ── BOTTOM BAR ── -->
2568    <div
2569      class="py-10 flex flex-col md:flex-row justify-between items-center gap-6 text-xs font-medium text-white/30 border-t-2 border-white/10">
2570      <div class="flex items-center gap-4 flex-col md:flex-row text-center md:text-left">
2571        <p>
2572          &copy; 2026 Dinas Komunikasi & Informatika Provinsi Kepulauan Riau.<br class="md:hidden"> Hak
2573          Cipta Dilindungi.
2574        </p>
2575      </div>
2576      <div class="flex gap-6 md:gap-8 justify-center flex-wrap tracking-wider text-[10px]">
2577        <a href="https://kepriprov.go.id/laman/kebijakan-privasi"
2578          class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Kebijakan
2579          Privasi</a>
2580        <a href="https://kepriprov.go.id/laman/ketentuan-penggunaan"
2581          class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Ketentuan
2582          Penggunaan</a>
2583      </div>
2584    </div>
2585  </div>
2586</footer>  <!-- Floating Action Menu -->
2587<div class="fixed right-2 md:right-4 top-1/2 transform -translate-y-1/2 z-50 flex flex-col items-end gap-2 md:gap-3">
2588
2589      <!-- Survei / Penilaian -->
2590    <button type="button" id="btn-open-survey-modal" data-survey-url="https://skm.kepriprov.go.id/survey/25c1b6cd-2e11-4f6b-89dd-1ffeb6ad266e"       class="group flex flex-col items-center bg-penyengat-yellow hover:bg-penyengat-yellow-hover text-penyengat-dark rounded-xl md:rounded-2xl shadow-float transition-all duration-300 px-3 py-2 md:py-2.5 border border-black/10 hover:scale-[1.02]"
2591      style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">
2592      <span class="text-[10px] md:text-xs font-extrabold tracking-tight leading-none">Survei Kepuasan Masyarakat</span>
2593    </button>
2594  
2595  
2596  
2597</div>
2598
2599  <div id="survey-modal" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/70 p-0"
2600    aria-hidden="true" role="dialog" aria-modal="true" aria-label="Survei Kepuasan" style="z-index: 99999;">
2601    <div class="relative z-[100000] h-full w-full overflow-hidden bg-white shadow-2xl"
2602      style="z-index: 100000; width: 100%; height: 100%;">
2603      <div class="flex h-14 items-center justify-between border-b px-4 py-3 bg-white">
2604        <h3 class="text-sm font-bold text-slate-800 md:text-base">Survei Kepuasan Masyarakat</h3>
2605        <button type="button" id="btn-close-survey-modal"
2606          class="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900"
2607          aria-label="Tutup dialog survei">
2608          <i class="ph-bold ph-x text-lg"></i>
2609        </button>
2610      </div>
2611      <iframe id="survey-modal-iframe" title="Widget Survei Kepuasan" class="w-full border-none" 
2612        style="height: calc(100% - 56px); width: 100%;" src="about:blank"
2613        loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>
2614    </div>
2615  </div>
2616
2617  
2617<script>
2618    (function () {
2619      const openBtn = document.getElementById('btn-open-survey-modal');
2620      const modal = document.getElementById('survey-modal');
2621      const closeBtn = document.getElementById('btn-close-survey-modal');
2622      const iframe = document.getElementById('survey-modal-iframe');
2623      if (!openBtn || !modal || !closeBtn || !iframe) return;
2624
2625      const surveyUrl = openBtn.getAttribute('data-survey-url') || '';
2626      if (!surveyUrl || surveyUrl === '#') return;
2627
2628      const openModal = () => {
2629        iframe.setAttribute('src', surveyUrl);
2630        modal.classList.remove('hidden');
2631        modal.classList.add('flex');
2632        modal.setAttribute('aria-hidden', 'false');
2633        document.body.classList.add('overflow-hidden');
2634        document.documentElement.classList.add('overflow-hidden');
2635      };
2636
2637      const closeModal = () => {
2638        modal.classList.add('hidden');
2639        modal.classList.remove('flex');
2640        modal.setAttribute('aria-hidden', 'true');
2641        iframe.setAttribute('src', 'about:blank');
2642        document.body.classList.remove('overflow-hidden');
2643        document.documentElement.classList.remove('overflow-hidden');
2644      };
2645
2646      openBtn.addEventListener('click', openModal);
2647      closeBtn.addEventListener('click', closeModal);
2648    })();
2649  </script>
2649
2650  <!-- Global Image Preview Modal -->
2651<div id="globalImagePreviewModal" class="fixed inset-0 z-[100] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
2652  <!-- Backdrop -->
2653  <div class="absolute inset-0 bg-slate-900/95 backdrop-blur-md cursor-zoom-out btn-close-image-preview"></div>
2654  
2655  <!-- Content Container -->
2656  <div class="relative z-10 w-full max-w-5xl mx-auto p-4 md:p-6 flex flex-col items-center justify-center scale-95 transition-transform duration-300 delay-75" id="globalImagePreviewContent">
2657    
2658    <!-- Top Bar -->
2659    <div class="w-full flex items-start justify-between gap-4 mb-4 md:mb-6 px-2">
2660      <div class="text-white flex-1 min-w-0">
2661        <h3 id="globalImagePreviewTitle" class="text-lg md:text-xl text-white font-extrabold truncate">Pratinjau Gambar</h3>
2662        <p id="globalImagePreviewCaption" class="text-sm text-green-100/70 mt-1 line-clamp-2 md:w-3/4 hidden"></p>
2663      </div>
2664      <div class="flex items-center gap-2 shrink-0">
2665        <a href="#" id="globalImagePreviewDownload" download
2666          class="w-10 h-10 md:w-11 md:h-11 rounded-full bg-white/10 hover:bg-penyengat-green text-white flex items-center justify-center transition-all border border-white/20 select-none" title="Download Gambar">
2667          <i class="ph-bold ph-download-simple text-lg md:text-xl"></i>
2668        </a>
2669        <button class="w-10 h-10 md:w-11 md:h-11 rounded-full bg-white/10 hover:bg-red-500 text-white flex items-center justify-center transition-all border border-white/20 select-none btn-close-image-preview" title="Tutup">
2670          <i class="ph-bold ph-x text-lg md:text-xl"></i>
2671        </button>
2672      </div>
2673    </div>
2674
2675    <!-- Image Wrapper -->
2676    <div class="relative w-full max-h-[75vh] flex items-center justify-center rounded-[1.5rem] md:rounded-[2rem] overflow-hidden bg-black/40 ring-1 ring-white/10 shadow-2xl backdrop-blur-sm group" id="globalImagePreviewWrapper">
2677      <!-- Loading spinner -->
2678      <div id="globalImagePreviewLoading" class="absolute inset-0 flex items-center justify-center bg-transparent">
2679        <div class="w-10 h-10 border-4 border-penyengat-green/30 border-t-penyengat-green rounded-full animate-spin"></div>
2680      </div>
2681      <!-- Image -->
2682      <img id="globalImagePreviewImg" src="" class="max-w-full max-h-[75vh] object-contain transition-opacity duration-500 opacity-0" alt="Pratinjau Gambar">
2683      
2684      <!-- Navigation Prev -->
2685      <button id="globalImagePreviewPrev" class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-black/50 hover:bg-penyengat-green text-white flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 backdrop-blur-sm border border-white/20 select-none hidden">
2686        <i class="ph-bold ph-caret-left text-2xl"></i>
2687      </button>
2688      
2689      <!-- Navigation Next -->
2690      <button id="globalImagePreviewNext" class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-black/50 hover:bg-penyengat-green text-white flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 backdrop-blur-sm border border-white/20 select-none hidden">
2691        <i class="ph-bold ph-caret-right text-2xl"></i>
2692      </button>
2693    </div>
2694    
2695  </div>
2696</div>
2697  <!-- Public Service Bottom Sheet / Modal -->
2698<div id="serviceModalOverlay" class="service-modal-overlay"></div>
2699<div id="serviceModal" class="service-modal-content">
2700    <!-- Bottom Sheet Handle (Mobile Only) -->
2701    <div class="md:hidden flex justify-center py-4">
2702        <div class="w-12 h-1.5 bg-slate-200 rounded-full"></div>
2703    </div>
2704
2705    <!-- Modal Header -->
2706    <div class="px-6 md:px-8 pb-4 pt-2 md:pt-8 flex justify-between items-start">
2707        <div class="max-w-[85%]">
2708            <h2 id="serviceModalTitle" class="text-xl md:text-2xl font-extrabold text-penyengat-dark tracking-tight leading-tight">Layanan</h2>
2709            <p id="serviceModalDesc" class="text-slate-500 text-sm mt-1 line-clamp-2"></p>
2710        </div>
2711        <button type="button" id="closeServiceModal" class="w-10 h-10 rounded-full bg-slate-50 text-slate-400 flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition-colors">
2712            <i class="ph-bold ph-x text-lg"></i>
2713        </button>
2714    </div>
2715
2716    <!-- Content Area -->
2717    <div class="modal-scroll flex-grow px-6 md:px-8 pb-8 pt-2 custom-scroll">
2718        <!-- Loading State -->
2719        <div id="serviceModalLoading" class="hidden py-12 flex flex-col items-center justify-center text-center">
2720            <div class="w-12 h-12 border-4 border-penyengat-softgreen border-t-penyengat-green rounded-full animate-spin mb
2720-4"></div>
2721            <p class="text-slate-400 text-sm font-medium">Memuat daftar layanan...</p>
2722        </div>
2723
2724        <!-- List Container -->
2725        <div id="serviceModalList" class="grid grid-cols-1 gap-3">
2726            <!-- JS will inject items here -->
2727        </div>
2728
2729        <!-- Empty State -->
2730        <div id="serviceModalEmpty" class="hidden py-12 text-center">
2731            <i class="ph-duotone ph-folder-open text-5xl text-slate-200 mb-3 block mx-auto"></i>
2732            <p class="text-slate-400 text-sm">Belum ada layanan tersedia untuk kategori ini.</p>
2733        </div>
2734    </div>
2735
2736    <!-- Footer Action (Optional) -->
2737    <div class="px-6 md:px-8 py-5 border-t border-slate-100 bg-slate-50/50 rounded-b-[2rem]">
2738        <a id="serviceModalAllLink" href="https://kepriprov.go.id/layanan" class="w-full inline-flex items-center justify-center gap-2 bg-white text-penyengat-green font-bold px-6 py-3 rounded-xl border border-slate-200 hover:border-penyengat-green transition-all shadow-sm">
2739            Lihat Semua Layanan <i class="ph-bold ph-arrow-right"></i>
2740        </a>
2741    </div>
2742</div>
2743
2744  <!-- Back to Top Button -->
2745  <button id="back-to-top"
2746    class="fixed bottom-24 right-6 md:bottom-8 md:right-8 z-[60] w-12 h-12 rounded-2xl bg-white shadow-float border border-slate-100 flex items-center justify-center text-penyengat-green transform translate-y-28 opacity-0 pointer-events-none transition-all duration-500 hover:bg-penyengat-green hover:text-white hover:-translate-y-1 group"
2747    aria-label="Kembali ke Atas">
2748    <i class="ph-bold ph-caret-up text-xl transition-transform group-hover:-translate-y-0.5"></i>
2749  </button>
2750
2751  <!-- Google Analytics (gtag.js) -->
vendor: 66 bytes, lines 2751-2752
2751
2752  <script async src="https://www.googletagmanager.com/gtag/js?id=
2752G-8CVWMJYEDX
vendor: 14 bytes, lines 2752-2753
2752"></script>
2753  
2753<script>
2754    
vendor: 142 bytes, lines 2754-2757
2754window.dataLayer = window.dataLayer || [];
2755    function gtag() { dataLayer.push(arguments); }
2756    gtag('js', new Date());
2757    gtag('config', '
2757G-8CVWMJYEDX
vendor: 6 bytes, lines 2757-2758
2757');
2758  
2758</script>
2758
2759
2760      <!-- CMS Kepri Analytics -->
2761    
2761<script>
2762      (function () {
2763        var apiToken = "cms_b51f711db3174048a0fc805932e77b34";
2764        var apiUrl = "https://cms.kepriprov.go.id/api/v1/analytics/track";
2765
2766        function getUtmParam(name) {
2767          var params = new URLSearchParams(window.location.search);
2768          return params.get(name) || null;
2769        }
2770
2771        function track() {
2772          var visitorId = localStorage.getItem('cms_visitor_id');
2773          var sessionId = sessionStorage.getItem('cms_session_id');
2774
2775          var payload = {
2776            url: window.location.href,
2777            title: document.title,
2778            referrer: document.referrer || null,
2779            visitorId: visitorId,
2780            sessionId: sessionId,
2781            utmSource: getUtmParam('utm_source'),
2782            utmMedium: getUtmParam('utm_medium'),
2783            utmCampaign: getUtmParam('utm_campaign'),
2784            screenResolution: window.screen.width + 'x' + window.screen.height,
2785            language: navigator.language || null,
2786            // userAgent di body sebagai fallback; IP real diambil dari CF-Connecting-IP header
2787            userAgent: navigator.userAgent || null,
2788          };
2789
2790          if (window.performance && window.performance.timing) {
2791            var t = window.performance.timing;
2792            if (t.loadEventEnd > 0) {
2793              payload.loadTime = t.loadEventEnd - t.navigationStart;
2794            }
2795          }
2796
2797          fetch(apiUrl, {
2798            method: 'POST',
2799            headers: { 'Content-Type': 'application/json', 'x-api-token': apiToken },
2800            body: JSON.stringify(payload)
2801          })
2802            .then(function (res) { return res.json(); })
2803            .then(function (data) {
2804              if (data.visitorId) localStorage.setItem('cms_visitor_id', data.visitorId);
2805              if (data.sessionId) sessionStorage.setItem('cms_session_id', data.sessionId);
2806            })
2807            .catch(function () { /* silent fail */ });
2808        }
2809
2810        if (document.readyState === 'complete') {
2811          track();
2812        } else {
2813          window.addEventListener('load', track);
2814        }
2815
2816        // SPA navigation support
2817        var _push = history.pushState;
2818        history.pushState = function () { _push.apply(history, arguments); setTimeout(track, 100); };
2819        window.addEventListener('popstate', track);
2820      })();
2821    </script>
2821
2822  
2823  <!-- Core Scripts -->
2824  
2824<script src="https://kepriprov.go.id/assets/js/particles.js"></script>
2824
2825  
2825<script src="https://kepriprov.go.id/assets/js/spa.js?v=20260506"></script>
2825
2826
2827<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a43b2b805f6f3d6e',t:'MTc5MDg1NDU4OQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
2827<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"4ad3abb0e76a43a29c5e459e7ef39cfe","r":1,"spa":2}' crossorigin="anonymous"></script>
2827
2828</body>
2829
2830</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.