@{
    Layout = "_Layout";

        ViewData["Title"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["Description"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";
        ViewData["Keywords"] = "Indeks Kualitas Lingkungan Hidup (IKLH), Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
        ViewData["OgTitle"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgDescription"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";
        ViewData["TwitterTitle"] = "Indeks Kualitas Lingkungan Hidup (IKLH) - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["TwitterDescription"] = "Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).";

        // Breadcumb
        ViewData["BreadcrumbText"] = "Indeks Kualitas Lingkungan Hidup (IKLH)";
        ViewData["TitleBeforeHighlight"] = "Indeks Kualitas";
        ViewData["TitleHighlight"] = "Lingkungan Hidup (IKLH)";
}

<!-- Breadcumb -->
<partial name="~/Views/Shared/Partials/_Breadcumb.cshtml" />

<div class="flex justify-center">
    <div class="w-full max-w-6xl py-12">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-4">Indeks Kualitas Lingkungan Hidup (IKLH)</h1>
            <p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
                Indeks Kualitas Lingkungan Hidup (IKLH) adalah nilai yang menggambarkan kualitas Lingkungan Hidup dalam suatu wilayah pada waktu tertentu, yang merupakan nilai komposit dari Indeks Kualitas Air (IKA), Indeks Kualitas Udara (IKU), Indeks Kualitas Lahan (IKL), dan Indeks Kualitas Air Laut (IKAL).
            </p>
        </div>
    </div>
</div>

<div class="container max-w-6xl mx-auto pb-8">
    <div class="flex flex-col lg:flex-row gap-8">
        <!-- Main Content -->
        <div class="lg:w-2/3">
            <div class="bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-sm border border-gray-100 p-8 backdrop-blur-sm">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                <i class="fas fa-file-archive text-green-600 mr-3"></i>
                Dokumen
                </h2>
             <div class="flex items-center gap-3">
                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">8 Dokumen</span>
                    <div class="flex items-center gap-2">
                        <label class="text-sm font-medium text-gray-700">Filter:</label>
                        <select class="px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500">
                            <option>Semua Tahun</option>
                            <option>2024</option>
                            <option>2023</option>
                            <option>2019</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                  <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                 <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                
                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>
                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

                                <div class="bg-white rounded-xl shadow-sm">
                      <div class="relative overflow-hidden rounded-lg">
                     <div class="_df_thumb" source="@Url.Content("~/assets/documents/dikplhd/Buku_1_Ringkasan_Eksekutif_DIKPLHD_2019.pdf")" thumb="@Url.Content("~/assets/images/dikplhd/buku.jpg")">Klik untuk Lihat & Unduh</div>
                    <h3 class="text-xs font-bold mb-3 text-gray-800 group-hover:text-green-600 transition-colors px-4">Buku I Ringkasan Eksekutif DIKPLHD Tahun 2019</h3>
                    </div>
                </div>

            </div>
            </div>
        </div>

        <!-- Enhanced Sidebar -->
        <div class="lg:w-1/3 space-y-6">
            <!-- Search Box -->
            <div class="bg-gradient-to-br from-white to-green-50 rounded-xl shadow-lg border border-green-100 p-6">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <i class="fas fa-search text-green-600 mr-3"></i>
                    Cari Dokumen
                </h3>
                <div class="relative">
                    <input type="text" class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" placeholder="Masukkan kata kunci...">
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-green-600 text-white px-4 py-2 rounded-md hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-md">
                        Cari
                    </button>
                </div>
            </div>

        </div>
    </div>
</div>

<register-block dynamic-section="css" key="cssDIKPLHD">
    <link href="~/assets/dflip/css/dflip.min.css" rel="stylesheet" type="text/css">
    <link href="~/assets/dflip/css/themify-icons.min.css" rel="stylesheet" type="text/css">
</register-block>

<register-block dynamic-section="scripts" key="jsDIKPLHD">
    <script src="~/assets/dflip/js/libs/jquery.min.js" type="text/javascript"></script>
    <script src="~/assets/dflip/js/dflip.min.js" type="text/javascript"></script>
</register-block>