MediaWiki:Vector-2022.css

/*************************************************************
 * FM WIKI – Vector-2022 Taktik Teması
 * Profesyonel, koyu, futbol-analiz havası
 *************************************************************/

/* --------------------------------------------------------- */
/* 0. RENK DEĞERLERİ (referans)                             */
/* --------------------------------------------------------- */
/*
    Ana arka plan      : #05070b (çok koyu, hafif lacivert tonlu)
    İç kart arka plan  : #10141c
    İkincil yüzey      : #151a24
    Vurgu – Yeşil      : #2f8f4e  (ana)
    Vurgu – Yeşil koyu : #22653a
    Vurgu – Navy       : #141a24
    Metin – Ana        : #e6ecf3
    Metin – Soluk      : #a6b3c4
    Çizgi/Border       : #222a35
*/

/* Hepsini sadece Vector-2022 için uygula */
.skin-vector-2022 {
    --fm-bg-main: #05070b;
    --fm-surface: #10141c;
    --fm-surface-soft: #151a24;
    --fm-border-subtle: #222a35;
    --fm-green: #2f8f4e;
    --fm-green-dark: #22653a;
    --fm-text-main: #e6ecf3;
    --fm-text-soft: #a6b3c4;
    --fm-link: #46a763;
    --fm-link-hover: #6bcb84;
    --fm-link-visited: #5aa0cc;
    --fm-header-bg: #060910;
    --fm-header-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
    --fm-radius-sm: 6px;
    --fm-radius-md: 10px;
    --fm-radius-lg: 14px;
    --fm-transition-fast: 0.16s ease-out;
}

/* --------------------------------------------------------- */
/* 1. GENEL ARKA PLAN & METİN                               */
/* --------------------------------------------------------- */

.skin-vector-2022 body {
    background: radial-gradient(circle at top left, #10141c 0, #05070b 42%, #000000 100%);
    color: var(--fm-text-main);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ana container & content yüzeyleri */
.skin-vector-2022 .mw-page-container {
    background: transparent;
}

.skin-vector-2022 .mw-content-container {
    background: transparent;
}

.skin-vector-2022 .vector-body,
.skin-vector-2022 .mw-body {
    background: transparent;
    color: var(--fm-text-main);
}

/* Sayfa gövdesine card hissi ver */
.skin-vector-2022 .mw-parser-output {
    background: var(--fm-surface);
    border-radius: var(--fm-radius-lg);
    padding: 1.75rem 2rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 18px 40px rgba(0, 0, 0, 0.65);
}

/* Line-height & paragraf */
.skin-vector-2022 .mw-parser-output p {
    line-height: 1.65;
    color: var(--fm-text-main);
}

/* Alt alan (footer) */
.skin-vector-2022 .mw-footer {
    background: transparent;
    border-top: 1px solid var(--fm-border-subtle);
    color: var(--fm-text-soft);
}

/* --------------------------------------------------------- */
/* 2. BAŞLIK / HEADER / TOP BAR                             */
/* --------------------------------------------------------- */

/* Üst header bar – FM dashboard hissi */
.skin-vector-2022 .vector-header-container {
    background: var(--fm-header-bg);
    box-shadow: var(--fm-header-shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Sticky header da aynı görünmeli */
.skin-vector-2022 .vector-sticky-header {
    background: var(--fm-header-bg);
    box-shadow: var(--fm-header-shadow);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* Başlık içeriği hizalama & boşluklar */
.skin-vector-2022 .vector-header {
    max-width: 1300px;
    margin: 0 auto;
}

/* Logo alanı – sade dursun */
.skin-vector-2022 .vector-header-logo {
    padding: 0.4rem 0.2rem;
}

/* Site adı yazıyorsa hafif kısalım */
.skin-vector-2022 .vector-header .mw-wiki-title {
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fm-text-main);
}

/* Üst menüler */
.skin-vector-2022 .vector-header .vector-menu-tabs,
.skin-vector-2022 .vector-header .vector-menu-content {
    background: transparent;
}

/* Tab’ler (Okuma, Kaynağı görüntüle vs) */
.skin-vector-2022 .vector-menu-tabs li {
    border-radius: 999px;
    overflow: hidden;
}

.skin-vector-2022 .vector-menu-tabs li a {
    padding: 0.35rem 0.9rem;
    color: var(--fm-text-soft);
    border-radius: 999px;
    transition: background var(--fm-transition-fast), color var(--fm-transition-fast);
}

.skin-vector-2022 .vector-menu-tabs li a:hover {
    background: rgba(111, 207, 151, 0.08);
    color: var(--fm-text-main);
}

.skin-vector-2022 .vector-menu-tabs .selected > a,
.skin-vector-2022 .vector-menu-tabs .selected > a:visited {
    background: var(--fm-green);
    color: #ffffff;
}

/* Kullanıcı menüsü & ikonlar */
.skin-vector-2022 .vector-header .vector-user-links,
.skin-vector-2022 .vector-header .vector-user-menu {
    background: transparent;
}

.skin-vector-2022 .vector-header .vector-user-links a,
.skin-vector-2022 .vector-header .vector-user-menu a {
    color: var(--fm-text-soft);
    font-size: 0.9rem;
}

.skin-vector-2022 .vector-header .vector-user-links a:hover,
.skin-vector-2022 .vector-header .vector-user-menu a:hover {
    color: var(--fm-text-main);
}

/* --------------------------------------------------------- */
/* 3. ARAMA KUTUSU                                           */
/* --------------------------------------------------------- */

.skin-vector-2022 #p-search,
.skin-vector-2022 .vector-search-box {
    background: rgba(10, 14, 22, 0.98);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.skin-vector-2022 .vector-search-box-input {
    background: transparent;
    color: var(--fm-text-main);
    padding: 0.35rem 0.85rem;
    font-size: 0.95rem;
}

.skin-vector-2022 .vector-search-box-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.skin-vector-2022 .vector-search-box-input:focus {
    outline: none;
    box-shadow: none;
}

/* Arama butonu */
.skin-vector-2022 .vector-search-box-button {
    border-radius: 999px;
    margin-right: 2px;
    border: none;
    background: var(--fm-green);
    color: #ffffff;
    transition: background var(--fm-transition-fast), transform var(--fm-transition-fast);
}

.skin-vector-2022 .vector-search-box-button:hover {
    background: var(--fm-green-dark);
    transform: translateY(-1px);
}

/* --------------------------------------------------------- */
/* 4. SIDEBAR (SOL MENÜ)                                     */
/* --------------------------------------------------------- */

.skin-vector-2022 .vector-sidebar-container {
    background: transparent;
}

.skin-vector-2022 .vector-sidebar {
    background: transparent;
}

/* Sidebar blokları hafif kart gibi */
.skin-vector-2022 .vector-sidebar .vector-menu-portal {
    background: rgba(10, 13, 20, 0.95);
    border-radius: var(--fm-radius-md);
    padding: 0.7rem 0.85rem 0.9rem;
    margin-bottom: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Sidebar başlıkları */
.skin-vector-2022 .vector-sidebar .vector-menu-portal .vector-menu-heading {
    color: var(--fm-text-soft);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Sidebar link listesi */
.skin-vector-2022 .vector-sidebar .vector-menu-portal .vector-menu-content ul {
    margin: 0;
    padding-left: 0.1rem;
}

.skin-vector-2022 .vector-sidebar .vector-menu-portal .vector-menu-content li {
    list-style: none;
    margin: 0.1rem 0;
}

.skin-vector-2022 .vector-sidebar .vector-menu-portal .vector-menu-content a {
    color: var(--fm-text-soft);
    font-size: 0.9rem;
    padding: 0.18rem 0.25rem;
    border-radius: var(--fm-radius-sm);
    display: block;
    transition: background var(--fm-transition-fast), color var(--fm-transition-fast), transform var(--fm-transition-fast);
}

.skin-vector-2022 .vector-sidebar .vector-menu-portal .vector-menu-content a:hover {
    background: rgba(46, 139, 87, 0.09);
    color: var(--fm-text-main);
    transform: translateX(1px);
}

/* --------------------------------------------------------- */
/* 5. SAYFA BAŞLIĞI / TITLE BAR                              */
/* --------------------------------------------------------- */

.skin-vector-2022 .vector-page-titlebar {
    background: transparent;
    border-bottom: none;
    margin-bottom: 0.6rem;
}

.skin-vector-2022 .vector-page-titlebar .vector-page-title {
    font-size: 1.7rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    color: #f5f7fb;
}

/* Altındaki küçük açıklama vs. */
.skin-vector-2022 .vector-page-titlebar .mw-indicators,
.skin-vector-2022 .vector-page-titlebar .mw-subpages {
    color: var(--fm-text-soft);
}

/* --------------------------------------------------------- */
/* 6. TİPOGRAFİ & LİNKLER                                    */
/* --------------------------------------------------------- */

.skin-vector-2022 .mw-parser-output h1,
.skin-vector-2022 .mw-parser-output h2,
.skin-vector-2022 .mw-parser-output h3,
.skin-vector-2022 .mw-parser-output h4 {
    color: #f4f6fc;
    font-weight: 650;
    letter-spacing: 0.02em;
}

/* Başlıklar arasına hafif alt çizgi */
.skin-vector-2022 .mw-parser-output h2 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 0.25rem;
    margin-top: 1.6rem;
    margin-bottom: 0.7rem;
}

/* Linkler */
.skin-vector-2022 a {
    color: var(--fm-link);
    text-decoration: none;
    transition: color var(--fm-transition-fast), border-color var(--fm-transition-fast), background var(--fm-transition-fast);
}

.skin-vector-2022 a:hover {
    color: var(--fm-link-hover);
    text-decoration: underline;
}

.skin-vector-2022 a:visited {
    color: var(--fm-link-visited);
}

/* Kırmızı (oluşmamış) linkler – çok bağırmasın */
.skin-vector-2022 a.new {
    color: #e06c75;
}

/* Madde işaretleri daha net olsun */
.skin-vector-2022 .mw-parser-output ul > li,
.skin-vector-2022 .mw-parser-output ol > li {
    margin: 0.15rem 0;
}

/* --------------------------------------------------------- */
/* 7. TABLOLAR – SCOUTING / ANALİZ GÖRÜNÜMÜ                 */
/* --------------------------------------------------------- */

/* Genel tablo stili */
.skin-vector-2022 .mw-parser-output table.wikitable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--fm-surface-soft);
    border-radius: var(--fm-radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55);
}

/* Başlık satırı – koyu nav bar gibi */
.skin-vector-2022 .mw-parser-output table.wikitable > * > tr > th {
    background: linear-gradient(135deg, #111723, #151d2a);
    color: #f8fafc;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.45rem 0.7rem;
    text-align: left;
    font-size: 0.9rem;
}

/* Veri hücreleri */
.skin-vector-2022 .mw-parser-output table.wikitable > * > tr > td {
    padding: 0.4rem 0.7rem;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: var(--fm-text-main);
    font-size: 0.9rem;
}

/* Satır çizgileri çok ağır olmasın */
.skin-vector-2022 .mw-parser-output table.wikitable > * > tr:last-child > td {
    border-bottom: none;
}

/* Zebra efekti çok hafif */
.skin-vector-2022 .mw-parser-output table.wikitable > tbody > tr:nth-child(2n) td {
    background: rgba(255, 255, 255, 0.01);
}

/* Hover’da scouting tablosu hissi */
.skin-vector-2022 .mw-parser-output table.wikitable > tbody > tr:hover td {
    background: rgba(70, 167, 99, 0.09);
}

/* Sayı gibi görünen hücreleri hizala (örn: özellik, rating) */
.skin-vector-2022 .mw-parser-output table.wikitable td[style*="text-align:right"],
.skin-vector-2022 .mw-parser-output table.wikitable td.fm-attr,
.skin-vector-2022 .mw-parser-output table.wikitable td.fm-rating {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- */
/* 8. INFOBOX / OYUNCU & ROL KARTLARI                        */
/* --------------------------------------------------------- */

/* Hem klasik .infobox hem senin özel şablonların için ortak stil */
.skin-vector-2022 .mw-parser-output .infobox,
.skin-vector-2022 .mw-parser-output .infobox-role,
.skin-vector-2022 .mw-parser-output .fm-infobox,
.skin-vector-2022 .mw-parser-output .fm-role-card {
    float: right;
    clear: right;
    margin: 0 0 1rem 1.5rem;
    width: 310px;
    max-width: 100%;
    background: radial-gradient(circle at top, #18222f 0, #10141c 40%, #070a10 100%);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.75);
    color: var(--fm-text-main);
    font-size: 0.9rem;
    overflow: hidden;
}

/* Infobox başlık alanı – FM oyuncu kartı üst şeridi */
.skin-vector-2022 .mw-parser-output .infobox caption,
.skin-vector-2022 .mw-parser-output .infobox-role caption,
.skin-vector-2022 .mw-parser-output .fm-infobox caption,
.skin-vector-2022 .mw-parser-output .fm-role-card caption {
    background: linear-gradient(135deg, #1b2936, #2f8f4e);
    color: #ffffff;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* İç tablo, padding vs. */
.skin-vector-2022 .mw-parser-output .infobox td,
.skin-vector-2022 .mw-parser-output .infobox th,
.skin-vector-2022 .mw-parser-output .fm-infobox td,
.skin-vector-2022 .mw-parser-output .fm-infobox th,
.skin-vector-2022 .mw-parser-output .infobox-role td,
.skin-vector-2022 .mw-parser-output .infobox-role th,
.skin-vector-2022 .mw-parser-output .fm-role-card td,
.skin-vector-2022 .mw-parser-output .fm-role-card th {
    border: none;
    padding: 0.35rem 0.9rem;
}

/* Satır ayırma */
.skin-vector-2022 .mw-parser-output .infobox tr + tr td,
.skin-vector-2022 .mw-parser-output .infobox tr + tr th,
.skin-vector-2022 .mw-parser-output .fm-infobox tr + tr td,
.skin-vector-2022 .mw-parser-output .fm-infobox tr + tr th,
.skin-vector-2022 .mw-parser-output .infobox-role tr + tr td,
.skin-vector-2022 .mw-parser-output .infobox-role tr + tr th,
.skin-vector-2022 .mw-parser-output .fm-role-card tr + tr td,
.skin-vector-2022 .mw-parser-output .fm-role-card tr + tr th {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Label ve value ayrımı (solda açıklama, sağda değer) */
.skin-vector-2022 .mw-parser-output .infobox th,
.skin-vector-2022 .mw-parser-output .fm-infobox th,
.skin-vector-2022 .mw-parser-output .infobox-role th,
.skin-vector-2022 .mw-parser-output .fm-role-card th {
    text-align: left;
    color: var(--fm-text-soft);
    font-weight: 500;
    width: 45%;
}

.skin-vector-2022 .mw-parser-output .infobox td,
.skin-vector-2022 .mw-parser-output .fm-infobox td,
.skin-vector-2022 .mw-parser-output .infobox-role td,
.skin-vector-2022 .mw-parser-output .fm-role-card td {
    text-align: right;
}

/* Özellik satırları – FM attribute bar vibe */
.skin-vector-2022 .mw-parser-output .fm-attr-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: space-between;
}

.skin-vector-2022 .mw-parser-output .fm-attr-label {
    color: var(--fm-text-soft);
    font-size: 0.85rem;
}

.skin-vector-2022 .mw-parser-output .fm-attr-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.skin-vector-2022 .mw-parser-output .fm-attr-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2f8f4e, #6bcb84);
}

/* Attribute sayısı */
.skin-vector-2022 .mw-parser-output .fm-attr-value {
    width: 2.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- */
/* 9. BUTONLAR & AKTİF ELEMENTLER                            */
/* --------------------------------------------------------- */

.skin-vector-2022 .mw-htmlform-submit,
.skin-vector-2022 .mw-ui-button,
.skin-vector-2022 .oo-ui-buttonElement-button {
    background: var(--fm-green);
    color: #ffffff;
    border-radius: 999px;
    border: none;
    padding: 0.35rem 0.9rem;
    font-weight: 500;
    transition: background var(--fm-transition-fast), transform var(--fm-transition-fast), box-shadow var(--fm-transition-fast);
}

.skin-vector-2022 .mw-htmlform-submit:hover,
.skin-vector-2022 .mw-ui-button:hover,
.skin-vector-2022 .oo-ui-buttonElement-button:hover {
    background: var(--fm-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* Pasif / ikincil butonlar */
.skin-vector-2022 .mw-ui-button.mw-ui-quiet,
.skin-vector-2022 .oo-ui-flaggedElement-muted .oo-ui-buttonElement-button {
    background: rgba(18, 24, 34, 0.9);
    color: var(--fm-text-soft);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------- */
/* 10. MOBİL & KÜÇÜK EKRAN DOKUNUŞLARI                       */
/* --------------------------------------------------------- */

@media (max-width: 1000px) {
    .skin-vector-2022 .mw-parser-output {
        padding: 1.2rem 1rem;
        border-radius: var(--fm-radius-md);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
    }

    /* Infobox’lar alta gelsin, full width */
    .skin-vector-2022 .mw-parser-output .infobox,
    .skin-vector-2022 .mw-parser-output .infobox-role,
    .skin-vector-2022 .mw-parser-output .fm-infobox,
    .skin-vector-2022 .mw-parser-output .fm-role-card {
        float: none;
        margin: 0 0 1rem 0;
        width: 100%;
    }
}

/* Hamburger menü biraz daha belirgin */
.skin-vector-2022 .vector-header .vector-menu-checkbox,
.skin-vector-2022 .vector-header .vector-pinnable-element-toggle {
    border-radius: 999px;
}

/* --------------------------------------------------------- */
/* 11. TOC & YARDIMCI BLOKLAR                                */
/* --------------------------------------------------------- */

/* İçindekiler de mini panel gibi */
.skin-vector-2022 .mw-parser-output .toc {
    background: rgba(8, 11, 18, 0.96);
    border-radius: var(--fm-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0.7rem 1rem;
    color: var(--fm-text-soft);
}

.skin-vector-2022 .mw-parser-output .toc a {
    color: var(--fm-text-soft);
}

.skin-vector-2022 .mw-parser-output .toc a:hover {
    color: var(--fm-link-hover);
}

/* Not / uyarı kutuları varsa biraz modern dursun */
.skin-vector-2022 .mw-parser-output .hatnote,
.skin-vector-2022 .mw-parser-output .ambox {
    border-radius: var(--fm-radius-md);
    background: rgba(10, 16, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.05);
}