Update styles.py

styles.py

@@ -1,24 +1,28 @@
-# styles.py
-
 CUSTOM_CSS = """
-/* --- TEMA DEĞİŞKENLERİ (Aydınlık Mod Varsayılan) --- */
+/* --- TEMA DEĞİŞKENLERİ (Mavi-Yeşil Palet) --- */
 :root {
-    --body-bg: #f9fafb;         /* Ana arka plan (Açık gri) */
-    --container-bg: #ffffff;    /* Kart arka planı (Beyaz) */
-    --text-primary: #111827;    /* Ana metin rengi (Koyu gri/siyah) */
-    --text-secondary: #6b7280;  /* İkincil metin rengi (Gri) */
-    --border-color: #e5e7eb;    /* Kenarlık rengi */
-    --accent-color: #6366f1;    /* Vurgu rengi (Mor/Mavi) */
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    /* Aydınlık Mod */
+    --body-bg: #f0fdfa;          /* Çok açık teal */
+    --container-bg: #ffffff;     /* Beyaz */
+    --text-primary: #0f172a;     /* Koyu lacivert */
+    --text-secondary: #475569;   /* Gri-mavi */
+    --border-color: #cbd5e1;     /* Açık gri-mavi */
+    --accent-color: #0d9488;     /* Teal (Vurgu) */
+    --accent-hover: #0f766e;     /* Koyu Teal (Hover) */
+    --highlight-bg: #e6fffa;     /* Vurgu arka planı */
+    --shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.1), 0 2px 4px -1px rgba(13, 148, 136, 0.06);
 }
 
-/* --- KARANLIK MOD (Gradio .dark sınıfını eklediğinde devreye girer) --- */
 .dark {
-    --body-bg: #0b0f19;         /* Deepsite benzeri derin karanlık arka plan */
-    --container-bg: #111827;    /* Kart arka planı (Daha açık koyu) */
-    --text-primary: #f9fafb;    /* Ana metin rengi (Beyazımsı) */
-    --text-secondary: #d1d5db;  /* İkincil metin rengi (Açık gri) */
-    --border-color: #1f2937;    /* Kenarlık rengi (Koyu) */
+    /* Karanlık Mod */
+    --body-bg: #042f2e;          /* Derin koyu teal */
+    --container-bg: #115e59;     /* Koyu teal kutular */
+    --text-primary: #f0fdfa;     /* Çok açık teal (Metin) */
+    --text-secondary: #ccfbf1;   /* Açık teal (Alt metin) */
+    --border-color: #134e4a;     /* Daha koyu kenarlık */
+    --accent-color: #2dd4bf;     /* Parlak Cyan (Vurgu) */
+    --accent-hover: #14b8a6;     /* Cyan (Hover) */
+    --highlight-bg: #0f766e;     /* Vurgu arka planı */
     --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
 }
 
@@ -26,57 +30,94 @@ CUSTOM_CSS = """
 body, .gradio-container {
     background-color: var(--body-bg) !important;
     color: var(--text-primary) !important;
-    font-family: 'Inter', sans-serif; /* Modern bir font */
-    transition: background-color 0.3s ease, color 0.3s ease; /* Tema geçişi yumuşak olsun */
+    font-family: 'Inter', sans-serif !important;
+    transition: all 0.3s ease;
 }
-
-/* Ana başlıkları gizle (Banner kullanacağız) */
 h1 { display: none !important; }
 footer { visibility: hidden; }
 
-/* --- MODERN KART TASARIMI (.modern-card sınıfı verdiğimiz öğeler için) --- */
-.modern-card {
-    background-color: var(--container-bg) !important;
-    border: 1px solid var(--border-color) !important;
-    border-radius: 16px !important; /* Yuvarlak köşeler */
-    padding: 24px !important;
-    box-shadow: var(--shadow) !important;
-    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Dinamik efekt için geçiş */
+/* --- BANNER --- */
+#banner-image {
+    display: block; margin: 0 auto 20px auto; width: 100%; max-width: 1200px;
+    border-radius: 16px; box-shadow: var(--shadow);
 }
 
-/* Karta mouse ile gelindiğinde hafif yukarı kalkma efekti (Dinamiği artırır) */
-.modern-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
-    border-color: var(--accent-color) !important; /* Kenarlık rengi değişsin */
+/* --- SEKMELER --- */
+.tabs {
+    background-color: var(--container-bg) !important;
+    border-radius: 16px; padding: 10px; margin-top: 25px;
+    border: 1px solid var(--border-color);
+    box-shadow: var(--shadow);
 }
-
-/* Kart başlıkları */
-.card-header {
-    font-size: 1.25rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--text-primary);
+.tab-nav { border-bottom: 1px solid var(--border-color); margin-bottom: 20px; }
+.tab-nav button {
+    font-weight: 700; font-size: 1.05em; color: var(--text-secondary);
+    transition: 0.3s; border-radius: 8px; margin-right: 5px;
+}
+.tab-nav button:hover { background-color: var(--highlight-bg); color: var(--accent-color); }
+.tab-nav button.selected {
+    color: var(--accent-color) !important;
+    border-bottom: 3px solid var(--accent-color);
+    background: transparent;
 }
 
-/* Sekme (Tabs) Tasarımı */
-.tabs {
-    background-color: var(--container-bg) !important;
-    border-radius: 12px;
+/* --- KARTLAR VE KUTULAR --- */
+.rus-card, .filter-box, .sandbox-group, .submit-box {
+    background-color: var(--container-bg);
+    border-radius: 16px; padding: 25px;
     border: 1px solid var(--border-color);
-    padding: 5px;
+    box-shadow: var(--shadow);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+.rus-card:hover, .filter-box:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+    border-color: var(--accent-color);
 }
+.rus-card h3, .filter-box label {
+    color: var(--accent-color) !important; margin-top: 0; margin-bottom: 15px;
+    font-size: 1.3em; font-weight: 700;
+}
+.rus-card p, .rus-card ul, .filter-box span { color: var(--text-secondary); line-height: 1.6; }
 
-.tab-nav button {
-    color: var(--text-secondary) !important;
-    font-weight: 600;
-    border-radius: 8px;
-    transition: 0.3s;
+/* --- TABLO VE BADGE'LER --- */
+.leaderboard-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); }
+.leaderboard-table th {
+    background-color: var(--highlight-bg); color: var(--accent-color);
+    font-weight: bold; padding: 15px; text-align: left;
+    border-bottom: 2px solid var(--border-color);
 }
+.leaderboard-table td {
+    padding: 12px 15px; border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary); vertical-align: middle;
+    background-color: var(--container-bg);
+}
+.leaderboard-table tr:hover td { background-color: var(--highlight-bg); }
+.leaderboard-table a { color: var(--accent-color); text-decoration: none; font-weight: bold; }
+.leaderboard-table a:hover { text-decoration: underline; }
 
-/* Seçili sekme vurgusu */
-.tab-nav button.selected {
-    background-color: var(--accent-color) !important;
-    color: white !important;
+.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-weight: bold; font-size: 0.85em; color: white; text-align: center; min-width: 55px; }
+.badge-excellent { background-color: #10b981; } /* Yeşil */
+.badge-good { background-color: #0ea5e9; }      /* Mavi */
+.badge-average { background-color: #f59e0b; }   /* Turuncu */
+.badge-poor { background-color: #ef4444; }      /* Kırmızı */
+
+/* --- DİĞER BİLEŞENLER --- */
+.primary-btn {
+    background-color: var(--accent-color) !important; border: none !important;
+    color: white !important; font-weight: bold; padding: 10px 20px;
+    border-radius: 10px; cursor: pointer; transition: 0.3s;
+}
+.primary-btn:hover { background-color: var(--accent-hover) !important; }
+.formula-box, .metric-box {
+    font-family: 'Courier New', monospace; background-color: var(--body-bg);
+    padding: 12px; border-radius: 10px; text-align: center; margin: 15px 0;
+    font-weight: bold; color: var(--accent-color); border: 1px solid var(--border-color);
 }
+.metric-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: auto; }
+.subgrid-item { background-color: var(--container-bg); padding: 12px; border-radius: 10px; border: 1px solid var(--border-color); }
+.grid-letter { font-size: 1.4em; font-weight: 800; color: var(--accent-color); }
+.metric-value { font-size: 2em; font-weight: bold; color: var(--accent-color); }
+/* Plotly Grafik Arka Planı */
+.js-plotly-plot .plotly .main-svg { background: transparent !important; }
 """