/* KODE PEMBARUAN BERSIH - KISI BERKELANJUTAN (OJS 3.5 MANUSCRIPT THEME) */

/* ==========================================================================
   1. TYPOGRAPHY & GLOBAL
   ========================================================================== */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #212121;
    background-color: #ffffff !important;
    line-height: 1.6;
}

/* ==========================================================================
   2. HERO SECTION - SPLIT LAYOUT (TEKS KIRI & 8 PATTERN DIAGONAL KANAN)
   ========================================================================== */
.elife-hero-section {
    position: relative !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 80px 20px !important;
    overflow: hidden !important;
}

.elife-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Membatasi teks & tombol hanya di separuh kiri layar (50%) agar tidak tertutupi pattern */
.elife-journal-title,
.elife-journal-scope,
.elife-hero-actions,
.elife-metrics {
    max-width: 50% !important;
    box-sizing: border-box !important;
    padding-right: 30px !important;
}

.elife-journal-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #111111;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.elife-journal-scope {
    font-size: 1.5rem;
    color: #4a4a4a;
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 1.4;
}

/* 8 Pattern Sains Makro secara Diagonal (-45deg) di Sisi Kanan */
.elife-hero-section::after {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    right: 0 !important;
    bottom: -20px !important;
    width: 48% !important;
    z-index: 1 !important;
    pointer-events: none !important;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='420' viewBox='0 0 680 420'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(360, 210) rotate(-45) translate(-350, -165)'%3E%3C!-- BARIS ATAS (4 Pattern) --%3E%3Ccircle cx='95' cy='90' r='40' fill='%23ffffff' stroke='%23ff7a18' stroke-width='12'/%3E%3Ccircle cx='95' cy='90' r='16' fill='%23e65100'/%3E%3Crect x='185' y='66' width='140' height='48' rx='24' fill='%23ff7a18'/%3E%3Crect x='392' y='40' width='36' height='100' rx='18' fill='%23e65100'/%3E%3Crect x='360' y='72' width='100' height='36' rx='18' fill='%23e65100'/%3E%3Crect x='495' y='66' width='150' height='48' rx='24' fill='%23ffffff' stroke='%23ff7a18' stroke-width='10'/%3E%3Cpath d='M519 66 h51 v48 h-51 a24 24 0 0 1 0 -48 z' fill='%23ff7a18'/%3E%3C!-- BARIS BAWAH (4 Pattern) --%3E%3Crect x='55' y='216' width='140' height='48' rx='24' fill='%23ffffff' stroke='%23e65100' stroke-width='10'/%3E%3Cline x1='125' y1='216' x2='125' y2='264' stroke='%23e65100' stroke-width='10'/%3E%3Cpath d='M250 198 h92 v36 a48 48 0 0 1 -48 48 h-44 z' fill='%23ff7a18'/%3E%3Ccircle cx='410' cy='240' r='44' fill='%23e65100'/%3E%3Ccircle cx='422' cy='230' r='18' fill='%23ffffff'/%3E%3Crect x='500' y='216' width='145' height='48' rx='24' fill='%23ff7a18'/%3E%3Ccircle cx='542' cy='240' r='10' fill='%23ffffff'/%3E%3Ccircle cx='602' cy='240' r='10' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E") !important;
    
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: 680px 420px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* ==========================================================================
   3. BUTTONS, ACTIONS & METRICS
   ========================================================================== */
.elife-hero-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

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

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

.btn-elife-text {
    color: #212121;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.btn-elife-text:hover {
    border-bottom: 2px solid #e22d48;
    color: #e22d48;
}

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

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

.elife-metrics .divider {
    color: #ccc;
}

@media (max-width: 992px) {
    .elife-journal-title,
    .elife-journal-scope,
    .elife-hero-actions,
    .elife-metrics {
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    .elife-hero-section::after {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .elife-journal-title { font-size: 2.2rem; }
    .elife-journal-scope { font-size: 1.2rem; }
    .elife-hero-actions { flex-direction: column; align-items: flex-start; gap: 15px; }
    .elife-metrics { flex-wrap: wrap; }
    .elife-metrics .divider { display: none; }
}

/* ==========================================================================
   4. MENGHANCURKAN "BOXED LAYOUT" UTAMA OJS & SIDEBAR (eLIFE FULL CANVAS)
   ========================================================================== */
.obj_issue_summary,
.pkp_block,
.cmp_announcements .obj_announcement_summary {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 30px 0 !important;
    margin: 0 !important;
}

.pkp_structure_page {
    box-shadow: none !important;
    border: none !important;
    background-color: #ffffff !important;
    max-width: 1200px !important;
}

.pkp_structure_main,
.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 #111 !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;
}

.sidebar > * {
    border-bottom: 1px solid #e5e5e5 !important;
    border-right: none !important;
}

/* ==========================================================================
   5. TATA LETAK ARTIKEL 3 KOLOM VERTIKAL ALA eLIFE HIGHLIGHTS (MERGED GRID)
   ========================================================================== */

/* Menyembunyikan elemen bawaan issue OJS & judul rubrik yang memecah baris */
.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;
}

/* KUNCI UTAMA: Menjadikan wadah utama (.sections) sebagai Grid 3 Kolom */
.elife-native-toc .sections {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 35px !important;
    row-gap: 45px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Meleburkan sekat pembungkus tiap Section & UL agar semua artikel menyatu dalam 1 Grid */
.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;
}

/* Mengatur setiap item artikel di dalam kolom */
.elife-native-toc .cmp_article_list > li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* Menyusun Isi Kartu Artikel Secara Vertikal (Gambar -> Judul -> Penulis -> PDF) */
.elife-native-toc .obj_article_summary {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Wadah Gambar Thumbnail di Bagian Atas Kartu (Proporsional 16:10) */
.elife-native-toc .obj_article_summary > .cover {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #eeeeee !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: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

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

/* Tipografi Judul Artikel di Bawah Gambar */
.elife-native-toc .obj_article_summary .title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

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

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

/* Nama Penulis & Tombol PDF di Bagian Bawah */
.elife-native-toc .obj_article_summary .meta {
    margin-top: 0 !important;
}

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

.elife-native-toc .obj_article_summary .galleys_links {
    list-style: none !important;
    padding: 0 !important;
    margin: 4px 0 0 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

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

/* Responsivitas Layar Tablet (2 Kolom) & HP (1 Kolom) */
@media (max-width: 992px) {
    .elife-native-toc .sections {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 25px !important;
    }
}

@media (max-width: 600px) {
    .elife-native-toc .sections {
        grid-template-columns: 1fr !important;
        row-gap: 35px !important;
    }
}

/* ==========================================================================
   6. PENYESUAIAN HALAMAN EDITORIAL, POLICIES & LAINNYA KE GAYA eLIFE
   ========================================================================== */
div.description,
.jatsParser__center-article-block {
    word-wrap: break-word;
    text-align: left !important;
}

p { margin: 5px 0; }
.center { display: block; margin-left: auto; margin-right: auto; width: 50%; }
h2.title { font-size: 1.6rem !important; }

header.container-fluid {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e5e5;
}

section.container.index-journal__desc,
div#dokaturan {
    background-color: #f8f9fa !important;
    padding: 60px 20px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

ul.jatsParser__categories {
    border: 1px solid #e5e5e5 !important;
    background-color: transparent !important;
}

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

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

.cardHomepage,
.cardPolicies {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    padding: 20px 0 30px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e5e5e5;
}

.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 #e5e5e5 !important;
    width: 100% !important;
    overflow: hidden !important;
}

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

.cardEditor__name {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !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;
    line-height: 1.5 !important;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    div#homepage { flex-direction: column; }
    .cardWrapper { grid-template-columns: repeat(2, 1fr); }
    .cardWrapper__policies { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 563px) {
    .cardWrapper, .cardWrapper__policies { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. eLIFE SCIENCES STYLE FOOTER
   ========================================================================== */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
    background-color: #ffffff !important;
    border: none !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    box-shadow: none !important;
}

.elife-footer-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 60px 20px 80px 20px !important;
    text-align: left !important;
}

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

.elife-footer-nav {
    display: flex;
    gap: 50px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.elife-footer-nav ul { list-style: none; padding: 0; margin: 0; }
.elife-footer-nav ul li { margin-bottom: 15px; }
.elife-footer-nav ul li a { color: #4a4a4a; text-decoration: none; font-size: 0.75rem; letter-spacing: 0.5px; transition: color 0.2s; }
.elife-footer-nav ul li a:hover { color: #e22d48; }

.elife-indexed-logos img:hover {
    filter: grayscale(0%) !important;
}

.elife-copyright-block a:hover { color: #e22d48 !important; }
.pkp_structure_footer .pkp_brand_footer { display: none !important; }

@media (max-width: 992px) {
    .elife-footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .elife-footer-nav { flex-direction: column; gap: 20px; }
}

/* ==========================================================================
   8. eLIFE STYLE HEADER & NAVIGATION
   ========================================================================== */
.pkp_structure_head {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e0e6ed !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
    box-shadow: none !important;
    position: relative !important;
}

.pkp_site_name {
    margin: 30px 0 20px 0 !important;
    padding-right: 30px !important;
    border-right: 1px solid #d1d9e0 !important;
    display: flex !important;
    align-items: center !important;
}

.pkp_site_name .is_text {
    font-size: 1.5rem !important;
    color: #555 !important;
}

/* Posisi Menu Utama */
.pkp_navigation_primary_wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: absolute !important;
    top: 45px !important;
    left: 280px !important;
    width: auto !important;
}

.pkp_navigation_primary {
    display: flex !important;
    gap: 25px !important;
    margin: 0 !important;
}

.pkp_navigation_primary li {
    position: relative !important;
}

.pkp_navigation_primary li a {
    color: #111111 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    padding: 5px 0 !important;
    text-decoration: none !important;
}

.pkp_navigation_primary li a:hover,
.pkp_navigation_primary li a:focus,
.pkp_navigation_primary li a:active,
.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: #0076c6 !important;
    outline: none !important;
    box-shadow: none !important;
}

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

.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;
    background-color: transparent !important;
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    display: block !important;
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus,
.pkp_navigation_primary ul li.current > a {
    background-color: transparent !important;
    color: #0076c6 !important;
    outline: none !important;
}

/* Menu Kanan Atas (User Navigation & Search) */
.pkp_structure_head > .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 15px !important;
    right: 30px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000 !important;
}

.pkp_navigation_user {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
}

.pkp_navigation_user li a,
.pkp_search_btn {
    color: #111111 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.pkp_navigation_user li:last-child a {
    background-color: #0076c6 !important;
    color: #ffffff !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    transition: background 0.2s;
}

.pkp_navigation_user li:last-child a:hover {
    background-color: #005a9c !important;
}

@media (max-width: 992px) {
    .pkp_structure_head { padding: 15px 20px !important; }
    .pkp_structure_head > .pkp_navigation_user_wrapper {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        justify-content: flex-end !important;
        margin-top: 10px !important;
    }
    .pkp_navigation_primary_wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin-top: 15px !important;
    }
    .pkp_navigation_primary { flex-wrap: wrap !important; }
}

/* ==========================================================================
   9. ANNOUNCEMENTS HALAMAN DEPAN (RAPAT, RAPI, HANYA JUDUL & TANGGAL)
   ========================================================================== */

/* Merapatkan jarak judul utama "Announcements" dengan daftar di bawahnya */
.elife-latest-announcements {
    margin-top: 50px !important;
    margin-bottom: 40px !important;
    padding-top: 30px !important;
}

.elife-latest-announcements .elife-section-title {
    margin-bottom: 8px !important;
}

/* Mereset semua wadah list bawaan OJS agar tidak memberi jarak ekstra */
.elife-native-announcements,
.elife-native-announcements ul,
.elife-native-announcements li,
.elife-native-announcements .cmp_announcements,
.elife-native-announcements .cmp_announcements > li {
    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;
}

/* Mengatur jarak antar pengumuman agar rapat dan proporsional (12px atas-bawah) */
.elife-native-announcements .obj_announcement_summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 12px 0 !important; /* Ubah ke 8px 0 jika ingin lebih rapat lagi */
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Membatasi agar HANYA 3 pengumuman terbaru yang tampil */
.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;
}

/* KUNCI UTAMA: Menghapus elemen semu, isi ringkasan, dan margin tersembunyi penyebab jarak jauh */
.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;
    margin: 0 !important;
    padding: 0 !important;
}

/* Tipografi Judul Pengumuman */
.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 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
}

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

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

/* Tipografi Tanggal Pengumuman */
.elife-native-announcements .obj_announcement_summary .date {
    font-size: 0.85rem !important;
    color: #757575 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Merapatkan jarak tautan "View all announcements" di bagian bawah */
.elife-latest-announcements > div:last-child {
    margin-top: 15px !important;
}