diff --git a/WebGISPovertyMap/style.css b/WebGISPovertyMap/style.css
index 9d8b018..417c075 100644
--- a/WebGISPovertyMap/style.css
+++ b/WebGISPovertyMap/style.css
@@ -1774,10 +1774,21 @@ body {
         left: 0;
     }
 
+    /* Dashboard Sidebar Full-width (100%) */
+    .dashboard-sidebar {
+        width: 100%;
+        right: -100%;
+        border-left: none;
+    }
+
+    .dashboard-sidebar.open {
+        right: 0;
+    }
+
     /* Pindahkan Tombol Toggle ke Bawah Tengah pada Mobile */
     .sidebar-toggle {
         top: auto;
-        bottom: 24px;
+        bottom: 80px;
         left: 50%;
         transform: translateX(-50%);
         box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
@@ -1793,8 +1804,12 @@ body {
         top: 65px !important;
     }
 
+    .leaflet-bottom {
+        bottom: 68px !important;
+    }
+
     .pick-mode-overlay {
-        bottom: 80px;
+        bottom: 136px;
     }
 
     /* Naikkan sedikit agar tidak tertutup tombol toggle */
diff --git a/index.php b/index.php
index 4ba4807..9123021 100644
--- a/index.php
+++ b/index.php
@@ -361,6 +361,42 @@
             color: #52525b;
             letter-spacing: 0.5px;
         }
+
+        /* ==============================
+           RESPONSIVE STYLE OVERRIDES
+        ============================== */
+        @media (max-width: 768px) {
+            body {
+                padding: 24px 16px;
+            }
+            header {
+                margin-bottom: 30px;
+            }
+            h1 {
+                font-size: 1.85rem;
+            }
+            .subtitle {
+                font-size: 0.95rem;
+                margin-bottom: 16px;
+            }
+            .card-grid {
+                grid-template-columns: 1fr;
+                gap: 16px;
+            }
+            .card {
+                padding: 24px;
+            }
+            .card-description {
+                min-height: auto;
+                margin-bottom: 16px;
+            }
+            .features-list {
+                margin-bottom: 20px;
+            }
+            .tech-tags {
+                margin-bottom: 20px;
+            }
+        }
     </style>
 </head>
 
diff --git a/pertemuan1/style.css b/pertemuan1/style.css
index 1b11461..1273ffc 100644
--- a/pertemuan1/style.css
+++ b/pertemuan1/style.css
@@ -1260,3 +1260,137 @@ body {
 .leaflet-control-layers-selector:focus {
     box-shadow: 0 0 0 2.5px rgba(99, 102, 241, 0.25) !important;
 }
+
+/* ==========================================
+   RESPONSIVE DESIGN (BREAKPOINTS)
+   ========================================== */
+
+/* 1. Tablet (< 1024px dan >= 768px) */
+@media (max-width: 1023px) and (min-width: 768px) {
+    .search-wrapper {
+        max-width: 320px;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .custom-select-trigger {
+        min-width: auto;
+        padding-right: 5px;
+    }
+
+    .input-sidebar {
+        width: 310px;
+        left: -330px;
+    }
+
+    .input-sidebar.open {
+        left: 20px;
+    }
+}
+
+/* 2. Mobile (< 768px) */
+@media (max-width: 767px) {
+    /* Header Kompak */
+    .webgis-header {
+        height: 56px;
+        padding: 0 10px;
+        gap: 8px;
+    }
+
+    .brand-name {
+        display: none;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .header-divider {
+        display: none;
+    }
+
+    .search-wrapper {
+        max-width: 100%;
+        flex: 1;
+    }
+
+    /* Layout Kompak untuk Search Bar */
+    .custom-select-trigger {
+        display: none;
+    }
+
+    .search-category-wrap {
+        padding: 0 6px;
+        border-right: none;
+    }
+
+    .category-arrow {
+        display: none;
+    }
+
+    .header-tools {
+        gap: 4px;
+    }
+
+    .tool-badge {
+        display: none;
+    }
+
+    /* Sidebar Full-width (100%) */
+    .input-sidebar {
+        width: 100%;
+        left: -100%;
+        top: 56px;
+        bottom: 0;
+        border-radius: 0;
+        border: none;
+    }
+
+    .input-sidebar.open {
+        left: 0;
+    }
+
+    /* Pindahkan Tombol Toggle ke Bawah Tengah pada Mobile */
+    .sidebar-toggle {
+        top: auto;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    /* Sembunyikan tombol toggle saat sidebar terbuka penuh agar tidak menumpuk */
+    .sidebar-toggle.open {
+        display: none;
+    }
+
+    /* Penyesuaian UI Peta pada Mobile */
+    .leaflet-top {
+        margin-top: 0 !important;
+        top: 65px !important;
+    }
+
+    .leaflet-bottom {
+        bottom: 68px !important;
+    }
+
+    .pick-mode-overlay {
+        top: 66px;
+    }
+
+    .pick-mode-overlay.active {
+        top: 66px;
+    }
+
+    /* Buat legenda lebih kecil di perangkat seluler */
+    .legend h4 {
+        font-size: 10px;
+        margin-bottom: 6px;
+    }
+
+    .legend-item {
+        font-size: 9px;
+    }
+}
diff --git a/pertemuan2/style.css b/pertemuan2/style.css
index ea8c60b..02ea74c 100644
--- a/pertemuan2/style.css
+++ b/pertemuan2/style.css
@@ -1221,3 +1221,137 @@ body {
 .leaflet-control-layers-selector:focus {
     box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.25) !important;
 }
+
+/* ==========================================
+   RESPONSIVE DESIGN (BREAKPOINTS)
+   ========================================== */
+
+/* 1. Tablet (< 1024px dan >= 768px) */
+@media (max-width: 1023px) and (min-width: 768px) {
+    .search-wrapper {
+        max-width: 320px;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .custom-select-trigger {
+        min-width: auto;
+        padding-right: 5px;
+    }
+
+    .input-sidebar {
+        width: 310px;
+        left: -330px;
+    }
+
+    .input-sidebar.open {
+        left: 20px;
+    }
+}
+
+/* 2. Mobile (< 768px) */
+@media (max-width: 767px) {
+    /* Header Kompak */
+    .webgis-header {
+        height: 56px;
+        padding: 0 10px;
+        gap: 8px;
+    }
+
+    .brand-name {
+        display: none;
+    }
+
+    .brand-subtitle {
+        display: none;
+    }
+
+    .header-divider {
+        display: none;
+    }
+
+    .search-wrapper {
+        max-width: 100%;
+        flex: 1;
+    }
+
+    /* Layout Kompak untuk Search Bar */
+    .custom-select-trigger {
+        display: none;
+    }
+
+    .search-category-wrap {
+        padding: 0 6px;
+        border-right: none;
+    }
+
+    .category-arrow {
+        display: none;
+    }
+
+    .header-tools {
+        gap: 4px;
+    }
+
+    .tool-badge {
+        display: none;
+    }
+
+    /* Sidebar Full-width (100%) */
+    .input-sidebar {
+        width: 100%;
+        left: -100%;
+        top: 56px;
+        bottom: 0;
+        border-radius: 0;
+        border: none;
+    }
+
+    .input-sidebar.open {
+        left: 0;
+    }
+
+    /* Pindahkan Tombol Toggle ke Bawah Tengah pada Mobile */
+    .sidebar-toggle {
+        top: auto;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+    }
+
+    /* Sembunyikan tombol toggle saat sidebar terbuka penuh agar tidak menumpuk */
+    .sidebar-toggle.open {
+        display: none;
+    }
+
+    /* Penyesuaian UI Peta pada Mobile */
+    .leaflet-top {
+        margin-top: 0 !important;
+        top: 65px !important;
+    }
+
+    .leaflet-bottom {
+        bottom: 68px !important;
+    }
+
+    .pick-mode-overlay {
+        top: 66px;
+    }
+
+    .pick-mode-overlay.active {
+        top: 66px;
+    }
+
+    /* Buat legenda lebih kecil di perangkat seluler */
+    .legend h4 {
+        font-size: 10px;
+        margin-bottom: 6px;
+    }
+
+    .legend-item {
+        font-size: 9px;
+    }
+}