MediaWiki:Common.css: Perbedaan antara revisi

/* =========================================================
   MALIKI ENSIKLOPEDIA
   Perwajahan V2 — CSS Tahap 1A
   ========================================================= */

/* Latar belakang halaman */
body {
    background: #f5f8f7;
    color: #24343b;
}

/* Area konten utama */
#content {
    background: #ffffff;
}

/* Judul halaman */
.firstHeading {
    color: #004f40;
    font-weight: 600;
}

/* Judul bagian */
.mw-heading2,
.mw-heading3,
.mw-heading4 {
    color: #004f40;
}

/* Tautan */
a {
    color: #1f5f8b;
}

a:visited {
    color: #315f78;
}

a:hover {
    color: #006b54;
}

/* Sidebar */
#mw-panel {
    font-size: 0.95rem;
}

#mw-panel .portal {
    margin-bottom: 1.2rem;
}

#mw-panel .portal h3 {
    color: #004f40;
    font-weight: 700;
    letter-spacing: 0.04em;
}

#mw-panel .portal .body a {
    color: #1f5f8b;
}

#mw-panel .portal .body a:hover {
    color: #006b54;
}

/* Tabel MediaWiki */
.wikitable {
    border: 1px solid #d8e2df;
    background: #ffffff;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    background: #eaf5f1;
    color: #004f40;
    border-color: #d8e2df;
}

.wikitable > tr > td,
.wikitable > * > tr > td {
    border-color: #d8e2df;
}

/* Kotak navigasi pada halaman */
.mw-body {
    border-color: #d8e2df;
}

/* Footer */
#footer {
    color: #66777d;
}

#footer a {
    color: #1f5f8b;
}

/* Kotak pencarian */
#searchInput {
    border-color: #d8e2df;
}

#searchInput:focus {
    border-color: #006b54;
    box-shadow: 0 0 0 1px #006b54;
}

/* =========================================================
   MALIKI ENSIKLOPEDIA
   Halaman Utama — Perwajahan V2
   ========================================================= */

/* Pembungkus Halaman Utama */
.me-home {
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero */
.me-hero {
    padding: 2.5rem 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f7fbf9 0%, #eef6f3 100%);
    border: 1px solid #d8e2df;
    border-radius: 12px;
    text-align: center;
}

.me-hero-title {
    color: #004f40;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.me-hero-subtitle {
    color: #b58a2a;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.me-hero-description {
    max-width: 820px;
    margin: 0 auto;
    color: #40545a;
    line-height: 1.7;
}

/* Section */
.me-section {
    margin-bottom: 1.5rem;
}

.me-section-title {
    color: #004f40;
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid #d8e2df;
    padding-bottom: 0.45rem;
}

/* Grid kartu */
.me-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

/* Kartu */
.me-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0.8rem;
    background: #ffffff;
    border: 1px solid #d8e2df;
    border-radius: 8px;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.me-card a {
    color: #1f5f8b;
    font-weight: 600;
    text-decoration: none;
}

.me-card:hover {
    border-color: #006b54;
    box-shadow: 0 2px 8px rgba(0, 79, 64, 0.10);
}

.me-card:hover a {
    color: #006b54;
}

/* Grid bidang */
.me-field-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* Grid relasi */
.me-relation-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.65rem;
}

.me-relation-card {
    padding: 0.9rem 0.6rem;
    background: #faf9f5;
    border: 1px solid #ded9ca;
    border-radius: 8px;
    text-align: center;
}

.me-relation-code {
    color: #004f40;
    font-weight: 700;
    font-size: 1.05rem;
}

.me-relation-label {
    margin-top: 0.3rem;
    color: #40545a;
    font-size: 0.9rem;
}

/* Kontributor */
.me-contribute-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.me-contribute-card {
    padding: 1rem;
    background: #f8f5ed;
    border: 1px solid #e4dcc8;
    border-radius: 8px;
    text-align: center;
}

.me-contribute-card a {
    color: #006b54;
    font-weight: 600;
    text-decoration: none;
}

/* Responsif */
@media screen and (max-width: 900px) {
    .me-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .me-relation-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .me-grid,
    .me-field-grid,
    .me-relation-grid,
    .me-contribute-grid {
        grid-template-columns: 1fr;
    }

    .me-hero {
        padding: 1.5rem 1rem;
    }

    .me-hero-title {
        font-size: 1.8rem;
    }
}