diff --git a/Homepage.css b/Homepage.css
index 9a48100..6958103 100644
--- a/Homepage.css
+++ b/Homepage.css
@@ -409,102 +409,11 @@ header {
   }
 }
 
-/* Responsive */
-@media (max-width: 1024px) {
-  .hero-title {
-    font-size: 110px;
-    letter-spacing: 12px;
-  }
-  
-  .hero-subtitle {
-    font-size: 20px;
-  }
-}
-
-@media (max-width: 768px) {
-  header {
-    padding: 20px 25px;
-    flex-direction: column;
-    gap: 15px;
-  }
-
-  .logo {
-    font-size: 28px;
-    letter-spacing: 3px;
-  }
-
-  .hero {
-    padding: 100px 20px 80px;
-  }
-
-  .hero-title {
-    font-size: 80px;
-    letter-spacing: 8px;
-  }
-
-  .hero-subtitle {
-    font-size: 18px;
-    letter-spacing: 3px;
-  }
-
-  .btn-cta {
-    padding: 16px 38px;
-    font-size: 17px;
-  }
-
-  footer {
-    margin-top: 100px;
-  }
-}
-
-@media (max-width: 480px) {
-  .hero {
-    padding: 70px 15px 60px;
-  }
-
-  .hero-title {
-    font-size: 60px;
-    letter-spacing: 5px;
-  }
-
-  .hero-subtitle {
-    font-size: 15px;
-    letter-spacing: 2px;
-    margin-bottom: 45px;
-  }
-
-  .btn-cta {
-    padding: 15px 32px;
-    font-size: 16px;
-    letter-spacing: 2px;
-  }
-
-  .cta-buttons {
-    gap: 18px;
-  }
-}
-
-@media (max-width: 360px) {
-  .hero-title {
-    font-size: 48px;
-    letter-spacing: 4px;
-  }
-
-  .hero-subtitle {
-    font-size: 14px;
-  }
-
-  .btn-cta {
-    padding: 14px 28px;
-    font-size: 15px;
-  }
-}
-
 /* ===========================
-   LOGOUT BUTTON STYLES - ADD TO HOMEPAGE.CSS
+   LOGOUT BUTTON STYLES 
 =========================== */
 
-/* Logout Button (Red Version of Login) */
+/* Logout Button  */
 .btn-logout {
     background: linear-gradient(135deg, #ff0066, #cc0033) !important;
     color: #fff !important;
diff --git a/Homepage_Credit.css b/Homepage_Credit.css
index 8ba8e13..7aeb15d 100644
--- a/Homepage_Credit.css
+++ b/Homepage_Credit.css
@@ -1,13 +1,36 @@
+/* Body Setup - Flexbox untuk push footer ke bawah */
+body {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0;
+  margin: 0;
+}
 
-/* Footer Section - Simple & Fixed at Bottom */
+/* Main Content Area - Flex Grow untuk isi space */
+header,
+.hero,
+section:not(footer) {
+  flex-shrink: 0; /* prevent shrinking */
+}
+
+/* Spacer juga perlu flex-grow supaya push footer */
+br {
+  display: block;
+}
+
+/* Wrapper untuk semua konten sebelum footer */
+body > *:not(footer):not(script):not(#particles):not(.logout-overlay):not(.logout-success-overlay) {
+  flex-shrink: 0;
+}
+
+/* Footer Section - Relative & Auto Push to Bottom */
 footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  position: relative;
+  margin-top: auto; /* push footer ke bawah */
   z-index: 10;
   text-align: center;
-  padding: 15px 20px;
+  padding: 20px 20px;
   background: transparent;
 }
 
@@ -48,7 +71,7 @@ footer {
 /* Responsive */
 @media (max-width: 768px) {
   footer {
-    padding: 12px 15px;
+    padding: 15px 15px;
   }
   
   .footer-hr {
@@ -63,7 +86,7 @@ footer {
 
 @media (max-width: 480px) {
   footer {
-    padding: 10px 10px;
+    padding: 12px 10px;
   }
   
   .footer-hr {