MediaWiki:Vector-2022.css

/* ============================
   FM WIKI – CORE THEME v2
   Daha sade, kontrollü
============================ */

/* Renk değişkenleri */
.skin-vector-2022 {
    --fm-bg: #05070b;
    --fm-bg-alt: #0b0f14;
    --fm-panel: #111723;
    --fm-panel-soft: #151c28;
    --fm-border: rgba(255,255,255,.06);
    --fm-text: #e7edf6;
    --fm-text-soft: #a3afc2;
    --fm-green: #34a86b;
    --fm-green-soft: #6fcf97;
}

/* Genel gövde */
.skin-vector-2022 body {
    background:
        radial-gradient(circle at top center,
            rgba(52,168,107,.12),
            rgba(5,7,11,0.96) 55%
        ),
        linear-gradient(to bottom,
            #05070b,
            #0b0f14 60%,
            #05070b
        );
    background-attachment: fixed;
    color: var(--fm-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Ana container’ı transparan bırak */
.skin-vector-2022 .mw-page-container,
.skin-vector-2022 .vector-body {
    background: transparent;
}

/* ============================
   ANA İÇERİK PANELİ
============================ */
.skin-vector-2022 .mw-body-content {
    background: var(--fm-panel);
    border-radius: 14px;
    padding: 2rem 2.2rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    border: 1px solid rgba(255,255,255,.04);
}

/* Paragraflar ve genel metin */
.skin-vector-2022 .mw-parser-output p,
.skin-vector-2022 .mw-parser-output li,
.skin-vector-2022 .mw-parser-output td {
    color: #dde5f0;
    font-size: .95rem;
    line-height: 1.65;
}

.skin-vector-2022 .mw-parser-output small,
.skin-vector-2022 .mw-parser-output .mw-empty-elt {
    color: #9aa6b6;
}

/* ============================
   BAŞLIKLAR
============================ */
.skin-vector-2022 h1,
.skin-vector-2022 h2,
.skin-vector-2022 h3 {
    color: #f4f7fc;
    letter-spacing: .015em;
}

.skin-vector-2022 h1 {
    font-size: 1.7rem;
    margin-bottom: .8rem;
}

.skin-vector-2022 .mw-parser-output h2 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.4rem 0 .6rem;
    padding: .65rem .9rem;
    border-radius: 8px;
    border: none;
    background: linear-gradient(
        to right,
        rgba(52,168,107,.22),
        rgba(52,168,107,0)
    );
    font-weight: 650;
}

/* ============================
   LINKLER
============================ */
.skin-vector-2022 .mw-parser-output a {
    color: #76d19f;
    font-weight: 500;
    text-decoration: none;
}
.skin-vector-2022 .mw-parser-output a:hover {
    color: #8fe8b9;
    text-decoration: underline;
}

/* ============================
   LİSTELER
============================ */
.skin-vector-2022 .mw-parser-output ul {
    padding-left: 1.1rem;
    margin-top: .4rem;
}
.skin-vector-2022 .mw-parser-output li {
    margin: .25rem 0;
}
.skin-vector-2022 .mw-parser-output ul li::marker {
    color: #6fcf97;
}

/* ============================
   TABLOLAR
============================ */
.skin-vector-2022 table.wikitable {
    background: var(--fm-panel-soft);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--fm-border);
    overflow: hidden;
    margin: 1rem 0;
}

.skin-vector-2022 table.wikitable th {
    background: #111827;
    color: #f5f8fc;
    font-weight: 600;
    padding: .45rem .7rem;
}

.skin-vector-2022 table.wikitable td {
    padding: .4rem .7rem;
    border-top: 1px solid var(--fm-border);
    background: rgba(255,255,255,.015);
    color: #e3e9f2;
}

.skin-vector-2022 table.wikitable tr:hover td {
    background: rgba(52,168,107,.08);
}

/* ============================
   INFOBOX
============================ */
.skin-vector-2022 .infobox,
.skin-vector-2022 .infobox-role {
    background: #f5f7fb;
    color: #111827;
    border-radius: 10px;
    overflow: hidden;
}

.skin-vector-2022 .infobox th {
    color: #374151;
}
.skin-vector-2022 .infobox td {
    color: #111827;
}

.skin-vector-2022 .infobox caption {
    background: linear-gradient(135deg, #1f2937, #3fa86b);
    color: #ffffff;
}

/* ============================
   HEADER / MENÜ
============================ */
.skin-vector-2022 .vector-header-container,
.skin-vector-2022 .vector-sticky-header {
    background: linear-gradient(
        to bottom,
        #0b0f14 0%,
        #0e141d 100%
    ) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 4px 18px rgba(0,0,0,.7);
}

.skin-vector-2022 .vector-header a,
.skin-vector-2022 .vector-header span,
.skin-vector-2022 .vector-header label {
    color: #e5ecf5 !important;
}

.skin-vector-2022 .vector-menu-tabs .selected a {
    background: #1f7f52;
    color: #ffffff !important;
    border-radius: 999px;
}

/* ============================
   DASHBOARD KARTLARI
   (SADECE BELİRLİ SAYFALARDA
   KULLANMAN İÇİN ÖRNEK)
============================ */

/* Sadece Main Page’de “fm-dashboard” class’ı verdiğin ana kutuları kart yap */
.skin-vector-2022 .mw-parser-output .fm-dashboard {
    background: rgba(21,27,37,.94);
    backdrop-filter: blur(4px);
    border-radius: 16px;
    padding: 1.4rem 1.6rem;
    margin-bottom: 1.3rem;
    border: 1px solid rgba(255,255,255,.05);
    box-shadow:
        0 12px 34px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,255,255,.03);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.skin-vector-2022 .mw-parser-output .fm-dashboard:hover {
    background: #182232;
    transform: translateY(-1px);
    box-shadow:
        0 16px 40px rgba(0,0,0,.75),
        inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Dashboard içi alt kartlar */
.skin-vector-2022 .mw-parser-output .fm-dashboard .fm-card {
    background: rgba(24,31,42,.96);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255,255,255,.04);
}

/* Dashboard başlıkları */
.skin-vector-2022 .mw-parser-output .fm-dashboard h2,
.skin-vector-2022 .mw-parser-output .fm-dashboard h3 {
    margin-top: 0;
}

/* Footer */
.skin-vector-2022 .mw-footer {
    margin-top: 3rem;
    border-top: 1px solid var(--fm-border);
    color: var(--fm-text-soft);
}