Spaces:

AlicanKiraz0
/

seneca-trbench

Running

App Files Files Community

AlicanKiraz0 commited on 23 days ago

Commit

67a64b0

verified ·

1 Parent(s): f1ef2a4

Upload 8 files

Browse files

Files changed (3) hide show

README.md +8 -5
index.html +368 -76
styles.css +299 -58

README.md CHANGED Viewed

@@ -13,11 +13,14 @@ pinned: false
 Bu depo, `leaderboard_data.csv` dosyasındaki metriklere göre bir LLM leaderboard arayüzü sağlar. Esinlenilen kaynak: [HF Space – llm_leaderboard_fr](https://huggingface.co/spaces/fr-gouv-coordination-ia/llm_leaderboard_fr/tree/main).
 ## Özellikler
-- Sütun bazlı sıralama (varsayılan: Combined Score azalan)
-- Arama kutusu (model adına göre)
-- Sağlayıcı filtresi (model adından türetilir, örn. `deepseek-ai`, `openai`, `anthropic`, `google`, `meta`)
-- İlk 3 modelin görsel vurgusu (🥇🥈🥉)
-- Karanlık tema, duyarlı (responsive) tasarım
 ## Dosyalar
 - `index.html` – Uygulama HTML iskeleti

 Bu depo, `leaderboard_data.csv` dosyasındaki metriklere göre bir LLM leaderboard arayüzü sağlar. Esinlenilen kaynak: [HF Space – llm_leaderboard_fr](https://huggingface.co/spaces/fr-gouv-coordination-ia/llm_leaderboard_fr/tree/main).
 ## Özellikler
+- 🎯 Sütun bazlı sıralama (varsayılan: Combined Score azalan)
+- 🔍 Arama kutusu (model adına göre)
+- 🏢 Sağlayıcı filtresi (model adından türetilir, örn. `deepseek-ai`, `openai`, `anthropic`, `google`, `meta`)
+- 🏆 İlk 3 modelin görsel vurgusu (altın, gümüş, bronz)
+- 🎨 Modern gradient tasarım, cam efekti (glassmorphism)
+- ✨ Yumuş animasyonlar ve hover efektleri
+- 📱 Duyarlı (responsive) tasarım
+- 🌙 Karanlık tema optimizasyonu
 ## Dosyalar
 - `index.html` – Uygulama HTML iskeleti

index.html CHANGED Viewed

@@ -3,123 +3,366 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>LLM Leaderboard (Local)</title>
     <link rel="stylesheet" href="./styles.css">
     <style>
 :root {
-  --bg: #0b0f17;
-  --panel: #121826;
-  --text: #e5e7eb;
-  --muted: #9ca3af;
-  --accent: #8b5cf6;
-  --border: #1f2937;
-  --row-hover: #111827;
-  --gold: #ffe27a33;
-  --silver: #c0c0c033;
-  --bronze: #cd7f3233;
-}
-* { box-sizing: border-box; }
 html, body { height: 100%; }
 body {
   margin: 0;
-  background: var(--bg);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-  line-height: 1.45;
 }
 .container {
-  max-width: 1100px;
   margin: 0 auto;
-  padding: 16px;
 }
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
   background: var(--panel);
 }
-.topbar__left { display: flex; align-items: center; gap: 12px; }
-.topbar__right { display: flex; align-items: center; gap: 12px; }
-.app-title { font-size: 20px; margin: 0; }
-.muted { color: var(--muted); }
-.link { color: var(--accent); text-decoration: none; }
-.link:hover { text-decoration: underline; }
 .controls {
   display: flex;
-  gap: 8px;
   align-items: center;
   flex-wrap: wrap;
-  margin: 16px 0 8px;
 }
 .control input[type="search"],
 .control select {
   background: var(--panel);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 8px 10px;
 }
 .control button {
-  background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 8px;
-  padding: 8px 12px;
   cursor: pointer;
 }
-.control button:hover { opacity: 0.95; }
-.table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
-table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
 thead th {
   text-align: left;
-  font-weight: 600;
-  padding: 12px;
-  border-bottom: 1px solid var(--border);
-  background: #0f1524;
   position: sticky;
   top: 0;
-  z-index: 1;
   cursor: pointer;
 }
-tbody td { padding: 12px; border-bottom: 1px solid var(--border); }
-tbody tr:hover { background: var(--row-hover); }
 /* Sıralama göstergeleri */
 th[aria-sort="ascending"]::after,
 th[aria-sort="descending"]::after {
   content: '';
   display: inline-block;
-  margin-left: 6px;
-  width: 0; height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
 }
-th[aria-sort="ascending"]::after { border-bottom: 6px solid var(--muted); }
-th[aria-sort="descending"]::after { border-top: 6px solid var(--muted); }
-/* İlk 3 vurgusu */
-tr.rank-1 { background: var(--gold); }
-tr.rank-2 { background: var(--silver); }
-tr.rank-3 { background: var(--bronze); }
-td.rank-cell { font-weight: 700; }
-.footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; gap: 12px; }
-.disclaimer { color: var(--muted); font-size: 14px; }
-.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-@media (max-width: 720px) {
   thead th:nth-child(3),
-  thead th:nth-child(4) { display: none; }
   tbody td:nth-child(3),
-  tbody td:nth-child(4) { display: none; }
 }
     </style>
   </head>
@@ -286,24 +529,65 @@ const state = {
 let fullData = [];
 async function loadData() {
-  const res = await fetch("./leaderboard_data.csv", { cache: "no-cache" });
-  const text = await res.text();
-  const { headers, records } = parseCSV(text);
-  const keys = headers.map(normalizeHeader);
-  const data = records.map(cols => {
-    const obj = {};
-    for (let i = 0; i < keys.length; i += 1) {
-      obj[keys[i]] = cols[i];
     }
-    const mcq = toNumber(obj.mcq);
-    const saq = toNumber(obj.saq);
-    const combined = toNumber(obj.combined);
-    const rank = toNumber(obj.rank);
-    const model = obj.model;
-    const provider = detectProvider(model);
-    return { model, provider, mcq, saq, combined, csvRank: rank };
-  });
-  return data;
 }
 function uniqueProviders(data) {
@@ -354,6 +638,14 @@ function setSortIndicator() {
 function render(data) {
   const tbody = document.getElementById("tableBody");
   const sorted = sortData(applyFilters(data));
   let html = "";
   sorted.forEach((d, idx) => {
     const rank = idx + 1;

   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>🏆 LLM Leaderboard</title>
     <link rel="stylesheet" href="./styles.css">
     <style>
 :root {
+  --bg-gradient-start: #0a0e27;
+  --bg-gradient-end: #1a1033;
+  --panel: rgba(17, 24, 39, 0.8);
+  --panel-hover: rgba(30, 41, 59, 0.95);
+  --text: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --muted: #94a3b8;
+  --accent: #a78bfa;
+  --accent-bright: #c4b5fd;
+  --border: rgba(148, 163, 184, 0.15);
+  --row-hover: rgba(139, 92, 246, 0.1);
+  --gold-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
+  --silver-bg: linear-gradient(135deg, rgba(203, 213, 225, 0.15), rgba(148, 163, 184, 0.1));
+  --bronze-bg: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(234, 88, 12, 0.1));
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
 html, body { height: 100%; }
 body {
   margin: 0;
+  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+  background-attachment: fixed;
   color: var(--text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  font-size: 15px;
 }
 .container {
+  max-width: 1200px;
   margin: 0 auto;
+  padding: 24px;
 }
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 20px 32px;
   background: var(--panel);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+.topbar__left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 14px;
+}
+.app-title {
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.5px;
+}
+.app-title::before {
+  content: "🏆 ";
+  -webkit-text-fill-color: var(--accent-bright);
+}
+.muted {
+  color: var(--muted);
+  font-size: 14px;
+}
+.link {
+  color: var(--accent-bright);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--accent-bright);
+  transition: width 0.3s ease;
+}
+.link:hover::after {
+  width: 100%;
 }
 .controls {
   display: flex;
+  gap: 12px;
   align-items: center;
   flex-wrap: wrap;
+  margin: 24px 0 16px;
 }
 .control input[type="search"],
 .control select {
   background: var(--panel);
+  backdrop-filter: blur(8px);
   color: var(--text);
   border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 16px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-sm);
+  min-width: 200px;
 }
+.control input[type="search"]:focus,
+.control select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2), var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.control input[type="search"]::placeholder {
+  color: var(--muted);
+}
 .control button {
+  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
   color: #fff;
   border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-sm);
+  font-size: 14px;
+}
+.control button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+}
+.control button:active {
+  transform: translateY(0);
+}
+.table-wrap {
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--panel);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+  animation: fadeInUp 0.6s ease;
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+table.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 thead th {
   text-align: left;
+  font-weight: 700;
+  padding: 18px 16px;
+  border-bottom: 2px solid var(--border);
+  background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
   position: sticky;
   top: 0;
+  z-index: 10;
   cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+thead th:hover {
+  background: linear-gradient(180deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.1) 100%);
+  color: var(--accent-bright);
+}
+tbody td {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+tbody tr {
+  transition: all 0.3s ease;
+}
+tbody tr:hover {
+  background: var(--row-hover);
+  transform: scale(1.01);
 }
 /* Sıralama göstergeleri */
 th[aria-sort="ascending"]::after,
 th[aria-sort="descending"]::after {
   content: '';
   display: inline-block;
+  margin-left: 8px;
+  width: 0;
+  height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
+  transition: all 0.2s ease;
+}
+th[aria-sort="ascending"]::after {
+  border-bottom: 6px solid var(--accent-bright);
+}
+th[aria-sort="descending"]::after {
+  border-top: 6px solid var(--accent-bright);
+}
+/* İlk 3 vurgusu - modernize edildi */
+tr.rank-1 {
+  background: var(--gold-bg);
+  border-left: 4px solid #fbbf24;
 }
+tr.rank-2 {
+  background: var(--silver-bg);
+  border-left: 4px solid #cbd5e1;
+}
+tr.rank-3 {
+  background: var(--bronze-bg);
+  border-left: 4px solid #fb923c;
+}
+tr.rank-1:hover,
+tr.rank-2:hover,
+tr.rank-3:hover {
+  transform: scale(1.02);
+  box-shadow: var(--shadow-md);
+}
+td.rank-cell {
+  font-weight: 800;
+  font-size: 16px;
+  color: var(--accent-bright);
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.disclaimer {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+#summaryStats {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+/* Responsive */
+@media (max-width: 768px) {
+  .topbar {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
+  .topbar__left,
+  .topbar__right {
+    width: 100%;
+    justify-content: center;
+  }
+  .app-title {
+    font-size: 24px;
+  }
+  .container {
+    padding: 16px;
+  }
   thead th:nth-child(3),
+  thead th:nth-child(4) {
+    display: none;
+  }
   tbody td:nth-child(3),
+  tbody td:nth-child(4) {
+    display: none;
+  }
+  .control input[type="search"],
+  .control select {
+    min-width: 100%;
+  }
+}
+/* Pulse animasyonu - yükleme sırasında */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+.loading {
+  animation: pulse 1.5s ease-in-out infinite;
 }
     </style>
   </head>
 let fullData = [];
 async function loadData() {
+  try {
+    // HF Spaces için birden fazla yol deneme
+    let res;
+    const paths = [
+      "./leaderboard_data.csv",
+      "leaderboard_data.csv",
+      "/leaderboard_data.csv"
+    ];
+    let text = "";
+    for (const path of paths) {
+      try {
+        res = await fetch(path, { cache: "no-cache" });
+        if (res.ok) {
+          text = await res.text();
+          if (text && text.trim().length > 0) {
+            console.log("CSV yüklendi:", path);
+            break;
+          }
+        }
+      } catch (e) {
+        console.warn("Yol başarısız:", path, e);
+      }
     }
+    if (!text || text.trim().length === 0) {
+      console.error("CSV dosyası yüklenemedi!");
+      alert("CSV dosyası yüklenemedi. Dosyanın Space'e yüklendiğinden emin olun.");
+      return [];
+    }
+    const { headers, records } = parseCSV(text);
+    if (!headers || headers.length === 0) {
+      console.error("CSV başlıkları bulunamadı!");
+      return [];
+    }
+    const keys = headers.map(normalizeHeader);
+    const data = records.map(cols => {
+      const obj = {};
+      for (let i = 0; i < keys.length; i += 1) {
+        obj[keys[i]] = cols[i];
+      }
+      const mcq = toNumber(obj.mcq);
+      const saq = toNumber(obj.saq);
+      const combined = toNumber(obj.combined);
+      const rank = toNumber(obj.rank);
+      const model = obj.model;
+      const provider = detectProvider(model);
+      return { model, provider, mcq, saq, combined, csvRank: rank };
+    });
+    console.log("Yüklenen veri sayısı:", data.length);
+    return data;
+  } catch (error) {
+    console.error("loadData hatası:", error);
+    alert("Veri yükleme hatası: " + error.message);
+    return [];
+  }
 }
 function uniqueProviders(data) {
 function render(data) {
   const tbody = document.getElementById("tableBody");
   const sorted = sortData(applyFilters(data));
+  if (!sorted || sorted.length === 0) {
+    tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:24px;color:var(--muted);">Veri bulunamadı. CSV dosyasını kontrol edin.</td></tr>';
+    const stats = document.getElementById("summaryStats");
+    stats.textContent = "0 model listelendi";
+    return;
+  }
   let html = "";
   sorted.forEach((d, idx) => {
     const rank = idx + 1;

styles.css CHANGED Viewed

@@ -1,117 +1,358 @@
 :root {
-  --bg: #0b0f17;
-  --panel: #121826;
-  --text: #e5e7eb;
-  --muted: #9ca3af;
-  --accent: #8b5cf6;
-  --border: #1f2937;
-  --row-hover: #111827;
-  --gold: #ffe27a33;
-  --silver: #c0c0c033;
-  --bronze: #cd7f3233;
-}
-* { box-sizing: border-box; }
 html, body { height: 100%; }
 body {
   margin: 0;
-  background: var(--bg);
   color: var(--text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
-  line-height: 1.45;
 }
 .container {
-  max-width: 1100px;
   margin: 0 auto;
-  padding: 16px;
 }
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--border);
   background: var(--panel);
 }
-.topbar__left { display: flex; align-items: center; gap: 12px; }
-.topbar__right { display: flex; align-items: center; gap: 12px; }
-.app-title { font-size: 20px; margin: 0; }
-.muted { color: var(--muted); }
-.link { color: var(--accent); text-decoration: none; }
-.link:hover { text-decoration: underline; }
 .controls {
   display: flex;
-  gap: 8px;
   align-items: center;
   flex-wrap: wrap;
-  margin: 16px 0 8px;
 }
 .control input[type="search"],
 .control select {
   background: var(--panel);
   color: var(--text);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 8px 10px;
 }
 .control button {
-  background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 8px;
-  padding: 8px 12px;
   cursor: pointer;
 }
-.control button:hover { opacity: 0.95; }
-.table-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
-table.table { width: 100%; border-collapse: separate; border-spacing: 0; }
 thead th {
   text-align: left;
-  font-weight: 600;
-  padding: 12px;
-  border-bottom: 1px solid var(--border);
-  background: #0f1524;
   position: sticky;
   top: 0;
-  z-index: 1;
   cursor: pointer;
 }
-tbody td { padding: 12px; border-bottom: 1px solid var(--border); }
-tbody tr:hover { background: var(--row-hover); }
 /* Sıralama göstergeleri */
 th[aria-sort="ascending"]::after,
 th[aria-sort="descending"]::after {
   content: '';
   display: inline-block;
-  margin-left: 6px;
-  width: 0; height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
 }
-th[aria-sort="ascending"]::after { border-bottom: 6px solid var(--muted); }
-th[aria-sort="descending"]::after { border-top: 6px solid var(--muted); }
-/* İlk 3 vurgusu */
-tr.rank-1 { background: var(--gold); }
-tr.rank-2 { background: var(--silver); }
-tr.rank-3 { background: var(--bronze); }
-td.rank-cell { font-weight: 700; }
-.footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; gap: 12px; }
-.disclaimer { color: var(--muted); font-size: 14px; }
-.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-@media (max-width: 720px) {
   thead th:nth-child(3),
-  thead th:nth-child(4) { display: none; }
   tbody td:nth-child(3),
-  tbody td:nth-child(4) { display: none; }
 }

 :root {
+  --bg-gradient-start: #0a0e27;
+  --bg-gradient-end: #1a1033;
+  --panel: rgba(17, 24, 39, 0.8);
+  --panel-hover: rgba(30, 41, 59, 0.95);
+  --text: #f8fafc;
+  --text-secondary: #cbd5e1;
+  --muted: #94a3b8;
+  --accent: #a78bfa;
+  --accent-bright: #c4b5fd;
+  --border: rgba(148, 163, 184, 0.15);
+  --row-hover: rgba(139, 92, 246, 0.1);
+  --gold-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
+  --silver-bg: linear-gradient(135deg, rgba(203, 213, 225, 0.15), rgba(148, 163, 184, 0.1));
+  --bronze-bg: linear-gradient(135deg, rgba(251, 146, 60, 0.15), rgba(234, 88, 12, 0.1));
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
 html, body { height: 100%; }
 body {
   margin: 0;
+  background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
+  background-attachment: fixed;
   color: var(--text);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  line-height: 1.6;
+  font-size: 15px;
 }
 .container {
+  max-width: 1200px;
   margin: 0 auto;
+  padding: 24px;
 }
 .topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 20px 32px;
   background: var(--panel);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow-sm);
+}
+.topbar__left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.topbar__right {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 14px;
+}
+.app-title {
+  font-size: 28px;
+  font-weight: 700;
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -0.5px;
+}
+.app-title::before {
+  content: "🏆 ";
+  -webkit-text-fill-color: var(--accent-bright);
+}
+.muted {
+  color: var(--muted);
+  font-size: 14px;
+}
+.link {
+  color: var(--accent-bright);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  position: relative;
+}
+.link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--accent-bright);
+  transition: width 0.3s ease;
+}
+.link:hover::after {
+  width: 100%;
 }
 .controls {
   display: flex;
+  gap: 12px;
   align-items: center;
   flex-wrap: wrap;
+  margin: 24px 0 16px;
 }
 .control input[type="search"],
 .control select {
   background: var(--panel);
+  backdrop-filter: blur(8px);
   color: var(--text);
   border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 16px;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-sm);
+  min-width: 200px;
 }
+.control input[type="search"]:focus,
+.control select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2), var(--shadow-sm);
+  transform: translateY(-1px);
+}
+.control input[type="search"]::placeholder {
+  color: var(--muted);
+}
 .control button {
+  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
   color: #fff;
   border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-weight: 600;
   cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-sm);
+  font-size: 14px;
+}
+.control button:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+}
+.control button:active {
+  transform: translateY(0);
+}
+.table-wrap {
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+  background: var(--panel);
+  backdrop-filter: blur(12px);
+  box-shadow: var(--shadow-lg);
+  animation: fadeInUp 0.6s ease;
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+table.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 thead th {
   text-align: left;
+  font-weight: 700;
+  padding: 18px 16px;
+  border-bottom: 2px solid var(--border);
+  background: linear-gradient(180deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.05) 100%);
   position: sticky;
   top: 0;
+  z-index: 10;
   cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-secondary);
+}
+thead th:hover {
+  background: linear-gradient(180deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.1) 100%);
+  color: var(--accent-bright);
+}
+tbody td {
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+tbody tr {
+  transition: all 0.3s ease;
+}
+tbody tr:hover {
+  background: var(--row-hover);
+  transform: scale(1.01);
 }
 /* Sıralama göstergeleri */
 th[aria-sort="ascending"]::after,
 th[aria-sort="descending"]::after {
   content: '';
   display: inline-block;
+  margin-left: 8px;
+  width: 0;
+  height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
+  transition: all 0.2s ease;
+}
+th[aria-sort="ascending"]::after {
+  border-bottom: 6px solid var(--accent-bright);
 }
+th[aria-sort="descending"]::after {
+  border-top: 6px solid var(--accent-bright);
+}
+/* İlk 3 vurgusu - modernize edildi */
+tr.rank-1 {
+  background: var(--gold-bg);
+  border-left: 4px solid #fbbf24;
+}
+tr.rank-2 {
+  background: var(--silver-bg);
+  border-left: 4px solid #cbd5e1;
+}
+tr.rank-3 {
+  background: var(--bronze-bg);
+  border-left: 4px solid #fb923c;
+}
+tr.rank-1:hover,
+tr.rank-2:hover,
+tr.rank-3:hover {
+  transform: scale(1.02);
+  box-shadow: var(--shadow-md);
+}
+td.rank-cell {
+  font-weight: 800;
+  font-size: 16px;
+  color: var(--accent-bright);
+}
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.disclaimer {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.6;
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+#summaryStats {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+/* Responsive */
+@media (max-width: 768px) {
+  .topbar {
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+  }
+  .topbar__left,
+  .topbar__right {
+    width: 100%;
+    justify-content: center;
+  }
+  .app-title {
+    font-size: 24px;
+  }
+  .container {
+    padding: 16px;
+  }
   thead th:nth-child(3),
+  thead th:nth-child(4) {
+    display: none;
+  }
   tbody td:nth-child(3),
+  tbody td:nth-child(4) {
+    display: none;
+  }
+  .control input[type="search"],
+  .control select {
+    min-width: 100%;
+  }
 }
+/* Pulse animasyonu - yükleme sırasında */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+.loading {
+  animation: pulse 1.5s ease-in-out infinite;
+}