/* ==========================================================================
   MASTER STYLESHEET - KISI BERKELANJUTAN (OJS 3.5 DEFAULT THEME)
   Versi Bersih Terpadu: Radiant Hero Light, Grid 4 Kolom & Responsif Penuh
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET GLOBAL, PENGHAPUS GARIS VERTIKAL TEMA & PEMBATAS HALAMAN
   -------------------------------------------------------------------------- */
body {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #212121 !important;
    background-color: #ffffff !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* Menyembunyikan teks "Skip to main content..." & judul pembaca layar */
.pkp_screen_reader,
.sr-only,
.cmp_skip_to_content,
.cmp_skip_to_content a {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.pkp_site_nav_toggle {
    display: none !important;
}

/* Menghapus semua garis vertikal & horizontal bawaan Default Theme */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_head_wrapper::before,
.pkp_head_wrapper::after {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_main::before,
.pkp_structure_main::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
}

.pkp_structure_page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
}

/* Membuka lebar penuh khusus Halaman Depan & menyembunyikan ruang sidebar kosong */
body.pkp_page_index .pkp_structure_content,
body.pkp_page_index .pkp_structure_main,
.pkp_structure_content:has(.page_index_journal),
.pkp_structure_main:has(.page_index_journal),
.page_index_journal {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

body.pkp_page_index .pkp_structure_sidebar {
    display: none !important;
}

/* Mengatur halaman selain Beranda agar rapi di tengah */
body:not(.pkp_page_index) .pkp_structure_content {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 35px auto 80px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    float: none !important;
}

body:not(.pkp_page_index) .pkp_structure_main {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Breadcrumbs bersih tanpa garis bawah di semua halaman */
.cmp_breadcrumbs,
.cmp_breadcrumbs ol,
.cmp_breadcrumbs * {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

.cmp_breadcrumbs::before,
.cmp_breadcrumbs::after,
.cmp_breadcrumbs ol::before,
.cmp_breadcrumbs ol::after {
    display: none !important;
    content: none !important;
}

.cmp_breadcrumbs ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 0.85rem !important;
    color: #757575 !important;
}

.cmp_breadcrumbs ol li a {
    color: #0076c6 !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. HEADER & NAVIGASI PROPORSIONAL (SEJAJAR LURUS DENGAN KONTEN)
   -------------------------------------------------------------------------- */
.pkp_structure_head {
    background-color: #ffffff !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    position: relative !important;
}

.pkp_head_wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 20px 30px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 35px !important;
    position: relative !important;
    border: none !important;
}

.pkp_site_name_wrapper,
.pkp_site_name {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
}

.pkp_site_name > a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_site_name img {
    max-height: 52px !important;
    width: auto !important;
    display: block !important;
}

.pkp_site_nav_menu {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 2 !important;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
}

.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border: none !important;
    width: auto !important;
}

.pkp_navigation_primary li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.pkp_navigation_primary li a {
    color: #111111 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: none !important;
    transition: color 0.2s ease !important;
}

.pkp_navigation_primary li a:hover,
.pkp_navigation_primary li a:focus,
.pkp_navigation_primary li.in_focus > a,
.pkp_navigation_primary li[aria-expanded="true"] > a,
.pkp_navigation_primary li.current > a {
    background-color: transparent !important;
    color: #ff7a18 !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.pkp_navigation_primary ul {
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    border-radius: 6px !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 9999 !important;
    display: none !important;
}

.pkp_navigation_primary li:hover > ul,
.pkp_navigation_primary li:focus-within > ul {
    display: block !important;
}

.pkp_navigation_primary ul li a {
    color: #212121 !important;
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    display: block !important;
    white-space: nowrap !important;
}

.pkp_navigation_primary ul li a:hover {
    color: #0076c6 !important;
    background-color: #f8f9fa !important;
}

.pkp_navigation_search_wrapper {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 20px 0 auto !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    position: static !important;
}

.pkp_navigation_search_wrapper a,
.pkp_search_btn {
    color: #0076c6 !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.pkp_structure_head > .pkp_navigation_user_wrapper,
.pkp_head_wrapper .pkp_navigation_user_wrapper,
.pkp_site_nav_menu .pkp_navigation_user_wrapper {
    position: static !important;
    transform: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    order: 3 !important;
    z-index: 1000 !important;
}

.pkp_navigation_user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
}

.pkp_navigation_user > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pkp_navigation_user > li > a {
    background-color: #0076c6 !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: none !important;
}

.pkp_navigation_user ul {
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    top: 100% !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
    padding: 8px 0 !important;
    min-width: 180px !important;
    list-style: none !important;
    z-index: 9999 !important;
    display: none !important;
}

.pkp_navigation_user li:hover > ul,
.pkp_navigation_user li:focus-within > ul {
    display: block !important;
}

.pkp_navigation_user ul li a {
    background: transparent !important;
    color: #212121 !important;
    padding: 8px 16px !important;
    display: block !important;
    font-size: 0.85rem !important;
    text-transform: none !important;
}

/* ==========================================================================
   MENGHILANGKAN GARIS PEMISAH HEADER & MENYATUKAN CAHAYA HERO KE ATAS LAYAR
   ========================================================================== */

/* 1. Hapus garis bawah pada header dan buat latar header transparan di Beranda */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.elife-hero-section {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

body.pkp_page_index .pkp_structure_head,
.pkp_structure_page:has(.page_index_journal) .pkp_structure_head {
    background-color: transparent !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 2. Biarkan pendaran cahaya naik halus ke belakang header agar tidak terpotong garis */
.elife-hero-section {
    overflow: visible !important;
}

.elife-hero-section::before,
.elife-hero-section::after {
    top: -120px !important; /* Menarik pendaran cahaya ke atas melewati area header */
}

/* ==========================================================================
   MENGHILANGKAN GARIS PEMBATAS DI BAWAH MENU NAVIGASI HALAMAN DEPAN
   ========================================================================== */
.page_index_journal .pkp_structure_head,
.page_index_journal header,
.page_index_journal .pkp_navigation_primary_row,
.pkp_site_nav_menu,
.pkp_head_wrapper {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Menghilangkan garis tambahan jika menggunakan pseudo-element */
.page_index_journal header::after,
.pkp_structure_head::after {
    display: none !important;
    content: none !important;
}

/* --------------------------------------------------------------------------
   3. HERO SECTION BARU: PANCARAN CAHAYA & GELOMBANG DARI SUDUT KANAN KE TENGAH
   (Pattern geometris lama telah dihapus total & diganti efek cahaya baru)
   -------------------------------------------------------------------------- */
.elife-hero-section {
    position: relative !important;
    background-color: #ffffff !important;
    border: none !important;
    width: 100% !important;
    margin: 0 0 25px 0 !important;
    padding: 65px 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* Lapisan 1: Pendaran Cahaya Hangat (Ambient Radial Glow) dari Sudut Kanan Bawah ke Tengah */
.elife-hero-section::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(
        circle at 92% 85%,
        rgba(255, 110, 10, 0.42) 0%,
        rgba(255, 125, 25, 0.25) 18%,
        rgba(255, 145, 50, 0.12) 36%,
        rgba(255, 170, 85, 0.04) 54%,
        transparent 72%
    ) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Lapisan 2: Garis Busur Gelombang Cahaya Konsentris (Sesuai Visual Mockup) */
.elife-hero-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background-image:
        radial-gradient(circle at 92% 85%, transparent 90px, rgba(255, 115, 15, 0.35) 93px, rgba(255, 115, 15, 0.08) 112px, transparent 125px),
        radial-gradient(circle at 92% 85%, transparent 175px, rgba(255, 115, 15, 0.28) 178px, rgba(255, 115, 15, 0.06) 200px, transparent 215px),
        radial-gradient(circle at 92% 85%, transparent 265px, rgba(255, 115, 15, 0.22) 268px, rgba(255, 115, 15, 0.05) 295px, transparent 310px),
        radial-gradient(circle at 92% 85%, transparent 365px, rgba(255, 115, 15, 0.16) 368px, rgba(255, 115, 15, 0.04) 398px, transparent 415px),
        radial-gradient(circle at 92% 85%, transparent 475px, rgba(255, 115, 15, 0.10) 478px, rgba(255, 115, 15, 0.02) 510px, transparent 530px),
        radial-gradient(circle at 92% 85%, transparent 595px, rgba(255, 115, 15, 0.05) 598px, rgba(255, 115, 15, 0.01) 630px, transparent 650px) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.elife-hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

.elife-journal-title,
.elife-journal-scope,
.elife-hero-actions,
.elife-metrics {
    max-width: 58% !important;
    box-sizing: border-box !important;
    padding-right: 20px !important;
}

.elife-journal-title {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.15 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.5px !important;
}

.elife-journal-scope {
    font-size: 1.35rem !important;
    color: #4a4a4a !important;
    font-weight: 300 !important;
    margin: 0 0 35px 0 !important;
    line-height: 1.45 !important;
}

.elife-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    margin: 0 0 35px 0 !important;
}

.btn-elife-primary {
    background-color: #e22d48 !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
    display: inline-block !important;
    border: none !important;
}

.btn-elife-primary:hover {
    background-color: #c9203a !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-elife-text {
    color: #212121 !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    transition: color 0.2s ease !important;
}

.btn-elife-text:hover {
    color: #e22d48 !important;
}

.elife-metrics {
    font-size: 0.95rem !important;
    color: #666666 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.elife-metrics strong {
    color: #212121 !important;
    font-size: 1.1rem !important;
}

.elife-metrics .divider {
    color: #cccccc !important;
}

/* --------------------------------------------------------------------------
   4. WADAH KONTEN UTAMA & GAYA HEADER SECTION (TANPA GARIS BAWAH)
   -------------------------------------------------------------------------- */
.elife-content-container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 30px 60px 30px !important;
    box-sizing: border-box !important;
    border: none !important;
}

.section-header-elife {
    margin-bottom: 24px !important;
    border: none !important;
    padding-bottom: 0 !important;
}

.section-eyebrow {
    display: block !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #e22d48 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 6px !important;
}

.section-header-elife .elife-section-title {
    font-size: 2.1rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.section-header-elife .title-bold {
    font-weight: 800 !important;
    color: #111111 !important;
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.section-header-elife .title-bold::after {
    display: none !important;
    content: none !important;
}

.section-header-elife .title-italic {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: #4a4a4a !important;
    margin-left: 4px !important;
}

/* --------------------------------------------------------------------------
   5. LATEST RESEARCH (HOMEPAGE) - GRID 3 KOLOM & TOMBOL FULL-TEXT
   -------------------------------------------------------------------------- */
.elife-native-toc,
.elife-native-toc .issue-toc {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.elife-native-toc .heading,
.elife-native-toc .issue-toc > .cover,
.elife-native-toc .obj_article_summary .pages,
.elife-native-toc .section h3,
.elife-native-toc .section h2 {
    display: none !important;
}

.elife-native-toc .sections {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 32px !important;
    row-gap: 40px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.elife-native-toc .section,
.elife-native-toc .cmp_article_list,
.elife-native-toc ul.articles {
    display: contents !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.elife-native-toc .cmp_article_list > li {
    float: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
}

.elife-native-toc .obj_article_summary {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elife-native-toc .obj_article_summary > .cover {
    float: none !important;
    width: 100% !important;
    height: 165px !important;
    max-height: 165px !important;
    margin: 0 0 14px 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.elife-native-toc .obj_article_summary > .cover a.file {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
}

.elife-native-toc .obj_article_summary > .cover img {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 150px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.25s ease !important;
}

.elife-native-toc .obj_article_summary > .cover:hover img {
    transform: scale(1.03) !important;
}

.elife-native-toc .obj_article_summary .title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.elife-native-toc .obj_article_summary .title a {
    color: #111111 !important;
    text-decoration: none !important;
}

.elife-native-toc .obj_article_summary .title a:hover {
    color: #ff7a18 !important;
}

.elife-native-toc .obj_article_summary .authors {
    font-size: 0.85rem !important;
    color: #555555 !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.elife-native-toc .obj_article_summary .galleys_links {
    list-style: none !important;
    padding: 0 !important;
    margin: auto 0 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elife-native-toc .obj_article_summary .galleys_links li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elife-native-toc .obj_article_summary .galleys_links li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #0076c6 !important;
    background-color: #f0f7fc !important;
    border: 1px solid #cfe2ff !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

.elife-native-toc .obj_article_summary .galleys_links li a:hover {
    background-color: #0076c6 !important;
    color: #ffffff !important;
    border-color: #0076c6 !important;
}

/* --------------------------------------------------------------------------
   6. LATEST ANNOUNCEMENTS - LURUS VERTIKAL & TANPA GARIS KOTAK/PEMISAH
   -------------------------------------------------------------------------- */
.elife-latest-announcements {
    margin-top: 55px !important;
    margin-bottom: 40px !important;
    padding-top: 20px !important;
    border: none !important;
}

.elife-native-announcements,
.elife-native-announcements ul,
.elife-native-announcements li,
.elife-native-announcements .cmp_announcements,
.elife-native-announcements .cmp_announcements > li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elife-native-announcements .obj_announcement_summary {
    float: none !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elife-native-announcements .obj_announcement_summary:nth-of-type(n+4),
.elife-native-announcements .cmp_announcements > li:nth-child(n+4),
.elife-native-announcements > ul > li:nth-child(n+4) {
    display: none !important;
}

.elife-native-announcements .obj_announcement_summary .summary,
.elife-native-announcements .obj_announcement_summary .read_more,
.elife-native-announcements .obj_announcement_summary::before,
.elife-native-announcements .obj_announcement_summary::after,
.elife-native-announcements .obj_announcement_summary .date::before,
.elife-native-announcements .obj_announcement_summary .date::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.elife-native-announcements .obj_announcement_summary h2,
.elife-native-announcements .obj_announcement_summary h3,
.elife-native-announcements .obj_announcement_summary h4,
.elife-native-announcements .obj_announcement_summary .title {
    float: none !important;
    width: 100% !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.elife-native-announcements .obj_announcement_summary a {
    color: #212121 !important;
    text-decoration: none !important;
}

.elife-native-announcements .obj_announcement_summary a:hover {
    color: #ff7a18 !important;
}

.elife-native-announcements .obj_announcement_summary .date {
    float: none !important;
    width: 100% !important;
    font-size: 0.85rem !important;
    color: #757575 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   7. HALAMAN STATIS (EDITORIAL, POLICIES) & SIDEBAR
   -------------------------------------------------------------------------- */
.pkp_structure_sidebar {
    border: none !important;
}

.pkp_structure_sidebar .pkp_block {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 0 40px 0 !important;
}

.pkp_structure_sidebar .pkp_block .title {
    border-bottom: 2px solid #111111 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;
}

.cardWrapper,
.cardWrapper__policies,
.column {
    display: grid !important;
    gap: 30px !important;
    width: 100% !important;
    background-color: transparent !important;
}

.cardWrapper, .column { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cardWrapper__policies { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.cardHomepage,
.cardPolicies,
.cardEditor {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 15px 0 25px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    width: 100% !important;
}

.cardEditor__mask {
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
    display: block !important;
}

.cardEditor__name {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 5px 0 !important;
}

.cardEditor__role {
    color: #e22d48 !important;
    font-size: 0.95rem !important;
    margin: 0 0 5px 0 !important;
}

.cardEditor__affiliation {
    font-size: 0.95rem !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* --------------------------------------------------------------------------
   8. FOOTER DENGAN LATAR #ddd
   -------------------------------------------------------------------------- */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background-color: #ddd !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

.elife-footer-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 60px 30px 80px 30px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

.elife-footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 80px !important;
}

.elife-footer-nav {
    display: flex !important;
    gap: 50px !important;
}

.elife-footer-nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.elife-footer-nav ul li { margin-bottom: 15px !important; }
.elife-footer-nav ul li a { color: #333333 !important; text-decoration: none !important; font-size: 0.8rem !important; }
.elife-footer-nav ul li a:hover { color: #e22d48 !important; }
.pkp_structure_footer .pkp_brand_footer { display: none !important; }

/* --------------------------------------------------------------------------
   9. TATA LETAK HALAMAN ARTIKEL & FULLTEXT 3 KOLOM ALA FRONTIERS
   -------------------------------------------------------------------------- */
body.pkp_page_article .pkp_structure_content {
    max-width: 1320px !important;
    margin: 35px auto 80px auto !important;
    padding: 0 25px !important;
}

.obj_article_details.frontiers-layout {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) 270px !important;
    column-gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}

.frontiers-left-rail {
    grid-column: 1 !important;
    position: sticky !important;
    top: 25px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
}

.frontiers-card {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.frontiers-card-title {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.frontiers-topic-link {
    font-size: 0.88rem !important;
    color: #4a4a4a !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    display: block !important;
    text-decoration: none !important;
}

.frontiers-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.frontiers-badge-pill {
    background-color: #1a6bc4 !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    display: inline-block !important;
}

.frontiers-metrics-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e5e9ef !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
}

.frontiers-metrics-icon {
    font-size: 1.2rem !important;
    color: #1a6bc4 !important;
    line-height: 1 !important;
}

.frontiers-metrics-content {
    display: flex !important;
    flex-direction: column !important;
}

.frontiers-metrics-number {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.2 !important;
}

.frontiers-metrics-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #666666 !important;
    text-transform: uppercase !important;
}

.frontiers-outline-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
}

.frontiers-outline-list li a {
    display: block !important;
    padding: 6px 0 6px 12px !important;
    font-size: 0.85rem !important;
    color: #555555 !important;
    text-decoration: none !important;
    border-left: 2px solid #e5e5e5 !important;
    transition: all 0.2s ease !important;
}

.frontiers-outline-list li a:hover,
.frontiers-outline-list li a.active {
    color: #111111 !important;
    font-weight: 600 !important;
    border-left: 3px solid #0066cc !important;
}

.frontiers-center-main {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
}

.frontiers-article-type {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #0066cc !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.obj_article_details .page_title {
    font-size: 2.05rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1.25 !important;
    margin: 0 0 12px 0 !important;
}

.obj_article_details .subtitle {
    font-size: 1.15rem !important;
    color: #4a4a4a !important;
    margin: 0 0 20px 0 !important;
    font-weight: 400 !important;
}

.frontiers-authors-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px 24px !important;
    margin: 20px 0 16px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.frontiers-author-chip {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.frontiers-author-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    border: 1.5px solid #8c96a5 !important;
    background-color: #f4f6f8 !important;
    color: #2c3e50 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}

.frontiers-author-info {
    display: flex !important;
    flex-direction: column !important;
}

.frontiers-author-name {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
}

.frontiers-author-name sup {
    font-size: 0.72rem !important;
    color: #0066cc !important;
    margin-left: 2px !important;
}

.frontiers-author-role {
    font-size: 0.78rem !important;
    color: #666666 !important;
    font-style: italic !important;
    line-height: 1.35 !important;
    margin-top: 2px !important;
}

.frontiers-affiliations-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 22px 0 !important;
    font-size: 0.84rem !important;
    color: #555555 !important;
    line-height: 1.6 !important;
}

.frontiers-affiliations-list li {
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.frontiers-affiliations-list .affil-num {
    font-weight: 600 !important;
    color: #333333 !important;
    margin-right: 2px !important;
}

.frontiers-affiliations-list a {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-left: 4px !important;
    text-decoration: none !important;
}

.frontiers-affiliations-list svg,
.frontiers-affiliations-list img {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.frontiers-affiliations-list svg metadata,
.frontiers-affiliations-list svg title,
.frontiers-affiliations-list svg desc {
    display: none !important;
}

.frontiers-info-banner {
    border: 1.5px solid #1a6bc4 !important;
    background-color: #f7faff !important;
    border-radius: 4px !important;
    padding: 12px 18px !important;
    margin: 20px 0 30px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.frontiers-info-banner-text {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #111111 !important;
}

.frontiers-info-banner-btn {
    border: 1px solid #111111 !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.frontiers-info-banner-btn:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
}

.frontiers-center-main .label,
.frontiers-section-heading,
.jatsParser__center-article-block h2.article-section-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 32px 0 14px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.obj_article_details .abstract p,
.jatsParser__center-article-block p {
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    color: #2b2b2b !important;
    margin-bottom: 16px !important;
    text-align: left !important;
}

.frontiers-bottom-meta {
    margin-top: 40px !important;
    padding-top: 25px !important;
    border-top: 1px solid #eaeaea !important;
}

.frontiers-meta-block {
    margin-bottom: 22px !important;
}

.frontiers-meta-block h4 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 6px 0 !important;
}

.frontiers-meta-block p,
.frontiers-meta-block div {
    font-size: 0.85rem !important;
    color: #444444 !important;
    line-height: 1.6 !important;
    margin: 0 0 6px 0 !important;
}

.frontiers-dates-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 220px)) !important;
    gap: 20px !important;
    margin-bottom: 22px !important;
}

.frontiers-right-rail {
    grid-column: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
}

.frontiers-right-rail .cover_image {
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.frontiers-right-rail .cover_image img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 6px !important;
}

.frontiers-sdg-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 6px !important;
}

.frontiers-sdg-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px !important;
    border-radius: 6px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eeeeee !important;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.frontiers-sdg-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

.frontiers-sdg-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}

.frontiers-sdg-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.frontiers-sdg-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.frontiers-sdg-code {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

.frontiers-sdg-name {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #212121 !important;
    line-height: 1.3 !important;
}

.frontiers-promo-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
}

.frontiers-promo-text {
    font-size: 0.82rem !important;
    color: #555555 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
}

.obj_article_details a,
.obj_article_details .references .value,
.obj_article_details .csl-entry {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

@media (max-width: 1100px) {
    .obj_article_details.frontiers-layout {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }
    .frontiers-right-rail {
        grid-column: 2 !important;
        margin-top: 30px !important;
    }
}

/* URUTAN KOLOM FULL-TEXT KHUSUS LAYAR <= 763PX (Tengah -> Kiri -> Kanan) */
@media (max-width: 763px) {
    .obj_article_details.frontiers-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .obj_article_details.frontiers-layout > .frontiers-center-main {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }
    .obj_article_details.frontiers-layout > .frontiers-left-rail {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin: 0 !important;
    }
    .obj_article_details.frontiers-layout > .frontiers-right-rail {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        margin: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   10. FGV OPENRANK: 5 JEJERAN KE SAMPING & BERSIH DARI TAB/PAGINATION
   -------------------------------------------------------------------------- */
.elife-openrank-wrapper {
    width: 100% !important;
    margin: 45px 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.elife-openrank-wrapper ul:not(:has(a[href*="/article/view/"])),
.elife-openrank-wrapper hr,
.elife-openrank-wrapper .pagination,
.elife-openrank-wrapper .pager,
.elife-openrank-wrapper [role="tablist"] {
    display: none !important;
}

.elife-openrank-wrapper *::before,
.elife-openrank-wrapper *::after {
    border: none !important;
    content: none !important;
}

.elife-openrank-wrapper .elife-or-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 30px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

.elife-openrank-wrapper .elife-or-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.elife-openrank-wrapper .elife-or-card div,
.elife-openrank-wrapper .elife-or-card td,
.elife-openrank-wrapper .elife-or-card tr,
.elife-openrank-wrapper .elife-or-card tbody,
.elife-openrank-wrapper .elife-or-card table {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.elife-openrank-wrapper .elife-or-card div:empty {
    display: none !important;
}

.elife-openrank-wrapper .elife-or-thumb,
.elife-openrank-wrapper .elife-or-card > a:first-child:has(img) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 135px !important;
    max-height: 135px !important;
    margin: 0 0 12px 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.elife-openrank-wrapper .elife-or-card img {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 120px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    transition: transform 0.25s ease !important;
}

.elife-openrank-wrapper .elife-or-card:hover img {
    transform: scale(1.03) !important;
}

.elife-openrank-wrapper .elife-or-card a[href*="/article/view/"]:not(.elife-or-thumb) {
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    color: #111111 !important;
    text-decoration: none !important;
    margin: 0 0 8px 0 !important;
    display: block !important;
    word-break: break-word !important;
}

.elife-openrank-wrapper .elife-or-card a[href*="/article/view/"]:not(.elife-or-thumb):hover {
    color: #ff7a18 !important;
}

.elife-openrank-wrapper .elife-or-card,
.elife-openrank-wrapper .elife-or-card p,
.elife-openrank-wrapper .elife-or-card span {
    font-size: 0.82rem !important;
    color: #555555 !important;
    line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   11. SIMILAR ARTICLES - GRID 3 KOLOM KARTU RINGKAS
   -------------------------------------------------------------------------- */
.elife-similar-wrapper,
#articlesBySimilarity {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 50px auto 30px auto !important;
    padding: 35px 25px 0 25px !important;
    border-top: 1px solid #e5e5e5 !important;
    box-sizing: border-box !important;
}

.elife-similar-list,
#articlesBySimilarity ul,
.page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]),
body.pkp_page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    width: 100% !important;
}

.elife-similar-list > li,
#articlesBySimilarity ul > li,
.page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) > li,
body.pkp_page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) > li {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.elife-similar-list > li:hover,
body.pkp_page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) > li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
    border-color: #1a6bc4 !important;
}

.elife-similar-list > li.is-hidden-card {
    display: none !important;
}

.similar-card-issue {
    display: inline-block !important;
    align-self: flex-start !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #1a6bc4 !important;
    background-color: #f0f6ff !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.similar-card-issue:hover {
    background-color: #1a6bc4 !important;
    color: #ffffff !important;
}

.similar-card-title {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.42 !important;
    text-decoration: none !important;
    margin: 0 0 14px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.similar-card-title:hover {
    color: #ff7a18 !important;
}

.similar-card-authors {
    font-size: 0.82rem !important;
    color: #666666 !important;
    line-height: 1.45 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #f2f2f2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.similar-toggle-wrapper {
    text-align: center !important;
    margin-top: 25px !important;
    width: 100% !important;
}

.btn-similar-toggle {
    background-color: #ffffff !important;
    color: #212121 !important;
    border: 1px solid #cccccc !important;
    border-radius: 20px !important;
    padding: 8px 22px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-similar-toggle:hover {
    border-color: #111111 !important;
    background-color: #f8f9fa !important;
}

/* --------------------------------------------------------------------------
   12. HALAMAN KATEGORI SDGs & PANEL ANALITIK (GRID 4 KOLOM PROPORSIONAL)
   -------------------------------------------------------------------------- */
div.page.page_catalog_category {
    max-width: 1320px !important;
    margin: 35px auto 80px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

div.page.page_catalog_category > h1 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 8px !important;
    border: none !important;
}

div.page.page_catalog_category .article_count {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #1a6bc4 !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

div.page.page_catalog_category .about_section {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-left: 5px solid #1a6bc4 !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    margin-bottom: 30px !important;
    font-size: 0.98rem !important;
    color: #444444 !important;
    line-height: 1.6 !important;
}

div.page.page_catalog_category > h2.title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 30px 0 16px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eaeaea !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles > li {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles > li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    border-color: #1a6bc4 !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles > li .cover {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    height: 140px !important;
    max-height: 140px !important;
    margin: 0 0 12px 0 !important;
    padding: 4px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles > li .cover img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.category-sdg-badge-wrapper {
    order: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
}

.category-sdg-pill {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles .title {
    order: 3 !important;
    margin: 0 0 8px 0 !important;
    min-width: 0 !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles .title a {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.38 !important;
    text-decoration: none !important;
    word-break: break-word !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles .title a:hover {
    color: #0066cc !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles .authors {
    order: 4 !important;
    font-size: 0.8rem !important;
    color: #666666 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.35 !important;
}

div.page.page_catalog_category ul.cmp_article_list.articles .meta,
div.page.page_catalog_category ul.cmp_article_list.articles .stats {
    order: 5 !important;
    font-size: 0.75rem !important;
    color: #777777 !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 8px !important;
    margin-top: auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.sdg-analytics-dashboard {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 10px !important;
    padding: 24px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}

.sdg-dashboard-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sdg-metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

.sdg-metric-card {
    background-color: #f8f9fa !important;
    border: 1px solid #e5e9ef !important;
    border-radius: 8px !important;
    padding: 16px !important;
    text-align: center !important;
}

.sdg-metric-value {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #1a6bc4 !important;
    margin-bottom: 4px !important;
}

.sdg-metric-label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #666666 !important;
    text-transform: uppercase !important;
}

.sdg-progress-container {
    border-top: 1px solid #eaeaea !important;
    padding-top: 20px !important;
}

.sdg-progress-title {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 12px !important;
}

.sdg-bar-item {
    margin-bottom: 10px !important;
}

.sdg-bar-info {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #444444 !important;
    margin-bottom: 4px !important;
}

.sdg-bar-track {
    background-color: #edf2f7 !important;
    height: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    width: 100% !important;
}

.sdg-bar-fill {
    height: 100% !important;
    border-radius: 4px !important;
    transition: width 0.6s ease !important;
}

/* --------------------------------------------------------------------------
   13. HALAMAN ARCHIVES (GRID 4 KOLOM DI PC & 1 KOLOM PENUH DI HP)
   -------------------------------------------------------------------------- */
div.page.page_issue_archive {
    max-width: 1320px !important;
    margin: 35px auto 80px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow-x: hidden !important;
    border: none !important;
}

div.page.page_issue_archive > h1 {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 25px !important;
    border: none !important;
}

div.page.page_issue_archive ul.issues_archive {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: none !important;
}

div.page.page_issue_archive ul.issues_archive > li {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

div.page.page_issue_archive ul.issues_archive > li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    border-color: #1a6bc4 !important;
}

div.page.page_issue_archive .obj_issue_summary {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

div.page.page_issue_archive .obj_issue_summary a.cover {
    float: none !important;
    width: 100% !important;
    height: 240px !important;
    max-height: 240px !important;
    margin: 0 0 14px 0 !important;
    padding: 4px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

div.page.page_issue_archive .obj_issue_summary a.cover img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

div.page.page_issue_archive .obj_issue_summary h2 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.35 !important;
    margin: 0 0 8px 0 !important;
}

div.page.page_issue_archive .obj_issue_summary h2 a {
    color: #111111 !important;
    text-decoration: none !important;
}

div.page.page_issue_archive .obj_issue_summary h2 a:hover {
    color: #1a6bc4 !important;
}

div.page.page_issue_archive .obj_issue_summary .description {
    font-size: 0.82rem !important;
    color: #555555 !important;
    line-height: 1.45 !important;
    margin-bottom: 15px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

div.page.page_issue_archive .obj_issue_summary .description a {
    word-break: break-all !important;
}

/* --------------------------------------------------------------------------
   14. HALAMAN ISSUE VIEW (DAFTAR ARTIKEL TERBITAN - GRID 4 KOLOM)
   -------------------------------------------------------------------------- */
div.page.page_issue {
    max-width: 1320px !important;
    margin: 35px auto 80px auto !important;
    padding: 0 25px !important;
    box-sizing: border-box !important;
    border: none !important;
}

/* Hilangkan semua garis pembatas di atas judul / di bawah breadcrumb Issue View */
div.page.page_issue > h1,
div.page.page_issue .obj_issue_toc,
div.page.page_issue .obj_issue_toc .heading,
div.page.page_issue .obj_issue_toc .sections,
div.page.page_issue .obj_issue_toc .section {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    background-image: none !important;
}

div.page.page_issue > h1::before,
div.page.page_issue > h1::after,
div.page.page_issue .obj_issue_toc::before,
div.page.page_issue .obj_issue_toc::after,
div.page.page_issue .obj_issue_toc .heading::before,
div.page.page_issue .obj_issue_toc .heading::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

div.page.page_issue .sections .section > h2,
div.page.page_issue .sections .section > h3,
div.page.page_issue .sections .section > .label {
    display: none !important;
}

div.page.page_issue .sections {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 30px !important;
}

div.page.page_issue .sections .section,
div.page.page_issue .sections .section ul.cmp_article_list,
div.page.page_issue .sections .section .articles {
    display: contents !important;
}

div.page.page_issue .sections .section ul.cmp_article_list > li {
    background-color: #ffffff !important;
    border: 1px solid #dcdfe6 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

div.page.page_issue .sections .section ul.cmp_article_list > li:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    border-color: #1a6bc4 !important;
}

div.page.page_issue .obj_article_summary {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Urutan 1: Label Kategori di Paling Atas (Di Atas Gambar Sampul) */
div.page.page_issue .kisi-category-badge {
    order: -10 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
}

div.page.page_issue .kisi-category-badge span {
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #1a6bc4 !important;
    background-color: #f0f6ff !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Urutan 2: Gambar Sampul Sejajar Rata */
div.page.page_issue .obj_article_summary .cover {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
    height: 140px !important;
    max-height: 140px !important;
    margin: 0 0 14px 0 !important;
    padding: 4px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eaeaea !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

div.page.page_issue .obj_article_summary .cover img {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Urutan 3: Judul Artikel */
div.page.page_issue .obj_article_summary .title {
    order: 2 !important;
    margin: 0 0 6px 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}

div.page.page_issue .obj_article_summary .title a {
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.38 !important;
    text-decoration: none !important;
    word-break: break-word !important;
}

div.page.page_issue .obj_article_summary .title a:hover {
    color: #0066cc !important;
}

/* Urutan 4: Nomor Halaman (e...) Pas di Bawah Judul */
div.page.page_issue .kisi-pages-badge,
.page_index_journal .kisi-pages-badge {
    order: 3 !important;
    display: block !important;
    width: 100% !important;
    margin: 2px 0 10px 0 !important;
    text-align: left !important;
}

div.page.page_issue .kisi-pages-badge span,
.page_index_journal .kisi-pages-badge span {
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #495057 !important;
    background-color: #f1f3f5 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

/* Urutan 5: Nama Penulis */
div.page.page_issue .obj_article_summary .meta {
    order: 4 !important;
    width: 100% !important;
    border-top: 1px solid #f0f0f0 !important;
    padding-top: 10px !important;
    margin-top: auto !important;
    display: block !important;
}

div.page.page_issue .obj_article_summary .meta .pages,
.page_index_journal .obj_article_summary .meta .pages {
    display: none !important;
}

div.page.page_issue .obj_article_summary .meta .authors {
    width: 100% !important;
    font-size: 0.78rem !important;
    color: #666666 !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
}

/* Urutan 6: Tombol Full-Text di Paling Bawah Kartu */
div.page.page_issue .obj_article_summary .galleys_links,
.page_index_journal .obj_article_summary .galleys_links {
    order: 5 !important;
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none !important;
}

div.page.page_issue .obj_article_summary .galleys_links > li,
.page_index_journal .obj_article_summary .galleys_links > li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
}

div.page.page_issue .obj_article_summary .galleys_links a,
.page_index_journal .obj_article_summary .galleys_links a,
a.kisi-fulltext-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 14px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #1a6bc4 !important;
    background-color: #f0f6ff !important;
    border: 1px solid #cfe2ff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

div.page.page_issue .obj_article_summary .galleys_links a:hover,
.page_index_journal .obj_article_summary .galleys_links a:hover,
a.kisi-fulltext-btn:hover {
    background-color: #1a6bc4 !important;
    color: #ffffff !important;
    border-color: #1a6bc4 !important;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVITAS TERPADU SELURUH HALAMAN (WAJIB DI PALING BAWAH)
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    html body div.page.page_issue_archive ul.issues_archive,
    html body div.page.page_issue .sections,
    html body div.page.page_catalog_category ul.cmp_article_list.articles,
    html body .elife-openrank-wrapper .elife-or-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 992px) {
    .pkp_head_wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .pkp_site_nav_menu,
    .pkp_navigation_primary_row,
    .pkp_navigation_primary_wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 12px !important;
    }
    .pkp_navigation_primary {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    .pkp_navigation_search_wrapper {
        margin: 5px 0 !important;
    }
    .elife-journal-title,
    .elife-journal-scope,
    .elife-hero-actions,
    .elife-metrics {
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    .elife-native-toc .sections,
    .cardWrapper,
    .cardWrapper__policies,
    .elife-similar-list,
    body.pkp_page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .elife-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }
}

@media (max-width: 800px) {
    html body div.page.page_issue_archive ul.issues_archive,
    html body div.page.page_issue .sections,
    html body div.page.page_catalog_category ul.cmp_article_list.articles,
    html body .elife-openrank-wrapper .elife-or-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
    .sdg-metrics-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    body:not(.pkp_page_index) .pkp_structure_content,
    html body div.page.page_issue_archive,
    html body div.page.page_issue,
    html body div.page.page_catalog_category {
        padding: 0 15px !important;
        margin: 20px auto 50px auto !important;
    }
    .elife-journal-title { font-size: 2rem !important; }
    .elife-journal-scope { font-size: 1.15rem !important; }
    .elife-hero-actions { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }

    html body div.page.page_issue_archive ul.issues_archive,
    html body div.page.page_issue .sections,
    html body div.page.page_catalog_category ul.cmp_article_list.articles,
    html body .elife-native-toc .sections,
    html body .elife-openrank-wrapper .elife-or-grid,
    html body .elife-similar-list,
    html body .cardWrapper,
    html body .cardWrapper__policies,
    body.pkp_page_article ul:has(li a[href*="/article/view/"]):has(li a[href*="/issue/view/"]) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    html body div.page.page_issue_archive .obj_issue_summary a.cover {
        height: 260px !important;
        max-height: 260px !important;
    }
}