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>Gubernur â Provinsi Kepulauan Rau</title> 11 <meta name="description" content="Gubernur"> 12 <meta name="robots" content="index, follow"> 13 14 <!-- Canonical URL --> 15 <link rel="canonical" href="https://kepriprov.go.id/laman/gubernur"> 16 17 <!-- Open Graph --> 18 <meta property="og:type" content="website"> 19 <meta property="og:title" content="Gubernur â Provinsi Kepulauan Rau"> 20 <meta property="og:description" content="Gubernur"> 21 <meta property="og:url" content="https://kepriprov.go.id/laman/gubernur"> 22 <meta property="og:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp"> 23 <meta property="og:image:alt" content="Gubernur â Provinsi Kepulauan Rau"> 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="Gubernur â Provinsi Kepulauan Rau"> 33 <meta name="twitter:description" content="Gubernur"> 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-slate-600 hover:text-penyengat-green">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-penyengat-green border-b-2 border-penyengat-yellow">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-penyengat-green bg-penyengat-softgreen/60">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-slate-700">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-penyengat-green"><span>Profil Pemda</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform rotate-180"></i></button><div id="m1-1-8b024091" class="accordion-content bg-slate-50 active"><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-penyengat-green"><span>Kepala Daerah</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs rotate-180"></i></button><div id="m1-1-8b024091-3-108f6edd" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 active"><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-penyengat-green bg-penyengat-softgreen/60 rounded-md">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<section class="relative pt-24 pb-16 md:pt-32 md:pb-16 bg-penyengat-dark overflow-hidden"> 374 <div class="absolute top-0 right-10 w-72 h-72 bg-penyengat-yellow rounded-full mix-blend-screen filter blur-[100px] opacity-20 animate-pulse pointer-events-none"></div> 375 <div class="absolute bottom-0 left-10 w-80 h-80 bg-penyengat-green rounded-full mix-blend-screen filter blur-[100px] opacity-40 pointer-events-none"></div> 376 377 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> 378 <nav class="flex justify-center mb-10 md:mb-14" aria-label="Breadcrumb"> 379 <ol class="inline-flex items-center space-x-1 md:space-x-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/20 shadow-sm"> 380 <li><a href="https://kepriprov.go.id/" class="inline-flex items-center text-xs font-medium text-green-100 hover:text-penyengat-yellow transition-colors">Beranda</a></li> 381 <li><i class="ph-bold ph-caret-right text-green-100/50 mx-1 text-xs"></i></li> 382 <li><span class="text-xs font-bold text-penyengat-yellow ml-1">Gubernur</span></li> 383 </ol> 384 </nav> 385 386 <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white tracking-tight leading-tight mb-6">Gubernur</h1> 387 <div class="flex justify-center items-center gap-2 text-xs md:text-sm text-green-100/70 font-bold tracking-widest"> 388 <i class="ph-fill ph-clock-counter-clockwise text-penyengat-yellow text-base"></i> 389 Terakhir Diperbarui: 28 April 2026 </div> 390 <div class="mt-3 flex justify-center items-center gap-2 text-xs md:text-sm text-green-100/70 font-bold tracking-widest"> 391 <i class="ph-fill ph-eye text-penyengat-yellow text-base"></i> 392 104,202 Tayangan 393 </div> 394 </div> 395</section> 396 397<section class="pt-16 md:pt-20 pb-16 md:pb-24 bg-white relative"> 398 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20"> 399 400 <article class="prose-portal max-w-none"> 401 <p><img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/49ff7e0b-0403-4c75-b24d-e9f00e8278c2.webp" alt="H. Ansar Ahmad, S.E., MM" style="border-radius: 0.5rem; width: auto; max-width: 100%; height: auto; display: block; margin: 0px auto; object-fit: contain;"></p><h1><strong>H. ANSAR AHMAD, S.E., MM</strong></h1><p>H. Ansar Ahmad, S.E., M.M. (lahir 10 April 1964) merupakan Gubernur Kepulauan Riau periode 2025-2030 yang berlatar belakang sebagai birokrat dan politikus senior. Sebagai lulusan S1 Ekonomi Universitas Riau dan S2 Magister Manajemen UHAMKA, perjalanan karier dimulai dari lingkungan pegawai negeri di Kabupaten Kepulauan Riau hingga mencapai posisi strategis sebagai Bupati Bintan selama dua periode (2005â2010 dan 2010â2015), serta sempat menjabat sebagai Anggota DPR RI pada tahun 2019. Transisi dari panggung legislatif nasional pada tahun 2020 dilakukan demi memfokuskan pengabdian di daerah, yang kemudian bermuara pada keberhasilan memimpin Provinsi Kepulauan Riau pada periode pertama, hingga kembali mendapat kepercayaan penuh dari masyarakat untuk melanjutkan tampuk kepemimpinan pada periode 2025-2030.</p><h2><strong>Riwayat Pendidikan</strong></h2><ul><li><p><strong>SD Negeri 3 Kijang, Bintan Timur</strong> Lulus Tahun 1977</p></li><li><p><strong>SMP Negeri 4 Tanjungpinang</strong> Lulus Tahun 1981</p></li><li><p><strong>SMA Negeri 2 Tanjungpinang</strong> Lulus Tahun 1985</p></li><li><p><strong>S1 Fakultas Ekonomi Universitas Riau</strong> Lulus Tahun 1989</p></li><li><p><strong>S2 Magister Manajemen Univ. Muhammadiyah Prof. Dr. Hamka</strong> Lulus Tahun 2003</p></li></ul><h2><strong>Riwayat Jabatan</strong></h2><ul><li><p><strong>Gubernur Kepulauan Riau</strong> <strong>2021 â Sekarang</strong></p></li><li><p><strong>Anggota DPR RI</strong> 2019 â 2020</p></li><li><p><strong>Bupati Bintan</strong> 2005 â 2015 (2 Periode)</p></li><li><p><strong>Wakil Bupati & Plt. Bupati Kepulauan Riau</strong> 2001 â 2004</p></li><li><p><strong>Kasubbag s/d Pj. Kabag Ekonomi Setda Kab. Kepri</strong> 1994 â 2000</p></li></ul><h2><strong>Laporan Harta Kekayaan Penyelenggara Negara (LHKPN)</strong></h2><p><strong>Tahun 2025</strong></p><div class="embed-document"><iframe src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/275c3c72-6cfa-4c02-9917-69f5e7987430.pdf" width="100%" height="600" frameborder="0" allowfullscreen="true"></iframe></div><p></p> </article> 402 403 <div class="mt-12 pt-8 border-t border-slate-100"> 404 <div class="flex flex-col md:flex-row md:items-center justify-between gap-6"> 405 <h4 class="text-slate-800 font-extrabold text-base tracking-tight">Bagikan Halaman</h4> 406 <div class="flex items-center gap-3"> 407 408<button 409 type="button" 410 class="w-full md:w-auto inline-flex items-center justify-center gap-2 bg-penyengat-green hover:bg-penyengat-dark text-white font-bold px-6 py-2.5 rounded-xl transition-all group" 411 data-share-trigger="1" 412 data-share-url="https://kepriprov.go.id/laman/gubernur" 413 data-share-title="Gubernur" 414> 415 <i class="ph-fill ph-share-network text-lg group-hover:rotate-12 transition-transform"></i> 416 Bagikan</button> 417 </div> 418 </div> 419 </div> 420 </div> 421</section> 422 </main> 423 424 <footer 425 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)]"> 426 <!-- Batik Frame Border Top --> 427 <div class="absolute top-0 left-0 w-full h-8 md:h-12 z-20 opacity-100" 428 style="background-image: url('https://kepriprov.go.id/assets/media/patterns-batik-2.png'); background-repeat: repeat-x; background-size: auto 100%;"> 429 </div> 430
431 <!-- Footer Pattern Background --> 432 <div class="absolute inset-0 z-0 pointer-events-none" 433 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;"> 434 </div> 435 436 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> 437 438 <!-- ââ TOP GRID ââ --> 439 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-20 mb-12 pb-12"> 440 441 <!-- Col 1: Identitas Instansi + Kontak + Sosmed --> 442 <div class="lg:col-span-4"> 443 <!-- Logo & nama --> 444 <div class="flex items-center gap-4 mb-8"> 445 <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"> 446 <div class="border-l border-white/10 pl-4"> 447 <p class="text-white font-semibold text-sm tracking-tight leading-tight uppercase">Portal Pemerintah Provinsi Kepulauan Riau</p> 448 </div> 449 </div> 450 451 <!-- Alamat --> 452 <p class="text-sm leading-relaxed mb-6 max-w-sm text-green-50/60 font-normal"> 453 Pusat Pemerintahan Provinsi Kepulauan Riau Istana Kota Piring Gedung Sultan Mahmud Riayat Syah, Pulau Dompak, Kec. Bukit Bestari, Kota Tanjungpinang. </p> 454 455 <p 456 class="text-xs text-green-50/40 font-medium leading-relaxed max-w-xs mt-8 italic border-t border-white/5 pt-6"> 457 Portal ini dikembangkan dan dikelola oleh Dinas Komunikasi dan Informatika Provinsi Kepulauan Riau. 458 </p> 459 </div> 460 461 <!-- Col 2: Navigasi Portal --> 462 <div class="lg:col-span-3"> 463 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 464 Navigasi Utama 465 </h3> 466 <ul class="space-y-4"> 467 <li> 468 <a href="https://kepriprov.go.id/profil" 469 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 470 <span 471 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Profil Pimpinan</span> 472 </a> 473 </li> 474 <li> 475 <a href="https://kepriprov.go.id/laman/visi-misi" 476 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 477 <span 478 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Visi & Misi Daerah</span> 479 </a> 480 </li> 481 <li> 482 <a href="https://kepriprov.go.id/berita" 483 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 484 <span 485 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Berita & Siaran Pers</span> 486 </a> 487 </li> 488 <li> 489 <a href="https://kepriprov.go.id/agenda" 490 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 491 <span 492 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Agenda Kegiatan</span> 493 </a> 494 </li> 495 <li> 496 <a href="https://kepriprov.go.id/program" 497 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 498 <span 499 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Program Unggulan</span> 500 </a> 501 </li> 502 <li> 503 <a href="https://kepriprov.go.id/proyek" 504 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 505 <span 506 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Proyek Strategis</span> 507 </a> 508 </li> 509 <li> 510 <a href="https://kepriprov.go.id/dokumen" 511 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
512 <span 513 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Dokumen & Laporan</span> 514 </a> 515 </li> 516 <li> 517 <a href="https://kepriprov.go.id/#kontak" 518 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 519 <span 520 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Kontak & Bantuan</span> 521 </a> 522 </li> 523 </ul> 524 </div> 525 526 <!-- Col 3: Informasi Publik --> 527 <div class="lg:col-span-3"> 528 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 529 Tautan Terintegrasi 530 </h3> 531 <ul class="space-y-4"> 532 <li> 533 <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"> 534 <span 535 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal PPID Kepri</span> 536 </a> 537 </li> 538 <li> 539 <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"> 540 <span 541 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">JDIH Produk Hukum</span> 542 </a> 543 </li> 544 <li> 545 <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"> 546 <span 547 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Satu Data Kepri</span> 548 </a> 549 </li> 550 <li> 551 <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"> 552 <span 553 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal SP4N LAPOR!</span> 554 </a> 555 </li> 556 <li> 557 <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"> 558 <span 559 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">LPSE Pengadaan</span> 560 </a> 561 </li> 562 <li> 563 <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"> 564 <span 565 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Beasiswa Kepri</span> 566 </a> 567 </li> 568 <li> 569 <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"> 570 <span 571 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Simpadu Perizinan</span> 572 </a> 573 </li> 574 <li> 575 <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"> 576 <span 577 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Info Pajak Kendaraan</span> 578 </a> 579 </li> 580 </ul> 581 </div> 582
583 <!-- Col 4: Statistik --> 584 <div class="lg:col-span-2"> 585 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 586 Visitor 587 </h3> 588 589 <!-- Visitor Stats --> 590 <div class="space-y-4"> 591 <div 592 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"> 593 <p 594 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-penyengat-yellow/50 transition-colors"> 595 Online</p> 596 <p id="visitor-online" class="text-2xl font-bold text-penyengat-yellow leading-none"> 597 0 </p> 598 </div> 599 <div 600 class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-white/30 transition-colors group"> 601 <p 602 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-white/50 transition-colors"> 603 Hari Ini</p> 604 <p id="visitor-today" class="text-2xl font-bold text-white leading-none"> 605 0 </p> 606 </div> 607 <div 608 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"> 609 <p 610 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-green-400/50 transition-colors"> 611 Kemarin</p> 612 <p id="visitor-yesterday" class="text-xl font-bold text-green-400 leading-none"> 613 0 </p> 614 </div> 615 </div> 616 </div> 617 618 </div> 619 620 <!-- ââ BOTTOM BAR ââ --> 621 <div 622 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"> 623 <div class="flex items-center gap-4 flex-col md:flex-row text-center md:text-left"> 624 <p> 625 © 2026 Dinas Komunikasi & Informatika Provinsi Kepulauan Riau.<br class="md:hidden"> Hak 626 Cipta Dilindungi. 627 </p> 628 </div> 629 <div class="flex gap-6 md:gap-8 justify-center flex-wrap tracking-wider text-[10px]"> 630 <a href="https://kepriprov.go.id/laman/kebijakan-privasi" 631 class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Kebijakan 632 Privasi</a> 633 <a href="https://kepriprov.go.id/laman/ketentuan-penggunaan" 634 class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Ketentuan 635 Penggunaan</a> 636 </div> 637 </div> 638 </div> 639</footer> <!-- Floating Action Menu --> 640<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"> 641 642 <!-- Survei / Penilaian --> 643 <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]" 644 style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);"> 645 <span class="text-[10px] md:text-xs font-extrabold tracking-tight leading-none">Survei Kepuasan Masyarakat</span> 646 </button> 647 648 649 650</div> 651 652 <div id="survey-modal" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/70 p-0" 653 aria-hidden="true" role="dialog" aria-modal="true" aria-label="Survei Kepuasan" style="z-index: 99999;"> 654 <div class="relative z-[100000] h-full w-full overflow-hidden bg-white shadow-2xl" 655 style="z-index: 100000; width: 100%; height: 100%;"> 656 <div class="flex h-14 items-center justify-between border-b px-4 py-3 bg-white"> 657 <h3 class="text-sm font-bold text-slate-800 md:text-base">Survei Kepuasan Masyarakat</h3> 658 <button type="button" id="btn-close-survey-modal" 659 class="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900" 660 aria-label="Tutup dialog survei"> 661 <i class="ph-bold ph-x text-lg"></i> 662 </button> 663 </div> 664 <iframe id="survey-modal-iframe" title="Widget Survei Kepuasan" class="w-full border-none" 665 style="height: calc(100% - 56px); width: 100%;" src="about:blank"
666 loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe> 667 </div> 668 </div> 669 670
670<script> 671 (function () { 672 const openBtn = document.getElementById('btn-open-survey-modal'); 673 const modal = document.getElementById('survey-modal'); 674 const closeBtn = document.getElementById('btn-close-survey-modal'); 675 const iframe = document.getElementById('survey-modal-iframe'); 676 if (!openBtn || !modal || !closeBtn || !iframe) return; 677 678 const surveyUrl = openBtn.getAttribute('data-survey-url') || ''; 679 if (!surveyUrl || surveyUrl === '#') return; 680 681 const openModal = () => { 682 iframe.setAttribute('src', surveyUrl); 683 modal.classList.remove('hidden'); 684 modal.classList.add('flex'); 685 modal.setAttribute('aria-hidden', 'false'); 686 document.body.classList.add('overflow-hidden'); 687 document.documentElement.classList.add('overflow-hidden'); 688 }; 689 690 const closeModal = () => { 691 modal.classList.add('hidden'); 692 modal.classList.remove('flex'); 693 modal.setAttribute('aria-hidden', 'true'); 694 iframe.setAttribute('src', 'about:blank'); 695 document.body.classList.remove('overflow-hidden'); 696 document.documentElement.classList.remove('overflow-hidden'); 697 }; 698 699 openBtn.addEventListener('click', openModal); 700 closeBtn.addEventListener('click', closeModal); 701 })(); 702 </script>
702 703 <!-- Global Image Preview Modal --> 704<div id="globalImagePreviewModal" class="fixed inset-0 z-[100] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300"> 705 <!-- Backdrop --> 706 <div class="absolute inset-0 bg-slate-900/95 backdrop-blur-md cursor-zoom-out btn-close-image-preview"></div> 707 708 <!-- Content Container --> 709 <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"> 710 711 <!-- Top Bar --> 712 <div class="w-full flex items-start justify-between gap-4 mb-4 md:mb-6 px-2"> 713 <div class="text-white flex-1 min-w-0"> 714 <h3 id="globalImagePreviewTitle" class="text-lg md:text-xl text-white font-extrabold truncate">Pratinjau Gambar</h3> 715 <p id="globalImagePreviewCaption" class="text-sm text-green-100/70 mt-1 line-clamp-2 md:w-3/4 hidden"></p> 716 </div> 717 <div class="flex items-center gap-2 shrink-0"> 718 <a href="#" id="globalImagePreviewDownload" download 719 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"> 720 <i class="ph-bold ph-download-simple text-lg md:text-xl"></i> 721 </a> 722 <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"> 723 <i class="ph-bold ph-x text-lg md:text-xl"></i> 724 </button> 725 </div> 726 </div> 727 728 <!-- Image Wrapper --> 729 <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"> 730 <!-- Loading spinner --> 731 <div id="globalImagePreviewLoading" class="absolute inset-0 flex items-center justify-center bg-transparent"> 732 <div class="w-10 h-10 border-4 border-penyengat-green/30 border-t-penyengat-green rounded-full animate-spin"></div> 733 </div> 734 <!-- Image --> 735 <img id="globalImagePreviewImg" src="" class="max-w-full max-h-[75vh] object-contain transition-opacity duration-500 opacity-0" alt="Pratinjau Gambar"> 736 737 <!-- Navigation Prev --> 738 <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"> 739 <i class="ph-bold ph-caret-left text-2xl"></i> 740 </button> 741 742 <!-- Navigation Next --> 743 <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"> 744 <i class="ph-bold ph-caret-right text-2xl"></i> 745 </button> 746 </div> 747 748 </div> 749</div> 750 <!-- Public Service Bottom Sheet / Modal --> 751<div id="serviceModalOverlay" class="service-modal-overlay"></div> 752<div id="serviceModal" class="service-modal-content"> 753 <!-- Bottom Sheet Handle (Mobile Only) --> 754 <div class="md:hidden flex justify-center py-4"> 755 <div class="w-12 h-1.5 bg-slate-200 rounded-full"></div> 756 </div> 757 758 <!-- Modal Header --> 759 <div class="px-6 md:px-8 pb-4 pt-2 md:pt-8 flex justify-between items-start"> 760 <div class="max-w-[85%]"> 761 <h2 id="serviceModalTitle" class="text-xl md:text-2xl font-extrabold text-penyengat-dark tracking-tight leading-tight">Layanan</h2> 762 <p id="serviceModalDesc" class="text-slate-500 text-sm mt-1 line-clamp-2"></p> 763 </div> 764 <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"> 765 <i class="ph-bold ph-x text-lg"></i> 766 </button> 767 </div> 768 769 <!-- Content Area --> 770 <div class="modal-scroll flex-grow px-6 md:px-8 pb-8 pt-2 custom-scroll"> 771 <!-- Loading State --> 772 <div id="serviceModalLoading" class="hidden py-12 flex flex-col items-center justify-center text-center"> 773 <div class="w-12 h-12 border-4 border-penyengat-softgreen border-t-penyengat-green rounded-full animate-spin mb
773-4"></div> 774 <p class="text-slate-400 text-sm font-medium">Memuat daftar layanan...</p> 775 </div> 776 777 <!-- List Container --> 778 <div id="serviceModalList" class="grid grid-cols-1 gap-3"> 779 <!-- JS will inject items here --> 780 </div> 781 782 <!-- Empty State --> 783 <div id="serviceModalEmpty" class="hidden py-12 text-center"> 784 <i class="ph-duotone ph-folder-open text-5xl text-slate-200 mb-3 block mx-auto"></i> 785 <p class="text-slate-400 text-sm">Belum ada layanan tersedia untuk kategori ini.</p> 786 </div> 787 </div> 788 789 <!-- Footer Action (Optional) --> 790 <div class="px-6 md:px-8 py-5 border-t border-slate-100 bg-slate-50/50 rounded-b-[2rem]"> 791 <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"> 792 Lihat Semua Layanan <i class="ph-bold ph-arrow-right"></i> 793 </a> 794 </div> 795</div> 796 797 <!-- Back to Top Button --> 798 <button id="back-to-top" 799 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" 800 aria-label="Kembali ke Atas"> 801 <i class="ph-bold ph-caret-up text-xl transition-transform group-hover:-translate-y-0.5"></i> 802 </button> 803 804 <!-- Google Analytics (gtag.js) -->
vendor: 66 bytes, lines 804-805
804 805 <script async src="https://www.googletagmanager.com/gtag/js?id=
805G-8CVWMJYEDX
vendor: 14 bytes, lines 805-806
805"></script> 806
806<script> 807
vendor: 142 bytes, lines 807-810
807window.dataLayer = window.dataLayer || []; 808 function gtag() { dataLayer.push(arguments); } 809 gtag('js', new Date()); 810 gtag('config', '
810G-8CVWMJYEDX
vendor: 6 bytes, lines 810-811
810'); 811
811</script>
811 812 813 <!-- CMS Kepri Analytics --> 814
814<script> 815 (function () { 816 var apiToken = "cms_b51f711db3174048a0fc805932e77b34"; 817 var apiUrl = "https://cms.kepriprov.go.id/api/v1/analytics/track"; 818 819 function getUtmParam(name) { 820 var params = new URLSearchParams(window.location.search); 821 return params.get(name) || null; 822 } 823 824 function track() { 825 var visitorId = localStorage.getItem('cms_visitor_id'); 826 var sessionId = sessionStorage.getItem('cms_session_id'); 827 828 var payload = { 829 url: window.location.href, 830 title: document.title, 831 referrer: document.referrer || null, 832 visitorId: visitorId, 833 sessionId: sessionId, 834 utmSource: getUtmParam('utm_source'), 835 utmMedium: getUtmParam('utm_medium'), 836 utmCampaign: getUtmParam('utm_campaign'), 837 screenResolution: window.screen.width + 'x' + window.screen.height, 838 language: navigator.language || null, 839 // userAgent di body sebagai fallback; IP real diambil dari CF-Connecting-IP header 840 userAgent: navigator.userAgent || null, 841 }; 842 843 if (window.performance && window.performance.timing) { 844 var t = window.performance.timing; 845 if (t.loadEventEnd > 0) { 846 payload.loadTime = t.loadEventEnd - t.navigationStart; 847 } 848 } 849 850 fetch(apiUrl, { 851 method: 'POST', 852 headers: { 'Content-Type': 'application/json', 'x-api-token': apiToken }, 853 body: JSON.stringify(payload) 854 }) 855 .then(function (res) { return res.json(); }) 856 .then(function (data) { 857 if (data.visitorId) localStorage.setItem('cms_visitor_id', data.visitorId); 858 if (data.sessionId) sessionStorage.setItem('cms_session_id', data.sessionId); 859 }) 860 .catch(function () { /* silent fail */ }); 861 } 862 863 if (document.readyState === 'complete') { 864 track(); 865 } else { 866 window.addEventListener('load', track); 867 } 868 869 // SPA navigation support 870 var _push = history.pushState; 871 history.pushState = function () { _push.apply(history, arguments); setTimeout(track, 100); }; 872 window.addEventListener('popstate', track); 873 })(); 874 </script>
874 875 876 <!-- Core Scripts --> 877
877<script src="https://kepriprov.go.id/assets/js/particles.js"></script>
877 878
878<script src="https://kepriprov.go.id/assets/js/spa.js?v=20260506"></script>
878 879
880<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>
vendor: 1 bytes, line 880
880
881<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:'a43b2bee1f7a3d6e',t:'MTc5MDg1NDYwNw=='};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>
881</body> 882 883</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.