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 & 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 & 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='[{"title":"Daftar Informasi Publik","description":"Katalog informasi yang tersedia bagi masyarakat","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/d46a1698-1ca6-4844-9403-576c25aa3a59_thumb.webp","target_url":"https:\/\/ppid.kepriprov.go.id\/daftar-informasi","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Informasi Berkala","description":"Data dan informasi yang diterbitkan secara rutin.","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/40b333ec-0b74-4a9f-a15c-9a2e7ce95450_thumb.webp","target_url":"https:\/\/ppid.kepriprov.go.id\/laman\/ringkasan-informasi-berkala","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"PPID Pelaksana","description":"Daftar Pejabat Pengelola Informasi dan Dokumentasi di setiap OPD","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/28f3d713-2d45-4ec4-9995-9ff7502c9165_thumb.webp","target_url":"https:\/\/ppid.kepriprov.go.id\/daftar-ppid","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Produk Hukum (JIDH)","description":"Jaringan Dokumentasi dan Informasi Hukum Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/6b86d54e-2f30-4c07-a441-fc3182f17fa5_thumb.webp","target_url":"https:\/\/jdih.kepriprov.go.id\/dokumenhukum.phtml","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Portal Satu Data","description":"Integrasi data antar OPD dalam rangka satu data Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2f24481d-25b2-4663-a2df-6e4d3ff51e8e_thumb.webp","target_url":"https:\/\/satudata.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Dashboard Keuangan","description":"Visualisasi data keuangan daerah secara transparan","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/586e1f3d-f99a-4be1-b1fb-b85b0bf63b8f_thumb.webp","target_url":"http:\/\/dashboard.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"}]' 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='[{"title":"SILAT Kepri","description":"Sistem Informasi Layanan Aparatur Terpadu","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/ea38ae8
6111-7926-450f-b771-d049cca98c6c_thumb.webp","target_url":"https:\/\/silat.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIMANJA Kepri","description":"Sistem Informasi Manajemen Kinerja ASN","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/814faae8-7bc0-4780-8a64-1b5db28fe7ce_thumb.webp","target_url":"https:\/\/simanja.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIAP Kepri","description":"Sistem Informasi Aktivitas & Presensi ASN","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/6b2b9f24-44db-4139-ab95-c4bf1c76636a_thumb.webp","target_url":"https:\/\/siap.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"LIGAT Kepri","description":"Aplikasi Ruang Belajar Online untuk Aparatur Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/a0594f9e-06f9-40a4-9062-0a9f00511193_thumb.webp","target_url":"https:\/\/bpsdm.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIAPRI Kepri","description":"Sistem Aplikasi Penyusunan Rencana Kebutuhan Barang Milik Daerah","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/fe699190-71f5-4eda-a63d-d6416df27cd1.png","target_url":"https:\/\/www.siapri.bkad.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Manajemen Talenta","description":"Sistem pemetaan potensi dan pengembangan karier ASN Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/3d969186-2404-4832-9410-ff7f18338ee5_thumb.webp","target_url":"https:\/\/talenta.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SRIKANDI","description":"Sistem Informasi Kearsipan Dinamis Terintegrasi Nasional","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/46bd001b-ade3-4be3-a597-4c2b2bbd9e9f_thumb.webp","target_url":"https:\/\/srikandi.arsip.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Pendaftaran TTE","description":"Permohonan Tanda Tangan Elektronik ASN & OPD","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/fd4b46b7-cdf6-4cd7-99ca-49aaca43d797_thumb.webp","target_url":"https:\/\/kepriprov.go.id\/tte","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Webmail Kepriprov","description":"Akses email resmi pegawai Pemprov Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/4f0efdf6-69ce-486f-9b67-f49ffb419b81_thumb.webp","target_url":"https:\/\/webmail.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"}]' 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='[{"title":"JAMKESDA","description":"
627Layanan Jaminan Kesehatan Daerah untuk warga tidak mampu","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/97ea5a5a-bb44-4781-9c8b-a2f68e67ba11_thumb.webp","target_url":"https:\/\/www.dinkesprovkepri.org\/layanan\/jamkesmas","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIBADANG","description":"Sistem Informasi & Bank Data Kesehatan Kepri Gemilang","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/84e63bbc-44e9-427b-80d3-183ada18e2a1_thumb.webp","target_url":"http:\/\/sibadang.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Izin & Rekom Dinkes","description":"Layanan perizinan fasilitas & tenaga kesehatan","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/a3a09d55-4df4-42ca-810c-3a22a68dec7f_thumb.webp","target_url":"https:\/\/www.dinkesprovkepri.org\/layanan\/rekomendasi","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Rumah Singgah Kepri","description":"Fasilitas tempat tinggal sementara bagi warga berobat ke luar daerah","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2466f2f1-cc1f-43ac-9f74-1a2bcb99bf69_thumb.webp","target_url":"https:\/\/rumsing.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"RSUD Raja Ahmad Tabib","description":"Rumah Skit Umum Daerah Raja Ahmad Tabib","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/745f51ec-246f-41b7-9ed6-ce866f0728a0_thumb.webp","target_url":"https:\/\/rsudtpi.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"RSJKO Engku Haji Daud","description":"Rumah Sakit Jiwa dan Ketergantungan Obat Engku Haji Daud","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/03cd3c3f-c7c1-4055-9f9c-8b394c2d6afd_thumb.webp","target_url":"https:\/\/rsjkoehd.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"}]' 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='[{"title":"SISPMB 2025\/2026","description":"Sistem Penerimaan Murid Baru SMA\/SMK\/SLB Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/e2fd17b
6436-d091-4e39-a8ac-611d3a5ad61a_thumb.webp","target_url":"https:\/\/sispmb.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Beasiswa Kepri 2025","description":"Program bantuan pendidikan untuk mahasiswa\/i Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/dd3aa92a-541b-4380-961e-a77ba259702c_thumb.webp","target_url":"https:\/\/beasiswa.kepriprov.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"Layanan Dinas Pendidikan","description":"Informasi dan layanan dari Dinas Pendidikan Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2d0c210d-a29a-4739-a01a-e77cecb6b88a_thumb.webp","target_url":"https:\/\/dinaspendidikan.kepriprov.go.id\/laman\/standar-pelayanan-publik","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"iKepri Digital Library","description":"Akses perpustakaan digital untuk pelajar dan masyarakat umum","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/2df2d825-d6f7-46ed-8948-5e74b13723b8_thumb.webp","target_url":"https:\/\/ikepri.kepriprov.go.id\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"}]' 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 & 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 & 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 & Perizinan" data-desc="" 675 data-services='[{"title":"OSS","description":"Perizinan Usaha Berbasis Risiko secara nasional","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/4315e1bd-686d-4cb4-9745-f86a6d054b75_thumb.webp","target_url":"https:\/\/oss.go.id","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIJARIMU","description":"Sistem Informasi Perizinan Non-OSS Daerah","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/bf561b3b-8c54-4df6-9e75-294f096be6d6_thumb.webp","target_url":"https:\/\/sijarimu-v2.kepri.pro\/app\/login","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"},{"title":"SIDASI","description":"Sistem Informasi Data & Investasi Daerah Kepri","icon":"https:\/\/cms.kepriprov.go.id\/api\/files\/uploads\/2026\/04\/cf53ef71-23f8-4fcd-b133-1124b7ba1f13_thumb.webp","target_url":"https:\/\/sidasi.kepri.pro\/","is_external":true,"agency":"Pemerintah Provinsi Kepulauan Riau"}]' 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 © 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.