Update

Homepage_Responsive.css

@@ -1,24 +1,33 @@
-/* RESPONSIVE */
-
 @media (max-width: 480px) {
-  /* Header */
   header {
-    padding: 18px 20px;
+    padding: 15px 20px;
-    flex-direction: column;
+    flex-direction: row; 
-    gap: 12px;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0; /* Gap tidak wajib jika sudah space-between */
   }
 
   .logo {
+    /* Sesuaikan ukuran font agar muat dalam satu baris */
     font-size: 24px; 
     letter-spacing: 2px;
+    margin: 0; 
   }
 
-  .btn-login {
+  /* Masukkan ini di dalam @media (max-width: 480px) */
-    padding: 12px 28px;
+
-    font-size: 14px;
+  .btn-login, 
-    letter-spacing: 2px;
+  .btn-logout {
+    padding: 6px 14px !important; /* Ukuran tombol jauh lebih kecil */
+    font-size: 11px !important;   /* Ukuran teks lebih kecil */
+    letter-spacing: 1px;          /* Jarak antar huruf dirapatkan */
+    border-radius: 8px;           /* Lengkungan sudut disesuaikan */
+    min-width: auto;              /* Mencegah tombol jadi terlalu lebar */
+    height: auto;                 /* Tinggi mengikuti isi teks */
+    line-height: normal;
   }
   
+
   /* Hero Section - CENTERED & BALANCED */
   .hero {
     padding: 50px 15px;

Leaderboard_Components.css

@@ -1,8 +1,5 @@
-/* Leaderboard_Components.css */
-
-/* Back Button */
 .btn-back {
-    position: fixed;
+    position: absolute;
     top: 20px;
     left: 20px;
     z-index: 100;
@@ -33,7 +30,6 @@
     filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.8));
 }
 
-/* Stat Box Component */
 .stat-box {
     background: rgba(30, 0, 50, 0.5);
     border: 1px solid rgba(0, 255, 255, 0.2);
@@ -63,7 +59,6 @@
     text-shadow: 0 0 10px rgba(0, 234, 255, 0.6);
 }
 
-/* Player Components Base Styles */
 .player-info {
     flex: 1;
     display: flex;
@@ -115,7 +110,6 @@
     flex-shrink: 0;
 }
 
-/* Animations */
 @keyframes pulseBadge {
     0%, 100% { 
         transform: scale(1);

Leaderboard_Responsive.css

@@ -1,39 +1,7 @@
-/* Leaderboard_Responsive.css */
-
-@media screen and (max-width: 1440px) {
-    .container {
-        width: 88%;
-        padding: 30px 50px;
-        max-height: 90vh;
-    }
-
-    .btn-back {
-        top: 20px;
-        left: 20px;
-        width: 45px;
-        height: 45px;
-    }
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 35px 30px;
-        width: 95%;
-    }
-
-    h1 {
-        font-size: 1.8rem;
-    }
-
-    .stats-container {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 10px;
-    }
-}
-
 @media (max-width: 480px) {
     .container {
         padding: 25px 20px;
+        margin-top: 50px;
     }
 
     h1 {