MediaWiki:Common.css

Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.

• Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
• Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
• Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css v12 FINAL (Diperbarui)
===================================== */


/* =========================
   GLOBAL
========================= */

body{
    background:#f5f8f7;
    color:#24343b;
}


.firstHeading{
    color:#004f40;
}


a{
    color:#1f5f8b;
}


a:hover{
    color:#006b54;
}



/* =========================
   HOME CONTAINER
========================= */

.me-home{
    max-width:1200px;
    margin:0 auto;
}



/* =====================================
   HERO BANNER
===================================== */


.me-hero-image{
    width:100%;
    margin:25px auto 0;
    text-align:center;
}



.me-hero-image img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}



/* =====================================
   HERO CONTENT
===================================== */


.me-hero{
    background:#f8f6ef;
    border:1px solid #ddd;
    border-radius:12px;
    text-align:center;
    margin:0 auto 45px;
    padding:25px 40px 35px;
}



.me-hero h1{
    font-family:Georgia,serif;
    font-size:54px;
    font-weight:normal;
    color:#006b54;
    margin:0 auto 15px;
    padding-bottom:10px;
    border-bottom:1px solid #ccc;
    max-width:850px;
}



.me-hero h3.tagline{
    font-size:24px;
    font-weight:bold;
    color:#24343b;
    margin:25px 0 15px;
}



.me-hero p{
    font-size:17px;
    line-height:1.6;
    max-width:850px;
    margin:15px auto;
}



/* =====================================
   MALIKI ARTICLE STYLE
===================================== */


.me-article{
    max-width:900px;
    margin:auto;
}



.me-article-header h1{
    font-family:Georgia,serif;
    font-size:42px;
    color:#006b54;
    border-bottom:1px solid #ddd;
    padding-bottom:15px;
}



.me-article-image{
    text-align:center;
    margin:25px 0;
}



.me-article-image img{
    max-width:350px;
    height:auto;
}



.me-summary{
    background:#f8f6ef;
    border-left:4px solid #c79b2b;
    padding:20px;
    margin:30px 0;
}



.me-section{
    margin:35px 0;
}



.me-section h2{
    color:#006b54;
    border-bottom:1px solid #ddd;
    padding-bottom:8px;
}



/* =====================================
   NAVIGASI PENGETAHUAN
===================================== */

.me-navigation{
    margin:35px 0;
}


.me-navigation h2{
    color:#006b54;
    font-size:24px;
    margin-bottom:25px;
    border-bottom:1px solid #ddd;
    padding-bottom:10px;
}


.me-navigation-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}


.me-navigation-table th{
    width:180px;
    text-align:left;
    background:#f5f3eb;
    padding:12px;
    border:1px solid #ddd;
    font-weight:bold;
}


.me-navigation-table td{
    padding:12px;
    border:1px solid #ddd;
}


.me-navigation-table a{
    color:#1f5f8b;
}


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

.me-knowledge-navigation{
    margin-top:35px;
    margin-bottom:35px;
}



/* =====================================
   JELAJAH PENGETAHUAN - PERBAIKAN PAKSA
===================================== */

/* Memaksa grid container menjadi 3 kolom yang sama rata */
.me-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 20px 0 35px !important;
    box-sizing: border-box !important;
}

/* Memaksa setiap kartu memiliki lebar penuh dari kolomnya */
.me-card {
    background: #fff !important;
    border: 1px solid #d9e2df !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important; /* Paksa lebar kartu isi grid */
    min-width: 0 !important; /* Mencegah overflow */
    margin: 0 !important;
}

/* Membatasi gambar agar tidak merusak layout */
.me-card img {
    display: block !important;
    height: 160px !important;
    margin: 0 auto 14px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    width: auto !important;
}

/* =====================================
   RESPONSIVE - MENYESUAIKAN LAYAR
===================================== */

/* Layar Sedang (Tablet): Menjadi 2 kolom */
@media (max-width: 900px) {
    .me-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Layar Kecil (Ponsel): Menjadi 1 kolom */
@media (max-width: 600px) {
    .me-grid {
        grid-template-columns: 1fr !important;
    }
}