@{
    Layout = "_Layout";

        ViewData["Title"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["Description"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
        ViewData["Keywords"] = "Keanekaragaman Hayati, Flora Fauna Jakarta, Konservasi, Ekosistem Urban, Biodiversitas, Jakarta";
        ViewData["OgTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["OgDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";
        ViewData["TwitterTitle"] = "Keanekaragaman Hayati - Dinas Lingkungan Hidup DKI Jakarta";
        ViewData["TwitterDescription"] = "Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.";

        // Breadcumb
        ViewData["BreadcrumbText"] = "Keanekaragaman Hayati";
        ViewData["TitleBeforeHighlight"] = "Keanekaragaman";
        ViewData["TitleHighlight"] = "Hayati";
}

<!-- 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">Keanekaragaman Hayati</h1>
            <p class="text-gray-600 max-w-4xl mx-auto leading-relaxed">
                Informasi lengkap mengenai keanekaragaman hayati di DKI Jakarta. Temukan data flora dan fauna, program konservasi, serta upaya pelestarian ekosistem urban yang dilakukan oleh Dinas Lingkungan Hidup DKI Jakarta.
            </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>