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;
    }
}
/* =========================================================
   MALIKI ENSIKLOPEDIA
   Perwajahan V2 — CSS Tahap 1B
   Penyempurnaan visual
   ========================================================= */

/* Area section */
.me-section {
    margin: 0 0 2rem 0;
}

.me-section-title {
    color: #004f40;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid #d8e2df;
}

/* Kartu umum */
.me-card {
    min-height: 72px;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #d8e2df;
    border-radius: 10px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.me-card:hover {
    transform: translateY(-2px);
    border-color: #006b54;
    background: #fbfdfc;
    box-shadow: 0 5px 14px rgba(0, 79, 64, 0.12);
}

.me-card a {
    display: block;
    width: 100%;
    color: #1f5f8b;
    font-weight: 600;
    text-decoration: none;
}

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

/* Kartu bidang */
.me-field-grid .me-card {
    min-height: 68px;
}

/* Kartu relasi Islam–Sains */
.me-relation-card {
    min-height: 92px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.me-relation-card:hover {
    transform: translateY(-2px);
    border-color: #b58a2a;
    box-shadow: 0 5px 14px rgba(181, 138, 42, 0.12);
}

/* Kode relasi */
.me-relation-code {
    letter-spacing: 0.03em;
}

/* Keterangan relasi */
.me-relation-label {
    line-height: 1.45;
}

/* Kartu kontribusi */
.me-contribute-card {
    min-height: 78px;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.me-contribute-card:hover {
    transform: translateY(-2px);
    border-color: #b58a2a;
    box-shadow: 0 5px 14px rgba(181, 138, 42, 0.12);
}

.me-contribute-card a {
    display: block;
    text-decoration: none;
}

/* Teks paragraf dalam section */
.me-section > p {
    max-width: 900px;
    line-height: 1.7;
    color: #40545a;
}

/* Tampilan layar besar */
@media screen and (min-width: 1200px) {
    .me-grid {
        gap: 1rem;
    }

    .me-field-grid {
        gap: 1rem;
    }

    .me-relation-grid {
        gap: 0.85rem;
    }

    .me-contribute-grid {
        gap: 1rem;
    }
}

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

    .me-field-grid,
    .me-contribute-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Ponsel */
@media screen and (max-width: 600px) {
    .me-section {
        margin-bottom: 1.5rem;
    }

    .me-section-title {
        font-size: 1.3rem;
    }

    .me-grid,
    .me-field-grid,
    .me-relation-grid,
    .me-contribute-grid {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .me-card,
    .me-field-grid .me-card,
    .me-relation-card,
    .me-contribute-card {
        min-height: 0;
    }
}
/* =========================================================
   MALIKI ENSIKLOPEDIA
   Perwajahan V2 — Tahap 3A
   Penekanan Kartu Jelajah Pengetahuan
   ========================================================= */

.me-grid {
    gap: 0.9rem;
}

.me-grid .me-card {
    min-height: 82px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
    border: 1px solid #d8e2df;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 79, 64, 0.05);
}

.me-grid .me-card a {
    font-size: 1rem;
    line-height: 1.35;
}

.me-grid .me-card:hover {
    background: #f1f8f5;
    border-color: #006b54;
    box-shadow: 0 6px 16px rgba(0, 79, 64, 0.13);
    transform: translateY(-3px);
}

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