1<!DOCTYPE html> 2<html lang="id"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>SELASAR RIAU - Portal Terintegrasi Provinsi Riau</title> 7 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 9 <style> 10 .hero-section { 11 background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1596401057633-54a8fe8ef647?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover; 12 color: white; 13 padding: 100px 0; 14 } 15 .service-card:hover { transform: translateY(-5px); transition: 0.3s; cursor: pointer; } 16 17 /* --- CSS MEGA MENU (PPID & DATA RIAU) --- */ 18 @media (min-width: 992px) { 19 .mega-menu-container { position: static !important; } 20 .mega-menu { 21 width: 100%; max-width: 1140px; left: 50% !important; transform: translateX(-50%) !important; 22 background-color: #ffffff; border: 1px solid rgba(0,0,0,0.05); border-radius: 20px; 23 padding: 35px 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.1); margin-top: 15px !important; 24 } 25 } 26 .mega-menu-header { border-bottom: 2px solid #f0f0f0; padding-bottom: 15px; margin-bottom: 25px; display: flex; align-items: center; } 27 .mega-menu-header-title { color: #0B5345; font-weight: 800; font-size: 1.3rem; margin: 0; } 28 .mega-menu-item { display: flex; align-items: flex-start; padding: 20px; border-radius: 16px; transition: all 0.3s; text-decoration: none; color: inherit; } 29 .mega-menu-item:hover { background-color: #ffffff; border-color: rgba(25, 135, 84, 0.2); transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); } 30 .mega-menu-icon { background-color: rgba(25, 135, 84, 0.08); color: #198754; width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; margin-right: 20px; transition: all 0.3s; } 31 .mega-menu-item:hover .mega-menu-icon { background-color: #F4D03F; color: #ffffff; transform: scale(1.1) rotate(-5deg); box-shadow: 0 5px 15px rgba(244, 208, 63, 0.4); } 32 .mega-menu-title { font-weight: 700; font-size: 1.1rem; color: #2b2b2b; margin-bottom: 6px; } 33 .mega-menu-item:hover .mega-menu-title { color: #198754; } 34 .mega-menu-desc { font-size: 0.88rem; color: #6c757d; line-height: 1.5; margin-bottom: 0; } 35 </style> 36</head> 37<body> 38 39 <nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top shadow-sm py-2"> 40 <div class="container"> 41 42 <a class="navbar-brand d-flex flex-column text-decoration-none me-4" href="https://www.riau.go.id" title="SELASAR: Sistem Elektronik Layanan Administrasi dan Informasi Rakyat"> 43 <div class="d-flex align-items-center"> 44 <svg width="200" height="45" viewBox="0 0 280 60" fill="none" xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.2));"> 45 <path d="M15 10L30 40M15 10L0 40M15 10V50" stroke="#F4D03F" stroke-width="6" stroke-linecap="round"/> 46 <path d="M5 45L15 55L25 45" stroke="#F4D03F" stroke-width="4" stroke-linecap="round"/> 47 <text x="45" y="38" font-family="'Poppins', sans-serif" font-weight="700" font-size="32" fill="#FFFFFF">SELASAR</text> 48 <text x="45" y="52" font-family="'Poppins', sans-serif" font-size="13" font-weight="600" letter-spacing="3" fill="#F4D03F">PROVINSI RIAU</text> 49 </svg> 50 </div> 51 <span class="text-white-50" style="font-size: 0.6rem; letter-spacing: 0.5px; margin-top: -3px; margin-left: 45px;">Sistem Elektronik Layanan Administrasi dan Informasi Rakyat</span> 52 </a> 53 54 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
55 <span class="navbar-toggler-icon"></span> 56 </button> 57 58 <div class="collapse navbar-collapse" id="navbarNav"> 59 <ul class="navbar-nav ms-auto fw-semibold align-items-lg-center"> 60 61 <li class="nav-item"><a class="nav-link active" href="https://www.riau.go.id">Beranda</a></li> 62 63 <li class="nav-item dropdown mega-menu-container"> 64 <a class="nav-link dropdown-toggle" href="#" id="profilMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 65 Profil 66 </a> 67 <div class="dropdown-menu mega-menu border-0" aria-labelledby="profilMegaMenu"> 68 <div class="mega-menu-header"> 69 <i class="fas fa-id-card fs-3 me-3" style="color: #F4D03F;"></i> 70 <div> 71 <h3 class="mega-menu-header-title">Profil Provinsi Riau</h3> 72 <p class="text-muted mb-0 small">Kenali lebih dekat pimpinan dan seluk-beluk Provinsi Riau</p> 73 </div> 74 <button type="button" class="btn-close ms-auto d-lg-none" data-bs-toggle="dropdown"></button> 75 </div> 76 <div class="row g-3"> 77 <div class="col-md-6"> 78 <a href="https://www.riau.go.id/profil-pimpinan" class="mega-menu-item"> 79 <div class="mega-menu-icon" style="background-color: #f0fdf4; border-radius: 12px; padding: 10px;"><i class="fas fa-users-tie text-success"></i></div> 80 <div> 81 <div class="mega-menu-title">Profil Pimpinan</div> 82 <p class="mega-menu-desc">Mengenal lebih dekat sosok Gubernur dan Wakil Gubernur beserta jajaran pimpinan daerah Provinsi Riau.</p> 83 </div> 84 </a> 85 </div> 86 <div class="col-md-6"> 87 <a href="https://www.riau.go.id/tentang-riau" class="mega-menu-item"> 88 <div class="mega-menu-icon" style="background-color: #f0fdf4; border-radius: 12px; padding: 10px;"><i class="fas fa-map-marked-alt text-success"></i></div> 89 <div> 90 <div class="mega-menu-title">Tentang Provinsi Riau</div> 91 <p class="mega-menu-desc">Sejarah, visi & misi, letak geografis, serta potensi kebudayaan dan ekonomi Provinsi Riau.</p> 92 </div> 93 </a> 94 </div> 95 </div> 96 </div> 97 </li> 98 99 <li class="nav-item"><a class="nav-link " href="https://www.riau.go.id/berita">Media Center</a></li> 100 <li class="nav-item"><a class="nav-link" href="https://www.riau.go.id/layanan">Layanan Publik</a></li> 101 102 <li class="nav-item dropdown mega-menu-container"> 103 <a class="nav-link dropdown-toggle" href="#" id="ppidMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 104 PPID 105 </a> 106 <div class="dropdown-menu mega-menu border-0" aria-labelledby="ppidMegaMenu"> 107 <div class="mega-menu-header"> 108 <i class="fas fa-landmark fs-3 me-3" style="color: #F4D03F;"></i> 109 <div> 110 <h3 class="mega-menu-header-title">Layanan Informasi Publik (PPID)</h3> 111 <p class="text-muted mb-0 small">Pusat transparansi dan permohonan informasi Pemerintah Provinsi Riau</p> 112 </div> 113 <button type="button" class="btn-close ms-auto d-lg-none" data-bs-toggle="dropdown"></button> 114 </div> 115 <div class="row g-3"> 116 <div class="col-md-6 col-lg-4"> 117 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Fprofil" class="mega-menu-item"> 118 <div class="mega-menu-icon"><i class="fas fa-building"></i></div> 119 <div><div class="mega-menu-title">Profil PPID</div><p class="mega-menu-desc">Struktur organisasi, visi & misi, serta uraian tugas PPID Riau.</p></div> 120 </a> 121 </div> 122 <div class="col-md-6 col-lg-4"> 123 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Falur" class="mega-menu-item"> 124 <div class="mega-menu-icon"><i class="fas fa-project-diagram"></i></div> 125 <div><div class="mega-menu-title">Alur Layanan</div><p class="mega-menu-desc">Panduan langkah demi langkah pengajuan permohonan informasi.</p></div> 126 </a> 127 </div> 128 <div class="col-md-6 col-lg-4"> 129 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Fpermohonan" class="mega-menu-item"> 130 <div class="mega-menu-icon"><i class="fas fa-file-signature"></i></div> 131 <div><div class="mega-menu-title">Permohonan Informasi</div><p class="mega-menu-desc">Formulir elektronik untuk mengajukan permohonan data publik.</p></div> 132 </a> 133 </div> 134 <div class="col-md-6 col-lg-4"> 135 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Fkeberatan" class="mega-menu-item"> 136 <div class="mega-menu-icon"><i class="fas fa-balance-scale"></i></div> 137 <div><div class="mega-menu-title">Pengajuan Keberatan</div><p class="mega-menu-desc">Sampaikan keberatan atas respons permohonan informasi Anda.</p></div> 138 </a> 139 </div> 140 <div class="col-md-6 col-lg-4"> 141 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Fwajib" class="mega-menu-item"> 142 <div class="mega-menu-icon"><i class="fas fa-book-open"></i></div> 143 <div><div class="mega-menu-title">Informasi Wajib Tersedia</div><p class="mega-menu-desc">Dokumen publik yang selalu siap diakses setiap saat.</p></div> 144 </a> 145 </div> 146 <div class="col-md-6 col-lg-4"> 147 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Fppid.riau.go.id%2Fberkala" class="mega-menu-item"> 148 <div class="mega-menu-icon"><i class="fas fa-sync-alt"></i></div> 149 <div><div class="mega-menu-title">Informasi Berkala</div><p class="mega-menu-desc">Data publik yang diperbarui secara rutin oleh Pemprov Riau.</p></div> 150 </a> 151 </div> 152 </div> 153 </div> 154 </li> 155 156 <li class="nav-item dropdown mega-menu-container"> 157 <a class="nav-link dropdown-toggle" href="#" id="dataRiauMegaMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 158 Data Riau 159 </a> 160 <div class="dropdown-menu mega-menu border-0" aria-labelledby="dataRiauMegaMenu"> 161 <div class="mega-menu-header"> 162 <i class="fas fa-database fs-3 me-3" style="color: #F4D03F;"></i> 163 <div> 164 <h3 class="mega-menu-header-title">Rumah Data Provinsi Riau</h3> 165 <p class="text-muted mb-0 small">Pusat data statistik dan informasi sektoral terpadu Pemerintah Provinsi Riau</p> 166 </div> 167 <button type="button" class="btn-close ms-auto d-lg-none" data-bs-toggle="dropdown"></button> 168 </div> 169 <div class="row g-3"> 170 <div class="col-md-6 col-lg-4"> 171 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Fdataset" class="mega-menu-item"> 172 <div class="mega-menu-icon"><i class="fas fa-table"></i></div> 173 <div><div class="mega-menu-title">Dataset Sektoral</div><p class="mega-menu-desc">Eksplorasi kumpulan data mentah sektoral dari berbagai instansi Riau.</p></div> 174 </a> 175 </div> 176 <div class="col-md-6 col-lg-4"> 177 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Fpublikasi" class="mega-menu-item"> 178 <div class="mega-menu-icon"><i class="fas fa-book"></i></div> 179 <div><div class="mega-menu-title">Publikasi Dokumen</div><p class="mega-menu-desc">Unduh dokumen publikasi, laporan resmi, dan kajian statistik daerah.</p></div> 180 </a> 181 </div> 182 <div class="col-md-6 col-lg-4"> 183 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Finfografis" class="mega-menu-item"> 184 <div class="mega-menu-icon"><i class="fas fa-chart-pie"></i></div> 185 <div><div class="mega-menu-title">Infografis Data</div><p class="mega-menu-desc">Visualisasi data statistik yang dirangkum agar lebih mudah dipahami.</p></div> 186 </a> 187 </div> 188 <div class="col-md-6 col-lg-4"> 189 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Forganisasi" class="mega-menu-item"> 190 <div class="mega-menu-icon"><i class="fas fa-sitemap"></i></div> 191 <div><div class="mega-menu-title">Data per Organisasi</div><p class="mega-menu-desc">Cari dan temukan data spesifik berdasarkan Instansi/OPD terkait.</p></div> 192 </a> 193 </div> 194 <div class="col-md-6 col-lg-4"> 195 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Fstunting" class="mega-menu-item"> 196 <div class="mega-menu-icon"><i class="fas fa-child"></i></div> 197 <div><div class="mega-menu-title">Pantauan Stunting</div><p class="mega-menu-desc">Dashboard khusus data pemantauan penanganan stunting daerah.</p></div> 198 </a> 199 </div> 200 <div class="col-md-6 col-lg-4"> 201 <a href="https://www.riau.go.id/verifikasi-link?url=https%3A%2F%2Frumahdata.riau.go.id%2Fpermintaan_data" class="mega-menu-item"> 202 <div class="mega-menu-icon"><i class="fas fa-headset"></i></div> 203 <div><div class="mega-menu-title">Layanan Permintaan</div><p class="mega-menu-desc">Ajukan permintaan data khusus langsung kepada admin Rumah Data.</p></div> 204 </a> 205 </div> 206 </div> 207 </div> 208 </li> 209 210 <li class="nav-item"> 211 <a class="nav-link " href="https://www.riau.go.id/tentang-selasar"> 212 Tentang Selasar 213 </a> 214 </li> 215 216 <li class="nav-item mt-2 mt-lg-0"><a class="btn btn-warning fw-bold rounded-pill px-4 ms-lg-2 shadow-sm" href="https://www.riau.go.id/login">Login</a></li> 217 </ul> 218 </div> 219 </div> 220 </nav> 221 222 <main> 223 224 225 226<!-- CSS Swiper.js --> 227<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> 228 229<style> 230 /* --- CUSTOM PALET WARNA MELAYU RIAU --- */ 231 :root { 232 --melayu-kuning: #F4D03F; --melayu-kuning-hover: #D4AC0D; 233 --melayu-hijau-tua: #0B5345; --melayu-hijau: #198754; 234 } 235 body { background-color: #f8f9fa; }
236 .btn-kuning { background-color: var(--melayu-kuning); color: #212529; border: none; font-weight: 700; transition: all 0.3s; } 237 .btn-kuning:hover { background-color: var(--melayu-kuning-hover); color: #000; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(244, 208, 63, 0.4); } 238 .btn-outline-kuning { border: 2px solid var(--melayu-kuning); color: var(--melayu-kuning); font-weight: 700; transition: all 0.3s; } 239 .btn-outline-kuning:hover { background-color: var(--melayu-kuning); color: #212529; } 240 .text-kuning { color: var(--melayu-kuning) !important; } 241 .bg-kuning { background-color: var(--melayu-kuning) !important; color: #212529; } 242 .text-hijau-tua { color: var(--melayu-hijau-tua) !important; } 243 244 /* --- CSS HERO BANNER --- */ 245 .hero-banner { 246 background: linear-gradient(to bottom, rgba(11, 83, 69, 0.95) 0%, rgba(25, 135, 84, 0.5) 60%, rgba(25, 135, 84, 0.1) 100%), url('https://www.riau.go.id/img/banner-riau.png'); 247 background-position: center bottom; background-size: cover; background-repeat: no-repeat; 248 color: white; padding: 100px 0 160px; position: relative; 249 } 250 .hero-banner h1, .hero-banner h4, .hero-banner p { text-shadow: 2px 2px 8px rgba(0,0,0,0.6); } 251 .search-box { background: white; border-radius: 50px; padding: 5px 5px 5px 25px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); } 252 .search-box input { border: none; box-shadow: none; font-size: 1.1rem; } 253 .search-box input:focus { outline: none; box-shadow: none; } 254 .search-box button { border-radius: 50px; padding: 10px 30px; } 255 256 /* --- CSS CARD LAYANAN (MOTIF BATIK PUCUK REBUNG MELAYU RIAU) --- */ 257 .layanan-card { 258 border-radius: 16px; 259 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 260 background: #ffffff; 261 box-shadow: 0 4px 20px rgba(11, 83, 69, 0.05); 262 border: 1px solid rgba(11, 83, 69, 0.1); 263 position: relative; 264 overflow: hidden; 265 z-index: 1; 266 } 267 268 /* Efek Watermark Batik Pucuk Rebung Halus di Sudut Card (Default) */ 269 .layanan-card::before { 270 content: ''; 271 position: absolute; 272 bottom: 0; 273 right: 0; 274 width: 100px; 275 height: 100px; 276 background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 90 H10 Z' fill='%230B5345' fill-opacity='0.03'/%3E%3Cpath d='M50 30 L75 80 H25 Z' fill='%23F4D03F' fill-opacity='0.05'/%3E%3C/svg%3E"); 277 background-repeat: no-repeat; 278 background-position: bottom right; 279 z-index: -1; 280 transition: all 0.5s ease; 281 } 282 283 /* Efek Saat Mouse Menyorot (Hover): Card Berubah Menjadi Nuansa Hijau-Kuning Melayu Mewah */ 284 .layanan-card:hover { 285 transform: translateY(-10px); 286 box-shadow: 0 15px 35px rgba(11, 83, 69, 0.15); 287 border-color: var(--melayu-kuning); 288 background: linear-gradient(135deg, #ffffff 0%, #f4f9f6 100%); 289 } 290 291 /* Saat di-hover, Motif Batik Pucuk Rebung Semakin Jelas dan Elegan */ 292 .layanan-card:hover::before { 293 transform: scale(1.15) rotate(-5deg); 294 opacity: 0.8; 295 background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 90 H10 Z' fill='%23198754' fill-opacity='0.08'/%3E%3Cpath d='M50 30 L75 80 H25 Z' fill='%23F4D03F' fill-opacity='0.15'/%3E%3C/svg%3E"); 296 } 297 298 /* Ikon Organik Elegan */ 299 .icon-box { 300 width: 70px; height: 70px; 301 border-radius: 20px; 302 display: flex; align-items: center; justify-content: center; 303 font-size: 30px; margin-bottom: 20px; transition: all 0.5s ease; 304 box-shadow: 0 5px 15px rgba(0,0,0,0.03); 305 } 306 307 .layanan-card:hover .icon-box { 308 transform: scale(1.1); 309 background-color: var(--melayu-kuning) !important; 310 color: #0B5345 !important; 311 box-shadow: 0 8px 20px rgba(244, 208, 63, 0.4); 312 } 313 .layananSlider { padding: 10px 5px 40px 5px; } 314 .layananSlider { padding: 10px 5px 40px 5px; } 315 316 /* --- CSS STATISTIK --- */ 317 .stat-section { background: linear-gradient(135deg, var(--melayu-hijau-tua) 0%, var(--melayu-hijau) 100%); color: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(11, 83, 69, 0.2); } 318 .stat-box { text-align: center; padding: 20px; border-right: 1px solid rgba(255,255,255,0.1); }
319 .stat-box:last-child { border-right: none; } 320 .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--melayu-kuning); margin-bottom: 5px; } 321 322 /* --- CSS BERITA & INFOGRAFIS --- */ 323 .news-section-wrapper { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.04); } 324 .news-highlight { position: relative; border-radius: 16px; overflow: hidden; height: 100%; min-height: 480px; display: block; background-color: #000; } 325 .news-highlight img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; opacity: 0.8; } 326 .news-highlight:hover img { transform: scale(1.05); } 327 .news-highlight-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%); padding: 40px 30px 30px; color: white; display: flex; flex-direction: column; justify-content: flex-end; } 328 .infografis-section { background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.04); } 329 .scroll-container { display: flex; overflow-x: auto; gap: 20px; padding-bottom: 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } 330 .infografis-card { flex: 0 0 280px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: transform 0.3s; } 331 .infografis-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.12); border-color: var(--melayu-kuning); } 332 .infografis-card img { width: 100%; height: auto; transition: transform 0.5s ease; } 333 .infografis-card:hover img { transform: scale(1.05); } 334 335 /* --- CSS PENGADUAN, AGENDA, DIREKTORI --- */ 336 .pengaduan-box { background-color: var(--melayu-hijau-tua); background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewB
336ox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23198754" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); border-radius: 20px; color: white; position: relative; overflow: hidden; } 337 .agenda-item { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px dashed #ddd; } 338 .agenda-item:last-child { border-bottom: none; } 339 .agenda-date { background: var(--melayu-kuning); color: #000; border-radius: 10px; padding: 10px; text-align: center; min-width: 70px; font-weight: bold; margin-right: 15px; } 340 .dir-logo { filter: grayscale(100%) opacity(60%); transition: all 0.3s; width: 80px; height: auto; margin: 0 auto; display: block; } 341 .dir-logo:hover { filter: grayscale(0%) opacity(100%); transform: scale(1.1); } 342</style> 343 344<!-- HERO BANNER --> 345<section class="hero-banner text-center"> 346 <div class="container position-relative" style="z-index: 2;"> 347 348 <!-- Widget Cuaca/Tanggal Sederhana --> 349 <div class="d-flex justify-content-center mb-4"> 350 <span class="badge bg-dark bg-opacity-50 px-3 py-2 rounded-pill fw-normal shadow-sm border border-secondary border-opacity-50 text-white"> 351 <i class="far fa-calendar-alt text-kuning me-1"></i> Friday, 02 October 2026 | <i class="fas fa-map-marker-alt text-danger ms-2 me-1"></i> Pekanbaru, Riau 352 </span> 353 </div> 354 355 <div class="mb-3"> 356 <img src="https://upload.wikimedia.org/wikipedia/commons/0/0b/Coat_of_arms_of_Riau.svg" alt="Logo Riau" style="width: 80px; height: auto; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));"> 357 </div> 358 359 <span class="badge bg-kuning mb-3 px-3 py-2 rounded-pill shadow-sm text-dark fw-bold">SELASAR RIAU ââ¬â Portal Resmi Pemprov Riau</span> 360 361 <h1 class="display-3 fw-bold mb-2 text-white" style="letter-spacing: -1px;">SELASAR RIAU</h1> 362 <h4 class="fw-normal text-white mb-4 opacity-90 d-none d-md-block" style="font-size: 1.35rem;"> 363 Sistem Elektronik Layanan Administrasi dan Informasi Rakyat 364 </h4> 365 <p class="lead mb-5 opacity-75 text-white fs-5">Satu pintu interaktif untuk mengakses seluruh layanan publik dan informasi terkini di Provinsi Riau.</p> 366 367 <div class="row justify-content-center"> 368 <div class="col-lg-8"> 369 <form action="https://www.riau.go.id/pencarian" method="GET" class="search-box d-flex align-items-center"> 370 <i class="fas fa-search text-muted fs-5"></i> 371 <input class="form-control flex-grow-1" type="search" name="q" placeholder="Cari layanan administrasi atau informasi rakyat di Selasar Riau..." value="" required> 372 <button class="btn btn-kuning rounded-pill px-4" type="submit">Cari Sekarang</button> 373 </form> 374 </div> 375 </div> 376 </div> 377</section> 378 379<!-- SECTION LAYANAN DARI DATABASE --> 380<section class="container" style="margin-top: -60px; position: relative; z-index: 3;"> 381 <div class="swiper layananSlider"> 382 <div class="swiper-wrapper py-2"> 383 <div class="swiper-slide h-auto"> 384 <a href="https://www.riau.go.id/layanan/detail/4" class="text-decoration-none text-dark d-block h-100"> 385 <div class="card layanan-card text-center p-4 h-100 shadow-sm border-0"> 386 <div class="icon-box bg-success bg-opacity-25 text-success mx-auto overflow-hidden" style="background-color: #d1e7dd; color: #0f5132;"> 387 <img src="https://www.riau.go.id/storage/layanan-assets/ikon/0SH2qoVDIKXtZzDTxqX2RizDGvPl7wlCcmPbTGxt.png" loading="lazy" alt="Suara RIMBA" style="width: 100%; height: 100%; object-fit: contain; padding: 10px;"> 388 </div> 389 <h6 class="fw-bold mb-1">Suara RIMBA</h6> 390 <p class="small text-muted mb-0">Sampaikan suara Anda melalui Suara RIMBA.</p> 391 </div> 392 </a> 393 </div> 394 <div class="swiper-slide h-auto"> 395 <a href="https://www.riau.go.id/layanan/detail/3" class="text-decoration-none text-dark d-block h-100"> 396 <div class="card layanan-card text-center p-4 h-100 shadow-sm border-0"> 397 <div class="icon-box bg-success bg-opacity-25 text-success mx-auto overflow-hidden" style="background-color: #d1e7dd; color: #0f5132;"> 398 <i class="fas fa-link"></i> 399 </div> 400 <h6 class="fw-bold mb-1">IPKD</h6> 401 <p class="small text-muted mb-0">Indeks Pengelolaan Keuangan Daerah</p> 402 </div> 403 </a> 404 </div> 405 <div class="swiper-slide h-auto"> 406 <a href="https://www.riau.go.id/layanan/detail/2" class="text-decoration-none text-dark d-block h-100"> 407 <div class="card layanan-card text-center p-4 h-100 shadow-sm border-0"> 408 <div class="icon-box bg-success bg-opacity-25 text-success mx-auto overflow-hidden" style="background-color: #d1e7dd; color: #0f5132;"> 409 <i class="fas fa-link"></i> 410 </div> 411 <h6 class="fw-bold mb-1">Lokasi Samsat Keliling</h6> 412 <p class="small text-muted mb-0">Informasi Layanan Samsat Keliling</p> 413 </div> 414 </a> 415 </div> 416 <div class="swiper-slide h-auto"> 417 <a href="https://www.riau.go.id/layanan/detail/1" class="text-decoration-none text-dark d-block h-100"> 418 <div class="card layanan-card text-center p-4 h-100 shadow-sm border-0"> 419 <div class="icon-box bg-success bg-opacity-25 text-success mx-auto overflow-hidden" style="background-color: #d1e7dd; color: #0f5132;"> 420 <i class="fas fa-link"></i> 421 </div> 422 <h6 class="fw-bold mb-1">Info Pajak Kendaraan</h6> 423 <p class="small text-muted mb-0">Info Pajak Kendaraan Bermotor</p> 424 </div> 425 </a> 426 </div> 427 </div> 428 <div class="swiper-pagination"></div> 429 </div> 430 431 <!-- STATISTIK RIAU (Data Valid BPS) --> 432 <div class="stat-section p-4 p-md-5 position-relative mt-4"> 433 <!-- Label Sumber Data --> 434 <div class="position-absolute" style="top: 15px; right: 20px;">
435 <span class="badge bg-dark bg-opacity-25 border border-light border-opacity-25 rounded-pill px-3 py-1 shadow-sm" style="font-size: 0.75rem;"> 436 <i class="fas fa-check-circle text-kuning me-1"></i> Data Valid BPS Riau 437 </span> 438 </div> 439 <div class="text-center mb-4"> 440 <h4 class="fw-bold text-white mb-1">Riau Dalam Angka</h4> 441 <p class="text-white-50 small mb-0">Indikator Strategis Pembangunan Daerah</p> 442 </div> 443 <div class="row align-items-center"> 444 <div class="col-md-3 stat-box mb-4 mb-md-0"> 445 <i class="fas fa-hand-holding-usd fs-3 mb-2 opacity-75"></i> 446 <div class="stat-number counter" data-target="1112">0</div> 447 <div class="small text-white-50 text-uppercase fw-bold">PDRB 2024 (Triliun Rupiah)</div> 448 </div> 449 <div class="col-md-3 stat-box mb-4 mb-md-0"> 450 <i class="fas fa-chart-line fs-3 mb-2 opacity-75"></i> 451 <div class="stat-number counter" data-target="3.52">0</div> 452 <div class="small text-white-50 text-uppercase fw-bold">Pertumbuhan Ekonomi (%)</div> 453 </div> 454 <div class="col-md-3 stat-box mb-4 mb-md-0"> 455 <i class="fas fa-graduation-cap fs-3 mb-2 opacity-75"></i> 456 <div class="stat-number counter" data-target="75.67">0</div> 457 <div class="small text-white-50 text-uppercase fw-bold">Indeks Pembangunan (IPM 2024)</div> 458 </div> 459 <div class="col-md-3 stat-box"> 460 <i class="fas fa-level-down-alt fs-3 mb-2 opacity-75 text-warning"></i> 461 <div class="stat-number counter" data-target="6.16">0</div> 462 <div class="small text-white-50 text-uppercase fw-bold">Angka Kemiskinan 2025 (%)</div> 463 </div> 464 </div> 465 <div class="mt-4 pt-3 border-top border-light border-opacity-25 text-center"> 466 <small class="text-white-50" style="font-size: 0.75rem;"> 467 <em>*Sumber Data: Berita Resmi Statistik (BRS) Badan Pusat Statistik Provinsi Riau rilis 2024/2025.</em> 468 </small> 469 </div> 470 </div> 471</section> 472 473<!-- SECTION BERITA --> 474<section class="container mt-5 mb-5"> 475 <div class="news-section-wrapper"> 476 <div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3"> 477 <h2 class="fw-bold mb-0 text-dark">Berita Terkini <span class="fs-6 fw-normal text-muted ms-2">Media Center Riau</span></h2> 478 <a href="https://www.riau.go.id/berita" class="btn btn-outline-kuning rounded-pill px-4 btn-sm"> 479 Lihat Semua Berita <i class="fas fa-arrow-right ms-1"></i> 480 </a> 481 </div> 482 483 <!-- BAGIAN ATAS: Highlight Berita & GPR Kominfo --> 484 <div class="row"> 485 <div class="col-lg-8 mb-4 mb-lg-0"> 486 <div class="news-highlight" style="height: 100%; min-height: 520px;"> 487 <img src="https://mediacenter.riau.go.id/posts/1790913419.jpg" loading="lazy" alt="Disnakertrans Riau Buka Pelatihan Vokasi Nasional Batch 6, Ini Jadwal dan Cara Daftarnya"> 488 <div class="news-highlight-overlay"> 489 <span class="badge bg-kuning mb-3 align-self-start text-dark fw-bold">PEMERINTAHAN</span> 490 <h3 class="fw-bold text-white mb-3" style="line-height: 1.4; font-size: 1.8rem;">Disnakertrans Riau Buka Pelatihan Vokasi Nasional Batch 6, Ini Jadwal dan Cara Daftarnya</h3> 491 <div class="d-flex justify-content-between align-items-center mt-3"> 492 <div class="text-white-50"> 493 <i class="far fa-calendar-alt me-1 text-kuning"></i> 02 October 2026 494 </div> 495 <a href="https://mediacenter.riau.go.id/read/disnakertrans-riau-buka-pelatihan-vokasi-nasional-batch-6-ini-jadwal-dan-cara-daftarnya" target="_blank" class="btn btn-kuning rounded-pill px-4 fw-bold shadow-sm">Baca Selengkapnya</a> 496 </div> 497 </div> 498 </div> 499 </div> 500 501 <!-- GPR WIDGET KOMINFO --> 502 <div class="col-lg-4 p-0 ps-lg-4"> 503 <div class="h-100 d-flex flex-column"> 504 <h5 class="fw-bold mb-3 px-2 text-hijau-tua border-bottom pb-2"> 505 Info Nasional <span class="badge bg-danger ms-2 small" style="font-size: 0.65rem;">GPR Komdigi</span> 506 </h5> 507 <div class="flex-grow-1" style="overflow: hidden; max-height: 520px;"> 508 <div id="gpr-kominfo-widget-container"></div> 509 </div> 510 </div> 511 </div> 512 </div> 513 514 <!-- BAGIAN BAWAH: Slider Berita Provinsi Lainnya --> 515 <div class="row mt-4 pt-4 border-top"> 516 <div class="col-12"> 517 518 <div class="d-flex justify-content-between align-items-center mb-3"> 519 <h6 class="fw-bold mb-0 text-muted"><i class="fas fa-list-ul me-2"></i>Berita Provinsi Lainnya:</h6> 520 521 <!-- Tombol Navigasi Slider Berita --> 522 <div> 523 <button class="btn btn-sm btn-kuning rounded-circle shadow-sm" type="button" data-bs-target="#sliderBeritaLainnya" data-bs-slide="prev" style="width: 32px; height: 32px; padding: 0; line-height: 1;"> 524 <i class="fas fa-chevron-left text-dark"></i> 525 </button> 526 <button class="btn btn-sm btn-kuning rounded-circle shadow-sm ms-1" type="button" data-bs-target="#sliderBeritaLainnya" data-bs-slide="next" style="width: 32px; height: 32px; padding: 0; line-height: 1;"> 527 <i class="fas fa-chevron-right text-dark"></i> 528 </button> 529 </div> 530 </div> 531 532 <!-- Carousel Slider Berita --> 533 <div id="sliderBeritaLainnya" class="carousel slide" data-bs-ride="carousel" data-bs-interval="4000"> 534 <div class="carousel-inner pb-3"> 535 536 537 538 <div class="carousel-item active"> 539 <div class="row g-3"> 540 <div class="col-md-4"> 541 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 542 543 <!-- Gambar Thumbnail Berita --> 544 <a href="https://mediacenter.riau.go.id/read/bmkg-prakirakan-hujan-meluas-di-riau-enam-wilayah-waspada-hujan-lebat" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 545 <img src="https://mediacenter.riau.go.id/posts/1790902737.png" 546 alt="BMKG Prakirakan Hujan Meluas di Riau, Enam Wilayah Was
546pada Hujan Lebat" 547 class="w-100 h-100" 548 style="object-fit: cover; transition: transform 0.5s ease;" 549 onmouseover="this.style.transform='scale(1.08)'" 550 onmouseout="this.style.transform='scale(1)'" 551 loading="lazy"> 552 </a> 553 554 <!-- Detail Teks Berita --> 555 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 556 <a href="https://mediacenter.riau.go.id/read/bmkg-prakirakan-hujan-meluas-di-riau-enam-wilayah-waspada-hujan-lebat" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 557 BMKG Prakirakan Hujan Meluas di Riau, Enam Wilayah Waspada Hujan Lebat 558 </a> 559 560 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light"> 561 <span class="fw-bold me-2 text-success">TEKNOLOGI</span> 562 <span>•</span> 563 <span class="ms-2"><i class="far fa-clock me-1"></i> 2 hours from now</span> 564 </div> 565 </div> 566 567 </div> 568 </div> 569 <div class="col-md-4"> 570 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 571 572 <!-- Gambar Thumbnail Berita --> 573 <a href="https://mediacenter.riau.go.id/read/setelah-bertahun-tahun-miring-sdn-17-teluk-lanus-akhirnya-direvitalisasi" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 574 <img src="https://mediacenter.riau.go.id/posts/1790899329.jpg" 575 alt="Setelah Bertahun-tahun Miring, SDN 17 Teluk Lanus Akhirnya Direvitalisasi" 576 class="w-100 h-100" 577 style="object-fit: cover; transition: transform 0.5s ease;" 578 onmouseover="this.style.transform='scale(1.08)'" 579 onmouseout="this.style.transform='scale(1)'" 580 loading="lazy"> 581 </a> 582 583 <!-- Detail Teks Berita --> 584 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 585 <a href="https://mediacenter.riau.go.id/read/setelah-bertahun-tahun-miring-sdn-17-teluk-lanus-akhirnya-direvitalisasi" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 586 Setelah Bertahun-tahun Miring, SDN 17 Teluk Lanus Akhirnya Direvitalisasi 587 </a> 588 589 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light">
590 <span class="fw-bold me-2 text-success">PENDIDIKAN</span> 591 <span>•</span> 592 <span class="ms-2"><i class="far fa-clock me-1"></i> 1 hour from now</span> 593 </div> 594 </div> 595 596 </div> 597 </div> 598 <div class="col-md-4"> 599 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 600 601 <!-- Gambar Thumbnail Berita --> 602 <a href="https://mediacenter.riau.go.id/read/neraca-perdagangan-riau-surplus-us1237-miliar-hingga-agustus-2026" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 603 <img src="https://mediacenter.riau.go.id/posts/1790856166.jpg" 604 alt="Neraca Perdagangan Riau Surplus US$12,37 Miliar hingga Agustus 2026" 605 class="w-100 h-100" 606 style="object-fit: cover; transition: transform 0.5s ease;" 607 onmouseover="this.style.transform='scale(1.08)'" 608 onmouseout="this.style.transform='scale(1)'" 609 loading="lazy"> 610 </a> 611 612 <!-- Detail Teks Berita --> 613 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 614 <a href="https://mediacenter.riau.go.id/read/neraca-perdagangan-riau-surplus-us1237-miliar-hingga-agustus-2026" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 615 Neraca Perdagangan Riau Surplus US$12,37 Miliar hingga Agustus 2026 616 </a> 617 618 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light"> 619 <span class="fw-bold me-2 text-success">EKONOMI</span> 620 <span>•</span> 621 <span class="ms-2"><i class="far fa-clock me-1"></i> 10 hours ago</span> 622 </div> 623 </div> 624 625 </div> 626 </div> 627 </div> 628 </div> 629 <div class="carousel-item "> 630 <div class="row g-3"> 631 <div class="col-md-4"> 632 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 633 634 <!-- Gambar Thumbnail Berita --> 635 <a href="https://mediacenter.riau.go.id/read/bps-riau-catat-kunjungan-wisman-agustus-2026-naik-308-persen" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 636 <img src="https://mediacenter.riau.go.id/posts/1790852096.jpg" 637 alt="BPS Riau C
637atat Kunjungan Wisman Agustus 2026 Naik 3,08 Persen" 638 class="w-100 h-100" 639 style="object-fit: cover; transition: transform 0.5s ease;" 640 onmouseover="this.style.transform='scale(1.08)'" 641 onmouseout="this.style.transform='scale(1)'" 642 loading="lazy"> 643 </a> 644 645 <!-- Detail Teks Berita --> 646 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 647 <a href="https://mediacenter.riau.go.id/read/bps-riau-catat-kunjungan-wisman-agustus-2026-naik-308-persen" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 648 BPS Riau Catat Kunjungan Wisman Agustus 2026 Naik 3,08 Persen 649 </a> 650 651 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light"> 652 <span class="fw-bold me-2 text-success">PARIWISATA</span> 653 <span>•</span> 654 <span class="ms-2"><i class="far fa-clock me-1"></i> 11 hours ago</span> 655 </div> 656 </div> 657 658 </div> 659 </div> 660 <div class="col-md-4"> 661 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 662 663 <!-- Gambar Thumbnail Berita --> 664 <a href="https://mediacenter.riau.go.id/read/inflasi-riau-september-2026-capai-279-persen-kampar-tertinggi-321-persen" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 665 <img src="https://mediacenter.riau.go.id/posts/1790851612.jpg" 666 alt="Inflasi Riau September 2026 Capai 2,79 Persen, Kampar Tertinggi 3,21 Persen" 667 class="w-100 h-100" 668 style="object-fit: cover; transition: transform 0.5s ease;" 669 onmouseover="this.style.transform='scale(1.08)'" 670 onmouseout="this.style.transform='scale(1)'" 671 loading="lazy"> 672 </a> 673 674 <!-- Detail Teks Berita --> 675 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 676 <a href="https://mediacenter.riau.go.id/read/inflasi-riau-september-2026-capai-279-persen-kampar-tertinggi-321-persen" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 677 Inflasi Riau September 2026 Capai 2,79 Persen, Kampar Tertinggi 3,21 Persen 678 </a> 679 680 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light">
681 <span class="fw-bold me-2 text-success">EKONOMI</span> 682 <span>•</span> 683 <span class="ms-2"><i class="far fa-clock me-1"></i> 12 hours ago</span> 684 </div> 685 </div> 686 687 </div> 688 </div> 689 <div class="col-md-4"> 690 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 691 692 <!-- Gambar Thumbnail Berita --> 693 <a href="https://mediacenter.riau.go.id/read/kadis-diskominfotik-riau-data-bps-jadi-kompas-arah-pembangunan-daerah" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 694 <img src="https://mediacenter.riau.go.id/posts/1790846100.jpg" 695 alt="Kadis Kominfotik Riau: Data BPS Jadi Kompas Arah Pembangunan Daerah" 696 class="w-100 h-100" 697 style="object-fit: cover; transition: transform 0.5s ease;" 698 onmouseover="this.style.transform='scale(1.08)'" 699 onmouseout="this.style.transform='scale(1)'" 700 loading="lazy"> 701 </a> 702 703 <!-- Detail Teks Berita --> 704 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 705 <a href="https://mediacenter.riau.go.id/read/kadis-diskominfotik-riau-data-bps-jadi-kompas-arah-pembangunan-daerah" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 706 Kadis Kominfotik Riau: Data BPS Jadi Kompas Arah Pembangunan Daerah 707 </a> 708 709 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light"> 710 <span class="fw-bold me-2 text-success">PEMERINTAHAN</span> 711 <span>•</span> 712 <span class="ms-2"><i class="far fa-clock me-1"></i> 14 hours ago</span> 713 </div> 714 </div> 715 716 </div> 717 </div> 718 </div> 719 </div> 720 <div class="carousel-item "> 721 <div class="row g-3"> 722 <div class="col-md-4"> 723 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 724 725 <!-- Gambar Thumbnail Berita --> 726 <a href="https://mediacenter.riau.go.id/read/riau-catat-capaian-positif-ihal-2026-bukti-nyata-harmoni-sosial-menguat" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 727 <img src="https://mediacenter.riau.go.id/posts/1790840152.jpg" 728 alt="Riau Catat Capaian Positif IHal 2026, Bukti Nyata Harmoni Sosial Menguat" 729 class="w-100 h-100" 730 style="object-fit: cover; transition: transform 0.5s ease;" 731 onmouseover="this.style.transform='scale(1.08)'" 732 onmouseout="this.style.transform='scale(1)'" 733 loading="lazy"> 734 </a> 735 736 <!-- Detail Teks Berita --> 737 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 738 <a href="https://mediacenter.riau.go.id/read/riau-catat-capaian-positif-ihal-2026-bukti-nyata-harmoni-sosial-menguat" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 739 Riau Catat Capaian Positif IHal 2026, Bukti Nyata Harmoni Sosial Menguat 740 </a> 741 742 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light">
743 <span class="fw-bold me-2 text-success">PEMERINTAHAN</span> 744 <span>•</span> 745 <span class="ms-2"><i class="far fa-clock me-1"></i> 14 hours ago</span> 746 </div> 747 </div> 748 749 </div> 750 </div> 751 <div class="col-md-4"> 752 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 753 754 <!-- Gambar Thumbnail Berita --> 755 <a href="https://mediacenter.riau.go.id/read/kantongi-legalitas-organisasi-pbpi-riau-segera-dilantik-1790837189" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 756 <img src="https://mediacenter.riau.go.id/posts/1790837189.jpg" 757 alt="PBPI Riau Siapkan 12 Atlet Hadapi Kejurnas Padel 2026" 758 class="w-100 h-100" 759 style="object-fit: cover; transition: transform 0.5s ease;" 760 onmouseover="this.style.transform='scale(1.08)'" 761 onmouseout="this.style.transform='scale(1)'" 762 loading="lazy"> 763 </a> 764 765 <!-- Detail Teks Berita --> 766 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 767 <a href="https://mediacenter.riau.go.id/read/kantongi-legalitas-organisasi-pbpi-riau-segera-dilantik-1790837189" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 768 PBPI Riau Siapkan 12 Atlet Hadapi Kejurnas Padel 2026 769 </a> 770 771 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light"> 772 <span class="fw-bold me-2 text-success">OLAHRAGA</span> 773 <span>•</span> 774 <span class="ms-2"><i class="far fa-clock me-1"></i> 15 hours ago</span> 775 </div> 776 </div> 777 778 </div> 779 </div> 780 <div class="col-md-4"> 781 <div class="border rounded-4 bg-light h-100 shadow-sm transition-hover d-flex flex-column overflow-hidden" style="border-left: 4px solid var(--melayu-hijau) !important;"> 782 783 <!-- Gambar Thumbnail Berita --> 784 <a href="https://mediacenter.riau.go.id/read/kantongi-legalitas-organisasi-pbpi-riau-segera-dilantik" target="_blank" class="d-block" style="height: 180px; overflow: hidden;"> 785 <img src="https://mediacenter.riau.go.id/posts/1790836880.jpg" 786 alt="Kantongi Legalitas Organisasi, PBPI Riau Segera Dilantik" 787 class="w-100 h-100" 788 style="object-fit: cover; transition: transform 0.5s ease;" 789 onmouseover="this.style.transform='scale(1.08)'" 790 onmouseout="this.style.transform='scale(1)'" 791 loading="lazy"> 792 </a> 793 794 <!-- Detail Teks Berita --> 795 <div class="p-3 d-flex flex-column justify-content-between flex-grow-1"> 796 <a href="https://mediacenter.riau.go.id/read/kantongi-legalitas-organisasi-pbpi-riau-segera-dilantik" target="_blank" class="news-list-title fs-6 mb-3 fw-bold text-dark text-decoration-none" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;"> 797 Kantongi Legalitas Organisasi, PBPI Riau Segera Dilantik 798 </a> 799 800 <div class="d-flex align-items-center small text-muted mt-auto pt-2 border-top border-light">
801 <span class="fw-bold me-2 text-success">OLAHRAGA</span> 802 <span>•</span> 803 <span class="ms-2"><i class="far fa-clock me-1"></i> 15 hours ago</span> 804 </div> 805 </div> 806 807 </div> 808 </div> 809 </div> 810 </div> 811 812 </div> 813 </div> 814 815 </div> 816 </div> 817 818 </div> 819</section> 820<!-- MULTIMEDIA & AGENDA --> 821<section class="container mb-5"> 822 <div class="row g-4"> 823 <!-- Kalender Agenda --> 824 <div class="col-lg-5"> 825 <div class="bg-white p-4 rounded-4 shadow-sm border h-100"> 826 <div class="d-flex justify-content-between align-items-center mb-4"> 827 <h4 class="fw-bold text-dark mb-0"><i class="far fa-calendar-check text-success me-2"></i>Agenda Daerah</h4> 828 <a href="#" class="text-decoration-none small text-muted">Lihat Semua</a> 829 </div> 830 <div class="agenda-list"> 831 <div class="agenda-item"> 832 <div class="agenda-date"><span class="d-block fs-4">12</span><span class="d-block small fw-normal">Agu 2026</span></div> 833 <div> 834 <h6 class="fw-bold mb-1">Rapat Paripurna DPRD Prov. Riau</h6> 835 <p class="small text-muted mb-0"><i class="fas fa-map-marker-alt me-1"></i> Gedung DPRD Riau</p> 836 </div> 837 </div> 838 <div class="agenda-item"> 839 <div class="agenda-date"><span class="d-block fs-4">15</span><span class="d-block small fw-normal">Agu 2026</span></div> 840 <div> 841 <h6 class="fw-bold mb-1">Festival Pacu Jalur Tradisional</h6> 842 <p class="small text-muted mb-0"><i class="fas fa-map-marker-alt me-1"></i> Tepian Narosa, Kuansing</p> 843 </div> 844 </div> 845 <div class="agenda-item"> 846 <div class="agenda-date"><span class="d-block fs-4">17</span><span class="d-block small fw-normal">Agu 2026</span></div> 847 <div> 848 <h6 class="fw-bold mb-1">Upacara HUT Kemerdekaan RI Ke-81</h6> 849 <p class="small text-muted mb-0"><i class="fas fa-map-marker-alt me-1"></i> Halaman Kantor Gubernur</p> 850 </div> 851 </div> 852 </div> 853 </div> 854 </div> 855 <!-- Galeri Video --> 856 <div class="col-lg-7"> 857 <div class="bg-dark p-4 rounded-4 shadow-sm h-100 position-relative text-white overflow-hidden" style="background-image: url('https://www.riau.go.id/img/pattern-melayu.png'); background-blend-mode: overlay;"> 858 <h4 class="fw-bold mb-4"><i class="fab fa-youtube text-danger me-2"></i>Selasar TV</h4> 859 <div class="ratio ratio-16x9 rounded-3 overflow-hidden shadow"> 860 <iframe src="https://www.youtube.com/embed/Ntz6eJ_v1v0" title="Video Riau" allowfullscreen></iframe> 861 </div> 862 <div class="mt-3 text-end"><a href="https://youtube.com/" target="_blank" class="btn btn-sm btn-outline-light rounded-pill px-3">Buka di YouTube <i class="fas fa-external-link-alt ms-1"></i></a></div> 863 </div> 864 </div> 865 </div> 866</section> 867 868<!-- KANAL PENGADUAN (SP4N LAPOR) --> 869<section class="container mb-5"> 870 <div class="pengaduan-box p-4 p-md-5 d-flex flex-column flex-md-row align-items-center justify-content-between shadow-lg"> 871 <div class="mb-4 mb-md-0 position-relative z-1"> 872 <span class="badge bg-danger mb-2 fs-6">SP4N - LAPOR!</span> 873 <h2 class="fw-bold text-white mb-2">Suara Anda Membangun Riau</h2> 874 <p class="text-white-50 mb-0 fs-5">Sampaikan laporan, aspirasi, maupun keluhan Anda terhadap layanan publik pemerintah.</p> 875 </div> 876 <div class="position-relative z-1 text-center text-md-end">
877 <a href="https://www.lapor.go.id/" target="_blank" class="btn btn-kuning btn-lg rounded-pill px-5 fw-bold shadow-sm d-block d-md-inline-block mb-2"><i class="fas fa-bullhorn me-2"></i> Buat Laporan</a> 878 <p class="small text-white-50 mb-0"><i class="fas fa-lock me-1"></i> Privasi Anda Terjamin Aman</p> 879 </div> 880 </div> 881</section> 882 883<!-- SECTION TRANSPARANSI KEUANGAN --> 884<section class="py-5 bg-white border-top"> 885 <div class="container"> 886 <div class="d-flex justify-content-between align-items-center mb-4"> 887 <div> 888 <span class="badge bg-success bg-opacity-10 text-success mb-2 px-3 py-1 rounded-pill border border-success border-opacity-25"> 889 <i class="fas fa-file-invoice me-1"></i> Transparansi 890 </span> 891 <h3 class="fw-bold text-dark mb-1">Dokumen IPKD</h3> 892 <p class="text-muted mb-0 small">Indeks Pengelolaan Keuangan Daerah Provinsi Riau</p> 893 </div> 894 <!-- Tombol Lihat Semua yang mengarah ke tabel --> 895 <a href="https://www.riau.go.id/dokumen-ipkd" class="btn btn-outline-success rounded-pill px-4">Lihat Semua IPKD <i class="fas fa-arrow-right ms-1"></i></a> 896 </div> 897 898 <!-- Slider Carousel IPKD --> 899 <div id="ipkdSlider" class="carousel slide" data-bs-ride="carousel"> 900 <div class="carousel-inner pb-2"> 901 <div class="carousel-item active"> 902 <div class="row g-4"> 903 <div class="col-md-4"> 904 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 905 <div class="d-flex align-items-start mb-3"> 906 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 907 <div> 908 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">01. Rencana Pembangunan Jangka Menengah Daerah (RPJMD) Provinsi Riau Tahun 2025-2029</h6> 909 <span class="badge bg-light text-secondary border">Tanggal 2025-10-15</span> 910 </div> 911 </div> 912 <div class="mt-auto pt-3 border-top d-flex gap-2"> 913 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786440129_734-rencana-pembangunan-jangka-menengah-daerah-rpjmd-provinsi-riau-tahun-2025-2029-dok.pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 914 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786440129_734-rencana-pembangunan-jangka-menengah-daerah-rpjmd-provinsi-riau-tahun-2025-2029-dok.pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 915 </div> 916 </div> 917 </div> 918 <div class="col-md-4"> 919 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 920 <div class="d-flex align-items-start mb-3"> 921 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 922 <div> 923 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">02. Perubahan Rencana Kerja Pembangunan Daerah (RKPD) Provinsi Riau Tahun 2025</h6> 924 <span class="badge bg-light text-secondary border">Tanggal 2025-09-29</span> 925 </div> 926 </div> 927 <div class="mt-auto pt-3 border-top d-flex gap-2"> 928 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786439846_Perubahan RKPD Provinsi Riau Tahun 2025.pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 929 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786439846_Perubahan RKPD Provinsi Riau Tahun 2025.pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 930 </div> 931 </div> 932 </div> 933 <div class="col-md-4"> 934 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 935 <div class="d-flex align-items-start mb-3"> 936 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 937 <div> 938 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">03. Perubahan Rencana Kerja Perangkat Daerah di Lingkungan Pemerintah Provinsi Riau Tahun 2025</h6>
939 <span class="badge bg-light text-secondary border">Tanggal 2025-10-20</span> 940 </div> 941 </div> 942 <div class="mt-auto pt-3 border-top d-flex gap-2"> 943 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786439984_GABUNGAN SOFT FILE PERUBAHAN RENJA_compressed (2).pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 944 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786439984_GABUNGAN SOFT FILE PERUBAHAN RENJA_compressed (2).pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 945 </div> 946 </div> 947 </div> 948 </div> 949 </div> 950 <div class="carousel-item "> 951 <div class="row g-4"> 952 <div class="col-md-4"> 953 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 954 <div class="d-flex align-items-start mb-3"> 955 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 956 <div> 957 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">04. Kebijakan Umum Anggaran Pendapatan dan Belanja Daerah (KUA) 2025</h6> 958 <span class="badge bg-light text-secondary border">Tanggal 2025-10-03</span> 959 </div> 960 </div> 961 <div class="mt-auto pt-3 border-top d-flex gap-2"> 962 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786345419_04. Kebijakan Umum Anggaran Pendapatan dan Belanja Daerah (KUA) Provinsi Riau 2025.pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 963 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786345419_04. Kebijakan Umum Anggaran Pendapatan dan Belanja Daerah (KUA) Provinsi Riau 2025.pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 964 </div> 965 </div> 966 </div> 967 <div class="col-md-4"> 968 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 969 <div class="d-flex align-items-start mb-3"> 970 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 971 <div> 972 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">05. Prioritas dan Plafon Anggaran Sementara (PPAS) 2025</h6> 973 <span class="badge bg-light text-secondary border">Tanggal 2025-10-03</span> 974 </div> 975 </div> 976 <div class="mt-auto pt-3 border-top d-flex gap-2"> 977 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786437270_05. Prioritas dan Plafon Anggaran Sementara (PPAS) 2025.pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 978 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786437270_05. Prioritas dan Plafon Anggaran Sementara (PPAS) 2025.pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 979 </div> 980 </div> 981 </div> 982 <div class="col-md-4"> 983 <div class="p-4 bg-white border rounded-4 shadow-sm h-100 d-flex flex-column transition-hover"> 984 <div class="d-flex align-items-start mb-3"> 985 <i class="fas fa-file-pdf fa-2x text-danger me-3 mt-1"></i> 986 <div> 987 <h6 class="fw-bold text-dark mb-1" style="line-height: 1.4;">06. Peraturan Kepala Daerah tentang Penjabaran APBD 2025</h6>
988 <span class="badge bg-light text-secondary border">Tanggal 2025-12-10</span> 989 </div> 990 </div> 991 <div class="mt-auto pt-3 border-top d-flex gap-2"> 992 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786437621_06. Peraturan Kepala Daerah tentang Penjabaran APBD 2025.pdf" target="_blank" class="btn btn-sm btn-outline-success w-50"><i class="fas fa-eye me-1"></i> Preview</a> 993 <a href="https://www.riau.go.id/uploads/dokumen-ipkd/1786437621_06. Peraturan Kepala Daerah tentang Penjabaran APBD 2025.pdf" download class="btn btn-sm btn-success w-50"><i class="fas fa-download me-1"></i> Unduh</a> 994 </div> 995 </div> 996 </div> 997 </div> 998 </div> 999 </div> 1000 1001 <!-- Kontrol Slider (muncul jika dokumen lebih dari 3) --> 1002 <div class="d-flex justify-content-center mt-3 gap-2"> 1003 <button class="btn btn-sm btn-light border rounded-circle" type="button" data-bs-target="#ipkdSlider" data-bs-slide="prev" style="width: 35px; height: 35px;"><i class="fas fa-chevron-left"></i></button> 1004 <button class="btn btn-sm btn-light border rounded-circle" type="button" data-bs-target="#ipkdSlider" data-bs-slide="next" style="width: 35px; height: 35px;"><i class="fas fa-chevron-right"></i></button> 1005 </div> 1006 </div> 1007 </div> 1008</section> 1009 1010<!-- FAQ --> 1011<section class="container py-5"> 1012 <div class="row justify-content-center"> 1013 <div class="col-lg-8 text-center mb-4"> 1014 <h3 class="fw-bold text-dark">Pertanyaan yang Sering Diajukan (FAQ)</h3> 1015 <p class="text-muted">Temukan jawaban cepat untuk pertanyaan umum mengenai layanan di portal Selasar Riau.</p> 1016 </div> 1017 <div class="col-lg-8"> 1018 <div class="accordion shadow-sm rounded-4 overflow-hidden border-0" id="faqSelasar"> 1019 <div class="accordion-item border-0 border-bottom"> 1020 <h2 class="accordion-header"> 1021 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">Apa itu Selasar Riau?</button> 1022 </h2> 1023 <div id="faq1" class="accordion-collapse collapse"><div class="accordion-body text-muted">Selasar Riau adalah Sistem Elektronik Layanan Administrasi dan Informasi Rakyat terpadu yang disediakan oleh Pemerintah Provinsi Riau.</div></div> 1024 </div> 1025 </div> 1026 </div> 1027 </div> 1028</section> 1029 1030<!-- DIREKTORI KAB/KOTA --> 1031<section class="container py-4 border-top"> 1032 <h6 class="text-center text-muted fw-bold mb-4 text-uppercase tracking-wide">Terintegrasi Dengan Pemerintah Kabupaten/Kota Se-Riau</h6> 1033 <div class="swiper dirSlider"> 1034 <div class="swiper-wrapper align-items-center"> 1035 <div class="swiper-slide text-center"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Lambang_Kota_Pekanbaru.png" class="dir-logo" alt="Pekanbaru"></div> 1036 <div class="swiper-slide text-center"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/Lambang_Kabupaten_Kampar.png" class="dir-logo" alt="Kampar"></div> 1037 <div class="swiper-slide text-center"><img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Lambang_Kota_Dumai.png" class="dir-logo" alt="Dumai"></div> 1038 </div> 1039 </div> 1040</section> 1041 1042<!-- SCRIPTS -->
1043<script type="text/javascript" src="https://widget.komdigi.go.id/gpr-widget-kominfo.min.js"></script>
vendor: 1 bytes, line 1043
1043
1044<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
1044 1045
1046<script> 1047 document.addEventListener('DOMContentLoaded', function () { 1048 var swiperLayanan = new Swiper(".layananSlider", { 1049 slidesPerView: 2, spaceBetween: 15, grabCursor: true, watchOverflow: true, 1050 pagination: { el: ".swiper-pagination", clickable: true }, 1051 breakpoints: { 768: { slidesPerView: 4, spaceBetween: 20 }, 1024: { slidesPerView: 5, spaceBetween: 25 } }, 1052 }); 1053 1054 var swiperDir = new Swiper(".dirSlider", { 1055 slidesPerView: 3, spaceBetween: 20, autoplay: { delay: 3000, disableOnInteraction: false }, loop: true, 1056 breakpoints: { 768: { slidesPerView: 5 }, 1024: { slidesPerView: 7 } }, 1057 }); 1058 1059 const counters = document.querySelectorAll('.counter'); 1060 const speed = 200; 1061 const observer = new IntersectionObserver((entries, observer) => { 1062 entries.forEach(entry => { 1063 if (entry.isIntersecting) { 1064 const counter = entry.target; 1065 const target = +counter.getAttribute('data-target'); 1066 const updateCount = () => { 1067 const count = +counter.innerText; 1068 const inc = target / speed; 1069 if (count < target) { counter.innerText = Math.ceil(count + inc); setTimeout(updateCount, 15); } 1070 else { counter.innerText = target % 1 !== 0 ? target : target.toLocaleString('id-ID'); } 1071 }; 1072 updateCount(); 1073 observer.unobserve(counter); 1074 } 1075 }); 1076 }, { threshold: 0.5 }); 1077 counters.forEach(counter => observer.observe(counter)); 1078 }); 1079</script>
1079 1080 1081 </main> 1082 1083 <footer class="bg-dark text-white pt-5 pb-3 mt-5"> 1084 <div class="container"> 1085 <div class="row"> 1086 <div class="col-md-6 mb-3"> 1087 <div class="d-flex flex-column mb-3"> 1088 <div class="d-flex align-items-center mb-1"> 1089 <svg width="150" height="35" viewBox="0 0 280 60" fill="none" xmlns="http://www.w3.org/2000/svg" class="me-3"> 1090 <path d="M15 10L30 40M15 10L0 40M15 10V50" stroke="#F4D03F" stroke-width="6" stroke-linecap="round"/> 1091 <path d="M5 45L15 55L25 45" stroke="#F4D03F" stroke-width="4" stroke-linecap="round"/> 1092 <text x="45" y="38" font-family="'Poppins', sans-serif" font-weight="700" font-size="32" fill="#FFFFFF">SELASAR</text> 1093 <text x="45" y="52" font-family="'Poppins', sans-serif" font-size="13" font-weight="600" letter-spacing="3" fill="#F4D03F">PROVINSI RIAU</text> 1094 </svg> 1095 </div> 1096 <span class="text-white-50" style="font-size: 0.75rem; font-style: italic;">Sistem Elektronik Layanan Administrasi dan Informasi Rakyat</span> 1097 </div> 1098 <p class="text-white-50 mt-3">Pusat informasi dan layanan publik terpadu untuk masyarakat Riau yang transparan, cepat, dan digital.</p> 1099 </div> 1100 <div class="col-md-3 mb-3"> 1101 <h5 class="fw-bold mb-3">Tautan Cepat</h5> 1102 <ul class="list-unstyled"> 1103 <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Biro Hukum (JDIH)</a></li> 1104 <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Dinas Kesehatan</a></li> 1105 <li class="mb-2"><a href="#" class="text-white-50 text-decoration-none">Dinas Pendidikan</a></li> 1106 </ul> 1107 </div> 1108 <div class="col-md-3 mb-3"> 1109 <h5 class="fw-bold mb-3">Kontak</h5> 1110 <p class="text-white-50 mb-2"><i class="fas fa-map-marker-alt me-2 text-warning"></i> Kantor Gubernur Riau, Pekanbaru</p> 1111 <p class="text-white-50"><i class="fas fa-envelope me-2 text-warning"></i> [email protected]</p> 1112 </div> 1113 </div> 1114 <hr class="border-secondary mt-4"> 1115 <div class="text-center text-white-50 mt-3"> 1116 <small>© 2026 Pemerintah Provinsi Riau. Dikelola oleh Diskominfotik.</small> 1117 </div> 1118 </div> 1119 </footer> 1120 1121
1121<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
1121 1122 1123
1123<script> 1124 document.addEventListener("DOMContentLoaded", function(){ 1125 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]')) 1126 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 1127 return new bootstrap.Tooltip(tooltipTriggerEl) 1128 }) 1129 }); 1130 </script>
1130 1131</body> 1132</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.