From a40a67875c074d41be248e21df3f31eb46493367 Mon Sep 17 00:00:00 2001
From: Araya's Project <119692205+Araayaaa@users.noreply.github.com>
Date: Thu, 4 Jun 2026 17:55:58 +0700
Subject: [PATCH] revisi dawg

---
 assets/global/localization.js            |   4 +-
 groups/ApeNameTeamE/assets/css/style.css | 476 ++++++++++++++---------
 groups/ApeNameTeamE/assets/js/API.js     |  15 +-
 groups/ApeNameTeamE/assets/js/filter.js  |  90 +++--
 groups/ApeNameTeamE/assets/js/popup.js   |   8 -
 groups/ApeNameTeamE/index.html           |  79 +---
 6 files changed, 363 insertions(+), 309 deletions(-)

diff --git a/assets/global/localization.js b/assets/global/localization.js
index 9ff9d19..7149e41 100644
--- a/assets/global/localization.js
+++ b/assets/global/localization.js
@@ -593,7 +593,7 @@ const translations = {
         ape_testimonial_title: 'Apa Kata Mereka?',
         ape_testimonial_desc: 'Cerita inspiratif dari para penerima beasiswa Program Studi Informatika UNTAN',
         ape_cta_title: 'Ingin Mengetahui Info Lebih Lanjut?',
-        ape_cta_desc: 'Hubungi admin prodi atau ikuti Instagram kemahasiswaan UNTAN untuk informasi terbaru tentang beasiswa dan program akademik.',
+        ape_cta_desc: 'Hubungi admin prodi untuk informasi terbaru tentang beasiswa dan program akademik.',
         ape_cta_btn1: 'DAFTAR BEASISWA',
         ape_cta_btn2: 'Hubungi Kami',
     },
@@ -1186,7 +1186,7 @@ const translations = {
         ape_testimonial_title: 'What They Say?',
         ape_testimonial_desc: 'Inspiring stories from scholarship recipients at UNTAN Informatics Study Program',
         ape_cta_title: 'Want to Know More?',
-        ape_cta_desc: 'Contact the program admin or follow UNTAN student affairs Instagram for the latest scholarship and academic program information.',
+        ape_cta_desc: 'Contact the program admin for the latest scholarship and academic program information.',
         ape_cta_btn1: 'SCHOLARSHIP LIST',
         ape_cta_btn2: 'Contact Us',
     }
diff --git a/groups/ApeNameTeamE/assets/css/style.css b/groups/ApeNameTeamE/assets/css/style.css
index 9ea0015..77bb698 100644
--- a/groups/ApeNameTeamE/assets/css/style.css
+++ b/groups/ApeNameTeamE/assets/css/style.css
@@ -16,16 +16,19 @@
   --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-serif: 'Roboto Condensed', sans-serif;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
-  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
-  --shadow-card-hover: 0 8px 30px rgba(43,69,144,0.15);
-  --shadow-popup: 0 20px 60px rgba(0,0,0,0.3);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
+  --shadow-card-hover: 0 8px 30px rgba(43, 69, 144, 0.15);
+  --shadow-popup: 0 20px 60px rgba(0, 0, 0, 0.3);
   --radius: 12px;
-  --navbar-height: 108px; /* 60px top bar putih + 48px main nav kuning */
+  --navbar-height: 108px;
+  /* 60px top bar putih + 48px main nav kuning */
 }
 
 /* ===== BASE RESET ===== */
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -45,8 +48,14 @@ body {
 }
 
 /* ===== SCROLLBAR ===== */
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: #f1f5f9; }
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f5f9;
+}
+
 ::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 3px;
@@ -80,35 +89,49 @@ body {
 
 .navbar-logo-name {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-  font-size: 1.125rem; /* text-lg = 18px */
+  font-size: 1.125rem;
+  /* text-lg = 18px */
   font-weight: 700;
   color: #ffffff;
   line-height: 1;
-  letter-spacing: 0.1em; /* tracking-widest */
+  letter-spacing: 0.1em;
+  /* tracking-widest */
   text-transform: uppercase;
   margin-bottom: 0.25rem;
 }
 
 .navbar-logo-sub {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-  font-size: 10px; /* text-[10px] */
+  font-size: 10px;
+  /* text-[10px] */
   font-weight: 400;
-  color: rgba(226, 232, 240, 0.9); /* text-slate-200 opacity-90 */
-  letter-spacing: 0.15em; /* tracking-[0.15em] */
+  color: rgba(226, 232, 240, 0.9);
+  /* text-slate-200 opacity-90 */
+  letter-spacing: 0.15em;
+  /* tracking-[0.15em] */
   margin-top: 0.125rem;
   text-transform: uppercase;
 }
 
 @media (min-width: 1024px) {
-  .navbar-logo-name { font-size: 1.5rem; } /* lg:text-2xl = 24px */
-  .navbar-logo-sub  { font-size: 0.875rem; letter-spacing: 0.3em; } /* lg:text-sm, lg:tracking-[0.3em] */
+  .navbar-logo-name {
+    font-size: 1.5rem;
+  }
+
+  /* lg:text-2xl = 24px */
+  .navbar-logo-sub {
+    font-size: 0.875rem;
+    letter-spacing: 0.3em;
+  }
+
+  /* lg:text-sm, lg:tracking-[0.3em] */
 }
 
 /* "SATU UNTAN" text */
 .navbar-satu {
   font-size: 11px;
   font-weight: 700;
-  color: rgba(255,255,255,0.85);
+  color: rgba(255, 255, 255, 0.85);
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }
@@ -118,18 +141,18 @@ body {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.12);
-  border: 1px solid rgba(255,255,255,0.2);
+  background: rgba(255, 255, 255, 0.12);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.8);
+  color: rgba(255, 255, 255, 0.8);
   cursor: pointer;
   transition: var(--transition);
 }
 
 .navbar-icon-btn:hover {
-  background: rgba(255,255,255,0.22);
+  background: rgba(255, 255, 255, 0.22);
   color: #ffffff;
 }
 
@@ -142,12 +165,14 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: rgba(255,255,255,0.75);
+  color: rgba(255, 255, 255, 0.75);
   cursor: pointer;
   transition: var(--transition);
 }
 
-.navbar-search-btn:hover { color: #ffffff; }
+.navbar-search-btn:hover {
+  color: #ffffff;
+}
 
 /* Language Toggle — dark top bar */
 #lang-toggle {
@@ -160,7 +185,7 @@ body {
   padding: 0;
   font-size: 11px;
   font-weight: 500;
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, 0.6);
   cursor: pointer;
   border: none;
   background: none;
@@ -178,7 +203,7 @@ body {
 }
 
 .lang-divider {
-  color: rgba(255,255,255,0.4);
+  color: rgba(255, 255, 255, 0.4);
   font-size: 10px;
   margin: 0 2px;
 }
@@ -192,7 +217,9 @@ body {
 }
 
 @media (min-width: 1024px) {
-  .navbar-main { display: flex; }
+  .navbar-main {
+    display: flex;
+  }
 }
 
 /* Nav links — teks gelap di atas latar kuning */
@@ -215,12 +242,12 @@ body {
 /* ===== INFO TICKER ===== */
 .ticker-wrapper {
   background: var(--color-primary);
-  border-top: 1px solid rgba(255,255,255,0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
   height: 40px;
   display: flex;
   align-items: center;
   overflow: hidden;
-  
+
   /* Sticky behavior */
   position: fixed;
   top: 108px;
@@ -240,12 +267,13 @@ body {
 /* Badge wrapper */
 .ticker-badge-block {
   flex-shrink: 0;
-  background: rgba(0,0,0,0.15); /* Slightly darker than primary */
+  background: rgba(0, 0, 0, 0.15);
+  /* Slightly darker than primary */
   height: 100%;
   display: flex;
   align-items: center;
   padding: 0 20px;
-  border-right: 1px solid rgba(255,255,255,0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   z-index: 2;
 }
@@ -292,13 +320,18 @@ body {
   white-space: nowrap;
   font-size: 12px;
   font-weight: 500;
-  color: rgba(255,255,255,0.85);
+  color: rgba(255, 255, 255, 0.85);
   padding-left: 20px;
 }
 
 @keyframes ticker-scroll {
-  0%   { transform: translateX(0); }
-  100% { transform: translateX(-50%); }
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-50%);
+  }
 }
 
 /* ===== HERO SECTION ===== */
@@ -325,15 +358,15 @@ body {
   position: absolute;
   inset: 0;
   background-image:
-    radial-gradient(circle at 10% 80%, rgba(245,166,35,0.08) 0%, transparent 40%),
-    radial-gradient(circle at 90% 20%, rgba(255,255,255,0.03) 0%, transparent 35%);
+    radial-gradient(circle at 10% 80%, rgba(245, 166, 35, 0.08) 0%, transparent 40%),
+    radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 35%);
 }
 
 .hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
-  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
+  background-image: radial-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px);
   background-size: 28px 28px;
 }
 
@@ -370,14 +403,14 @@ body {
 
 .hero-subtitle {
   font-size: 15px;
-  color: rgba(255,255,255,0.75);
+  color: rgba(255, 255, 255, 0.75);
   font-style: italic;
   margin-bottom: 16px;
 }
 
 .hero-desc {
   font-size: 14px;
-  color: rgba(255,255,255,0.65);
+  color: rgba(255, 255, 255, 0.65);
   line-height: 1.7;
   max-width: 440px;
   margin-bottom: 32px;
@@ -396,13 +429,13 @@ body {
   border-radius: 8px;
   text-decoration: none;
   transition: var(--transition);
-  box-shadow: 0 4px 16px rgba(245,166,35,0.35);
+  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.35);
 }
 
 .hero-cta:hover {
   background: #e8960f;
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(245,166,35,0.45);
+  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.45);
   color: #1a1a1a;
 }
 
@@ -411,7 +444,9 @@ body {
   font-size: 13px;
 }
 
-.hero-cta:hover i { transform: translateX(4px); }
+.hero-cta:hover i {
+  transform: translateX(4px);
+}
 
 /* Hero image — foto lebih besar dan rounded sesuai Figma */
 .hero-image-wrap {
@@ -425,8 +460,8 @@ body {
   height: 400px;
   object-fit: cover;
   border-radius: 16px;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
-  border: 2px solid rgba(255,255,255,0.1);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+  border: 2px solid rgba(255, 255, 255, 0.1);
   display: block;
 }
 
@@ -456,14 +491,14 @@ body {
   position: relative;
 }
 
-.stat-item + .stat-item::before {
+.stat-item+.stat-item::before {
   content: '';
   position: absolute;
   left: 0;
   top: 15%;
   height: 70%;
   width: 1px;
-  background: rgba(255,255,255,0.35);
+  background: rgba(255, 255, 255, 0.35);
 }
 
 .stat-number {
@@ -601,7 +636,7 @@ body {
 
 .search-input:focus {
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(43,69,144,0.08);
+  box-shadow: 0 0 0 3px rgba(43, 69, 144, 0.08);
 }
 
 .search-input::placeholder {
@@ -641,14 +676,14 @@ body {
   color: #003150;
 }
 
-/* ===== SCHOLARSHIP CARDS ===== */
+/* ===== SCHOLARSHIP CARDS — Schoters Style ===== */
 .scholarship-card {
   background: white;
-  border-radius: var(--radius);
-  box-shadow: var(--shadow-card);
+  border-radius: 16px;
+  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
   overflow: hidden;
   transition: var(--transition);
-  border: 1px solid #f0f4f8;
+  border: 1px solid #eef2f8;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -656,134 +691,158 @@ body {
 }
 
 .scholarship-card:hover {
-  box-shadow: var(--shadow-card-hover);
-  transform: translateY(-5px);
-  border-color: rgba(43,69,144,0.1);
+  box-shadow: 0 8px 32px rgba(0,49,80,0.12);
+  transform: translateY(-4px);
+  border-color: rgba(0,49,80,0.08);
 }
 
-.card-img-wrap {
-  width: 100%;
-  height: 165px;
-  overflow: hidden;
-  background: #f0f4ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.card-img-wrap img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.5s ease;
-}
-
-.scholarship-card:hover .card-img-wrap img {
-  transform: scale(1.04);
-}
 
+/* ─── Card Body ─── */
 .card-body {
-  padding: 16px;
+  padding: 20px 20px 18px;
   flex: 1;
   display: flex;
   flex-direction: column;
 }
 
-.badge-status {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 10px;
-  font-weight: 700;
-  padding: 3px 10px;
-  border-radius: 999px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  align-self: flex-start;
-  margin-bottom: 8px;
-}
-
-.badge-buka {
-  background: #d1fae5;
-  color: #065f46;
-}
-
-.badge-buka::before {
-  content: '●';
-  font-size: 8px;
-}
-
-.badge-ditutup {
-  background: #fee2e2;
-  color: #991b1b;
-}
-
-.badge-ditutup::before {
-  content: '○';
-  font-size: 8px;
-}
-
+/* ─── Title ─── */
 .card-title {
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-primary);
+  font-size: 15px;
+  font-weight: 800;
+  color: #0f172a;
   line-height: 1.4;
-  margin-bottom: 8px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.card-desc {
-  font-size: 12px;
-  color: var(--color-accent);
-  line-height: 1.55;
+  margin: 0 0 6px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  flex: 1;
+}
+
+/* ─── Subtitle (Funding Type) ─── */
+.card-subtitle {
+  font-size: 12.5px;
+  color: #64748b;
+  margin: 0 0 12px;
+  font-weight: 400;
+}
+
+/* ─── Pills Row ─── */
+.card-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  margin-bottom: 14px;
+}
+
+.card-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  background: #f1f5f9;
+  color: #475569;
+  letter-spacing: 0.2px;
+}
+
+.card-pill-level {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+/* ─── Divider ─── */
+.card-divider {
+  border: none;
+  border-top: 1px solid #f1f5f9;
+  margin: 0 0 14px;
+}
+
+/* ─── Two-column Date Row ─── */
+.card-dates {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.card-date-col {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.card-date-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.card-date-value {
+  font-size: 12px;
+  color: #64748b;
+  font-weight: 400;
+}
+
+/* ─── Status Button ─── */
+.card-status-btn {
+  width: 100%;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 700;
+  border: none;
+  cursor: default;
+  text-align: center;
   margin-bottom: 10px;
 }
 
-.card-date {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: #94a3b8;
+.status-btn-buka {
+  background: #dcfce7;
+  color: #15803d;
 }
 
-.card-date i {
-  color: var(--color-secondary);
-  font-size: 10px;
+.status-btn-ditutup {
+  background: #fee2e2;
+  color: #b91c1c;
 }
 
-.card-footer {
-  padding: 12px 16px;
-  border-top: 1px solid #f1f5f9;
+.status-btn-segera {
+  background: #fef9c3;
+  color: #a16207;
 }
 
+/* ─── Outline Selengkapnya Button ─── */
 .btn-selengkapnya {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
+  width: 100%;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 1.5px solid #e2e8f0;
+  background: white;
+  color: #0f172a;
+  font-size: 13px;
   font-weight: 700;
-  color: var(--color-secondary);
-  background: none;
-  border: none;
   cursor: pointer;
-  padding: 0;
+  text-align: center;
   transition: var(--transition);
-  font-family: var(--font-inter);
+  font-family: var(--font-sans);
+  display: block;
 }
 
 .btn-selengkapnya:hover {
+  border-color: var(--color-primary);
   color: var(--color-primary);
-  gap: 10px;
+  background: #f8faff;
+}
+
+/* Entrance animation */
+@keyframes fadeInCard {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.scholarship-card.fade-in-up {
+  animation: fadeInCard 0.4s ease both;
 }
 
 /* ===== EMPTY STATE ===== */
@@ -837,7 +896,7 @@ body {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: white;
-  box-shadow: 0 4px 12px rgba(43,69,144,0.3);
+  box-shadow: 0 4px 12px rgba(43, 69, 144, 0.3);
 }
 
 .page-btn:disabled {
@@ -896,7 +955,7 @@ body {
   width: 34px;
   height: 34px;
   border-radius: 50%;
-  background: rgba(255,255,255,0.9);
+  background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(4px);
   border: none;
   cursor: pointer;
@@ -906,7 +965,7 @@ body {
   color: #374151;
   font-size: 14px;
   transition: var(--transition);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
 }
 
 .popup-close:hover {
@@ -1080,7 +1139,7 @@ body {
 .popup-cta:hover {
   background: #1e3272;
   transform: translateY(-1px);
-  box-shadow: 0 6px 20px rgba(43,69,144,0.3);
+  box-shadow: 0 6px 20px rgba(43, 69, 144, 0.3);
   color: white;
 }
 
@@ -1108,14 +1167,14 @@ body {
   border-radius: 16px;
   padding: 28px 22px;
   text-align: center;
-  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   transition: var(--transition);
   border: 1px solid #f0f4f8;
   height: 100%;
 }
 
 .testimonial-card:hover {
-  box-shadow: 0 10px 36px rgba(43,69,144,0.12);
+  box-shadow: 0 10px 36px rgba(43, 69, 144, 0.12);
   transform: translateY(-5px);
 }
 
@@ -1189,7 +1248,7 @@ body {
   content: '';
   position: absolute;
   border-radius: 50%;
-  background: rgba(255,255,255,0.04);
+  background: rgba(255, 255, 255, 0.04);
 }
 
 .cta-card::before {
@@ -1218,7 +1277,7 @@ body {
 
 .cta-desc {
   font-size: 14px;
-  color: rgba(255,255,255,0.68);
+  color: rgba(255, 255, 255, 0.68);
   max-width: 420px;
   margin: 0 auto 32px;
   line-height: 1.65;
@@ -1247,13 +1306,13 @@ body {
   border-radius: 8px;
   text-decoration: none;
   transition: var(--transition);
-  box-shadow: 0 4px 16px rgba(245,166,35,0.4);
+  box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4);
 }
 
 .cta-btn-primary:hover {
   background: #e8960f;
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(245,166,35,0.5);
+  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.5);
   color: #0a1530;
 }
 
@@ -1262,7 +1321,7 @@ body {
   align-items: center;
   gap: 8px;
   background: transparent;
-  border: 2px solid rgba(255,255,255,0.5);
+  border: 2px solid rgba(255, 255, 255, 0.5);
   color: white;
   font-weight: 700;
   font-size: 13px;
@@ -1275,7 +1334,7 @@ body {
 
 
 .cta-btn-secondary:hover {
-  background: rgba(255,255,255,0.12);
+  background: rgba(255, 255, 255, 0.12);
   border-color: white;
   color: white;
   transform: translateY(-2px);
@@ -1360,14 +1419,14 @@ footer {
 
 .footer-logo-text .sub {
   font-size: 10px;
-  color: rgba(255,255,255,0.7);
+  color: rgba(255, 255, 255, 0.7);
   margin-top: 2px;
   letter-spacing: 1px;
 }
 
 .footer-address {
   text-align: center;
-  color: rgba(255,255,255,0.6);
+  color: rgba(255, 255, 255, 0.6);
   font-size: 12px;
   line-height: 1.8;
   margin-top: 32px;
@@ -1383,20 +1442,20 @@ footer {
 
 .address-contact {
   font-size: 11px;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   margin-bottom: 40px;
 }
 
 .footer-divider {
   border: none;
-  border-top: 1px solid rgba(255,255,255,0.08);
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
   margin: 28px 0 20px;
 }
 
 .footer-copy {
   text-align: center;
   font-size: 11px;
-  color: rgba(255,255,255,0.28);
+  color: rgba(255, 255, 255, 0.28);
   padding-bottom: 28px;
 }
 
@@ -1414,18 +1473,18 @@ footer {
   align-items: center;
   gap: 8px;
   font-size: 11px;
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   margin-bottom: 24px;
 }
 
 .breadcrumb a {
-  color: rgba(255,255,255,0.5);
+  color: rgba(255, 255, 255, 0.5);
   text-decoration: none;
   transition: color 0.2s;
 }
 
 .breadcrumb a:hover {
-  color: rgba(255,255,255,0.85);
+  color: rgba(255, 255, 255, 0.85);
 }
 
 .breadcrumb .sep {
@@ -1433,13 +1492,20 @@ footer {
 }
 
 .breadcrumb .current {
-  color: rgba(255,255,255,0.85);
+  color: rgba(255, 255, 255, 0.85);
 }
 
 /* ===== ANIMATIONS ===== */
 @keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(18px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(18px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .fade-in-up {
@@ -1455,36 +1521,76 @@ footer {
 }
 
 @keyframes shimmer {
-  0%   { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
 }
 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 767px) {
-  :root { --navbar-height: 104px; }
+  :root {
+    --navbar-height: 104px;
+  }
 
-  .hero-section { padding: 32px 0 48px; min-height: auto; }
-  .hero-title { font-size: 32px; }
-  .hero-image-wrap { display: none; }
+  .hero-section {
+    padding: 32px 0 48px;
+    min-height: auto;
+  }
 
-  .stats-section { padding: 24px 0; }
-  .stat-item + .stat-item::before { display: none; }
+  .hero-title {
+    font-size: 32px;
+  }
 
-  .cta-card { padding: 40px 20px; }
+  .hero-image-wrap {
+    display: none;
+  }
 
-  .filter-tabs { gap: 6px; }
-  .filter-tab { padding: 7px 12px; font-size: 10px; }
+  .stats-section {
+    padding: 24px 0;
+  }
 
-  .popup-modal { border-radius: 14px; }
-  .popup-periode { grid-template-columns: 1fr; }
+  .stat-item+.stat-item::before {
+    display: none;
+  }
 
-  .testimonial-card { padding: 22px 16px; }
+  .cta-card {
+    padding: 40px 20px;
+  }
+
+  .filter-tabs {
+    gap: 6px;
+  }
+
+  .filter-tab {
+    padding: 7px 12px;
+    font-size: 10px;
+  }
+
+  .popup-modal {
+    border-radius: 14px;
+  }
+
+  .popup-periode {
+    grid-template-columns: 1fr;
+  }
+
+  .testimonial-card {
+    padding: 22px 16px;
+  }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
-  .hero-image-wrap img { height: 300px; }
+  .hero-image-wrap img {
+    height: 300px;
+  }
 }
 
 @media (min-width: 1024px) {
-  .hero-section { min-height: 540px; }
-}
+  .hero-section {
+    min-height: 540px;
+  }
+}
\ No newline at end of file
diff --git a/groups/ApeNameTeamE/assets/js/API.js b/groups/ApeNameTeamE/assets/js/API.js
index 2bf36b7..628da88 100644
--- a/groups/ApeNameTeamE/assets/js/API.js
+++ b/groups/ApeNameTeamE/assets/js/API.js
@@ -61,12 +61,19 @@
 
   async function getBeasiswa() {
     try {
-      const data = await fetchRemote();
-      return { data, source: 'remote' };
-    } catch (err) {
-      console.warn('[BeasiswaAPI] API remote gagal, fallback ke data lokal:', err.message);
+      // Prioritas: data lokal (lengkap: url_sumber, syarat_umum, kontak tersedia)
+      // Remote API digunakan hanya sebagai fallback jika data lokal tidak ditemukan.
       const data = await fetchLocal();
       return { data, source: 'local' };
+    } catch (err) {
+      console.warn('[BeasiswaAPI] Data lokal gagal, fallback ke API remote:', err.message);
+      try {
+        const data = await fetchRemote();
+        return { data, source: 'remote' };
+      } catch (remoteErr) {
+        console.error('[BeasiswaAPI] Semua sumber gagal:', remoteErr.message);
+        throw remoteErr;
+      }
     }
   }
 
diff --git a/groups/ApeNameTeamE/assets/js/filter.js b/groups/ApeNameTeamE/assets/js/filter.js
index 97bff7e..9279d18 100644
--- a/groups/ApeNameTeamE/assets/js/filter.js
+++ b/groups/ApeNameTeamE/assets/js/filter.js
@@ -5,10 +5,10 @@
 
 const ITEMS_PER_PAGE = 6; // 2 baris × 3 kolom desktop
 
-let allData       = [];   // Semua data beasiswa dari JSON
-let activeFilter  = 'semua';
+let allData = [];   // Semua data beasiswa dari JSON
+let activeFilter = 'semua';
 let searchKeyword = '';
-let currentPage   = 1;
+let currentPage = 1;
 
 // Format tanggal
 function formatDate(str) {
@@ -32,7 +32,38 @@ function sanitize(str) {
  * Gunakan textContent/setAttribute — hindari langsung innerHTML dari user input
  */
 function createCard(bsw) {
-  const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
+  // Tentukan badge & warna tombol status
+  let statusClass = 'status-btn-ditutup';
+  let statusLabel = 'Ditutup';
+  const statusLower = (bsw.status || '').toLowerCase();
+  if (statusLower === 'buka' || statusLower === 'dibuka') {
+    statusClass = 'status-btn-buka';
+    statusLabel = 'Pendaftaran Dibuka';
+  } else if (statusLower.includes('segera')) {
+    statusClass = 'status-btn-segera';
+    statusLabel = 'Segera Dibuka';
+  }
+
+  // Ambil pills dari tags lokal: ["jenjang", "kategori/swasta/pemerintah", "negara", "tipe_pendanaan", ...]
+  const tags = Array.isArray(bsw.tags) ? bsw.tags : [];
+  const jenjang = tags[0] || '';
+
+  // Negara: cari tag yang bukan jenjang (S1/S2/S3), bukan kategori sumber (Swasta/Pemerintah),
+  // dan bukan tipe pendanaan (Fully/Partially Funded)
+  const skipPatterns = /^(S1|S2|S3|D3|D4|Swasta|Pemerintah|Fully Funded|Partially Funded|Beasiswa Penuh|Beasiswa Sebagian|Prestasi)$/i;
+  const negara = tags.slice(1).find(t => !skipPatterns.test(t)) || '';
+
+  // Tipe pendanaan untuk subtitle — ambil dari kategori field atau dari deskripsi_singkat
+  const tipe = bsw.kategori || '';
+
+  const pillsHtml = [jenjang, negara]
+    .filter(Boolean)
+    .map((t, i) => `<span class="card-pill ${i === 0 ? 'card-pill-level' : ''}">${t}</span>`)
+    .join('');
+
+  // Subtitle: hindari duplikasi "Beasiswa Beasiswa ..."
+  const rawTipe = tipe.replace(/^beasiswa\s+/i, '');
+  const subtitle = rawTipe ? `Beasiswa ${rawTipe}` : '';
 
   const article = document.createElement('article');
   article.className = 'scholarship-card fade-in-up';
@@ -40,34 +71,27 @@ function createCard(bsw) {
   article.setAttribute('data-id', bsw.id);
 
   article.innerHTML = `
-    <div class="card-img-wrap">
-      <img
-        src="${bsw.thumbnail}"
-        alt="${bsw.nama}"
-        class="card-img"
-        loading="lazy"
-        onerror="this.style.display='none';this.parentElement.style.background='#eef2ff';this.parentElement.innerHTML+='<i class=\\'fas fa-graduation-cap\\' style=\\'font-size:40px;color:#c7d2fe;\\'></i>'"
-      >
-    </div>
     <div class="card-body">
-      <span class="badge-status ${isBuka ? 'badge-buka' : 'badge-ditutup'}">
-        ${bsw.status}
-      </span>
       <h3 class="card-title">${bsw.nama}</h3>
-      <p class="card-desc">${bsw.deskripsi_singkat}</p>
-      <div class="card-date">
-        <i class="fas fa-calendar-alt"></i>
-        <span>${formatDate(bsw.tanggal_tutup)}</span>
+      ${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
+      ${pillsHtml ? `<div class="card-pills">${pillsHtml}</div>` : ''}
+      <hr class="card-divider">
+      <div class="card-dates">
+        <div class="card-date-col">
+          <span class="card-date-label">Mulai</span>
+          <span class="card-date-value">${formatDate(bsw.tanggal_buka)}</span>
+        </div>
+        <div class="card-date-col">
+          <span class="card-date-label">Deadline</span>
+          <span class="card-date-value">${formatDate(bsw.tanggal_tutup)}</span>
+        </div>
       </div>
-    </div>
-    <div class="card-footer">
+      <button class="card-status-btn ${statusClass}" disabled>${statusLabel}</button>
       <button
         class="btn-selengkapnya"
         onclick="openPopup('${bsw.id}')"
         aria-label="Lihat detail beasiswa ${bsw.nama}"
-      >
-        Selengkapnya <i class="fas fa-arrow-right" style="font-size:10px;"></i>
-      </button>
+      >Selengkapnya</button>
     </div>
   `;
 
@@ -84,8 +108,8 @@ function getFiltered() {
     // Cocok dengan filter tab
     const matchFilter =
       activeFilter === 'semua' ||
-      bsw.status    === activeFilter ||
-      bsw.kategori  === activeFilter;
+      bsw.status === activeFilter ||
+      bsw.kategori === activeFilter;
 
     // Cocok dengan pencarian (nama atau deskripsi atau tags)
     const matchSearch =
@@ -100,9 +124,9 @@ function getFiltered() {
 
 /** Render kartu + paginasi ke DOM */
 function renderCards() {
-  const grid      = document.getElementById('beasiswa-grid');
-  const pagCont   = document.getElementById('pagination');
-  const filtered  = getFiltered();
+  const grid = document.getElementById('beasiswa-grid');
+  const pagCont = document.getElementById('pagination');
+  const filtered = getFiltered();
 
   // Bersihkan grid
   grid.innerHTML = '';
@@ -148,7 +172,7 @@ function renderPagination(total, container) {
     const btn = document.createElement('button');
     btn.className = `page-btn${isActive ? ' active' : ''}`;
     btn.innerHTML = content;
-    btn.disabled  = disabled;
+    btn.disabled = disabled;
     btn.setAttribute('aria-label', typeof page === 'number' ? `Halaman ${page}` : content);
     if (!disabled) {
       btn.addEventListener('click', () => {
@@ -188,7 +212,7 @@ function initFilterTabs() {
       btn.classList.add('active');
       btn.setAttribute('aria-selected', 'true');
       activeFilter = btn.dataset.filter;
-      currentPage  = 1;
+      currentPage = 1;
       renderCards();
     });
   });
@@ -202,7 +226,7 @@ function initSearch() {
   input.addEventListener('input', () => {
     // Sanitasi input sebelum digunakan (cegah XSS)
     searchKeyword = sanitize(input.value).trim();
-    currentPage   = 1;
+    currentPage = 1;
     renderCards();
   });
 }
diff --git a/groups/ApeNameTeamE/assets/js/popup.js b/groups/ApeNameTeamE/assets/js/popup.js
index 7736bbb..9910fe0 100644
--- a/groups/ApeNameTeamE/assets/js/popup.js
+++ b/groups/ApeNameTeamE/assets/js/popup.js
@@ -51,14 +51,6 @@ function openPopup(id) {
 
   // Render konten popup
   popupBody.innerHTML = `
-    <!-- Thumbnail / Hero gambar -->
-    <img
-      src="${bsw.thumbnail || ''}"
-      alt="${bsw.nama}"
-      class="popup-hero"
-      onerror="this.style.display='none'"
-    >
-
     <div class="popup-body">
       <!-- Badge status + kategori -->
       <div class="popup-kategori-row">
diff --git a/groups/ApeNameTeamE/index.html b/groups/ApeNameTeamE/index.html
index 028b88d..949ee1d 100644
--- a/groups/ApeNameTeamE/index.html
+++ b/groups/ApeNameTeamE/index.html
@@ -1293,13 +1293,6 @@
                             Temukan beragam beasiswa dari berbagai sumber resmi yang tersedia untuk mahasiswa aktif.
                         </p>
                     </div>
-                    <div class="flex-shrink-0 mt-2" data-aos="fade-left">
-                        <!-- Button "Buku Panduan Beasiswa" -->
-                        <a href="#" class="btn-panduan" aria-label="Unduh Buku Panduan Beasiswa">
-                            <i class="far fa-file-alt"></i>
-                            <span data-i18n="ape_dir_guide">Buku Panduan Beasiswa</span>
-                        </a>
-                    </div>
                 </div>
 
                 <!-- Filter & Search Row (UC-02, UC-03) -->
@@ -1366,74 +1359,6 @@
             </div>
         </div>
 
-        <!-- ================================================
-        POPUP MODAL HUBUNGI KAMI
-        ================================================ -->
-        <div id="contact-overlay"
-            class="fixed inset-0 z-[2000] hidden items-center justify-center p-4 transition-opacity duration-300 opacity-0"
-            role="dialog" aria-modal="true" aria-labelledby="contact-title">
-            <!-- Backdrop -->
-            <div id="contact-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer">
-            </div>
-
-            <!-- Modal Card -->
-            <div class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transform transition-transform duration-300 scale-95"
-                id="contact-modal">
-
-                <!-- Header -->
-                <div class="bg-[#003150] px-6 py-4 flex items-center justify-between">
-                    <h3 id="contact-title" class="text-white font-bold font-serif m-0 text-lg">Hubungi Kami</h3>
-                    <button id="contact-close"
-                        class="text-white/70 hover:text-white transition-colors bg-transparent border-none cursor-pointer p-0"
-                        style="background: transparent; border: none; outline: none;" aria-label="Tutup">
-                        <i class="fas fa-times text-xl"></i>
-                    </button>
-                </div>
-
-                <!-- Body -->
-                <div class="p-8">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-
-                        <!-- Card Admin WhatsApp -->
-                        <div
-                            class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(34,197,94,0.12)] transition-shadow">
-                            <div
-                                class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500 text-2xl">
-                                <i class="fab fa-whatsapp"></i>
-                            </div>
-                            <h4 class="font-bold text-gray-900 mb-1">Admin Beasiswa</h4>
-                            <p class="text-xs text-gray-500 mb-6">Senin - Jumat | 08.00 - 15.00 WIB</p>
-                            <a href="https://wa.me/628115719999" target="_blank" rel="noopener noreferrer"
-                                class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-[#25D366] hover:bg-[#1ebd57] text-white text-sm font-semibold rounded-lg transition-colors gap-2">
-                                Chat Whatsapp <i class="fas fa-arrow-right text-xs"></i>
-                            </a>
-                        </div>
-
-                        <!-- Card Instagram -->
-                        <div
-                            class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(236,72,153,0.12)] transition-shadow">
-                            <div
-                                class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4 text-pink-500 text-2xl">
-                                <i class="fab fa-instagram"></i>
-                            </div>
-                            <h4 class="font-bold text-gray-900 mb-1">@kemahasiswaan.untan</h4>
-                            <p class="text-xs text-gray-500 mb-6">Informasi Beasiswa Terkini</p>
-                            <a href="https://instagram.com/kemahasiswaan.untan" target="_blank"
-                                rel="noopener noreferrer"
-                                class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#F56040] hover:opacity-90 text-white text-sm font-semibold rounded-lg transition-colors gap-2">
-                                Buka Instagram <i class="fas fa-arrow-right text-xs"></i>
-                            </a>
-                        </div>
-
-                    </div>
-
-                    <p class="text-center text-[10px] text-gray-400 m-0">*Pastikan WhatsApp Kamu aktif sebelum
-                        menghubungi admin.
-                    </p>
-                </div>
-            </div>
-        </div>
-
         <!-- ================================================
         TESTIMONI (#testimonial) — UC-07
         ================================================ -->
@@ -1478,9 +1403,9 @@
                             <span data-i18n="ape_cta_btn1">Daftar Beasiswa</span>
                         </a>
                         <!-- Kontak CTA -->
-                        <button id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin">
+                        <a id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin" href="https://wa.me/+6285171655161">
                             <span data-i18n="ape_cta_btn2">Hubungi Kami</span>
-                        </button>
+                        </a>
                     </div>
                 </div>
             </div>