diff --git a/groups/C4A/index.html b/groups/C4A/index.html
index 0092051..ac38de3 100644
--- a/groups/C4A/index.html
+++ b/groups/C4A/index.html
@@ -1,4 +1,4 @@
-﻿<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 
 <head>
@@ -1163,7 +1163,7 @@
                         <div class="c4a-hero-tag" data-i18n="grp_c4a_hero_tag">LAYANAN AKADEMIK &bull; INFORMATIKA UNTAN
                         </div>
                         <h1 class="c4a-hero-title" data-i18n-html="grp_c4a_hero_title">
-                            Staf Pendukung &amp; <br />
+                            Staf Pendukung &amp; <br/>
                             <span class="highlight-orange">Standar Operasional Prosedur (SOP)</span>
                         </h1>
                         <p class="c4a-hero-desc" data-i18n="grp_c4a_hero_desc">Halaman ini menampilkan informasi petugas
diff --git a/groups/C4A/js/ui.js b/groups/C4A/js/ui.js
index 14ea1a2..8f9f26e 100644
--- a/groups/C4A/js/ui.js
+++ b/groups/C4A/js/ui.js
@@ -32,7 +32,7 @@ function loc(field) {
         const lang = getLang();
         return field[lang] || field['id'] || '';
     }
-    return field;
+    return String(field);
 }
 
 /**
@@ -127,7 +127,7 @@ export function renderStaffCards(staffs) {
         const scheduleHTML = schedule.map(sched =>
             `<div class="schedule-item">` +
             `<span class="s-day">${loc(sched.day)}</span>` +
-            `<span class="s-time">${sched.time} <span class="s-break">| ${loc(sched.break)}</span></span>` +
+            `<span class="s-time">${loc(sched.time)} <span class="s-break">| ${loc(sched.break)}</span></span>` +
             `</div>`
         ).join('');
 
@@ -149,7 +149,7 @@ export function renderStaffCards(staffs) {
           <img src="${image}" alt="${name}" onerror="this.style.display='none'"/>
         </div>
         <div>
-          <div class="staff-name">${name}</div>
+          <div class="staff-name">${loc(name)}</div>
           <div class="staff-role">${roleText}</div>
         </div>
       </div>
@@ -283,14 +283,13 @@ function buildSopModalContent(sop) {
 
     const catLabel = getCatLabel(category);
     const catClass = CATEGORY_COLORS[category] || '';
-
     const reqsHTML = requirements.map(req => `<li>${loc(req)}</li>`).join('');
     const procsHTML = procedures.map(proc => `<li>${loc(proc)}</li>`).join('');
 
     // staffResponsible bersifat opsional — sembunyikan blok jika tidak ada
     const hasStaff = Array.isArray(staffResponsible) && staffResponsible.length > 0;
     const staffHTML = hasStaff
-        ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${staffName}</span>`).join('')
+        ? staffResponsible.map(staffName => `<span class="sop-staff-pill">${loc(staffName)}</span>`).join('')
         : '';
     const staffBlockHTML = hasStaff
         ? `<div class="sop-staff-block">
@@ -353,15 +352,19 @@ export function renderSopCards(sops) {
     // simpan data global di element agar bisa diakses filter/search
     container._sopData = sops;
 
+    const emptyState = document.getElementById('sop-empty-state');
+
     // Tampilkan pesan jika data SOP kosong atau gagal dimuat
     if (!sops || sops.length === 0) {
         container.innerHTML = `<p class="empty-state-msg">${t('grp_c4a_empty_sop', 'Data SOP tidak tersedia saat ini.')}</p>`;
         updateResultInfo(0, 0);
+        if (emptyState) emptyState.style.display = 'none';
         return;
     }
 
     container.innerHTML = sops.map(buildSopCard).join('');
     updateResultInfo(sops.length, sops.length);
+    if (emptyState) emptyState.style.display = 'none';
 }
 
 /** Update teks info jumlah hasil */
@@ -405,7 +408,12 @@ export function applySopFilter() {
     });
 
     const emptyState = document.getElementById('sop-empty-state');
-    if (emptyState) emptyState.style.display = visibleCount === 0 ? 'flex' : 'none';
+    if (emptyState) {
+        // Tampilkan "SOP tidak ditemukan" HANYA jika memang ada data SOP tetapi hasil filter 0.
+        // Jika data SOP memang kosong (tidak ada card sama sekali di data source), sembunyikan.
+        const hasData = container._sopData && container._sopData.length > 0;
+        emptyState.style.display = (hasData && visibleCount === 0) ? 'flex' : 'none';
+    }
 
     updateResultInfo(visibleCount, cards.length);
 }
