1787151060s:64695:"<!DOCTYPE html>
<html lang="id" style="scroll-behavior: smooth;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="6jhN4JtnaQpHsVk3U90DMKzNRGiCYBniO56u6P1L">
    <title>Transparansi APBDes Desa Simanindo - Akuntabel &amp; Partisipatif - Portal Transparansi Publik</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- CSS -->
    <link rel="stylesheet" href="http://127.0.0.1:8000/assets/css/style.css">

    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        :root {
            --primary: #006c49;
            --primary-light: #059669;
            --primary-dark: #022c22;
            --primary-glow: rgba(0, 108, 73, 0.15);
            --surface: #ffffff;
            --surface-variant: #f8fafc;
            --surface-container: #f1f5f9;
            --on-surface: #0f172a;
            --on-surface-variant: #475569;
            --outline: #e2e8f0;
            --outline-variant: #edf2f7;
            --gold-accent: #f59e0b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--on-surface);
            background-color: #f8fafc;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            letter-spacing: -0.025em;
        }

        /* Top Government Bar */
        .gov-topbar {
            background: #02241b;
            color: #a7f3d0;
            font-size: 0.76rem;
            padding: 8px 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .gov-topbar-inner {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        /* Public Navigation Bar */
        .public-navbar {
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.85);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.04);
        }

        .navbar-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .brand-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, #006c49 0%, #059669 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            box-shadow: 0 4px 14px rgba(0, 108, 73, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.25);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .brand-logo:hover .brand-icon {
            transform: scale(1.06) rotate(-2deg);
        }

        .brand-text h2 {
            margin: 0;
            font-size: 1.18rem;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .brand-text h2 span {
            color: #006c49;
        }

        .brand-text p {
            margin: 2px 0 0;
            font-size: 0.74rem;
            color: #64748b;
            font-weight: 600;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-links a.nav-item-link {
            color: #475569;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.88rem;
            padding: 8px 14px;
            border-radius: 10px;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .nav-links a.nav-item-link:hover {
            color: #006c49;
            background: rgba(0, 108, 73, 0.08);
        }

        .btn-nav-login {
            background: linear-gradient(135deg, #006c49 0%, #059669 100%);
            color: #fff !important;
            padding: 9px 20px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.85rem;
            box-shadow: 0 4px 14px rgba(0, 108, 73, 0.28);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            transition: all 0.25s ease;
            margin-left: 8px;
        }

        .btn-nav-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 108, 73, 0.4);
        }

        /* Mobile Menu Toggle Button */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--on-surface);
            font-size: 1.8rem;
            cursor: pointer;
            padding: 4px;
        }

        /* Glass Panel */
        .glass-card-public {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .glass-card-public:hover {
            box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
        }

        /* Form Custom */
        .form-control-public {
            width: 100%;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1.5px solid var(--outline);
            background: #fff;
            font-size: 0.9rem;
            color: var(--on-surface);
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .form-control-public:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3.5px rgba(0, 108, 73, 0.14);
        }

        /* Luxury Executive Footer */
        .footer-public {
            background: linear-gradient(180deg, #02241b 0%, #011812 100%);
            color: #94a3b8;
            padding: 80px 24px 34px;
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(16, 185, 129, 0.25);
        }

        .footer-public::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1100px;
            height: 280px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
            pointer-events: none;
        }

        .footer-container {
            max-width: 1280px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
            gap: 44px;
            margin-bottom: 50px;
            position: relative;
            z-index: 2;
        }

        .footer-col h4 {
            color: #ffffff;
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 1.02rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
            letter-spacing: -0.3px;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-col ul li {
            margin-bottom: 12px;
        }

        .footer-col ul li a {
            color: #94a3b8;
            text-decoration: none;
            font-size: 0.86rem;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-col ul li a:hover {
            color: #34d399;
            transform: translateX(4px);
        }

        .footer-contact-card {
            background: rgba(255, 255, 255, 0.035);
            border: 1px solid rgba(255, 255, 255, 0.09);
            border-radius: 16px;
            padding: 20px 22px;
            font-size: 0.84rem;
            line-height: 1.65;
            backdrop-filter: blur(10px);
        }

        .footer-bottom {
            max-width: 1280px;
            margin: 0 auto;
            padding-top: 26px;
            border-top: 1px solid rgba(255, 255, 255, 0.09);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            font-size: 0.82rem;
            color: #64748b;
            position: relative;
            z-index: 2;
        }

        @media (max-width: 1024px) {
            .footer-container {
                grid-template-columns: 1fr 1fr;
                gap: 32px;
            }
        }

        @media (max-width: 860px) {
            .mobile-menu-btn {
                display: block;
            }
            .nav-links {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #fff;
                padding: 20px;
                border-bottom: 1px solid #e2e8f0;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            }
            .nav-links.active {
                display: flex;
            }
            .btn-nav-login {
                margin-left: 0;
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 640px) {
            .footer-container {
                grid-template-columns: 1fr;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }
    </style>
    </head>
<body>
    <!-- Top Government Notification Bar -->
    <div class="gov-topbar">
        <div class="gov-topbar-inner">
            <div style="display: flex; align-items: center; gap: 8px;">
                <span class="material-symbols-outlined" style="font-size: 1rem; color: #34d399;">verified</span>
                <span>Portal Resmi Keterbukaan Informasi Publik Pemerintah Desa Simanindo</span>
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
                <span><i class="fas fa-map-marker-alt" style="color: #34d399; margin-right: 4px;"></i> Kab. Samosir, Sumatera Utara</span>
                <span style="display: inline-flex; align-items: center; gap: 4px; background: rgba(52, 211, 153, 0.2); color: #34d399; padding: 2px 8px; border-radius: 12px; font-weight: 700;">
                    ● Data Real-Time
                </span>
            </div>
        </div>
    </div>

    <!-- Main Navigation Bar -->
    <nav class="public-navbar">
        <div class="navbar-container">
            <a href="http://127.0.0.1:8000" class="brand-logo">
                <div class="brand-icon">
                    <span class="material-symbols-outlined" style="font-size: 1.5rem;">account_balance</span>
                </div>
                <div class="brand-text">
                    <h2>APBDes <span>Simanindo</span></h2>
                    <p>Kecamatan Simanindo, Kabupaten Samosir</p>
                </div>
            </a>

            <!-- Mobile Toggle -->
            <button class="mobile-menu-btn" onclick="toggleMobileMenu()" aria-label="Toggle navigation">
                <span class="material-symbols-outlined">menu</span>
            </button>

            <ul class="nav-links" id="navLinksMenu">
                <li><a href="http://127.0.0.1:8000#beranda" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">home</span> Beranda</a></li>
                <li><a href="http://127.0.0.1:8000#ringkasan" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">query_stats</span> APBDes 2026</a></li>
                <li><a href="http://127.0.0.1:8000#program" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">construction</span> Program Desa</a></li>
                <li><a href="http://127.0.0.1:8000/berita" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">newspaper</span> Berita & Publikasi</a></li>
                <li><a href="http://127.0.0.1:8000#infografis" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">image</span> Infografis</a></li>
                <li><a href="http://127.0.0.1:8000#saran" class="nav-item-link"><span class="material-symbols-outlined" style="font-size: 1.1rem;">chat</span> Aspirasi</a></li>
                                    <li>
                        <a href="http://127.0.0.1:8000/login" class="btn-nav-login">
                            <span class="material-symbols-outlined" style="font-size: 1.1rem;">login</span> Masuk Aparatur
                        </a>
                    </li>
                            </ul>
        </div>
    </nav>

    <!-- Main Content Body -->
    <main>
                <!-- HERO SECTION -->
<section class="hero-section" id="beranda" style="background: linear-gradient(135deg, #022c22 0%, #064e3b 45%, #0f172a 100%); color: #fff; padding: 85px 24px 75px; text-align: center; position: relative; overflow: hidden;">
    <!-- Ambient Background Glow -->
    <div style="position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 750px; height: 360px; background: radial-gradient(circle, rgba(16, 185, 129, 0.28) 0%, transparent 70%); filter: blur(50px); pointer-events: none;"></div>

    <div style="max-width: 960px; margin: 0 auto; position: relative; z-index: 2;">
        <div style="display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; background: rgba(16, 185, 129, 0.18); border: 1px solid rgba(52, 211, 153, 0.35); border-radius: 40px; font-size: 0.82rem; font-weight: 700; color: #a7f3d0; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(0,0,0,0.2);">
            <span class="material-symbols-outlined" style="font-size: 1.1rem; color: #34d399;">verified</span>
            PORTAL RESMI KETERBUKAAN INFORMASI APBDES SIMANINDO
        </div>

        <h1 style="font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.18; margin: 0 0 18px; letter-spacing: -1.5px;">
            Transparansi & Akuntabilitas <br>
            <span style="background: linear-gradient(135deg, #34d399 0%, #6ee7b7 50%, #38bdf8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">APBDes Desa Simanindo</span>
        </h1>

        <p style="font-size: 1.08rem; color: #cbd5e1; max-width: 760px; margin: 0 auto 34px; line-height: 1.7; font-weight: 400;">
            Wujud komitmen keterbukaan informasi publik dalam pengelolaan Pendapatan, Belanja, dan Program Pembangunan Desa Simanindo yang akuntabel, inklusif, dan partisipatif bagi seluruh masyarakat.
        </p>

        <!-- Filter Tahun Anggaran & Tombol Cepat -->
        <div style="display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); padding: 8px 18px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.18); gap: 14px; flex-wrap: wrap; justify-content: center; box-shadow: 0 8px 30px rgba(0,0,0,0.2);">
            <span style="font-size: 0.88rem; font-weight: 600; color: #e2e8f0; display: flex; align-items: center; gap: 6px;">
                <span class="material-symbols-outlined" style="font-size: 1.1rem; color: #34d399;">calendar_month</span> Tahun Anggaran:
            </span>
            <form action="http://127.0.0.1:8000" method="GET" style="margin: 0;">
                <select name="tahun" onchange="this.form.submit()" style="background: #064e3b; color: #fff; border: 1px solid rgba(52, 211, 153, 0.4); padding: 6px 16px; border-radius: 30px; font-weight: 700; font-size: 0.88rem; cursor: pointer; outline: none;">
                                            <option value="2026" selected>Tahun 2026</option>
                                            <option value="2025" >Tahun 2025</option>
                                            <option value="2024" >Tahun 2024</option>
                                    </select>
            </form>
            <a href="#ringkasan" style="color: #a7f3d0; text-decoration: none; font-size: 0.82rem; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, 0.15);">
                Lihat Ringkasan <span class="material-symbols-outlined" style="font-size: 1rem;">arrow_downward</span>
            </a>
        </div>
    </div>
</section>

<!-- RINGKASAN KEUANGAN APBDES -->
<section id="ringkasan" style="padding: 0 24px 60px; max-width: 1280px; margin: -45px auto 0; position: relative; z-index: 10;">
    <!-- STAT CARDS (4 PILAR APBDES) -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 40px;">
        <!-- 1. Total Pendapatan -->
        <div class="glass-card-public" style="padding: 24px; border-top: 4px solid #059669; display: flex; align-items: center; gap: 18px;">
            <div style="width: 58px; height: 58px; border-radius: 16px; background: rgba(16, 185, 129, 0.12); color: #006c49; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 1.8rem;">account_balance_wallet</span>
            </div>
            <div>
                <span style="font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Total Pendapatan Desa</span>
                <h3 style="margin: 4px 0 0; font-size: 1.35rem; font-weight: 900; color: #006c49;">
                    Rp 1.425.000.000
                </h3>
                <span style="font-size: 0.72rem; color: #059669; font-weight: 600;">Dana Desa, ADD, PADes, Bagi Hasil</span>
            </div>
        </div>

        <!-- 2. Total Belanja -->
        <div class="glass-card-public" style="padding: 24px; border-top: 4px solid #dc2626; display: flex; align-items: center; gap: 18px;">
            <div style="width: 58px; height: 58px; border-radius: 16px; background: rgba(239, 68, 68, 0.12); color: #dc2626; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 1.8rem;">shopping_bag</span>
            </div>
            <div>
                <span style="font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Total Belanja 5 Bidang</span>
                <h3 style="margin: 4px 0 0; font-size: 1.35rem; font-weight: 900; color: #dc2626;">
                    Rp 1.380.000.000
                </h3>
                <span style="font-size: 0.72rem; color: #ba1a1a; font-weight: 600;">Pembangunan, Pembinaan & Darurat</span>
            </div>
        </div>

        <!-- 3. Pembiayaan Netto -->
        <div class="glass-card-public" style="padding: 24px; border-top: 4px solid #2563eb; display: flex; align-items: center; gap: 18px;">
            <div style="width: 58px; height: 58px; border-radius: 16px; background: rgba(37, 99, 235, 0.12); color: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 1.8rem;">swap_horiz</span>
            </div>
            <div>
                <span style="font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Pembiayaan Netto</span>
                <h3 style="margin: 4px 0 0; font-size: 1.35rem; font-weight: 900; color: #2563eb;">
                    Rp 45.000.000
                </h3>
                <span style="font-size: 0.72rem; color: #1d4ed8; font-weight: 600;">Penerimaan & Pengeluaran Kas</span>
            </div>
        </div>

        <!-- 4. Surplus / Defisit -->
        <div class="glass-card-public" style="padding: 24px; border-top: 4px solid #f59e0b; display: flex; align-items: center; gap: 18px;">
            <div style="width: 58px; height: 58px; border-radius: 16px; background: rgba(245, 158, 11, 0.12); color: #b45309; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                <span class="material-symbols-outlined" style="font-size: 1.8rem;">balance</span>
            </div>
            <div>
                <span style="font-size: 0.8rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px;">Surplus / (Defisit)</span>
                <h3 style="margin: 4px 0 0; font-size: 1.35rem; font-weight: 900; color: #b45309;">
                    Rp 90.000.000
                </h3>
                <span style="font-size: 0.72rem; color: #92400e; font-weight: 600;">Status Neraca Anggaran 2026</span>
            </div>
        </div>
    </div>

    <!-- CHARTS VISUALIZATION -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); gap: 24px; margin-bottom: 50px;">
        <!-- Chart Pendapatan -->
        <div class="glass-card-public" style="padding: 28px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px;">
                    <span class="material-symbols-outlined" style="color: #006c49;">pie_chart</span> Struktur Pendapatan Desa 2026
                </h3>
                <span style="font-size: 0.75rem; background: #ecfdf5; color: #006c49; padding: 4px 10px; border-radius: 20px; font-weight: 700;">
                    Terverifikasi
                </span>
            </div>
            <div style="position: relative; height: 290px;">
                <canvas id="chartPendapatan"></canvas>
            </div>
        </div>

        <!-- Chart Belanja -->
        <div class="glass-card-public" style="padding: 28px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px;">
                    <span class="material-symbols-outlined" style="color: #dc2626;">donut_large</span> Alokasi Belanja 5 Bidang 2026
                </h3>
                <span style="font-size: 0.75rem; background: #fef2f2; color: #dc2626; padding: 4px 10px; border-radius: 20px; font-weight: 700;">
                    5 Bidang APBDes
                </span>
            </div>
            <div style="position: relative; height: 290px;">
                <canvas id="chartBelanja"></canvas>
            </div>
        </div>
    </div>
</section>

<!-- PROGRAM & PEMBANGUNAN UNGGULAN DESA -->
<section id="program" style="background: #ffffff; padding: 80px 24px; border-top: 1px solid var(--outline-variant); border-bottom: 1px solid var(--outline-variant);">
    <div style="max-width: 1280px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 48px;">
            <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(0, 108, 73, 0.08); border-radius: 20px; font-size: 0.78rem; font-weight: 700; color: #006c49; margin-bottom: 8px;">
                <span class="material-symbols-outlined" style="font-size: 1rem;">construction</span> INFRASTRUKTUR & PEMBERDAYAAN
            </div>
            <h2 style="font-size: 2.2rem; font-weight: 900; color: #0f172a; margin: 0 0 10px; letter-spacing: -0.5px;">Program Unggulan Pembangunan Desa</h2>
            <p style="color: #64748b; font-size: 0.95rem; max-width: 620px; margin: 0 auto;">
                Daftar program strategis yang dibiayai oleh APBDes Simanindo tahun 2026 beserta laporan capaian realisasi fisik di lapangan.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px;">
                            <div class="glass-card-public" style="padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #006c49;">
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: #eff6ff; color: #2563eb;">
                                berjalan
                            </span>
                            <span style="font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                                <span class="material-symbols-outlined" style="font-size: 0.9rem; color: #dc2626;">location_on</span> Dusun III Simanindo
                            </span>
                        </div>
                        <h3 style="font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; line-height: 1.4;">Penanganan Darurat Tanggul Jebol &amp; Longsor Jalan Dusun III</h3>
                        <p style="font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 18px;">Perbaikan tanggul penahan tanah yang jebol akibat hujan deras agar tidak menimbun rumah warga dan memutus jalan dusun.</p>
                    </div>

                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;">
                            <span style="color: #475569;">Capaian Fisik</span>
                            <span style="color: #006c49;">95.00%</span>
                        </div>
                        <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 14px;">
                            <div style="width: 95.00%; height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 4px;"></div>
                        </div>
                        <div style="font-size: 0.82rem; color: #475569; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--outline-variant);">
                            <span>Alokasi Anggaran:</span>
                            <strong style="color: #0f172a;">Rp 95.000.000</strong>
                        </div>
                    </div>
                </div>
                            <div class="glass-card-public" style="padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #006c49;">
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: #eff6ff; color: #2563eb;">
                                berjalan
                            </span>
                            <span style="font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                                <span class="material-symbols-outlined" style="font-size: 0.9rem; color: #dc2626;">location_on</span> Dusun II Simanindo
                            </span>
                        </div>
                        <h3 style="font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; line-height: 1.4;">Penyaluran Air Bersih &amp; Perbaikan Pipa Utama Mata Air Dusun II</h3>
                        <p style="font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 18px;">Penanganan krisis air bersih akibat pipa transmisi utama pecah yang melayani ratusan keluarga.</p>
                    </div>

                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;">
                            <span style="color: #475569;">Capaian Fisik</span>
                            <span style="color: #006c49;">85.00%</span>
                        </div>
                        <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 14px;">
                            <div style="width: 85.00%; height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 4px;"></div>
                        </div>
                        <div style="font-size: 0.82rem; color: #475569; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--outline-variant);">
                            <span>Alokasi Anggaran:</span>
                            <strong style="color: #0f172a;">Rp 45.000.000</strong>
                        </div>
                    </div>
                </div>
                            <div class="glass-card-public" style="padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #006c49;">
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: #eff6ff; color: #2563eb;">
                                berjalan
                            </span>
                            <span style="font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                                <span class="material-symbols-outlined" style="font-size: 0.9rem; color: #dc2626;">location_on</span> Dusun I Simanindo
                            </span>
                        </div>
                        <h3 style="font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; line-height: 1.4;">Perbaikan Gelagar Jembatan Kayu Akses Pertanian Dusun I</h3>
                        <p style="font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 18px;">Penggantian gelagar balok kayu jembatan yang lapuk agar hasil panen warga tetap dapat diangkut.</p>
                    </div>

                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;">
                            <span style="color: #475569;">Capaian Fisik</span>
                            <span style="color: #006c49;">70.00%</span>
                        </div>
                        <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 14px;">
                            <div style="width: 70.00%; height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 4px;"></div>
                        </div>
                        <div style="font-size: 0.82rem; color: #475569; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--outline-variant);">
                            <span>Alokasi Anggaran:</span>
                            <strong style="color: #0f172a;">Rp 35.000.000</strong>
                        </div>
                    </div>
                </div>
                            <div class="glass-card-public" style="padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #006c49;">
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: #eff6ff; color: #2563eb;">
                                selesai
                            </span>
                            <span style="font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                                <span class="material-symbols-outlined" style="font-size: 0.9rem; color: #dc2626;">location_on</span> Posyandu Desa Simanindo
                            </span>
                        </div>
                        <h3 style="font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; line-height: 1.4;">Pemberian Makanan Tambahan (PMT) Balita &amp; Lansia</h3>
                        <p style="font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 18px;">Program berkelanjutan posyandu untuk eliminasi kasus stunting desa.</p>
                    </div>

                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;">
                            <span style="color: #475569;">Capaian Fisik</span>
                            <span style="color: #006c49;">100.00%</span>
                        </div>
                        <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 14px;">
                            <div style="width: 100.00%; height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 4px;"></div>
                        </div>
                        <div style="font-size: 0.82rem; color: #475569; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--outline-variant);">
                            <span>Alokasi Anggaran:</span>
                            <strong style="color: #0f172a;">Rp 60.000.000</strong>
                        </div>
                    </div>
                </div>
                            <div class="glass-card-public" style="padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-left: 4px solid #006c49;">
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                            <span style="font-size: 0.72rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; background: #eff6ff; color: #2563eb;">
                                berjalan
                            </span>
                            <span style="font-size: 0.78rem; color: #64748b; display: flex; align-items: center; gap: 4px;">
                                <span class="material-symbols-outlined" style="font-size: 0.9rem; color: #dc2626;">location_on</span> Gedung Kesenian Simanindo
                            </span>
                        </div>
                        <h3 style="font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; color: #0f172a; line-height: 1.4;">Pelatihan &amp; Digitalisasi Pemasaran Produk Tenun Ulos</h3>
                        <p style="font-size: 0.85rem; color: #64748b; line-height: 1.6; margin-bottom: 18px;">Mendukung perajin lokal memperluas jangkauan pasar berbasis online.</p>
                    </div>

                    <div>
                        <div style="display: flex; justify-content: space-between; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px;">
                            <span style="color: #475569;">Capaian Fisik</span>
                            <span style="color: #006c49;">80.00%</span>
                        </div>
                        <div style="width: 100%; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; margin-bottom: 14px;">
                            <div style="width: 80.00%; height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 4px;"></div>
                        </div>
                        <div style="font-size: 0.82rem; color: #475569; display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--outline-variant);">
                            <span>Alokasi Anggaran:</span>
                            <strong style="color: #0f172a;">Rp 75.000.000</strong>
                        </div>
                    </div>
                </div>
                    </div>
    </div>
</section>

<!-- BERITA & PUBLIKASI DESA -->
<section id="berita" style="padding: 80px 24px; max-width: 1280px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px;">
        <div>
            <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(37, 99, 235, 0.08); border-radius: 20px; font-size: 0.78rem; font-weight: 700; color: #2563eb; margin-bottom: 8px;">
                <span class="material-symbols-outlined" style="font-size: 1rem;">newspaper</span> KABAR & AGENDA DESA
            </div>
            <h2 style="font-size: 2.2rem; font-weight: 900; color: #0f172a; margin: 0; letter-spacing: -0.5px;">Berita & Informasi Resmi</h2>
        </div>
        <a href="http://127.0.0.1:8000/berita" class="btn-secondary-custom" style="font-size: 0.85rem; padding: 8px 18px; color: #006c49; border-color: #a7f3d0; background: #f0fdf4;">
            Lihat Semua Berita <span class="material-symbols-outlined" style="font-size: 1rem;">arrow_forward</span>
        </a>
    </div>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;">
                    <div class="glass-card-public" style="overflow: hidden; display: flex; flex-direction: column;">
                <div style="height: 190px; background: #e2e8f0; position: relative; overflow: hidden;">
                                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 2.5rem; background: linear-gradient(135deg, #f1f5f9, #e2e8f0);">
                            <span class="material-symbols-outlined" style="font-size: 3rem;">image</span>
                        </div>
                                        <span style="position: absolute; top: 12px; left: 12px; background: rgba(2, 44, 34, 0.85); backdrop-filter: blur(6px); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700;">
                        Sosial
                    </span>
                </div>
                <div style="padding: 22px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div style="font-size: 0.78rem; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
                            <span class="material-symbols-outlined" style="font-size: 0.9rem;">schedule</span> 16 Agustus 2026
                        </div>
                        <h4 style="margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; line-height: 1.4;">
                            <a href="http://127.0.0.1:8000/berita/penyaluran-bantuan-pangan-dan-program-ketahanan-pangan-desa" style="color: #0f172a; text-decoration: none;">Penyaluran Bantuan Pangan dan Program Ketahanan Pangan Desa</a>
                        </h4>
                        <p style="font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.5;">Kepala Desa bersama BPD dan Perangkat Desa menyalurkan bantuan ketahanan pangan secara lan...</p>
                    </div>
                    <div style="margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--outline-variant);">
                        <a href="http://127.0.0.1:8000/berita/penyaluran-bantuan-pangan-dan-program-ketahanan-pangan-desa" style="color: #006c49; font-weight: 700; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                            Baca Selengkapnya <span class="material-symbols-outlined" style="font-size: 0.95rem;">arrow_forward</span>
                        </a>
                    </div>
                </div>
            </div>
                    <div class="glass-card-public" style="overflow: hidden; display: flex; flex-direction: column;">
                <div style="height: 190px; background: #e2e8f0; position: relative; overflow: hidden;">
                                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 2.5rem; background: linear-gradient(135deg, #f1f5f9, #e2e8f0);">
                            <span class="material-symbols-outlined" style="font-size: 3rem;">image</span>
                        </div>
                                        <span style="position: absolute; top: 12px; left: 12px; background: rgba(2, 44, 34, 0.85); backdrop-filter: blur(6px); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700;">
                        Pembangunan
                    </span>
                </div>
                <div style="padding: 22px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div style="font-size: 0.78rem; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
                            <span class="material-symbols-outlined" style="font-size: 0.9rem;">schedule</span> 13 Agustus 2026
                        </div>
                        <h4 style="margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; line-height: 1.4;">
                            <a href="http://127.0.0.1:8000/berita/akselerasi-pembangunan-infrastruktur-jalan-lingkungan-dusun-ii" style="color: #0f172a; text-decoration: none;">Akselerasi Pembangunan Infrastruktur Jalan Lingkungan Dusun II</a>
                        </h4>
                        <p style="font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.5;">Proyek rabat beton jalan lingkungan terus dipercepat guna memperlancar akses mobilitas war...</p>
                    </div>
                    <div style="margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--outline-variant);">
                        <a href="http://127.0.0.1:8000/berita/akselerasi-pembangunan-infrastruktur-jalan-lingkungan-dusun-ii" style="color: #006c49; font-weight: 700; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                            Baca Selengkapnya <span class="material-symbols-outlined" style="font-size: 0.95rem;">arrow_forward</span>
                        </a>
                    </div>
                </div>
            </div>
                    <div class="glass-card-public" style="overflow: hidden; display: flex; flex-direction: column;">
                <div style="height: 190px; background: #e2e8f0; position: relative; overflow: hidden;">
                                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 2.5rem; background: linear-gradient(135deg, #f1f5f9, #e2e8f0);">
                            <span class="material-symbols-outlined" style="font-size: 3rem;">image</span>
                        </div>
                                        <span style="position: absolute; top: 12px; left: 12px; background: rgba(2, 44, 34, 0.85); backdrop-filter: blur(6px); color: #fff; padding: 4px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700;">
                        Pemerintahan
                    </span>
                </div>
                <div style="padding: 22px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between;">
                    <div>
                        <div style="font-size: 0.78rem; color: #94a3b8; margin-bottom: 8px; display: flex; align-items: center; gap: 6px;">
                            <span class="material-symbols-outlined" style="font-size: 0.9rem;">schedule</span> 08 Agustus 2026
                        </div>
                        <h4 style="margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; line-height: 1.4;">
                            <a href="http://127.0.0.1:8000/berita/sosialisasi-musrenbang-penetapan-apbdes-simanindo-2026" style="color: #0f172a; text-decoration: none;">Sosialisasi &amp; Musrenbang Penetapan APBDes Simanindo Tahun 2026</a>
                        </h4>
                        <p style="font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.5;">Pemerintah Desa Simanindo telah melaksanakan Musyawarah Perencanaan Pembangunan Desa (Musr...</p>
                    </div>
                    <div style="margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--outline-variant);">
                        <a href="http://127.0.0.1:8000/berita/sosialisasi-musrenbang-penetapan-apbdes-simanindo-2026" style="color: #006c49; font-weight: 700; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px;">
                            Baca Selengkapnya <span class="material-symbols-outlined" style="font-size: 0.95rem;">arrow_forward</span>
                        </a>
                    </div>
                </div>
            </div>
            </div>
</section>

<!-- INFOGRAFIS APBDES -->
<section id="infografis" style="background: #f1f5f9; padding: 80px 24px;">
    <div style="max-width: 1280px; margin: 0 auto;">
        <div style="text-align: center; margin-bottom: 44px;">
            <div style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; background: rgba(0, 108, 73, 0.08); border-radius: 20px; font-size: 0.78rem; font-weight: 700; color: #006c49; margin-bottom: 8px;">
                <span class="material-symbols-outlined" style="font-size: 1rem;">photo_library</span> MEDIA GRAFIS
            </div>
            <h2 style="font-size: 2.2rem; font-weight: 900; color: #0f172a; margin: 0 0 10px; letter-spacing: -0.5px;">Infografis Visual APBDes</h2>
            <p style="color: #64748b; font-size: 0.95rem; max-width: 580px; margin: 0 auto;">
                Ringkasan visual APBDes yang mudah dipahami oleh seluruh lapisan warga masyarakat Desa Simanindo.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px;">
                            <div class="glass-card-public" style="overflow: hidden;">
                    <div style="height: 230px; background: #e2e8f0; display: flex; align-items: center; justify-content: center; position: relative;">
                                                    <img src="http://127.0.0.1:8000/uploads/infografis_2026.png" alt="Infografis Ringkasan APBDes Desa Simanindo 2026" style="width: 100%; height: 100%; object-fit: cover;">
                                            </div>
                    <div style="padding: 22px;">
                        <h4 style="margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: #0f172a;">Infografis Ringkasan APBDes Desa Simanindo 2026</h4>
                        <p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.5;">Rincian pendapatan Rp 1,42 Miliar dan Belanja Rp 1,38 Miliar untuk kemajuan bersama.</p>
                    </div>
                </div>
                            <div class="glass-card-public" style="overflow: hidden;">
                    <div style="height: 230px; background: #e2e8f0; display: flex; align-items: center; justify-content: center; position: relative;">
                                                    <img src="http://127.0.0.1:8000/uploads/infografis_2025.png" alt="Laporan Pertanggungjawaban Realisasi APBDes 2025" style="width: 100%; height: 100%; object-fit: cover;">
                                            </div>
                    <div style="padding: 22px;">
                        <h4 style="margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: #0f172a;">Laporan Pertanggungjawaban Realisasi APBDes 2025</h4>
                        <p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.5;">Realisasi anggaran belanja dan pembangunan desa tahun anggaran 2025.</p>
                    </div>
                </div>
                    </div>
    </div>
</section>

<!-- FORM ASPIRASI & SARAN WARGA -->
<section id="saran" style="padding: 80px 24px; max-width: 860px; margin: 0 auto;">
    <div class="glass-card-public" style="padding: 44px 36px; border-top: 4px solid var(--primary);">
        <div style="text-align: center; margin-bottom: 34px;">
            <div style="width: 54px; height: 54px; border-radius: 14px; background: rgba(0, 108, 73, 0.1); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                <span class="material-symbols-outlined" style="font-size: 1.8rem;">forum</span>
            </div>
            <h2 style="font-size: 1.9rem; font-weight: 900; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.5px;">Aspirasi & Masukan Warga</h2>
            <p style="color: #64748b; font-size: 0.95rem; margin: 0;">Sampaikan saran, kritik membangun, atau pertanyaan terkait pengelolaan APBDes Simanindo.</p>
        </div>

        
        <form action="http://127.0.0.1:8000/saran" method="POST">
            <input type="hidden" name="_token" value="6jhN4JtnaQpHsVk3U90DMKzNRGiCYBniO56u6P1L" autocomplete="off">            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                <div>
                    <label style="display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #334155;">Nama Lengkap *</label>
                    <input type="text" name="nama_pengirim" required class="form-control-public" placeholder="Nama Anda" value="">
                </div>
                <div>
                    <label style="display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #334155;">No. WhatsApp / Telepon</label>
                    <input type="text" name="no_telepon" class="form-control-public" placeholder="08xxxxxxxxxx" value="">
                </div>
            </div>

            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #334155;">Email (Opsional)</label>
                <input type="email" name="email_pengirim" class="form-control-public" placeholder="email@contoh.com" value="">
            </div>

            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #334155;">Topik / Subjek Aspirasi *</label>
                <input type="text" name="subjek" required class="form-control-public" placeholder="Misal: Usulan Perbaikan Penerangan Jalan Dusun I" value="">
            </div>

            <div style="margin-bottom: 24px;">
                <label style="display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: #334155;">Isi Aspirasi / Saran *</label>
                <textarea name="isi_saran" rows="4" required class="form-control-public" placeholder="Tuliskan aspirasi atau masukan Anda secara jelas..."></textarea>
            </div>

            <button type="submit" style="width: 100%; background: linear-gradient(135deg, #006c49 0%, #059669 100%); color: #fff; border: none; padding: 14px; border-radius: 12px; font-weight: 800; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(0, 108, 73, 0.3); transition: transform 0.2s ease;">
                <span class="material-symbols-outlined">send</span> Kirim Aspirasi ke Pemerintah Desa
            </button>
        </form>
    </div>
</section>
    </main>

    <!-- Luxury Executive Footer -->
    <footer class="footer-public">
        <div class="footer-container">
            <!-- Kolom 1: Profil Desa -->
            <div class="footer-col">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
                    <div style="width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #006c49, #059669); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 4px 14px rgba(0, 108, 73, 0.35); border: 1px solid rgba(255, 255, 255, 0.25);">
                        <span class="material-symbols-outlined" style="font-size: 1.4rem;">account_balance</span>
                    </div>
                    <div>
                        <h4 style="margin: 0; font-size: 1.05rem; color: #fff;">Desa Simanindo</h4>
                        <span style="font-size: 0.76rem; color: #34d399; font-weight: 600;">Kabupaten Samosir</span>
                    </div>
                </div>
                <p style="font-size: 0.84rem; line-height: 1.7; color: #94a3b8; margin-bottom: 18px;">
                    Portal resmi transparansi dan akuntabilitas pengelolaan Anggaran Pendapatan dan Belanja Desa (APBDes) Simanindo. Wujud tata kelola keuangan yang terbuka, bersih, dan partisipatif.
                </p>
                <div style="display: inline-flex; align-items: center; gap: 8px; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.25); padding: 6px 14px; border-radius: 20px; font-size: 0.76rem; color: #34d399; font-weight: 700;">
                    <span class="material-symbols-outlined" style="font-size: 0.95rem;">lock</span> Sistem Terenkripsi & Terintegrasi
                </div>
            </div>

            <!-- Kolom 2: Transparansi Anggaran -->
            <div class="footer-col">
                <h4><span class="material-symbols-outlined" style="font-size: 1.15rem; color: #34d399;">query_stats</span> Transparansi APBDes</h4>
                <ul>
                    <li><a href="http://127.0.0.1:8000#ringkasan"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Pagu Pendapatan Desa</a></li>
                    <li><a href="http://127.0.0.1:8000#ringkasan"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Alokasi Belanja 5 Bidang</a></li>
                    <li><a href="http://127.0.0.1:8000#ringkasan"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Pembiayaan & Surplus/Defisit</a></li>
                    <li><a href="http://127.0.0.1:8000#infografis"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Infografis Anggaran</a></li>
                </ul>
            </div>

            <!-- Kolom 3: Layanan & Informasi Publik -->
            <div class="footer-col">
                <h4><span class="material-symbols-outlined" style="font-size: 1.15rem; color: #34d399;">feed</span> Warta & Aspirasi</h4>
                <ul>
                    <li><a href="http://127.0.0.1:8000#program"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Realisasi Program Fisik</a></li>
                    <li><a href="http://127.0.0.1:8000/berita"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Berita & Agenda Desa</a></li>
                    <li><a href="http://127.0.0.1:8000#saran"><span class="material-symbols-outlined" style="font-size: 0.95rem;">chevron_right</span> Kirim Aspirasi Warga</a></li>
                </ul>
            </div>

            <!-- Kolom 4: Kontak & Jam Layanan -->
            <div class="footer-col">
                <h4><span class="material-symbols-outlined" style="font-size: 1.15rem; color: #34d399;">domain</span> Kantor Desa Simanindo</h4>
                <div class="footer-contact-card">
                    <div style="margin-bottom: 10px; color: #cbd5e1; display: flex; align-items: flex-start; gap: 8px;">
                        <span class="material-symbols-outlined" style="font-size: 1.1rem; color: #34d399; margin-top: 1px;">location_on</span>
                        <span>Jl. Pelabuhan Simanindo, Kec. Simanindo, Kab. Samosir, Sumatera Utara 22395</span>
                    </div>
                    <div style="margin-bottom: 10px; color: #cbd5e1; display: flex; align-items: center; gap: 8px;">
                        <span class="material-symbols-outlined" style="font-size: 1.1rem; color: #34d399;">mail</span>
                        <span>kontak@desasimanindo.id</span>
                    </div>
                    <div style="color: #94a3b8; font-size: 0.78rem; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center;">
                        <span>Pelayanan Kantor:</span>
                        <strong style="color: #a7f3d0;">Senin - Jumat (08:00 - 16:00)</strong>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div>
                &copy; 2026 <strong>Pemerintah Desa Simanindo</strong>. Seluruh Hak Cipta Dilindungi.
            </div>
            <div style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
                <span>Landasan Hukum: UU No. 6 Tahun 2014 tentang Desa</span>
                <span style="color: #34d399; font-weight: 700;">● Akuntabel & Terbuka</span>
            </div>
        </div>
    </footer>

    <script>
        function toggleMobileMenu() {
            const menu = document.getElementById('navLinksMenu');
            if (menu) {
                menu.classList.toggle('active');
            }
        }

        // Ultra-Speed Link Pre-fetching Engine (< 0.1s instant page loads)
        document.addEventListener('mouseover', function(e) {
            const a = e.target.closest('a');
            if (a && a.href && a.href.startsWith(window.location.origin) && !a.hasAttribute('data-prefetched') && !a.href.includes('#') && !a.href.includes('logout')) {
                a.setAttribute('data-prefetched', '1');
                const link = document.createElement('link');
                link.rel = 'prefetch';
                link.href = a.href;
                document.head.appendChild(link);
            }
        }, { passive: true });
    </script>
    <script type="speculationrules">
    {
      "prerender": [
        {
          "source": "list",
          "urls": ["/", "/berita", "/admin", "/bendahara", "/kepala-desa", "/perangkat-desa", "/login"],
          "eagerness": "moderate"
        }
      ],
      "prefetch": [
        {
          "source": "list",
          "urls": ["/", "/berita", "/admin", "/bendahara", "/kepala-desa", "/perangkat-desa", "/login"],
          "eagerness": "conservative"
        }
      ]
    }
    </script>
    <script>
    const rupiahFormatter = new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        maximumFractionDigits: 0
    });

    // Chart Pendapatan
    const pendapatanLabels = ["Pendapatan Asli Desa","Dana Desa (APBN)","Alokasi Dana Desa (APBD)","Bagi Hasil Pajak & Retribusi","Bantuan Keuangan Provinsi","Pendapatan Lain-lain"];
    const pendapatanData = [0,0,0,0,0,0];

    const ctxP = document.getElementById('chartPendapatan')?.getContext('2d');
    if (ctxP) {
        new Chart(ctxP, {
            type: 'doughnut',
            data: {
                labels: pendapatanLabels.length ? pendapatanLabels : ['Dana Desa (DDS)', 'Alokasi Dana Desa (ADD)', 'PADes', 'Bagi Hasil Pajak'],
                datasets: [{
                    data: pendapatanData.length && pendapatanData.some(v => v > 0) ? pendapatanData : [800000000, 350000000, 50000000, 45000000],
                    backgroundColor: ['#059669', '#2563eb', '#d97706', '#8b5cf6', '#06b6d4', '#f43f5e', '#ec4899', '#64748b'],
                    borderWidth: 2,
                    borderColor: '#ffffff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { family: 'Inter', size: 11, weight: '600' },
                            usePointStyle: true,
                            padding: 14
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                return label + ': ' + rupiahFormatter.format(value);
                            }
                        }
                    }
                },
                cutout: '65%'
            }
        });
    }

    // Chart Belanja
    const belanjaLabels = ["Penyelenggaraan Pemerintahan Desa","Pelaksanaan Pembangunan Desa","Pembinaan Kemasyarakatan Desa","Pemberdayaan Masyarakat Desa","Penanggulangan Bencana & Darurat"];
    const belanjaData = [0,0,0,0,0];

    const ctxB = document.getElementById('chartBelanja')?.getContext('2d');
    if (ctxB) {
        new Chart(ctxB, {
            type: 'pie',
            data: {
                labels: belanjaLabels.length ? belanjaLabels : ['1. Pemerintahan Desa', '2. Pembangunan Desa', '3. Pembinaan Masyarakat', '4. Pemberdayaan Masyarakat', '5. Darurat & Bencana'],
                datasets: [{
                    data: belanjaData.length && belanjaData.some(v => v > 0) ? belanjaData : [300000000, 600000000, 100000000, 150000000, 95000000],
                    backgroundColor: ['#0284c7', '#059669', '#f59e0b', '#8b5cf6', '#dc2626'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            font: { family: 'Inter', size: 11, weight: '600' },
                            usePointStyle: true,
                            padding: 14
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                return label + ': ' + rupiahFormatter.format(value);
                            }
                        }
                    }
                }
            }
        });
    }
</script>
</body>
</html>
";