MediaWiki:Common.css: Perbedaan antara revisi

/* =====================================
   MALIKI ENCYCLOPEDIA
   Common.css v27
   Full Page Homepage
   Compact Elegant Institutional Header
   Vector 2022
   ===================================== */
body {
    background:#ffffff;
    color:#24343b;
}
.firstHeading {
    color:#006b68;
}
a {
    color:#1f5f8b;
}
a:hover {
    color:#006b68;
}
/* =====================================
   HOMEPAGE
   HILANGKAN CHROME MEDIAWIKI
   KHUSUS HALAMAN UTAMA
   ===================================== */
body.page-Halaman_Utama .mw-body-header {
    display:none!important;
}
body.page-Halaman_Utama .mw-body-header-container {
    display:none!important;
}
body.page-Halaman_Utama .vector-page-toolbar {
    display:none!important;
}
body.page-Halaman_Utama .vector-page-toolbar-container {
    display:none!important;
}
body.page-Halaman_Utama .mw-body-content {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-body {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-page-container {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-content-container {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
body.page-Halaman_Utama .mw-parser-output {
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}
/* =====================================
   UTILITY BAR
   ===================================== */
#maliki-utility-bar {
    width:100%;
    height:32px;
    background:#006b68;
    color:#ffffff;
    box-sizing:border-box;
    position:relative;
    z-index:3000;
}
#maliki-utility-bar .maliki-utility-inner {
    width:100%;
    max-width:1200px;
    height:32px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}
#maliki-utility-bar .maliki-utility-left {
    display:flex;
    align-items:center;
    height:100%;
    gap:28px;
}
#maliki-utility-bar .maliki-utility-left a,
#maliki-utility-bar .maliki-utility-right span {
    color:#ffffff;
    text-decoration:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:600;
    line-height:1;
}
#maliki-utility-bar .maliki-utility-left a:hover {
    color:#dff7f5;
    text-decoration:none;
}
#maliki-utility-bar .maliki-utility-right {
    display:flex;
    align-items:center;
    gap:16px;
}
#maliki-utility-bar .maliki-utility-language {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:26px;
    height:20px;
    padding:0 7px;
    background:rgba(255,255,255,.12);
    border-radius:2px;
    font-size:10px!important;
}
/* =====================================
   VECTOR MAIN HEADER
   ===================================== */
.vector-header-container {
    background:#019d9a!important;
    border:0!important;
    box-shadow:none!important;
}
.vector-header-container .vector-header {
    background:#019d9a!important;
    color:#ffffff!important;
    border:0!important;
    box-shadow:none!important;
}
.vector-header-container .mw-header {
    min-height:64px;
    background:#019d9a!important;
    color:#ffffff!important;
    border:0!important;
}
/* =====================================
   MALIKI IDENTITY
   ===================================== */
.vector-header-container a,
.vector-header-container .mw-logo,
.vector-header-container .mw-logo-wordmark {
    color:#ffffff!important;
}
.vector-header-container .mw-logo {
    display:flex;
    align-items:center;
    font-weight:700;
}
.vector-header-container .mw-logo-icon {
    width:46px!important;
    height:46px!important;
    margin-right:10px;
}
.vector-header-container .mw-logo-wordmark {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.2;
}
.vector-header-container .mw-logo-tagline {
    color:rgba(255,255,255,.88)!important;
}
/* =====================================
   HEADER SEARCH
   ===================================== */
.vector-header-container .vector-search-box {
    margin-left:26px;
    margin-right:24px;
}
.vector-header-container .vector-search-box .cdx-text-input__input,
.vector-header-container .vector-search-box input {
    height:38px!important;
    background:#ffffff!important;
    border:0!important;
    color:#24343b!important;
    border-radius:3px!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:13px!important;
}
.vector-header-container .vector-search-box button {
    height:38px!important;
    background:#f5f7f7!important;
    border:0!important;
    color:#24343b!important;
    border-radius:0 3px 3px 0!important;
    font-weight:600;
}
.vector-header-container .vector-user-links,
.vector-header-container .vector-user-links a,
.vector-header-container .vector-menu-content,
.vector-header-container .vector-menu-content a {
    color:#ffffff!important;
}
.vector-header-container .vector-user-links a:hover,
.vector-header-container .vector-menu-content a:hover {
    color:#dff7f5!important;
}
.vector-header-container .vector-icon {
    color:#ffffff!important;
}
/* =====================================
   TOP NAVIGATION
   ===================================== */
#maliki-top-navigation {
    display:block;
    width:100%;
    height:44px;
    box-sizing:border-box;
    margin:0;
    padding:0;
    background:#019d9a;
    border:0;
    position:relative;
    z-index:2000;
}
#maliki-top-navigation .maliki-nav-inner {
    width:100%;
    max-width:1200px;
    height:44px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:stretch;
    justify-content:center;
    box-sizing:border-box;
}
#maliki-top-navigation .maliki-nav-item {
    position:relative;
    display:flex;
    align-items:stretch;
}
#maliki-top-navigation .maliki-nav-button {
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    color:#ffffff;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.015em;
    line-height:1.4;
    padding:0 18px;
    margin:0;
    cursor:pointer;
    white-space:nowrap;
    transition:background-color .18s ease,color .18s ease;
}
#maliki-top-navigation .maliki-nav-arrow {
    display:inline-block;
    margin-left:6px;
    font-size:9px;
    color:rgba(255,255,255,.82);
    transform:translateY(-1px);
    transition:transform .18s ease;
}
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-button,
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-button {
    background:#006b68;
    color:#ffffff;
}
#maliki-top-navigation .maliki-nav-item:hover .maliki-nav-arrow,
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-arrow {
    transform:rotate(180deg);
}
#maliki-top-navigation .maliki-nav-button:focus {
    outline:none;
    background:#006b68;
}
#maliki-top-navigation .maliki-nav-dropdown {
    position:absolute;
    top:100%;
    left:0;
    min-width:225px;
    padding:7px 0;
    background:#ffffff;
    border:1px solid #d8dee4;
    border-top:3px solid #006b68;
    border-radius:0 0 6px 6px;
    box-shadow:0 8px 22px rgba(0,0,0,.12);
    display:none;
    z-index:3000;
}
#maliki-top-navigation .maliki-nav-item.is-open .maliki-nav-dropdown {
    display:block;
}
@media (min-width:801px) {
    #maliki-top-navigation .maliki-nav-item:hover .maliki-nav-dropdown {
        display:block;
    }
}
#maliki-top-navigation .maliki-nav-dropdown a {
    display:block;
    padding:10px 18px;
    color:#24343b;
    font-size:13px;
    line-height:1.45;
    text-decoration:none;
    white-space:nowrap;
    border-left:3px solid transparent;
}
#maliki-top-navigation .maliki-nav-dropdown a:hover {
    background:#e7f5f4;
    color:#006b68;
    border-left-color:#019d9a;
    text-decoration:none;
}
/* =====================================
   HOMEPAGE CONTAINER
   ===================================== */
.me-home {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
}
/* =====================================
   HOMEPAGE HERO
   ===================================== */
.me-home-hero {
    width:100%;
    max-width:none;
    box-sizing:border-box;
    margin:0;
    padding:0;
    background:#f7f9f9;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden;
}
.me-home-hero-inner {
    width:100%;
    max-width:1080px;
    margin:0 auto;
    padding:58px 30px 46px;
    box-sizing:border-box;
    text-align:center;
}
.mw-parser-output .me-home-hero-label {
    display:block;
    margin:0 0 16px 0;
    padding:0;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#019d9a!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.16em!important;
    line-height:1.4!important;
    text-transform:uppercase;
}
.mw-parser-output .me-home-hero-title {
    display:block!important;
    width:100%!important;
    margin:0 auto 20px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#006b68!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:46px!important;
    font-weight:500!important;
    letter-spacing:-.012em!important;
    line-height:1.15!important;
    text-align:center!important;
}
.mw-parser-output .me-home-hero-institution {
    display:block;
    margin:0 auto 16px;
    padding:0;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:16px!important;
    font-weight:600!important;
    line-height:1.5!important;
    text-align:center;
}
.mw-parser-output .me-home-hero-description {
    display:block;
    width:100%;
    max-width:700px;
    margin:0 auto;
    padding:0;
    color:#5b666b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.65!important;
    text-align:center;
}
/* =====================================
   HOMEPAGE SEARCH
   MEDIAWIKI 1.46 / CODEX
   ===================================== */
.mw-parser-output .me-home-search {
    display:block;
    width:100%;
    max-width:720px;
    margin:28px auto 0;
    padding:0;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}
.mw-parser-output .me-home-search > div:first-child {
    margin-bottom:10px!important;
    color:#006b68!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.12em!important;
    line-height:1.4!important;
    text-align:left!important;
    text-transform:uppercase!important;
    opacity:1!important;
}
.mw-parser-output .me-home-search form {
    display:flex!important;
    align-items:stretch!important;
    justify-content:center!important;
    width:100%!important;
    max-width:720px!important;
    margin:0 auto!important;
    padding:0!important;
    gap:8px!important;
    box-sizing:border-box!important;
}
.mw-parser-output .me-home-search .cdx-text-input {
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0!important;
}
.mw-parser-output .me-home-search .cdx-text-input__input,
.mw-parser-output .me-home-search .mw-searchInput,
.mw-parser-output .me-home-search input[type="search"],
.mw-parser-output .me-home-search input[type="text"],
.mw-parser-output .me-home-search .mw-inputbox-input {
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    block-size:48px!important;
    min-block-size:48px!important;
    max-block-size:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 16px!important;
    border:1px solid #c4d4d2!important;
    border-radius:4px!important;
    background:#ffffff!important;
    color:#24343b!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    line-height:1.4!important;
    outline:none!important;
    box-shadow:none!important;
}
.mw-parser-output .me-home-search .cdx-text-input__input::placeholder,
.mw-parser-output .me-home-search input[type="search"]::placeholder,
.mw-parser-output .me-home-search input[type="text"]::placeholder {
    color:#8a9498!important;
    opacity:1!important;
}
.mw-parser-output .me-home-search .cdx-text-input__input:focus,
.mw-parser-output .me-home-search .mw-searchInput:focus,
.mw-parser-output .me-home-search input[type="search"]:focus,
.mw-parser-output .me-home-search input[type="text"]:focus {
    border-color:#019d9a!important;
    box-shadow:0 0 0 2px rgba(1,157,154,.10)!important;
}
.mw-parser-output .me-home-search .cdx-button,
.mw-parser-output .me-home-search input[type="submit"],
.mw-parser-output .me-home-search .mw-inputbox-button {
    display:block!important;
    flex:0 0 170px!important;
    width:170px!important;
    min-width:170px!important;
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    block-size:48px!important;
    min-block-size:48px!important;
    max-block-size:48px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:0 18px!important;
    border:1px solid #019d9a!important;
    border-radius:4px!important;
    background:#019d9a!important;
    color:#ffffff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.4!important;
    text-align:center!important;
    cursor:pointer!important;
}
.mw-parser-output .me-home-search .cdx-button:hover,
.mw-parser-output .me-home-search input[type="submit"]:hover {
    background:#006b68!important;
    border-color:#006b68!important;
}
/* =====================================
   HOMEPAGE LINKS
   ===================================== */
.mw-parser-output .me-home-hero-links {
    display:block;
    margin:20px auto 0;
    padding:0;
    color:#7a8589;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    line-height:1.5;
    text-align:center;
}
.mw-parser-output .me-home-hero-links a {
    color:#006b68;
    font-weight:600;
    text-decoration:none;
}
.mw-parser-output .me-home-hero-links a:hover {
    color:#019d9a;
    text-decoration:underline;
}
/* =====================================
   HOMEPAGE — JELAJAH PENGETAHUAN
   ===================================== */
.me-home-section {
    width:100%;
    box-sizing:border-box;
}
.me-home-section-inner {
    width:100%;
    max-width:1120px;
    margin:0 auto;
    padding:72px 30px;
    box-sizing:border-box;
}
.me-home-section-heading {
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}
.me-home-section-label {
    margin:0 0 10px 0;
    padding:0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1.4;
    text-transform:uppercase;
}
.me-home-section-heading h2 {
    margin:0 0 14px 0;
    padding:0;
    color:#006b68;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px;
    font-weight:500;
    line-height:1.25;
}
.me-home-section-heading p {
    margin:0;
    padding:0;
    color:#5b666b;
    font-family:Arial,Helvetica,sans-serif;
    font-size:15px;
    line-height:1.75;
}
.me-browse-section {
    width:100%;
    background:#ffffff;
    border-top:1px solid #e4ecea;
    border-bottom:1px solid #e4ecea;
}
.me-browse-section .me-home-section-inner {
    padding-top:72px;
    padding-bottom:76px;
}
.me-browse-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.me-browse-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:245px;
    box-sizing:border-box;
    padding:27px 27px 24px;
    background:#ffffff;
    border:1px solid #d8e4e2;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(24,58,58,.04);
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.me-browse-card:hover {
    transform:translateY(-3px);
    border-color:#9fd4d1;
    box-shadow:0 8px 22px rgba(24,58,58,.09);
}
.me-browse-type {
    margin:0 0 15px 0;
    padding:0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    line-height:1.4;
    text-transform:uppercase;
}
.me-browse-title {
    margin:0 0 13px 0;
    padding:0;
    color:#006b68;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:500;
    line-height:1.3;
}
.me-browse-title a {
    color:#006b68;
    text-decoration:none;
}
.me-browse-title a:hover {
    color:#019d9a;
    text-decoration:none;
}
.me-browse-description {
    flex:1 1 auto;
    margin:0;
    padding:0;
    color:#5b666b;
    font-family:Arial,Helvetica,sans-serif;
    font-size:14px;
    line-height:1.7;
}
.me-browse-link {
    margin:22px 0 0 0;
    padding:16px 0 0 0;
    border-top:1px solid #edf1f0;
    color:#019d9a;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1.5;
}
.me-browse-link a {
    color:#019d9a;
    text-decoration:none;
}
.me-browse-link a:hover {
    color:#006b68;
    text-decoration:none;
}
.me-section-more {
    margin:34px 0 0 0;
    padding:0;
    text-align:center;
}
.me-section-more a {
    color:#006b68;
    font-family:Arial,Helvetica,sans-serif;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
}
.me-section-more a:hover {
    color:#019d9a;
    text-decoration:underline;
}
/* =====================================
   KNOWLEDGE GRID
   ===================================== */
.me-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    width:100%;
    max-width:1200px;
    margin:20px auto 45px;
    padding:0 24px;
    box-sizing:border-box;
    align-items:stretch;
}
.me-card {
    border:1px solid #e1e8e7;
    background:#ffffff;
    padding:20px;
    box-sizing:border-box;
    border-radius:6px;
    box-shadow:none;
    width:100%;
    min-width:0;
}
.me-card img {
    width:100%;
    max-width:250px;
    height:180px;
    object-fit:contain;
    display:block;
    margin:0 auto 14px;
}
.me-card a {
    color:#006b68;
    text-decoration:none;
    font-weight:bold;
}
.me-card a:hover {
    color:#019d9a;
}
/* =====================================
   ARTICLE
   ===================================== */
.me-article {
    max-width:900px;
    margin:auto;
}
.me-article-header h1 {
    font-family:Georgia,"Times New Roman",serif;
    font-size:42px;
    color:#006b68;
    border-bottom:0!important;
    padding-bottom:15px;
}
.me-summary {
    background:#e7f5f4;
    border-left:4px solid #019d9a;
    padding:20px;
    margin:30px 0;
}
.me-section {
    margin:35px 0;
}
.me-section h2 {
    color:#006b68;
    border-bottom:0!important;
    padding-bottom:8px;
}
/* =====================================
   WIKIEDITOR
   ===================================== */
.me-free-text,
.me-free-text textarea,
.wikiEditor-ui-text,
.wikiEditor-ui-textarea {
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}
.wikiEditor-ui {
    width:100%!important;
    max-width:none!important;
}
.wikiEditor-ui-text {
    width:100%!important;
}
.wikiEditor-ui-text textarea {
    width:100%!important;
    max-width:none!important;
    box-sizing:border-box!important;
}
/* =====================================
   FLAGGEDREVS
   ===================================== */
#mw-fr-reviewform {
    display:none!important;
}
/* =====================================
   RESPONSIVE
   ===================================== */
@media (max-width:1000px) {
    #maliki-top-navigation .maliki-nav-inner {
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    #maliki-top-navigation .maliki-nav-button {
        padding:0 14px;
        font-size:12px;
    }
}
@media (max-width:900px) {
    #maliki-utility-bar .maliki-utility-right span:first-child {
        display:none;
    }
    .me-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .me-browse-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:800px) {
    #maliki-utility-bar .maliki-utility-inner {
        padding:0 12px;
    }
    #maliki-utility-bar .maliki-utility-left {
        gap:16px;
    }
    #maliki-utility-bar .maliki-utility-left a {
        font-size:11px;
    }
    #maliki-top-navigation {
        overflow:visible;
    }
    #maliki-top-navigation .maliki-nav-inner {
        height:42px;
        padding:0 8px;
        justify-content:flex-start;
        overflow-x:auto;
    }
    #maliki-top-navigation .maliki-nav-button {
        padding:0 11px;
        font-size:12px;
    }
    #maliki-top-navigation .maliki-nav-dropdown {
        position:fixed;
        left:8px;
        width:calc(100vw - 16px);
        max-width:360px;
        border-radius:6px;
    }
    .mw-parser-output .me-home-search form {
        flex-direction:column!important;
        gap:8px!important;
    }
    .mw-parser-output .me-home-search .cdx-text-input,
    .mw-parser-output .me-home-search .cdx-text-input__input,
    .mw-parser-output .me-home-search .mw-searchInput,
    .mw-parser-output .me-home-search input[type="search"],
    .mw-parser-output .me-home-search input[type="text"],
    .mw-parser-output .me-home-search .mw-inputbox-input,
    .mw-parser-output .me-home-search .cdx-button,
    .mw-parser-output .me-home-search input[type="submit"],
    .mw-parser-output .me-home-search .mw-inputbox-button {
        width:100%!important;
        min-width:0!important;
        flex:none!important;
    }
}
@media (max-width:700px) {
    .me-browse-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .me-home-section-inner {
        padding:55px 20px;
    }
    .me-home-section-heading h2 {
        font-size:32px;
    }
    .vector-header-container .vector-search-box {
        margin-left:8px;
        margin-right:8px;
    }
    .vector-header-container .mw-logo-icon {
        width:42px!important;
        height:42px!important;
    }
    .vector-header-container .mw-logo-wordmark {
        font-size:15px;
    }
    .mw-parser-output .me-home-hero-title {
        font-size:34px!important;
    }
    .me-home-hero-inner {
        padding:42px 20px 34px;
    }
}
@media (max-width:600px) {
    #maliki-utility-bar .maliki-utility-left a:nth-child(2),
    #maliki-utility-bar .maliki-utility-left a:nth-child(3) {
        display:none;
    }
    .me-grid {
        grid-template-columns:1fr;
    }
    .mw-parser-output .me-home-hero-title {
        font-size:30px!important;
    }
}

/* =====================================
   MALIKI SIDEBAR
   FORCE LINK VISIBILITY
   ===================================== */
#mw-panel a,
#mw-panel a:visited,
#mw-panel .vector-menu-portal a,
#mw-panel .vector-menu-portal a:visited,
#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a:visited,
#mw-panel .mw-list-item a,
#mw-panel .mw-list-item a:visited {
    color:#24343b!important;
    opacity:1!important;
    visibility:visible!important;
    text-decoration:none!important;
}
#mw-panel .vector-menu-portal .vector-menu-heading,
#mw-panel .vector-menu-portal .vector-menu-heading-label {
    color:#006b68!important;
    opacity:1!important;
    visibility:visible!important;
}
#mw-panel a:hover,
#mw-panel .vector-menu-portal a:hover,
#mw-panel .vector-menu-content a:hover,
#mw-panel .mw-list-item a:hover {
    color:#006b68!important;
    background:#e7f5f4!important;
    text-decoration:none!important;
}
#mw-panel .vector-menu-content,
#mw-panel .vector-menu-content ul,
#mw-panel .vector-menu-content li,
#mw-panel .vector-menu-portal {
    color:#24343b!important;
    opacity:1!important;
    visibility:visible!important;
}
/* =====================================
   VECTOR 2022 MAIN MENU
   TARGET UTAMA SIDEBAR MALIKI
   ===================================== */
#vector-main-menu a,
#vector-main-menu a:visited,
#vector-main-menu .vector-menu-content a,
#vector-main-menu .vector-menu-content a:visited,
#vector-main-menu .mw-list-item a,
#vector-main-menu .mw-list-item a:visited {
    color:#24343b!important;
    opacity:1!important;
    visibility:visible!important;
    text-decoration:none!important;
}
#vector-main-menu .vector-menu-heading,
#vector-main-menu .vector-menu-heading-label {
    color:#006b68!important;
    opacity:1!important;
    visibility:visible!important;
    font-weight:700!important;
}
#vector-main-menu .vector-menu-content,
#vector-main-menu .vector-menu-content ul,
#vector-main-menu .vector-menu-content li {
    color:#24343b!important;
    opacity:1!important;
    visibility:visible!important;
}
#vector-main-menu a:hover,
#vector-main-menu .vector-menu-content a:hover,
#vector-main-menu .mw-list-item a:hover {
    color:#006b68!important;
    background:#e7f5f4!important;
    text-decoration:none!important;
}
#vector-main-menu .vector-menu-portal {
    opacity:1!important;
    visibility:visible!important;
}
/* =====================================
   SIDEBAR LAYER
   TIDAK TERTUTUP HEADER
   ===================================== */
#vector-main-menu {
    position:relative!important;
    z-index:2000!important;
}
#vector-main-menu .vector-menu-content {
    position:relative!important;
    z-index:2001!important;
    background:#ffffff!important;
}
#vector-main-menu .vector-menu-portal {
    position:relative!important;
    z-index:2002!important;
    background:#ffffff!important;
}


/* ==================================================
   MALIKI ENCYCLOPEDIA
   DESAIN HALAMAN ARTIKEL — V1
   Khusus elemen Template:ME Article
   ================================================== */

/* Area utama artikel */
.me-article {
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 8px 48px;
    color: #263b3a;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.85;
    overflow-wrap: anywhere;
}

/* Header artikel */
.me-article .me-article-header {
    margin: 0 0 30px;
    padding: 30px 0 24px;
    border-bottom: 1px solid #dce8e5;
}

/* Label di atas judul */
.me-article .me-article-kicker {
    margin-bottom: 12px;
    color: #087e78;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.6;
    text-transform: uppercase;
}

/* Judul utama */
.me-article .me-article-title {
    margin: 0 0 18px;
    color: #075e59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

/* Informasi entitas yang dibahas */
.me-article .me-article-about {
    margin-top: 14px;
    color: #405b58;
    font-size: 14px;
    line-height: 1.7;
}

.me-article .me-article-label {
    display: block;
    margin-bottom: 4px;
    color: #637674;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Kategori artikel */
.me-article .me-article-category {
    display: inline-block;
    margin-top: 12px;
    padding: 5px 11px;
    border: 1px solid #cfe3df;
    border-radius: 5px;
    background: #edf7f5;
    color: #075e59;
    font-size: 12px;
    line-height: 1.6;
}

/* Isi utama: paragraf */
.me-article .me-article-content {
    max-width: 780px;
    margin: 0 auto;
    color: #293b39;
    font-size: 17px;
    line-height: 1.9;
}

.me-article .me-article-content p {
    margin: 0 0 1.35em;
}

/* Subjudul */
.me-article .me-article-content h2 {
    margin: 1.8em 0 0.65em;
    padding-bottom: 8px;
    border-bottom: 1px solid #dce8e5;
    color: #075e59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.35;
}

.me-article .me-article-content h3 {
    margin: 1.6em 0 0.55em;
    color: #176d67;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.me-article .me-article-content h4 {
    margin: 1.4em 0 0.5em;
    color: #315653;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

/* Tautan dalam artikel */
.me-article .me-article-content a,
.me-article .me-article-references a {
    color: #087e78;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.me-article .me-article-content a:hover,
.me-article .me-article-references a:hover {
    color: #075e59;
}

/* Daftar */
.me-article .me-article-content ul,
.me-article .me-article-content ol {
    margin: 0 0 1.4em;
    padding-left: 1.7em;
}

.me-article .me-article-content li {
    margin-bottom: 0.45em;
}

/* Kutipan */
.me-article .me-article-content blockquote {
    margin: 1.5em 0;
    padding: 12px 20px;
    border-left: 4px solid #087e78;
    background: #f3f8f7;
    color: #405b58;
}

/* Gambar di dalam artikel */
.me-article .me-article-content figure {
    max-width: 100%;
    margin: 1.6em auto;
}

.me-article .me-article-content img {
    max-width: 100%;
    height: auto;
}

.me-article .me-article-content figcaption {
    color: #637674;
    font-size: 13px;
    line-height: 1.6;
}

/* Referensi */
.me-article .me-article-references {
    max-width: 780px;
    margin: 42px auto 0;
    padding-top: 24px;
    border-top: 2px solid #dce8e5;
    font-size: 15px;
    line-height: 1.8;
}

.me-article .me-article-references h2,
.me-article .me-article-details h2 {
    margin: 0 0 16px;
    color: #075e59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.4;
}

/* Informasi artikel di bagian akhir */
.me-article .me-article-details {
    max-width: 780px;
    margin: 36px auto 0;
    padding-top: 22px;
    border-top: 1px solid #dce8e5;
    font-size: 14px;
    line-height: 1.7;
}

.me-article .me-article-details table {
    width: 100%;
    border-collapse: collapse;
}

.me-article .me-article-details th,
.me-article .me-article-details td {
    padding: 10px 12px;
    border: 1px solid #dce8e5;
    text-align: left;
    vertical-align: top;
}

.me-article .me-article-details th {
    width: 32%;
    background: #f3f8f7;
    color: #315653;
}

/* Tampilan ponsel */
@media screen and (max-width: 720px) {
    .me-article {
        padding: 0 2px 32px;
        font-size: 16px;
        line-height: 1.8;
    }

    .me-article .me-article-header {
        padding: 22px 0 18px;
        margin-bottom: 22px;
    }

    .me-article .me-article-title {
        font-size: 32px;
        line-height: 1.22;
    }

    .me-article .me-article-content {
        font-size: 16px;
        line-height: 1.85;
    }

    .me-article .me-article-content h2 {
        font-size: 24px;
    }

    .me-article .me-article-content h3 {
        font-size: 19px;
    }

    .me-article .me-article-references,
    .me-article .me-article-details {
        font-size: 14px;
    }

    .me-article .me-article-details th,
    .me-article .me-article-details td {
        padding: 8px;
    }
}


/* Sembunyikan judul teknis hanya pada halaman uji ME Article-000008 */
body.page-ME_Article-000008 #firstHeading {
    display: none;
}

/* Perbaikan lebar halaman artikel */
.me-article,
.me-article * {
    box-sizing: border-box;
}

.me-article {
    min-width: 0;
    max-width: 900px;
}

.me-article .me-article-content,
.me-article .me-article-header {
    min-width: 0;
    max-width: 100%;
}

.me-article img,
.me-article table,
.me-article pre {
    max-width: 100%;
}

.me-article table {
    table-layout: auto;
}

.me-article pre {
    overflow-x: auto;
}

@media screen and (max-width: 720px) {
    .me-article {
        width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .me-article table {
        display: block;
        overflow-x: auto;
    }
}

/* ==================================================
   ME ARTICLE 000008 — OVERRIDE LEBAR HALAMAN
   Khusus halaman uji, tidak mengubah dasbor editorial
   ================================================== */

body.page-ME_Article-000008 .mw-body,
body.page-ME_Article-000008 .mw-body-content,
body.page-ME_Article-000008 .mw-content-container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1200px !important;
    min-width: 0 !important;
}

body.page-ME_Article-000008 .me-article {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 1100px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 24px;
    padding-left: 24px;
}

body.page-ME_Article-000008 .me-article .me-article-content,
body.page-ME_Article-000008 .me-article .me-article-references,
body.page-ME_Article-000008 .me-article .me-article-details {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 850px !important;
    margin-right: auto;
    margin-left: auto;
}

@media screen and (max-width: 720px) {
    body.page-ME_Article-000008 .mw-body,
    body.page-ME_Article-000008 .mw-body-content,
    body.page-ME_Article-000008 .mw-content-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-ME_Article-000008 .me-article {
        padding-right: 12px;
        padding-left: 12px;
    }

    body.page-ME_Article-000008 .me-article .me-article-content,
    body.page-ME_Article-000008 .me-article .me-article-references,
    body.page-ME_Article-000008 .me-article .me-article-details {
        max-width: 100% !important;
    }
}


/* =========================================
   MALIKI ENCYCLOPEDIA
   STANDAR DESAIN DROPDOWN NAVIGASI
   ========================================= */

/* Tampilan panel semua dropdown */
#maliki-top-navigation .maliki-nav-dropdown {
    box-sizing: border-box;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #cbdedb;
    border-top: 3px solid #087b74;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 22px rgba(23, 62, 59, 0.12);
}

/* Setiap submenu berbentuk kotak */
#maliki-top-navigation .maliki-nav-dropdown a {
    display: block;
    box-sizing: border-box;
    min-width: 0;
    margin: 3px;
    padding: 11px 12px;
    border: 1px solid #d6e7e4;
    border-radius: 6px;
    background: #ffffff;
    color: #245b56;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background-color 0.15s ease,
                border-color 0.15s ease;
}

/* Efek arahkan kursor dan fokus */
#maliki-top-navigation .maliki-nav-dropdown a:hover,
#maliki-top-navigation .maliki-nav-dropdown a:focus {
    background: #edf7f6;
    border-color: #087b74;
    color: #075e59;
    outline-offset: 2px;
}

/* DESKTOP: Ensiklopedia 3 kolom */
@media screen and (min-width: 801px) {
    #maliki-top-navigation
    .maliki-nav-item:first-child.is-open
    > .maliki-nav-dropdown {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 680px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 40px) !important;
        gap: 4px !important;
    }
}

/* TABLET: Ensiklopedia 2 kolom */
@media screen and (min-width: 601px) and (max-width: 800px) {
    #maliki-top-navigation
    .maliki-nav-item:first-child.is-open
    > .maliki-nav-dropdown {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: min(520px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        gap: 4px !important;
    }
}

/* PONSEL: Ensiklopedia 1 kolom */
@media screen and (max-width: 600px) {
    #maliki-top-navigation
    .maliki-nav-item:first-child.is-open
    > .maliki-nav-dropdown {
        display: block !important;
        width: min(300px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
    }
}

/* =========================================
   MALIKI ENCYCLOPEDIA
   PENGATURAN PENCARIAN HEADER & SARAN (FIX)
   ========================================= */

/* 1. Turunkan lapisan navigasi agar berada di bawah pop-up pencarian */
#maliki-top-navigation,
#maliki-top-navigation .maliki-nav-inner,
.maliki-nav-wrapper {
    position: relative !important;
    z-index: 1 !important;
}

/* 2. Pastikan area pencarian dan menu saran berada di lapisan teratas */
.vector-header-container #p-search,
.vector-search-box,
.vector-typeahead-search-container,
.cdx-typeahead-search {
    position: relative !important;
    z-index: 99999 !important;
}

/* 3. Perbaikan Lapisan & Posisi Dropdown Saran Pencarian */
.cdx-typeahead-search__menu {
    position: absolute !important;
    z-index: 999999 !important;
    top: calc(100% + 4px) !important; /* Mencegah popup menutupi kotak input */
    left: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbdedb !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 16px rgba(23, 62, 59, 0.12) !important;
}

/* 4. MENGEMBALIKAN TEKS SARAN AGAR TAMPIL UTUH (TIDAK TERPOTONG) */
.cdx-typeahead-search__menu .cdx-menu-item {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    color: #245b56 !important;
    padding: 8px 12px !important;
}

.cdx-typeahead-search__menu .cdx-menu-item__content {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    color: #245b56 !important;
}

.cdx-typeahead-search__menu .cdx-menu-item__text {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #245b56 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-left: 10px !important;
}

.cdx-typeahead-search__menu .cdx-menu-item--highlighted {
    background: #e8f5f3 !important;
}

/* 5. Penyelarasan Tinggi Kotak Input & Tombol Cari Header (40px) */
.vector-header-container .cdx-search-input {
    display: flex !important;
    align-items: stretch !important;
    height: 40px !important;
    box-sizing: border-box !important;
}

.vector-header-container .cdx-search-input__input-wrapper,
.vector-header-container .cdx-text-input,
.vector-header-container .cdx-text-input__input {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    box-sizing: border-box !important;
}

.vector-header-container .cdx-search-input__end-button {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

/* =========================================
   MALIKI ENCYCLOPEDIA
   KOTAK PENCARIAN PROPORSIOAL (LEBAR 55%)
   ========================================= */

/* 1. Batasi lebar total kontainer pencarian header */
.vector-header-container #p-search,
.vector-header-container .vector-search-box {
    width: 320px !important; /* Diperpendek ~45% dari ukuran sebelumnya */
    max-width: 100% !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
}

/* 2. Tata letak flexbox tanpa celah */
.vector-header-container .cdx-typeahead-search,
.vector-header-container .cdx-typeahead-search__form,
.vector-header-container .cdx-search-input {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* 3. Pembungkus input teks menyesuaikan sisa ruang */
.vector-header-container .cdx-search-input__input-wrapper,
.vector-header-container .cdx-text-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 4. Input teks di dalam */
.vector-header-container .cdx-text-input__input {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* 5. Tombol "Cari" menempel rapat di kanan */
.vector-header-container .cdx-search-input__end-button,
.vector-header-container .cdx-search-input button {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}