PageSourceSearch

https://www.riau.go.id/

html riau.go.id collected 2026-10-02 05:18:07 UTC 86,253 bytes, 1,132 lines download raw bytes

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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&bull;</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>&copy; 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.