CUSTOM_CSS = """
/* --- TEMA DEĞİŞKENLERİ (Mavi-Yeşil Palet) --- */
:root {
    /* 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);
}

.dark {
    /* 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);
}

/* --- GENEL STİLLER --- */
body, .gradio-container {
    background-color: var(--body-bg) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    transition: all 0.3s ease;
}
h1 { display: none !important; }
footer { visibility: hidden; }

/* --- BANNER --- */
#banner-image {
    display: block; margin: 0 auto 20px auto; width: 100%; max-width: 1200px;
    border-radius: 16px; box-shadow: var(--shadow);
}

/* --- 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);
}
.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;
}

/* --- 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);
    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; }

/* --- 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; }

.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; }
"""