From 3a6763cd4330e7f88b6b2713392628cbf74d05d1 Mon Sep 17 00:00:00 2001
From: cw <rrinn.12345@gmail.com>
Date: Thu, 4 Jun 2026 20:24:16 +0700
Subject: [PATCH] mobile layout

---
 groups/ACAAB/index.html |  97 +++++++++++++++++++++++++--
 groups/ACAAB/main.js    | 128 ++++++++++++++++++-----------------
 groups/ACAAB/style.css  | 144 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 304 insertions(+), 65 deletions(-)
diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index 4fefabf..f683a50 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 
 <head>
@@ -1215,17 +1215,106 @@
                         </div>
                     </div>
 
-                    <!-- Responsive: 2-column on desktop -->
+                    <!-- Responsive: 2-column on desktop, hide image on small mobile -->
                     <style>
-                        @media (min-width:1024px) {
+                        /* Hero: 2 kolom di tablet+ */
+                        @media (min-width:640px) {
                             .lg-hero-grid {
                                 grid-template-columns: 1fr 1fr !important;
                             }
-
+                        }
+                        @media (min-width:1024px) {
                             #acaab-hero-img-wrap img {
                                 max-width: 420px !important;
                             }
                         }
+
+                        /* Stats chips: stack vertikal di mobile kecil */
+                        @media (max-width:479px) {
+                            #acaab-stats > div > div:first-child {
+                                flex-direction: column;
+                                gap: 0.375rem;
+                            }
+                            #acaab-stats > div > div:first-child > div {
+                                flex: none !important;
+                                width: 100%;
+                            }
+                            #acaab-stats > div > div:last-child {
+                                gap: 0;
+                            }
+                        }
+
+                        /* Project section header: stack di mobile kecil */
+                        @media (max-width:560px) {
+                            #acaab-proj-section > div > div:first-child {
+                                flex-direction: column;
+                                align-items: flex-start;
+                                gap: 0.75rem;
+                            }
+                        }
+
+                        /* Achievement section padding di mobile */
+                        @media (max-width:639px) {
+                            #acaab-ach-section {
+                                padding-top: 1.75rem !important;
+                                padding-bottom: 2rem !important;
+                            }
+                            #acaab-proj-section {
+                                padding-top: 1.75rem !important;
+                                padding-bottom: 2rem !important;
+                            }
+                        }
+
+                        /* Modal: bottom-sheet full-width di mobile */
+                        @media (max-width:639px) {
+                            .acaab-modal-backdrop {
+                                padding: 0 !important;
+                                align-items: flex-end !important;
+                            }
+                            .acaab-modal-backdrop > div {
+                                max-width: 100% !important;
+                                width: 100% !important;
+                                max-height: 90vh !important;
+                                border-radius: 1rem 1rem 0 0 !important;
+                            }
+                        }
+
+                        /* Pagination: full-width di mobile */
+                        @media (max-width:479px) {
+                            #acaab-ach-more, #acaab-ach-less {
+                                width: 100%;
+                                padding-left: 1rem !important;
+                                padding-right: 1rem !important;
+                            }
+                            /* Pagination container: stack vertikal */
+                            #acaab-ach-section > div:last-child {
+                                flex-direction: column;
+                                align-items: stretch;
+                                gap: 0.5rem;
+                            }
+                        }
+
+                        /* Filter dropdown: full-width di mobile */
+                        @media (max-width:479px) {
+                            #acaab-ach-filters div[style*="flex:1"],
+                            #acaab-proj-filters div[style*="flex:1"],
+                            #acaab-ach-filters select,
+                            #acaab-proj-filters select {
+                                flex: 1 1 100% !important;
+                                min-width: 0 !important;
+                            }
+                            #acaab-ach-filters > div:last-child,
+                            #acaab-proj-filters > div:last-child {
+                                flex-direction: column;
+                            }
+                        }
+
+                        /* Scroll hint: lebih kecil di mobile */
+                        @media (max-width:479px) {
+                            #acaab-proj-section p[style*="text-align:center"] {
+                                display: none;
+                            }
+                        }
                     </style>
                 </section>
 
diff --git a/groups/ACAAB/main.js b/groups/ACAAB/main.js
index a40ece1..ababc47 100644
--- a/groups/ACAAB/main.js
+++ b/groups/ACAAB/main.js
@@ -475,70 +475,75 @@ function infoRow(icon, label, value) {
 
 function memberItem(nama, sub) {
     const initial = (nama || '?').charAt(0).toUpperCase();
-    return `<li style="display:flex;align-items:center;gap:0.5rem;background:#f8fafc;padding:0.5rem 0.75rem;border-radius:0.375rem;">
-        <span style="width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;">${initial}</span>
-        <div style="display:flex;flex-direction:column;">
-            <span style="font-size:0.875rem;font-weight:600;color:#334155;line-height:1.2;">${escHtml(nama)}</span>
-            ${sub ? `<span style="font-size:0.65rem;color:#94a3b8;margin-top:0.125rem;">${escHtml(sub)}</span>` : ''}
-        </div>
+    return `<li style="display:flex;align-items:center;gap:0.375rem;background:#f8fafc;padding:0.35rem 0.5rem;border-radius:0.25rem;">
+        <span style="width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(254,180,1,0.2);color:#b45309;display:flex;align-items:center;justify-content:center;font-size:0.65rem;font-weight:700;flex-shrink:0;">${initial}</span>
+        <span style="font-size:0.75rem;font-weight:600;color:#334155;line-height:1.2;white-space:nowrap;">
+            ${escHtml(nama)}${sub ? `<span style="font-weight:400;color:#64748b;margin-left:0.25rem;">${escHtml(sub)}</span>` : ''}
+        </span>
     </li>`;
 }
 
 function openAchModal(a) {
     const membersHtml = a.members && a.members.length > 0 ? `
-        <div style="border-top:1px solid #f1f5f9;padding-top:1rem;margin-bottom:1rem;">
-            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Anggota Tim</p>
-            <ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
-                ${a.members.map(m => memberItem(m.nama, m.angkatan ? `Angkatan ${m.angkatan}` : '')).join('')}
+        <div style="border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;margin-bottom:0.25rem;">
+            <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.375rem;">Anggota Tim</p>
+            <ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem;">
+                ${a.members.map(m => memberItem(m.nama, m.angkatan ? `(${m.angkatan})` : '')).join('')}
             </ul>
         </div>` : '';
 
     renderModal(`
-        <!-- Image header h-56 -->
-        <div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
-            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="width:100%;height:100%;object-fit:cover;"
+        <!-- Image header: blurred background + contain foreground to show full image in compact height -->
+        <div style="position:relative;height:180px;width:100%;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#003150;flex-shrink:0;">
+            <!-- Blurred background -->
+            <img src="${escHtml(a.image)}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(12px) brightness(0.65);transform:scale(1.1);pointer-events:none;"
+                onerror="this.style.display='none'">
+            <!-- Sharp contain foreground -->
+            <img src="${escHtml(a.image)}" alt="${escHtml(a.title)}" style="position:relative;width:100%;height:100%;object-fit:contain;z-index:10;"
                 onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
-            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
-            <!-- Close button: white rounded-full -->
+            <!-- Close button: dark round top-right -->
             <button id="acaab-modal-close" aria-label="Tutup"
-                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
-                <i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
+                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
+                <i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
             </button>
-            <!-- Two badges bottom-left -->
-            <div style="position:absolute;bottom:1rem;left:1rem;display:flex;gap:0.5rem;flex-wrap:wrap;">
-                <span style="background:#feb401;color:#0f172a;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;display:flex;align-items:center;gap:0.375rem;">
-                    <i class="fas fa-trophy" style="font-size:0.65rem;"></i>${escHtml(a.rank)}
-                </span>
-                <span style="background:rgba(255,255,255,0.2);backdrop-filter:blur(4px);color:white;font-size:0.72rem;font-weight:700;padding:0.3rem 0.75rem;border-radius:0.25rem;text-transform:uppercase;letter-spacing:0.05em;">
-                    ${escHtml(a.level)}
+            <!-- Badge bottom-left: Rank -->
+            <div style="position:absolute;bottom:0.75rem;left:0.75rem;z-index:20;">
+                <span style="background:#feb401;color:#0f172a;font-size:0.7rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:0.25rem;display:inline-block;">
+                    ${escHtml(a.rank)}
                 </span>
             </div>
         </div>
         <!-- Content -->
-        <div style="padding:1.5rem;">
-            <span style="color:#1e40af;font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;">${escHtml(a.category)}</span>
-            <h2 style="font-size:1.125rem;font-weight:700;color:#003150;line-height:1.3;margin:0.25rem 0 1.25rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(a.title)}</h2>
-            <!-- Info grid: slate-50 bg -->
-            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:#f8fafc;border-radius:0.5rem;margin-bottom:1.25rem;">
-                ${infoRow('users', t('grp_acaab_modal_team'), a.team)}
-                ${a.nim ? infoRow('id-card', 'NIM', a.nim) : ''}
-                ${infoRow('user-graduate', t('grp_acaab_modal_generation'), a.generation)}
-                ${infoRow('calendar-alt', 'Tahun', String(a.year))}
-                ${infoRow('award', 'Kompetisi', a.competition)}
-                ${infoRow('tag', 'Bidang', a.category)}
-            </div>
-            ${membersHtml}
+        <div style="padding:1rem 1.25rem 1.25rem 1.25rem;">
+            <!-- Title -->
+            <h2 style="font-size:1.2rem;font-weight:700;color:#003150;line-height:1.3;margin:0 0 0.25rem;font-family:'Roboto', sans-serif;">
+                ${escHtml(a.title)}
+            </h2>
+            
+            <!-- Subtitle (Year • Category • Level) -->
+            <p style="color:#94a3b8;font-size:0.75rem;font-weight:500;margin:0 0 0.75rem;line-height:1.4;">
+                ${escHtml(String(a.year))} &bull; ${escHtml(a.category)} &bull; ${escHtml(a.level)}
+            </p>
+            
             <!-- Description -->
-            <div style="border-top:1px solid #f1f5f9;padding-top:1rem;">
-                <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.5rem;">Deskripsi</p>
-                <p style="color:#475569;font-size:0.875rem;line-height:1.65;margin:0;">${escHtml(a.description)}</p>
-            </div>
-            <!-- Close button full-width -->
-            <button id="acaab-modal-close-btn" style="margin-top:1.5rem;width:100%;padding:0.75rem;background:#003150;color:white;font-weight:700;border:none;border-radius:0.5rem;cursor:pointer;font-size:0.875rem;">
-                Tutup
-            </button>
+            <p style="color:#475569;font-size:0.85rem;line-height:1.5;margin:0 0 1rem;">
+                ${escHtml(a.description)}
+            </p>
+            
+            ${membersHtml}
+            
+            <!-- Footer Info Row (Tim & Angkatan) -->
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid #f1f5f9;padding-top:0.75rem;margin-top:1rem;">
+                <div>
+                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">TIM / PESERTA</p>
+                    <p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.team)}</p>
+                </div>
+                <div>
+                    <p style="font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#94a3b8;margin:0 0 0.15rem;">ANGKATAN</p>
+                    <p style="font-size:0.85rem;font-weight:700;color:#0f172a;margin:0;line-height:1.3;">${escHtml(a.generation)}</p>
+                </div>
         </div>
-    `, true);
+    `, false, 'acaab-modal-achievement');
 }
 
 // ─── Projects ─────────────────────────────────────────────────────────────────
@@ -608,22 +613,23 @@ function renderProjects() {
 
 function projCardHtml(p, idx) {
     const catBadges = p.categories.map(c => `
-        <span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.3);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
+        <span style="display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;font-weight:700;color:#feb401;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.45);padding:0.2rem 0.45rem;border-radius:0.2rem;backdrop-filter:blur(4px);">
             <i class="fas fa-tag" style="font-size:0.5rem;"></i>${escHtml(c)}
         </span>`).join('');
 
     return `
     <div class="acaab-proj-card acaab-proj-card-wrap acaab-fade-in" style="animation-delay:${idx * 0.05}s;">
         <div class="acaab-proj-left-bar"></div>
-        <!-- Image h-52 (208px) dengan title overlay -->
+        <!-- Image h-52 (208px) dengan title overlay mengikuti lebar teks -->
         <div style="height:208px;overflow:hidden;position:relative;">
             <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" loading="lazy" class="acaab-card-img"
                 style="width:100%;height:100%;object-fit:cover;"
                 onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
-            <!-- Gradient overlay: title + categories di dalam gambar -->
-            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,49,80,0.85),transparent);padding:1.25rem;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;">
-                <h4 style="font-size:1rem;font-weight:700;color:white;line-height:1.25;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;">${escHtml(p.title)}</h4>
-                <div style="display:flex;flex-wrap:wrap;gap:0.3rem;">${catBadges}</div>
+            <!-- Overlay hanya di bawah untuk visibility, title pake background inline -->
+            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 60%);pointer-events:none;"></div>
+            <div style="position:absolute;bottom:0;left:0;right:0;padding:0.875rem 1rem;">
+                <h4 style="font-size:0.9375rem;font-weight:700;color:white;line-height:1.3;margin:0 0 0.375rem;font-family:'Roboto Condensed',sans-serif;display:inline;background:rgba(0,49,80,0.75);padding:0.15rem 0.35rem;border-radius:0.2rem;box-decoration-break:clone;-webkit-box-decoration-break:clone;backdrop-filter:blur(2px);">${escHtml(p.title)}</h4>
+                <div style="display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem;">${catBadges}</div>
             </div>
         </div>
         <!-- Body p-5 -->
@@ -720,15 +726,15 @@ function openProjModal(p) {
            </div>`;
 
     renderModal(`
-        <!-- Image header h-56 -->
-        <div style="position:relative;height:224px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
+        <!-- Image header h-70 (280px) -->
+        <div style="position:relative;height:280px;overflow:hidden;border-radius:0.75rem 0.75rem 0 0;background:#e2e8f0;flex-shrink:0;">
             <img src="${escHtml(p.image)}" alt="${escHtml(p.title)}" style="width:100%;height:100%;object-fit:cover;"
                 onerror="this.src='https://placehold.co/800x600/003150/FDB813?text=Informatika+UNTAN'">
-            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 50%,transparent 100%);pointer-events:none;"></div>
-            <!-- Close button -->
+            <div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 55%,transparent 100%);pointer-events:none;"></div>
+            <!-- Close button: dark round top-right -->
             <button id="acaab-modal-close" aria-label="Tutup"
-                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(255,255,255,0.9);backdrop-filter:blur(4px);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);">
-                <i class="fas fa-times" style="color:#334155;font-size:0.875rem;"></i>
+                style="position:absolute;top:0.75rem;right:0.75rem;width:2.25rem;height:2.25rem;background:rgba(0,0,0,0.5);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:20;">
+                <i class="fas fa-times" style="color:white;font-size:0.875rem;"></i>
             </button>
             <!-- Category badges bottom-left -->
             <div style="position:absolute;bottom:1rem;left:1rem;display:flex;flex-wrap:wrap;gap:0.375rem;">${catBadgesImg}</div>
@@ -760,18 +766,18 @@ function openProjModal(p) {
                 Tutup
             </button>
         </div>
-    `, true);
+    `, true, 'acaab-modal-project');
 }
 
 // ─── Modal shared ─────────────────────────────────────────────────────────────
 
-function renderModal(innerHtml, hasCloseBtn = false) {
+function renderModal(innerHtml, hasCloseBtn = false, customClass = '') {
     const container = document.getElementById('acaab-modal');
     if (!container) return;
 
     container.innerHTML = `
         <div class="acaab-modal-backdrop" id="acaab-modal-bd">
-            <div style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
+            <div class="${customClass}" style="background:white;border-radius:0.75rem;max-width:672px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.35);">
                 ${innerHtml}
             </div>
         </div>`;
diff --git a/groups/ACAAB/style.css b/groups/ACAAB/style.css
index 4aef586..86c49a2 100644
--- a/groups/ACAAB/style.css
+++ b/groups/ACAAB/style.css
@@ -204,3 +204,147 @@ body.acaab-modal-open {
     .acaab-fade-in, .acaab-skeleton, .acaab-card-img,
     .acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; }
 }
+
+/* =====================================================
+   RESPONSIVE FIXES — Mobile & Desktop
+   ===================================================== */
+
+/* ── Achievement Grid ── */
+#acaab-ach-grid {
+    display: grid !important;
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+}
+@media (min-width: 480px) {
+    #acaab-ach-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+    }
+}
+@media (min-width: 900px) {
+    #acaab-ach-grid {
+        grid-template-columns: repeat(3, 1fr) !important;
+        gap: 1.5rem !important;
+    }
+}
+
+/* ── Project carousel card: ukuran responsif ── */
+@media (max-width: 479px) {
+    .acaab-proj-card {
+        width: 85vw !important;
+    }
+}
+@media (min-width: 480px) and (max-width: 767px) {
+    .acaab-proj-card {
+        width: 72vw !important;
+    }
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+    .acaab-proj-card {
+        width: 42vw !important;
+    }
+}
+@media (min-width: 1024px) {
+    .acaab-proj-card {
+        width: 28vw !important;
+        max-width: 340px;
+    }
+}
+
+/* ── Hero: sembunyikan gambar di mobile kecil ── */
+@media (max-width: 639px) {
+    #acaab-hero-img-wrap {
+        display: none !important;
+    }
+}
+@media (min-width: 640px) and (max-width: 1023px) {
+    #acaab-hero-img-wrap img {
+        max-width: 220px !important;
+    }
+    #acaab-hero-img-wrap {
+        display: flex !important;
+    }
+    .lg-hero-grid {
+        grid-template-columns: 1fr 1fr !important;
+    }
+}
+
+/* ── Stats: angka lebih kecil di mobile kecil ── */
+@media (max-width: 479px) {
+    #stat-total-ach, #stat-intl, #stat-national, #stat-regional, #stat-total-proj {
+        font-size: 1.65rem !important;
+    }
+}
+
+/* ── Modal: bottom-sheet di mobile ── */
+@media (max-width: 639px) {
+    .acaab-modal-backdrop {
+        padding: 0 !important;
+        align-items: flex-end !important;
+    }
+    .acaab-modal-backdrop > div {
+        max-width: 100% !important;
+        width: 100% !important;
+        max-height: 88vh !important;
+        border-radius: 1rem 1rem 0 0 !important;
+    }
+}
+
+/* ── Project section header: buttons di mobile ── */
+@media (max-width: 479px) {
+    #acaab-proj-prev, #acaab-proj-next {
+        width: 2rem !important;
+        height: 2rem !important;
+    }
+}
+
+/* ── Filter dropdowns: stack secara vertikal di HP kecil ── */
+@media (max-width: 399px) {
+    #acaab-ach-filters > div:last-child,
+    #acaab-proj-filters > div:last-child {
+        flex-direction: column;
+    }
+    #acaab-ach-filters select,
+    #acaab-proj-filters select {
+        min-width: 0 !important;
+        width: 100% !important;
+    }
+}
+
+/* ── Pagination buttons: lebih kecil di mobile ── */
+@media (max-width: 479px) {
+    #acaab-ach-more, #acaab-ach-less, #acaab-proj-more {
+        width: 100% !important;
+        box-sizing: border-box !important;
+    }
+}
+
+/* ── Hero padding responsif ── */
+@media (max-width: 639px) {
+    #acaab-hero {
+        padding-top: 2rem !important;
+    }
+    #acaab-hero > div > div {
+        padding-bottom: 1.5rem !important;
+    }
+}
+
+/* ── Modal Achievement: lebih kecil di desktop sesuai mockup ── */
+@media (min-width: 640px) {
+    .acaab-modal-achievement {
+        max-width: 440px !important;
+    }
+}
+
+/* Tetap centered card di mobile (bukan bottom sheet) untuk prestasi */
+@media (max-width: 639px) {
+    .acaab-modal-backdrop:has(.acaab-modal-achievement) {
+        padding: 1rem !important;
+        align-items: center !important;
+    }
+    .acaab-modal-achievement {
+        max-width: 92% !important;
+        max-height: 90vh !important;
+        border-radius: 0.75rem !important;
+    }
+}
+
