div.description {
    word-wrap:break-word;
}


/*Kode Card Homepage*/

div#homepage {
    display: flex;
    flex-direction: row;
    padding: 20px;
    grid-template-columns: repeat (3, 1fr);
    gap: 20px;
    width: 100%;
}

.cardHomepage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: repeat(4, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: initial; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */
    border-radius: 10px; /* Membuat sudut-sudut menjadi bulat */
    background-color: #fff; /* Warna latar belakang putih */
    padding: initial;
    margin-bottom: 56px;
    font-size: .875rem;
    padding: 20px;
}

/*Kolom Editor Menjadi 2 Kolom dalam Layar Lebih Kecil*/

@media screen and (max-width: 768px) {
  div#homepage {
    flex-direction: column; /* switch to 1 column on smaller screens */
  }
}


a.cover {
    max-width: 100%;
    width: auto;
    height: auto;
}
a.cover img {
    max-width: 100%;
    width: 50%;
    height: auto;
}
.obj_article_summary img {
    width: 30%;
    height: auto;
}

.pkp_page_issue.pkp_op_view section {
   padding-top: 0;
   padding-bottom: 0;
}

h2.title {
   font-size: 16px;
}

.jatsParser__center-article-block {
   text-align: justify;
   word-wrap:break-word;
}

ul.jatsParser__categories {
   border: 1px solid #ddd;
   background-color: #ffb89a;	
}

section.container.index-journal__desc {
    background-color:#ffb89a;
}
header.container-fluid {
    background-color: #f88379;
}

.rowEditor {
    
    justify-items: center; /* Memastikan konten dalam kolom berada di tengah */
}

.column {
    display: flex;
    flex-direction: column;
    grid-template-columns: repeat(4, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: 20px; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    padding: 20px;
}

.cardWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: 20px; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    border-radius: 10px; /* Membuat sudut-sudut menjadi bulat */
    background-color: #fff; /* Warna latar belakang putih */
}

/*Kolom Editor Menjadi 2 Kolom dalam Layar Lebih Kecil*/

@media screen and (max-width: 768px) {
    .cardWrapper {
        grid-template-columns: repeat(2, 1fr);
       }
   }
@media screen and (max-width: 563px) {
    .cardWrapper {
        grid-template-columns: repeat(1, 1fr);
       }
   }
/*Kode Card Editor*/
.cardEditor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: repeat(4, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: initial; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */
    border-radius: 10px; /* Membuat sudut-sudut menjadi bulat */
    background-color: #fff; /* Warna latar belakang putih */
    padding: initial;
    margin-bottom: 56px;
    font-size: .875rem;
    padding: 20px;
}

.cardEditor__mask {
    border-radius: 80%; /* Membuat gambar berbentuk lingkaran */
    margin-bottom: 10px; /* Menambah jarak antara gambar dan teks */
}

.rowPolicies {
    
    justify-items: center; /* Memastikan konten dalam kolom berada di tengah */
}

.cardPolicies {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    grid-template-columns: repeat(4, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: initial; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan */
    border-radius: 10px; /* Membuat sudut-sudut menjadi bulat */
    background-color: #fff; /* Warna latar belakang putih */
    padding: initial;
    margin-bottom: 56px;
    font-size: .875rem;
    padding: 20px;
}

.cardWrapper__policies {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Mengatur kolom menjadi grid */
    column-gap: var(--layout-gap, 20px);
    gap: 20px; /* Menambah jarak antar kolom */
    width: 100%; /* Menyesuaikan lebar cardWrapper */
    border-radius: 10px; /* Membuat sudut-sudut menjadi bulat */
    background-color: #fff; /* Warna latar belakang putih */
}

/*Kolom Editor Menjadi 2 Kolom dalam Layar Lebih Kecil*/

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

p {
    margin: 5px 0; /* Mengatur margin pada paragraf */
}

div#dokaturan {
   background-color: #ffb89a;
   padding: 100px 15px;
   margin-right: -15px;
   margin-left: -15px;
}

footer {
   background-color: #f1f1f1;
}

footer p,footer div,footer a,footer blockquote,footer cite,footer td,footer th,footer dd,footer address,footer li,footer dt,footer dd,footer strong {
    color: black;
}

.sidebar>* {
   border-bottom: 2px solid #b0b0b0;
    
}

.sidebar.hasUserFooter>*:not(:nth-child(4n + 3)) {
        border-right: 0px solid #1f1f1f;
    }

.sidebar.noUserFooter>*:not(:nth-child(4n + 4)) {
        border-right: 0px solid #1f1f1f;
    }

.sidebar.hasUserFooter>*:not(:nth-child(2n + 1)) {
        border-right: 0px solid #1f1f1f;
    }

    .sidebar.noUserFooter>*:not(:nth-child(2n + 2)) {
        border-right: 0px solid #1f1f1f;
    }

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50
}

/* Mengatur tampilan html Koleksi */


ul.cmp_article_list.articles {

display: grid ;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;

}

@media screen and (max-width: 768px) {
    ul.cmp_article_list.articles {
        grid-template-columns: repeat(2, 1fr);
       }
   }
@media screen and (max-width: 563px) {
   ul.cmp_article_list.articles {
        grid-template-columns: repeat(1, 1fr);
       }
   }

div.obj_article_summary {

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 15px;
height: 100%

}

.obj_article_summary img {
    width: 75%;
    height: auto;
}

/* KODE BARU 30 SEPTEMBER 2026 */

/* ==========================================================================
   FRONTIERS STYLE OVERRIDES FOR PRAGMA THEME
   ========================================================================== */

/* 1. HERO BANNER */
.frontiers-hero-section {
    background-color: #f2f5f7; /* Abu-abu kebiruan khas Frontiers */
    border-top: 5px solid #005a9c; /* Biru korporat */
    padding: 70px 20px;
    margin-bottom: 50px;
    
    /* Membuat hero section membentang penuh (Full-width) */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-container {
    max-width: 1140px;
    margin: 0 auto;
    text-align: center;
}

.journal-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 18px;
    line-height: 1.2;
}

.journal-scope {
    font-size: 1.15rem;
    color: #555;
    max-width: 850px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

/* 2. METRICS DISPLAY */
.journal-metrics {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-bottom: 40px;
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #005a9c;
}

.metric-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #7f8c8d;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* 3. BUTTONS */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-frontiers-submit {
    background-color: #d62728; /* Merah tombol Frontiers */
    color: #ffffff !important;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(214, 39, 40, 0.2);
    transition: all 0.3s ease;
}

.btn-frontiers-submit:hover {
    background-color: #b92020;
    box-shadow: 0 6px 12px rgba(214, 39, 40, 0.3);
    text-decoration: none;
}

.btn-frontiers-outline {
    background-color: transparent;
    color: #005a9c !important;
    border: 2px solid #005a9c;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-frontiers-outline:hover {
    background-color: #005a9c;
    color: #ffffff !important;
    text-decoration: none;
}

/* 4. SECTION HEADER (Latest Articles) */
.frontiers-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.frontiers-section-header h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
}

.view-all-link {
    color: #005a9c;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.2s;
}

.view-all-link:hover {
    color: #d62728;
    text-decoration: none;
}

/* 5. ARTICLE CARD ADJUSTMENTS */
.frontiers-article-list .obj_article_summary {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border-left: 4px solid #005a9c; /* Garis aksen di kiri card */
    transition: transform 0.2s, box-shadow 0.2s;
}

.frontiers-article-list .obj_article_summary:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* ==========================================================================
   PERBAIKAN MENU NAVIGASI (HEADER)
   ========================================================================== */
.pkp_navigation_primary,
.pkp_navigation_user {
    display: flex !important;
    flex-wrap: wrap;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 15px; /* Memberikan spasi rapi antar menu */
    align-items: center;
}

.pkp_navigation_primary li a,
.pkp_navigation_user li a {
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff; /* Ubah menjadi #333333 jika background header Anda berwarna terang */
    padding: 10px 15px;
    display: block;
    border-radius: 4px;
    transition: background-color 0.2s;
}

/* Efek saat menu disorot kursor */
.pkp_navigation_primary li a:hover,
.pkp_navigation_user li a:hover {
    background-color: rgba(255, 255, 255, 0.2); 
}

/* ==========================================================================
   PERBAIKAN HALAMAN ARCHIVES (ALL ISSUES) - CARD GRID STYLE
   ========================================================================== */
ul.issues_archive {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* Membuat kolom responsif */
    gap: 30px;
    list-style: none !important;
    padding: 0 !important;
    margin: 40px 0;
}

ul.issues_archive > li {
    display: flex;
    margin: 0 !important;
    padding: 0 !important;
}

/* Styling Box/Card untuk setiap edisi (Issue) */
.obj_issue_summary {
    display: flex !important;
    flex-direction: column !important; /* Memaksa cover ada di atas teks */
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px 20px;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.obj_issue_summary:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Posisi Cover/Sampul */
.obj_issue_summary .cover {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    float: none !important; /* Menghilangkan efek floating bawaan yang merusak layout */
}

.obj_issue_summary .cover img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15); /* Memberi bayangan pada buku/cover */
}

/* Teks Judul dan Meta Edisi */
.obj_issue_summary .title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.obj_issue_summary .title a {
    color: #005a9c; /* Warna biru profesional */
    text-decoration: none;
}

.obj_issue_summary .series {
    font-size: 0.9rem;
    color: #666666;
}

/* --- TAMBAHAN UNTUK DATA HERO KISI BERKELANJUTAN --- */

/* Memperbesar sedikit teks scope karena H1 dihilangkan */
.journal-scope {
    font-size: 1.2rem;
    color: #444;
    max-width: 900px;
    margin: 0 auto 20px auto;
    line-height: 1.6;
}

/* Tampilan Lencana (Badges) untuk Info Jurnal */
.journal-info-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

.journal-info-badges .badge {
    background-color: #e0e6ed;
    color: #2c3e50;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Catatan kecil di bawah tombol submit */
.hero-note {
    margin-top: 25px;
    font-size: 0.9rem;
    color: #7f8c8d;
    font-weight: 500;
}

/* ==========================================================================
   PROFESSIONAL FOOTER STYLING (VERSI TERANG / CLEAN)
   ========================================================================== */
.frontiers-pro-footer {
    background-color: #f8f9fa; /* Warna abu-abu sangat muda/bersih */
    color: #444444; /* Warna teks abu-abu gelap agar nyaman dibaca */
    border-top: 1px solid #e0e6ed; /* Garis pembatas tipis di atas footer */
    padding: 60px 20px 20px 20px;
    margin-top: 50px;
    font-family: 'Open Sans', sans-serif;
    
    /* Memaksa footer full-width di OJS */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.frontiers-pro-footer .footer-container {
    max-width: 1140px;
    margin: 0 auto;
}

/* 1. GRID SYSTEM (3 Kolom) */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr; 
    gap: 40px;
    margin-bottom: 40px;
}

.footer-title {
    color: #2c3e50; /* Biru dongker gelap untuk judul kolom */
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #005a9c; /* Garis bawah biru korporat */
    padding-bottom: 10px;
    display: inline-block;
}

/* 2. KOLOM BRAND & PUBLISHER */
.brand-col .journal-sub {
    font-size: 1.1rem;
    color: #666666;
    margin-top: -10px;
    margin-bottom: 15px;
}
.publisher-info p {
    margin: 5px 0;
    font-size: 0.95rem;
}
.publisher-info a {
    color: #005a9c;
    text-decoration: none;
    font-weight: 600;
}

/* 3. KOLOM TAUTAN (LINKS) */
.links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.links-col ul li {
    margin-bottom: 10px;
}
.links-col ul li a {
    color: #555555;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.95rem;
}
.links-col ul li a:hover {
    color: #005a9c; /* Berubah biru saat disorot kursor */
    padding-left: 5px; 
}

/* 4. KOLOM LOGO (PENYERAGAMAN UKURAN) */
.footer-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.footer-logos img,
.footer-logos p img {
    max-height: 45px !important; 
    width: auto !important;
    background-color: transparent; /* Background putih dihilangkan karena footer sudah terang */
    transition: transform 0.3s;
}

.footer-logos img:hover {
    transform: scale(1.05); /* Efek membesar sedikit saat disorot */
}

.footer-logos p {
    display: inline-block;
    margin: 0;
}

/* 5. FOOTER BOTTOM (COPYRIGHT) */
.footer-bottom {
    border-top: 1px solid #e0e6ed; /* Garis pembatas bawah yang lembut */
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #666666;
}

.cc-license {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cc-license a {
    color: #005a9c;
    text-decoration: none;
}

/* Responsivitas HP */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; 
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}
/* Responsivitas HP */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Menjadi 1 kolom bertumpuk di HP */
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* Responsivitas untuk layar HP */
@media (max-width: 768px) {
    .journal-metrics {
        flex-direction: column;
        gap: 20px;
    }
    .hero-actions {
        flex-direction: column;
    }
    .frontiers-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}