PageSourceSearch

https://kepriprov.go.id/laman/visi-dan-misi

html kepriprov.go.id collected 2026-10-01 11:36:46 UTC 54,692 bytes, 883 lines download raw bytes

1<!doctype html>
2<html lang="id" class="scroll-smooth">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
9  
10  <title>Visi dan Misi – Provinsi Kepulauan Rau</title>
11  <meta name="description" content="Visi dan Misi">
12  <meta name="robots" content="index, follow">
13
14  <!-- Canonical URL -->
15  <link rel="canonical" href="https://kepriprov.go.id/laman/visi-dan-misi">
16
17  <!-- Open Graph -->
18  <meta property="og:type" content="website">
19  <meta property="og:title" content="Visi dan Misi – Provinsi Kepulauan Rau">
20  <meta property="og:description" content="Visi dan Misi">
21  <meta property="og:url" content="https://kepriprov.go.id/laman/visi-dan-misi">
22  <meta property="og:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp">
23  <meta property="og:image:alt" content="Visi dan Misi – 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="Visi dan Misi – Provinsi Kepulauan Rau">
33  <meta name="twitter:description" content="Visi dan Misi">
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-penyengat-green bg-penyengat-softgreen/60">Visi dan Misi</a></li><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Perangkat Derah</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu
250-gap">Kepala Daerah<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Ketua DPRD</a></li></ul></div></li></ul></div></li>                      <li class="h-full flex items-center"><a href="https://kepriprov.go.id/layanan" class="px-3 py-2 text-sm font-semibold transition-colors relative text-slate-600 hover:text-penyengat-green">Layanan</a></li>                      <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Publikasi<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/berita" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Pengumuman</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu-gap">Statistik<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Aset Multimedia</a></li></ul></div></li>                      <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/dokumen" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Dokumen &amp; Peraturan<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/dokumen" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Produk Hukum (JDIH)</a></li></ul></div></li>                  </ul>
251
252        <a href="https://kepriprov.go.id/pencarian" id="btn-search-nav"
253          class="w-10 h-10 ml-4 rounded-full bg-penyengat-softgreen flex items-center justify-center text-penyengat-green hover:bg-penyengat-yellow hover:text-white transition shadow-sm hover:shadow-glow shrink-0"
254          title="Pencarian">
255          <i class="ph ph-magnifying-glass text-lg"></i>
256        </a>
257      </div>
258
259      <!-- Mobile menu button -->
260      <div class="lg:hidden flex items-center">
261        <button id="btn-mobile-menu" class="text-penyengat-green hover:text-penyengat-yellow focus:outline-none p-2"
262          aria-label="Menu">
263          <i class="ph ph-list text-3xl"></i>
264        </button>
265      </div>
266    </div>
267  </div>
268
269  <!-- Mobile Menu Overlay & Panel (Full Screen Drawer) -->
270  <div id="mobile-menu-wrapper" class="fixed inset-0 z-[100] hidden">
271    <div id="mobile-backdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm op
271acity-0 mobile-menu-overlay"></div>
272
273    <div id="mobile-panel"
274      class="absolute inset-0 w-full h-full max-w-none bg-white shadow-2xl transform translate-y-full mobile-menu-panel flex flex-col">
275
276      <div class="flex items-center justify-between p-5 border-b border-slate-200">
277        <div class="flex items-center gap-2">
278          <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/fe699190-71f5-4eda-a63d-d6416df27cd1.png" alt="Logo" class="h-8">
279          <span class="font-bold text-penyengat-green">Menu Navigasi</span>
280        </div>
281        <button id="btn-close-menu"
282          class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition-colors"
283          type="button">
284          <i class="ph-bold ph-x text-lg"></i>
285        </button>
286      </div>
287
288      <div class="flex-grow overflow-y-auto pb-8 custom-scroll">
289        <ul class="flex flex-col w-full">
290                      <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-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-penyengat-green bg-penyengat-softgreen/60 rounded-lg">Visi dan Misi</a></li><li><a href="#" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Perangkat Derah</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-1-8b024091-3-108f6edd', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Kepala Daerah</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-1-8b024091-3-108f6edd" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Ketua DPRD</a></li></ul></div></li></ul></div></li>                      <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/layanan" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700">Layanan</a></li>                      <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Publikasi</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-3-219bddd0" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/berita" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Pengumuman</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0-3-77c23c3f', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Statistik</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-3-219bddd0-3-77c23c3f" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="#" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Aset Multimedia</a></li></ul></div></li>                      <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-4-f487b38b', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Dokumen &amp; Peraturan</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-4-f487b38b" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/dokumen" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Produk Hukum (JDIH)</a></li></ul></div></li>                  </ul>
291      </div>
292    </div>
293  </div>
294</nav>
295
296<script>
297  // ── Sticky navbar ─────────────────────────────────────────────────────────
298  window.addEventListener('scroll', () => {
299    document.getElementById('navbar').classList.toggle('shadow-md', window.scrollY > 20);
300  });
301
302  // ── Mobile menu toggle (drawer) ───────────────────────────────────────────
303  const btnMenu = document.getElementById('btn-mobile-menu');
304  const btnCloseMenu = document.getElementById('btn-close-menu');
305  const mobileMenuWrapper = document.getElementById('mobile-menu-wrapper');
306  const mobileBackdrop = document.getElementById('mobile-backdrop');
307  const mobilePanel = document.getElementById('mobile-panel');
308
309  window.openMobileMenu = function() {
310    if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return;
311    mobileMenuWrapper.classList.remove('hidden');
312      setTimeout(() => {
313        mobileBackdrop.classList.remove('opacity-0');
314        mobilePanel.classList.remove('translate-y-full');
315        document.body.style.overflow = 'hidden';
316      }, 10);
317  }
318
319  window.closeMobileMenu = function() {
320    if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return;
321    mobileBackdrop.classList.add('opacity-0');
322    mobilePanel.classList.add('translate-y-full');
323    document.body.style.overflow = 'auto';
324
325    setTimeout(() => {
326      mobileMenuWrapper.classList.add('hidden');
327    }, 300);
328  }
329
330  if (btnMenu) btnMenu.addEventListener('click', openMobileMenu);
331  if (btnCloseMenu) btnCloseMenu.addEventListener('click', closeMobileMenu);
332  if (mobileBackdrop) mobileBackdrop.addEventListener('click', closeMobileMenu);
333
334  // Auto-close mobile menu when an internal link is clicked (excluding dropdown triggers)
335  if (mobilePanel) {
336    mobilePanel.addEventListener('click', (e) => {
337      const link = e.target.closest('a');
338      if (link) {
339        const href = link.getAttribute('href');
340        // Close only if it's an internal link (not starting with http/https unless it's the same domain)
341        // and it's not a dropdown toggle (though mobile uses buttons for toggles, let's be safe)
342        const isExternal = href.startsWith('http') && !href.includes(window.location.hostname);
343        const isAnchor = href.startsWith('#');
344        
345        if (!isExternal && !isAnchor) {
346          closeMobileMenu();
347        }
348      }
349    });
350  }
351
352  // ── Mobile accordion ──────────────────────────────────────────────────────
353  function toggleAccordion(contentId, buttonElement) {
354    const content = document.getElementById(contentId);
355    const icon = buttonElement.querySelector('i');
356
357    if (!content) return;
358
359    if (content.classList.contains('active')) {
360      content.classList.remove('active');
361      if (icon) icon.classList.remove('rotate-180');
362      buttonElement.classList.remove('text-penyengat-green');
363    } else {
364      content.classList.add('active');
365      if (icon) icon.classList.add('rotate-180');
366      buttonElement.classList.add('text-penyengat-green');
367    }
368  }
369</script>
369
370
371  <main id="main-content">
372    
373<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">Visi dan Misi</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">Visi dan Misi</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: 07 Juli 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      25,200 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              <h3>Pemerintah Provinsi Kepulauan Riau</h3><p><strong>VISI :</strong></p><p>"Terwujudnya Kepulauan Riau yang Maju, Makmur, dan Merata"</p><p><strong>MISI :</strong></p><ol><li><p>Meningkatkan Pertumbuhan dan Pemerataan Ekonomi Berbasis Maritim dan Keunggulan Wilayah</p></li><li><p>Meningkatkan Pemerataan Pembangunan Infrastruktur dan Konektivitas Antar Wilayah</p></li><li><p>Mewujudkan Pemerataan dan Meningkatkan Kualitas Sumber Daya Manusia yang berdaya Saing dan berkarakter</p></li><li><p>Melaksanakan Tata Kelola Pemerintahan yang Bersih, Demokratis, Terbuka, Berbasis Teknologi Informasi dan Berorientasi Pelayanan</p></li><li><p>Mengembangkan dan Melestarikan Budaya Melayu dan Nasional serta Ekologi dalam Mendukung Pembangunan Berkelanjutan</p></li></ol><p>&nbsp;</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/visi-dan-misi"
413  data-share-title="Visi dan Misi"
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 &amp; 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 &amp; 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 &amp; 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 &amp; 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              92            </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              27,945            </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              30,323            </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          &copy; 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>(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:'a43b2bdc2e613d6e',t:'MTc5MDg1NDYwNA=='};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>
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>
880
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.