Differences

This shows you the differences between two versions of the page.

--- geodinamika [2026/02/09 11:36] – [📌 Catatan] geofitera
+++ geodinamika [2026/02/09 16:31] (current) – [📌 Catatan] geofitera
@@ Line 72: / Line 72: @@
   * Materi dapat berubah mengikuti perkembangan kelas.
   * Silakan cek laman ini secara berkala untuk update terbaru.
-<html>
-<!-- Load Tailwind & Fonts & Icons -->
-<script src="https://cdn.tailwindcss.com"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<script src="https://unpkg.com/lucide@latest"></script>
-<!-- Custom Styles -->
-<style>
-    #modern-course-wrapper {
-        font-family: 'Inter', sans-serif;
-        font-size: 16px;
-        line-height: 1.6;
-        color: #1e293b;
-    }
-    #modern-course-wrapper a {
-        text-decoration: none !important;
-    }
-    details > summary {
-        list-style: none;
-        cursor: pointer;
-    }
-    details > summary::-webkit-details-marker {
-        display: none;
-    }
-    details[open] summary ~ * {
-        animation: sweep .3s ease-in-out;
-    }
-    @keyframes sweep {
-%    {opacity: 0; transform: translateY(-10px)}
-%  {opacity: 1; transform: translateY(0)}
-    }
-    .slide-container {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        padding-top: 56.25%;
-        border-radius: 0.5rem;
-        border: 1px solid #cbd5e1;
-        background-color: #f1f5f9;
-    }
-    .slide-container iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-    }
-    .btn-action { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; }
-    .btn-video { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
-    .btn-video:hover { background-color: #fca5a5; }
-    .tag-week { background: #f1f5f9; color: #475569; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; border: 1px solid #cbd5e1; }
-    .version-badge {
-        font-size: 0.7rem;
-        padding: 2px 8px;
-        border-radius: 4px;
-        font-weight: 600;
-        text-transform: uppercase;
-    }
-</style>
-<div id="modern-course-wrapper" class="w-full bg-white p-2 sm:p-4">
-    <!-- BAGIAN MATERI & JADWAL SAJA -->
-    <div class="space-y-6">
-        <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-2 mb-6 border-b pb-3">
-            <i data-lucide="presentation" class="text-blue-600"></i> Materi & Jadwal Perkuliahan
-        </h2>
-        <!-- TEMPLATE MINGGUAN (Copy blok ini untuk menambah minggu berikutnya) -->
-        <!-- MINGGU 1 -->
-        <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" open>
-            <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors">
-                <div class="flex items-center gap-4">
-                    <span class="tag-week">Minggu 1</span>
-                    <span class="font-bold text-lg text-slate-800">Pengantar & Konsep Dasar Geodinamika</span>
-                </div>
-                <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300">
-                    <i data-lucide="chevron-down" class="w-6 h-6"></i>
-                </span>
-            </summary>
-            <div class="p-6 border-t border-slate-100 bg-slate-50/50">
-                <div class="grid md:grid-cols-2 gap-8">
-                    <!-- Sisi Kiri: Slideshow -->
-                    <div class="space-y-3">
-                        <div class="flex justify-between items-center">
-                            <div class="flex items-center gap-2">
-                                <label class="text-xs font-bold text-slate-500 uppercase tracking-wider">Slide Presentasi</label>
-                                <span class="version-badge bg-blue-100 text-blue-700">Versi 1.0 (Feb 2026)</span>
-                            </div>
-                            <a href="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/edit" target="_blank" class="text-blue-600 text-xs hover:underline flex items-center gap-1">
-                                Full Screen <i data-lucide="external-link" class="w-3 h-3"></i>
-                            </a>
-                        </div>
-                        <div class="slide-container shadow-inner">
-                            <iframe src="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" loading="lazy"></iframe>
-                        </div>
-                    </div>
-                    <!-- Sisi Kanan: Penjelasan & Rekaman -->
-                    <div class="space-y-5">
-                        <div class="bg-white p-5 rounded-lg border border-slate-200 shadow-sm">
-                            <h4 class="font-bold text-slate-800 text-base mb-3 flex items-center gap-2 m-0 border-b-0">
-                                <i data-lucide="sticky-note" class="w-4 h-4 text-amber-500"></i> Ringkasan Materi
-                            </h4>
-                            <p class="text-sm text-slate-600 leading-relaxed m-0">
-                                Sesi ini mencakup pengantar silabus, kontrak kuliah, dan pemahaman dasar mengenai mekanisme internal bumi. Fokus utama adalah pada perbedaan skala waktu geologi.
-                            </p>
-                        </div>
-                        <div class="space-y-3">
-                            <div class="flex items-center gap-2">
-                                <h4 class="font-bold text-slate-800 text-sm m-0">Rekaman Kuliah</h4>
-                                <span class="version-badge bg-red-100 text-red-700">Versi Live Zoom</span>
-                            </div>
-                            <a href="#" target="_blank" class="btn-action btn-video w-full justify-center shadow-sm">
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Tonton Rekaman Sesi 1
-                            </a>
-                            <p class="text-[11px] text-slate-400 text-center italic">Akses terbatas untuk mahasiswa terdaftar.</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </details>
-        <!-- AKHIR TEMPLATE MINGGUAN -->
-        <!-- PETUNJUK PENAMBAHAN UNTUK DOSEN (Hapus jika tidak diperlukan) -->
-        <div class="mt-10 p-4 border-2 border-dashed border-slate-200 rounded-lg bg-slate-50">
-            <h5 class="text-sm font-bold text-slate-500 mb-2 flex items-center gap-2">
-                <i data-lucide="help-circle" class="w-4 h-4"></i> Cara Menambah Materi Minggu Berikutnya:
-            </h5>
-            <ol class="text-xs text-slate-500 space-y-1 ml-4 list-decimal">
-                <li>Cari komentar <code>&lt;!-- MINGGU 1 --&gt;</code> sampai <code>&lt;!-- AKHIR TEMPLATE MINGGUAN --&gt;</code> di dalam kode.</li>
-                <li>Copy seluruh blok tersebut dan paste tepat di bawahnya.</li>
-                <li>Ubah angka "Minggu 1" menjadi "Minggu 2", dst.</li>
-                <li>Ganti ID pada link Google Slide (ID adalah kode unik di antara <code>/d/</code> dan <code>/embed</code>).</li>
-                <li>Perbarui keterangan <b>Versi</b> sesuai kebutuhan.</li>
-            </ol>
-        </div>
-    </div>
-</div>
-<script>
-    lucide.createIcons();
-</script>
-</html>
-<html>
-<!-- Load Tailwind & Fonts & Icons -->
-<script src="https://cdn.tailwindcss.com"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<script src="https://unpkg.com/lucide@latest"></script>
-<!-- Custom Styles -->
-<style>
-    /* Scoped Styles untuk Wrapper */
-    #modern-course-wrapper {
-        font-family: 'Inter', sans-serif;
-        /* Menaikkan base size agar lebih terbaca di DokuWiki */
-        font-size: 16px;
-        line-height: 1.6;
-        color: #1e293b; /* slate-800 */
-    }
-    #modern-course-wrapper a {
-        text-decoration: none !important;
-    }
-    /* Styling untuk Accordion (Details/Summary) */
-    details > summary {
-        list-style: none;
-        cursor: pointer;
-    }
-    details > summary::-webkit-details-marker {
-        display: none;
-    }
-    details[open] summary ~ * {
-        animation: sweep .3s ease-in-out;
-    }
-    @keyframes sweep {
-%    {opacity: 0; transform: translateY(-10px)}
-%  {opacity: 1; transform: translateY(0)}
-    }
-    /* Responsive Iframe Container untuk Google Slides */
-    .slide-container {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        padding-top: 56.25%; /* 16:9 Aspect Ratio */
-        border-radius: 0.5rem;
-        border: 1px solid #cbd5e1;
-        background-color: #f1f5f9;
-    }
-    .slide-container iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        width: 100%;
-        height: 100%;
-    }
-    /* Custom Buttons */
-    .btn-action { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; }
-    .btn-primary { background-color: #2563eb; color: white; }
-    .btn-primary:hover { background-color: #1d4ed8; }
-    .btn-video { background-color: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
-    .btn-video:hover { background-color: #fca5a5; }
-    .tag-week { background: #f1f5f9; color: #475569; padding: 4px 12px; border-radius: 99px; font-weight: 700; font-size: 0.85rem; border: 1px solid #cbd5e1; }
-</style>
-<div id="modern-course-wrapper" class="w-full bg-slate-50 p-4 sm:p-6 rounded-xl border border-slate-200 shadow-sm">
-    <!-- Header Banner -->
-    <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-8 text-white shadow-lg mb-8 relative overflow-hidden">
-        <div class="relative z-10">
-            <h1 class="text-3xl sm:text-4xl font-bold tracking-tight mb-2 text-white m-0 border-b-0">📘 Geodinamika</h1>
-            <p class="text-slate-300 text-xl m-0 font-light">TG25-31001 • Semester 5</p>
-            <div class="mt-6 flex flex-wrap items-center gap-4 text-slate-200 text-base">
-                <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg border border-white/10">
-                    <i data-lucide="user" class="w-5 h-5"></i>
-                    <span class="font-medium">Yudha Styawan, M.Sc.</span>
-                </div>
-                <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg border border-white/10">
-                    <i data-lucide="book-open" class="w-5 h-5"></i>
-                    <span>2 SKS</span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Layout Utama: Grid 2 Kolom (Kiri: Jadwal, Kanan: Info/Tugas) -->
-    <div class="grid lg:grid-cols-3 gap-8">
-        <!-- Kolom Kiri: Jadwal Pertemuan (Accordion) -->
-        <div class="lg:col-span-2 space-y-4">
-            <h2 class="text-2xl font-bold text-slate-800 flex items-center gap-2 mb-4 border-b pb-2">
-                <i data-lucide="presentation" class="text-blue-600"></i> Materi & Jadwal
-            </h2>
-            <!-- MINGGU 1 -->
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden" open>
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors">
-                    <div class="flex items-center gap-4">
-                        <span class="tag-week">Mg 1</span>
-                        <span class="font-bold text-lg text-slate-800">Pengantar & Konsep Dasar</span>
-                    </div>
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300">
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i>
-                    </span>
-                </summary>
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50">
-                    <!-- Layout Konten Mingguan -->
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <!-- Sisi Kiri: Slideshow -->
-                        <div class="space-y-2">
-                            <div class="flex justify-between items-center mb-1">
-                                <label class="text-sm font-semibold text-slate-500 uppercase">Slide Presentasi</label>
-                                <a href="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/edit?usp=drive_link" target="_blank" class="text-blue-600 text-sm hover:underline flex items-center gap-1">Buka Full <i data-lucide="external-link" class="w-3 h-3"></i></a>
-                            </div>
-                            <!-- Embed Google Slide (Ubah /edit menjadi /embed) -->
-                            <div class="slide-container">
-                                <iframe src="https://docs.google.com/presentation/d/1cXisQCijRIL0yCbi4mlejeGtBIEsdcQ4sJh3zDEiR6c/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe>
-                            </div>
-                        </div>
-                        <!-- Sisi Kanan: Penjelasan & Video -->
-                        <div class="space-y-4">
-                            <div class="bg-white p-4 rounded-lg border border-slate-200">
-                                <h4 class="font-bold text-slate-800 text-base mb-2 flex items-center gap-2 m-0"><i data-lucide="sticky-note" class="w-4 h-4 text-amber-500"></i> Catatan Materi</h4>
-                                <p class="text-sm text-slate-600 mb-0">
-                                    Pengenalan silabus, aturan perkuliahan, dan definisi dasar geodinamika. Memahami perbedaan antara data geologi dan geofisika.
-                                </p>
-                            </div>
-                            <div>
-                                <h4 class="font-bold text-slate-800 text-sm mb-2">Video Pembelajaran</h4>
-                                <a href="https://docs.google.com/presentation/d/1zCKWvwtyCjOOdhU1FBYMW7VrELUw98SR1pUKB6D6_HU/edit?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center">
-                                    <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Tonton Rekaman
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </details>
-            <!-- MINGGU 2 -->
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors">
-                    <div class="flex items-center gap-4">
-                        <span class="tag-week">Mg 2</span>
-                        <span class="font-bold text-lg text-slate-800">Tektonik Lempeng Global</span>
-                    </div>
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300">
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i>
-                    </span>
-                </summary>
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50">
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div class="space-y-2">
-                             <div class="flex justify-between items-center mb-1">
-                                <label class="text-sm font-semibold text-slate-500 uppercase">Slide Presentasi</label>
-                            </div>
-                            <div class="slide-container">
-                                <iframe src="https://docs.google.com/presentation/d/1UkQJZtNX5GRS6U6tNFQEa0c9tDlWc1OMxxl3hOQDw64/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe>
-                            </div>
-                        </div>
-                        <div class="space-y-4">
-                            <div class="bg-white p-4 rounded-lg border border-slate-200">
-                                <h4 class="font-bold text-slate-800 text-base mb-2 m-0">Ringkasan</h4>
-                                <p class="text-sm text-slate-600">
-                                    Membahas pergerakan lempeng, batas-batas lempeng (divergen, konvergen, transform), dan bukti-bukti tektonik lempeng.
-                                </p>
-                            </div>
-                             <!-- Contoh jika ada tugas di minggu ini -->
-                            <div class="bg-blue-50 border border-blue-200 p-3 rounded-lg flex items-start gap-3">
-                                <i data-lucide="alert-circle" class="w-5 h-5 text-blue-600 mt-0.5"></i>
-                                <div>
-                                    <p class="text-blue-800 font-bold text-sm m-0">Tugas 1 Diberikan</p>
-                                    <p class="text-blue-600 text-xs m-0">Cek panel tugas di sebelah kanan.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </details>
-            <!-- MINGGU 3 -->
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors">
-                    <div class="flex items-center gap-4">
-                        <span class="tag-week">Mg 3</span>
-                        <span class="font-bold text-lg text-slate-800">Dinamika Interior Bumi</span>
-                    </div>
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300">
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i>
-                    </span>
-                </summary>
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50">
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div class="space-y-2">
-                            <div class="slide-container">
-                                <iframe src="https://docs.google.com/presentation/d/1UrnNaCjBYLHUICTBPLlk7xzJGhuOzgkXkl7Ew1h3bEQ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe>
-                            </div>
-                        </div>
-                         <div class="space-y-4">
-                            <a href="https://drive.google.com/file/d/1xHgtaiSDENehJYSEQWI92zRV6O9aAwCQ/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center">
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Tonton Video Materi
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </details>
-            <!-- MINGGU 4-7 (Simple List agar tidak terlalu panjang kodenya, bisa diduplikasi polanya) -->
-            <div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
-                 <h3 class="font-bold text-slate-600 text-sm uppercase mb-4">Minggu Selanjutnya (4-7)</h3>
-                 <div class="space-y-3">
-                    <a href="https://docs.google.com/presentation/d/1GUfZG1_Lwv-ieOLL-Ipz6X28XD8Ber0qgio79Trt_fk/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group">
-                        <div class="flex items-center gap-3">
-                            <span class="tag-week">Mg 4</span>
-                            <span class="font-medium text-slate-700">Materi Minggu 4</span>
-                        </div>
-                        <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
-                    </a>
-                    <a href="https://docs.google.com/presentation/d/14ykA34jpXtBpwOI7Peytm4zG-SwQ3rrShVvLCndPpQI/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group">
-                         <div class="flex items-center gap-3">
-                            <span class="tag-week">Mg 5</span>
-                            <span class="font-medium text-slate-700">Materi Minggu 5</span>
-                        </div>
-                        <div class="flex items-center gap-2">
-                             <i data-lucide="play-circle" class="w-4 h-4 text-red-400"></i>
-                             <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
-                        </div>
-                    </a>
-                     <a href="https://docs.google.com/presentation/d/1Lu7DnrNTGlCbJlATkqkODg2OLGGR6nnbaWN-bir1f9M/edit?usp=drive_link" target="_blank" class="flex items-center justify-between p-3 rounded-lg bg-slate-50 hover:bg-blue-50 border border-slate-200 hover:border-blue-200 transition-all group">
-                         <div class="flex items-center gap-3">
-                            <span class="tag-week">Mg 6</span>
-                            <span class="font-medium text-slate-700">Materi Minggu 6</span>
-                        </div>
-                        <i data-lucide="external-link" class="w-4 h-4 text-slate-400 group-hover:text-blue-500"></i>
-                    </a>
-                 </div>
-            </div>
-             <!-- MINGGU 9 (Pasca UTS) -->
-            <details class="group bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-                <summary class="flex items-center justify-between p-5 cursor-pointer bg-white hover:bg-slate-50 transition-colors">
-                    <div class="flex items-center gap-4">
-                        <span class="tag-week">Mg 9</span>
-                        <span class="font-bold text-lg text-slate-800">Zona Subduksi</span>
-                    </div>
-                    <span class="text-slate-400 group-open:rotate-180 transition-transform duration-300">
-                        <i data-lucide="chevron-down" class="w-6 h-6"></i>
-                    </span>
-                </summary>
-                <div class="p-6 border-t border-slate-100 bg-slate-50/50">
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div class="space-y-2">
-                            <div class="slide-container">
-                                <iframe src="https://docs.google.com/presentation/d/1tk7LRWi5gWu-FntisKaQEwUcpvpDMrXqcmup_9pDCf8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" loading="lazy"></iframe>
-                            </div>
-                        </div>
-                         <div class="space-y-3">
-                            <h4 class="font-bold text-slate-800 text-sm">Referensi Video</h4>
-                            <a href="https://drive.google.com/file/d/1OS8Sg1XCOKV1RSe4tiZfyvvAMYXx5H0N/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center">
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Video Bagian 1
-                            </a>
-                            <a href="https://drive.google.com/file/d/1H4A0ajbgQY-YOeMOoIb3xgU_Q9xM4eA3/view?usp=sharing" target="_blank" class="btn-action btn-video w-full justify-center">
-                                <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> Video Bagian 2
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </details>
-        </div>
-        <!-- Kolom Kanan: Sidebar Informasi (Sticky) -->
-        <div class="lg:col-span-1 space-y-6">
-            <!-- Panel Deskripsi -->
-            <div class="bg-white p-6 rounded-xl border border-slate-200 shadow-sm">
-                <h3 class="font-bold text-lg text-slate-800 mb-4 flex items-center gap-2 border-b-0 m-0">
-                    <i data-lucide="info" class="text-blue-500"></i> Deskripsi
-                </h3>
-                <p class="text-slate-600 text-sm leading-relaxed mb-4">
-                    Mata kuliah ini membahas prinsip dasar geodinamika, tektonik lempeng, zona subduksi, dan evolusi kerak bumi menggunakan data geologi dan geofisika.
-                </p>
-                <div class="flex flex-col gap-2">
-                    <div class="bg-blue-50 p-3 rounded border border-blue-100">
-                        <strong class="text-blue-700 text-xs uppercase block mb-1">CPL 1</strong>
-                        <span class="text-xs text-blue-900">Identifikasi & pemecahan masalah rekayasa kompleks.</span>
-                    </div>
-                </div>
-            </div>
-            <!-- Panel Tugas & Kuis -->
-            <div class="bg-indigo-50 p-6 rounded-xl border border-indigo-100 shadow-sm">
-                 <h3 class="font-bold text-lg text-indigo-900 mb-4 flex items-center gap-2 border-b-0 m-0">
-                    <i data-lucide="check-square" class="text-indigo-600"></i> Penilaian
-                </h3>
-                <div class="space-y-3">
-                    <!-- Kuis Items -->
-                    <a href="https://forms.gle/kgT2ogQMR6DLdq5o8" target="_blank" class="block bg-white p-3 rounded-lg border border-indigo-200 hover:shadow-md transition-all group">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <span class="text-[10px] font-bold text-white bg-indigo-500 px-2 py-0.5 rounded-full">KUIS 1</span>
-                                <div class="text-sm font-bold text-slate-800 mt-1">Materi Mg 1–4</div>
-                            </div>
-                            <i data-lucide="external-link" class="w-4 h-4 text-slate-300 group-hover:text-indigo-500"></i>
-                        </div>
-                    </a>
-                    <!-- Tugas Items -->
-                    <a href="https://docs.google.com/document/d/1a6IaIMPNBbTVyaU-aYZ0dGXs_g7UqJETfPYnFH5KfPQ/edit?usp=sharing" target="_blank" class="block bg-white p-3 rounded-lg border border-emerald-200 hover:shadow-md transition-all group border-l-4 border-l-emerald-500">
-                        <div class="flex justify-between items-start">
-                            <div>
-                                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100">TUGAS 1</span>
-                                <div class="text-sm font-bold text-slate-800 mt-1">Review Jurnal (Mg 2-3)</div>
-                            </div>
-                            <i data-lucide="file-text" class="w-4 h-4 text-slate-300 group-hover:text-emerald-500"></i>
-                        </div>
-                    </a>
-                </div>
-            </div>
-            <!-- Panel Pustaka -->
-            <div class="bg-slate-800 p-6 rounded-xl text-slate-200 shadow-sm">
-                <h3 class="font-bold text-lg text-white mb-4 flex items-center gap-2 border-b-0 m-0">
-                    <i data-lucide="book" class="text-amber-400"></i> Referensi
-                </h3>
-                <ul class="text-sm space-y-4 list-none p-0 m-0">
-                    <li class="flex gap-3">
-                        <span class="text-amber-400 font-bold">1.</span>
-                        <span>Turcotte, D.L., & Schubert, G. (2014). <em>Geodynamics (3rd ed.)</em>. Cambridge Univ. Press.</span>
-                    </li>
-                    <li class="flex gap-3">
-                        <span class="text-amber-400 font-bold">2.</span>
-                        <span>Fowler, C.M.R. (2005). <em>The Solid Earth</em>. Cambridge Univ. Press.</span>
-                    </li>
-                </ul>
-                <div class="mt-6 pt-4 border-t border-slate-700">
-                    <a href="https://www.youtube.com/@helsinkiuniversitygeodynam6511" target="_blank" class="flex items-center gap-2 text-sm text-slate-300 hover:text-white transition-colors">
-                        <i data-lucide="youtube" class="w-4 h-4 text-red-500"></i> Helsinki Univ. Geodynamics
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="mt-8 text-center text-slate-400 text-sm border-t border-slate-200 pt-4">
-        Last updated: 2026 • Silakan cek berkala untuk perubahan jadwal.
-    </div>
-</div>
-<!-- Script Icons -->
-<script>
-    lucide.createIcons();
-</script>
-</html>