Rapikan setup jadi workspace bertahap

CHANGELOG.md

@@ -14,6 +14,7 @@ Formatnya mengikuti prinsip [Keep a Changelog](https://keepachangelog.com/) dan
 
 ### Changed
 
+- Setup desktop dirombak menjadi workspace 4 langkah yang lebih padat: sticky step navigation, pack summary ringkas, action hierarchy lebih jelas, dan course pack sebagai accordion rows; browser regression mengunci desktop state sekaligus mobile no-overflow.
 - Homepage Phase 2 mengganti fake ChatGPT phone mockup dengan live Ramu pack preview, menambahkan jalur Pack vs Ramu Starter, memadatkan workflow/layer hierarchy, dan mengubah course catalog menjadi resource list yang lebih tenang di desktop maupun mobile.
 - Browser regression sekarang memiliki mobile viewport contract untuk homepage/setup, termasuk no-horizontal-overflow dan visibility pada primary content.
 - Fondasi visual website mulai mengikuti `docs/UX-DIRECTION.md`: semantic neutral/sage tokens, typography dan radius yang lebih tenang, focus-visible yang eksplisit, serta motion layer yang dipangkas dari decorative effects menjadi state feedback dan setup-step highlighting.

scripts/validate_site.py

@@ -57,6 +57,7 @@ def main() -> int:
         'data-pack-picker-trigger',
         'data-pack-picker-menu',
         'href="catalog.css"',
+        'href="setup-phase3.css"',
         'id="setup-pack-name"',
         'id="setup-courses"',
         'id="copy-instructions"',
@@ -92,6 +93,13 @@ def main() -> int:
         ".pack-picker-option",
         "#setup-pack-count",
     ])
+    require_text(SITE / "setup-phase3.css", [
+        ".setup-layout",
+        ".setup-nav a[aria-current=\"step\"]",
+        ".setup-step-card.is-current-step",
+        ".setup-course summary",
+        "@media (max-width: 720px)",
+    ])
 
     app_text = (SITE / "app.js").read_text(encoding="utf-8") if (SITE / "app.js").is_file() else ""
     for forbidden in (

site/app.js

@@ -288,10 +288,15 @@ async function downloadCoursePack(base, course, button) {
 
 function renderSetupSummary(entry, manifest) {
   setText("#setup-pack-name", `${manifest.institution} · ${manifest.program} · ${periodLabel(manifest)}`);
-  setText("#setup-pack-count", `${manifest.courses.length} course pack`);
-  setText("#setup-pack-meta", `${manifest.academic_year} · ${manifest.total_sks} SKS · ${statusLabel(manifest.status, manifest.maintainer)}`);
+  setText("#setup-pack-count", `${manifest.courses.length} mata kuliah · ${manifest.total_sks} SKS`);
+  setText("#setup-pack-meta", `${manifest.academic_year} · ${statusLabel(manifest.status, manifest.maintainer)}`);
   const list = document.querySelector("#setup-summary-list");
-  if (list) list.innerHTML = manifest.courses.map(course => `<li>${escapeHtml(course.short_name)}</li>`).join("");
+  if (list) {
+    const visible = manifest.courses.slice(0, 3);
+    const remaining = Math.max(0, manifest.courses.length - visible.length);
+    list.innerHTML = visible.map(course => `<li>${escapeHtml(course.short_name)}</li>`).join("") +
+      (remaining ? `<li>+${remaining} mata kuliah lain</li>` : "");
+  }
   document.title = `Setup ${manifest.name} — Ramu`;
 }