MediaWiki:Common.css: Perbedaan antara revisi

/* =====================================
   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 & GRID (PERBAIKAN UTAMA)
===================================== */

.me-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 20px 0 35px !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
}

.me-card{
    border: 1px solid #d9e2df;
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    width: 100% !important;
    min-width: 0 !important;
}

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

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

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

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

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