/* =====================================================
   PROTEACH – FINAL PERFECT ALIGNMENT VERSION
   OJS 3.3.0-21 DEFAULT THEME
   Banner & Content 100% Sejajar
   Dark Blue Elegant Gradient
   ===================================================== */


/* ===============================
   1. DARK ELEGANT BACKGROUND
   =============================== */

body {
    background: linear-gradient(135deg, #0b1f3b 0%, #0f2f55 40%, #123b63 100%);
    background-attachment: fixed;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #1C1E21;
}


/* ===============================
   2. TRUE CENTERED CONTAINER
   (HEADER + NAV + CONTENT + FOOTER)
   =============================== */

.pkp_structure_page {
    max-width: 1180px;
    margin: 0 auto;
    background: #ffffff;
}


/* ===============================
   3. REMOVE HEADER GAP ISSUE
   =============================== */

.pkp_structure_head {
    margin: 0;
    padding: 0;
}


/* ===============================
   4. NAVIGATION STYLE
   =============================== */

.pkp_navigation_primary_wrapper {
    background: linear-gradient(90deg, #0b1f3b, #123b63);
}

.pkp_navigation_primary > li > a {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 15px 20px;
}

.pkp_navigation_primary > li > a:hover {
    background: #00C2CB;
}


/* ===============================
   5. CONTENT FLEX PRESISI
   =============================== */

.pkp_structure_content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.pkp_structure_main {
    flex: 0 0 72%;
    max-width: 72%;
}

.pkp_structure_sidebar {
    flex: 0 0 28%;
    max-width: 28%;
    margin-top: 0;
}


/* ===============================
   6. HOMEPAGE FULL WIDTH SAFE
   =============================== */

.page_index_journal .pkp_structure_sidebar {
    display: none !important;
}

.page_index_journal .pkp_structure_main {
    flex: 0 0 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* ===============================
   7. FOOTER DARK BLUE
   =============================== */

.pkp_structure_footer_wrapper {
    background: #0b1f3b;
    color: #CBD5E1;
    padding: 60px 0;
}

.pkp_structure_footer_wrapper a {
    color: #ffffff;
}

.pkp_structure_footer_wrapper a:hover {
    color: #00C2CB;
}


/* ===============================
   8. RESPONSIVE SAFE
   =============================== */

@media (max-width: 992px) {

    .pkp_structure_content {
        flex-direction: column;
    }

    .pkp_structure_main,
    .pkp_structure_sidebar {
        flex: 100%;
        max-width: 100%;
    }
}


/* ======================================
   FIX MENU ALIGNMENT WITH BANNER
   ====================================== */

/* Hilangkan padding bawaan wrapper nav */
.pkp_navigation_primary_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Pastikan ul juga tidak punya padding */
.pkp_navigation_primary {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================
   FINAL PIXEL ALIGNMENT FIX
   ========================================= */

/* Samakan lebar konten dengan header & nav */
.pkp_structure_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Lalu beri padding ke dalam main saja */
.pkp_structure_main {
    padding: 40px !important;
}

/* Dan beri padding kecil ke sidebar */
.pkp_structure_sidebar {
    padding: 40px 30px 40px 30px !important;
}



/* =====================================================
   EXACT EDGE MATCH – OJS 3.3.0-21
   Banner & Menu 100% Presisi
   ===================================================== */

/* Samakan container dalam banner & menu */
.pkp_head_wrapper,
.pkp_navigation_primary_row {
    width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}

/* Hilangkan padding bawaan wrapper menu */
.pkp_navigation_primary_wrapper {
    padding: 0 !important;
}

/* Pastikan search tidak punya offset tambahan */
.pkp_navigation_search_wrapper {
    margin: 0 !important;
}


/* =====================================================
   FORCE WHITE STAGE TO MATCH 1180px
   ===================================================== */

.pkp_structure_content {
    width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =====================================================
   SIDEBAR CLEAN DARKER CONTRAST – NO DOUBLE BORDER
   ===================================================== */

/* Stage utama tetap soft */
.pkp_structure_content {
    background: linear-gradient(to bottom, #f4f6f8, #eef1f4) !important;
}

/* Hapus semua border pemisah default */
.pkp_structure_sidebar {
    background-color: #e3e6ea !important;   /* Abu lebih pekat */
    padding: 25px !important;
    border: none !important;
}

/* Pastikan tidak ada garis bawaan theme */
.pkp_structure_content .pkp_structure_sidebar {
    border-left: none !important;
}

/* Block dalam sidebar */
.pkp_structure_sidebar .block {
    background-color: #d9dde2 !important;  /* Sedikit lebih gelap */
    padding: 18px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

/* Judul MAIN MENU lebih tegas */
.pkp_structure_sidebar .block h2,
.pkp_structure_sidebar .block .title {
    font-weight: 700;
    border-bottom: 1px solid #c2c7cd;
    padding-bottom: 8px;
}

/* =====================================================
   FINAL CLEAN LAYOUT – OJS 3.3.0-21
   - Stage abu modern
   - Sidebar abu lebih pekat
   - Tanpa garis pemisah bawaan
   - Tanpa border tumpang tindih
   ===================================================== */

/* Background stage utama */
.pkp_structure_content {
    background: linear-gradient(to bottom, #f4f6f8, #eef1f4) !important;
    border: none !important;
}

/* Hapus semua garis vertikal bawaan theme */
.pkp_structure_content:before,
.pkp_structure_content:after,
.pkp_structure_main,
.pkp_structure_main:before,
.pkp_structure_main:after {
    border: none !important;
    content: none !important;
}

/* Sidebar kanan abu lebih pekat */
.pkp_structure_sidebar {
    background-color: #d9dde2 !important;
    padding: 25px !important;
    border: none !important;
}

/* Block dalam sidebar */
.pkp_structure_sidebar .block {
    background-color: #cfd4da !important;
    padding: 18px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

/* Judul MAIN MENU lebih tegas */
.pkp_structure_sidebar .block h2,
.pkp_structure_sidebar .block .title {
    font-weight: 700;
    border-bottom: 1px solid #b8bec6;
    padding-bottom: 8px;
}


/* =====================================================
   OJS 3.3 SIDEBAR ULTRA PRECISE SPACING CONTROL
   FINAL ABSOLUTE VERSION – 3px
   ===================================================== */

/* Matikan semua spacing bawaan */
.pkp_structure_sidebar {
    gap: 0 !important;
}

.pkp_structure_sidebar * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Hilangkan padding bawaan block */
.pkp_structure_sidebar .pkp_block {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hilangkan padding internal content */
.pkp_structure_sidebar .pkp_block .content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Tambahkan jarak presisi antar block */
.pkp_structure_sidebar .pkp_block {
    margin-bottom: 3px !important;
}

/* Block terakhir tanpa jarak */
.pkp_structure_sidebar .pkp_block:last-child {
    margin-bottom: 0 !important;
}


/* ===== PROFESSIONAL FOOTER SYSTEM ===== */

.custom-footer {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
    padding: 20px 10px;
}

.footer-block {
    margin: 15px 0;
}

.footer-block h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.footer-separator {
    border-top: 1px dashed #999;
    margin: 15px 0;
}

.footer-logos img {
    height: 40px;
    margin: 5px 10px;
    vertical-align: middle;
}

.footer-block a {
    text-decoration: none;
}

.footer-block a:hover {
    text-decoration: underline;
}

/* ===== FIX OJS DEFAULT RIGHT ALIGNMENT ISSUE ===== */

.pkp_brand_footer {
    float: none !important;
    text-align: center !important;
    margin-top: 10px;
}

.pkp_footer_content {
    text-align: center !important;
}


/* ===== REMOVE OJS WATERMARK - OJS 3.3 DEFAULT THEME ===== */

.pkp_brand_footer {
    display: none !important;
}

.pkp_structure_footer .pkp_brand_footer {
    display: none !important;
}

.pkp_footer_content .pkp_brand_footer {
    display: none !important;
}

/* =========================================================
   PROTEACH – OJS 3.3 Default Theme (FINAL, NO-GUESS STRIPING)
   - Striping DI WRAPPER (bukan di .obj_article_summary)
   - Berlaku untuk: Issue TOC + Homepage Current Issue
   - Gap antar artikel rapat (yang Anda maksud)
   ========================================================= */

/* 0) Table of Contents heading (tetap) */
.page_issue .sections::before{
  content: "Table of Contents";
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin: 14px 0 8px 0;
}

/* 1) GAP antar artikel (bukan padding isi) */
.page_issue .obj_article_summary,
.pkp_page_index .obj_article_summary{
  margin: 0 0 6px 0 !important;   /* ini jarak antar judul/blok */
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  padding: 8px 12px !important;  /* padding isi biarkan nyaman dibaca */
}

/* 2) PDF kanan atas (tetap rapi) */
.page_issue .obj_article_summary .galleys_links,
.pkp_page_index .obj_article_summary .galleys_links{
  position: absolute;
  right: 12px;
  top: 8px;
  margin: 0 !important;
}
.page_issue .obj_article_summary .galleys_links a,
.pkp_page_index .obj_article_summary .galleys_links a{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}
.page_issue .obj_article_summary .title,
.page_issue .obj_article_summary .meta,
.pkp_page_index .obj_article_summary .title,
.pkp_page_index .obj_article_summary .meta{
  padding-right: 70px !important;
}

/* =========================================================
   3) STRIPING FINAL: target WRAPPER siblings
   Kita cover beberapa struktur wrapper OJS yang umum:
   - li (kalau daftar pakai <ul><li>)
   - div (kalau wrapper pakai <div> per item)
   ========================================================= */

/* A) Kalau artikel ada di list <ul> / <ol> */
.page_issue ul li:nth-child(odd) .obj_article_summary,
.pkp_page_index ul li:nth-child(odd) .obj_article_summary{
  background: #b8c7df !important;   /* lebih pekat */
}
.page_issue ul li:nth-child(even) .obj_article_summary,
.pkp_page_index ul li:nth-child(even) .obj_article_summary{
  background: #ffffff !important;
}

/* B) Kalau artikel dibungkus <div> sibling di dalam section */
.page_issue .section > div:nth-child(odd) .obj_article_summary,
.pkp_page_index .section > div:nth-child(odd) .obj_article_summary{
  background: #b8c7df !important;
}
.page_issue .section > div:nth-child(even) .obj_article_summary,
.pkp_page_index .section > div:nth-child(even) .obj_article_summary{
  background: #ffffff !important;
}

/* C) Fallback: jika wrapper bukan .section tapi container langsung */
.page_issue .sections > div:nth-child(odd) .obj_article_summary,
.pkp_page_index .sections > div:nth-child(odd) .obj_article_summary{
  background: #b8c7df !important;
}
.page_issue .sections > div:nth-child(even) .obj_article_summary,
.pkp_page_index .sections > div:nth-child(even) .obj_article_summary{
  background: #ffffff !important;
}

/* 4) Judul/meta rapat */
.page_issue .obj_article_summary .title,
.pkp_page_index .obj_article_summary .title{
  margin: 0 0 3px 0 !important;
  font-weight: 700;
  line-height: 1.3;
}
.page_issue .obj_article_summary .meta,
.pkp_page_index .obj_article_summary .meta{
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.25;
}

/* 5) Mobile: PDF turun normal */
@media (max-width: 768px){
  .page_issue .obj_article_summary .galleys_links,
  .pkp_page_index .obj_article_summary .galleys_links{
    position: static;
    margin-top: 4px !important;
  }
  .page_issue .obj_article_summary .title,
  .page_issue .obj_article_summary .meta,
  .pkp_page_index .obj_article_summary .title,
  .pkp_page_index .obj_article_summary .meta{
    padding-right: 0 !important;
  }
}





/* =========================================================
   OJS 3.3 (DOM Anda): HEADER = banner dari LOGO
   HOMEPAGE IMAGE (cover) = tampil di halaman homepage saja
   ========================================================= */

/* 1) MATIKAN pseudo-element yang memunculkan cover di header */
#headerNavigationContainer .pkp_site_name_wrapper::before,
#headerNavigationContainer .pkp_site_name_wrapper::after{
  content: none !important;
  background: none !important;
  display: none !important;
}

/* 2) Reset posisi pkp_site_name yang di theme Anda dibuat absolute */
#headerNavigationContainer .pkp_site_name{
  position: static !important;
  left: auto !important;
  right: auto !important;
  padding-left: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 3) Tampilkan LOGO sebagai BANNER di header */
#headerNavigationContainer .pkp_site_name img{
  display: block !important;
  width: 100% !important;
  height: 260px !important;         /* ubah 220–320 sesuai kebutuhan */
  object-fit: cover !important;
  object-position: center center !important;
}

/* 4) Pastikan wrapper header tidak memberi padding aneh */
#headerNavigationContainer .pkp_site_name_wrapper{
  padding: 0 !important;
  margin: 0 !important;
}

/* 5) Pastikan cover tampil di homepage (body), bukan di header */
.pkp_page_index .homepage_image,
.pkp_page_index .cmp_homepage_image{
  display: block !important;
  margin: 16px 0 !important;
  padding: 0 !important;
}

.pkp_page_index .homepage_image img,
.pkp_page_index .cmp_homepage_image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}



/* =========================================================
   OVERRIDE FINAL (TEMPel PALING BAWAH)
   Fix: Cover tidak masuk header, Banner dari Logo, Cover tampil di Homepage
   ========================================================= */

/* 1) MATIKAN SEMUA pseudo-element di area HEADER yang sering dipakai oldheaders */
#headerNavigationContainer::before,
#headerNavigationContainer::after,
#headerNavigationContainer .pkp_head_wrapper::before,
#headerNavigationContainer .pkp_head_wrapper::after,
#headerNavigationContainer .pkp_site_name_wrapper::before,
#headerNavigationContainer .pkp_site_name_wrapper::after{
  content: "" !important;
  background: none !important;
  display: none !important;
}

/* 2) MATIKAN background-image header bila oldheaders menempel langsung ke wrapper */
#headerNavigationContainer,
#headerNavigationContainer .pkp_head_wrapper,
#headerNavigationContainer .pkp_site_name_wrapper{
  background-image: none !important;
  background: transparent !important;
}

/* 3) Paksa LOGO (yang Anda upload di Appearance > Setup > Logo) tampil sebagai banner */
#headerNavigationContainer .pkp_site_name img{
  display: block !important;
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* 4) Jangan biarkan pkp_site_name absolute (ini bikin overlay aneh) */
#headerNavigationContainer .pkp_site_name{
  position: static !important;
  left: auto !important;
  right: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 5) Cover/Homepage Image wajib tampil di halaman homepage (body) */
.pkp_page_index .homepage_image,
.pkp_page_index .cmp_homepage_image{
  display: block !important;
  margin: 16px 0 !important;
  padding: 0 !important;
}

.pkp_page_index .homepage_image img,
.pkp_page_index .cmp_homepage_image img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 6) Tapi cover tidak boleh tampil kalau ada yang memindahkan ke header */
#headerNavigationContainer .homepage_image,
#headerNavigationContainer .cmp_homepage_image{
  display: none !important;
}


/* =========================================================
   PROTEACH – FINAL HOMEPAGE HERO VERSION
   OJS 3.3 Default Theme
   - Header bersih
   - Homepage tampil teks kiri + cover kanan
   - Stabil & tidak ganggu menu/header
   ========================================================= */


/* ===============================
   1. Pastikan header tetap normal
   =============================== */

#headerNavigationContainer,
#headerNavigationContainer .pkp_head_wrapper,
#headerNavigationContainer .pkp_site_name_wrapper{
  background: transparent !important;
}

#headerNavigationContainer .pkp_site_name{
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
}

#headerNavigationContainer .pkp_site_name img{
  display:block !important;
  width:100% !important;
  height:260px !important;
  object-fit:cover !important;
}


/* ===============================
   2. HOMEPAGE HERO (TEXT + COVER)
   =============================== */

.home-hero{
  display:flex;
  align-items:flex-start;
  gap:30px;
  margin: 20px 0 30px 0;
}

.home-hero__text{
  flex: 1 1 auto;
  min-width: 0;
}

.home-hero__text h2{
  font-size:24px;
  margin-bottom:12px;
}

.home-hero__text p{
  margin-bottom:12px;
  line-height:1.7;
}

.home-hero__text ul{
  padding-left:18px;
  margin-top:8px;
}

.home-hero__cover{
  flex:0 0 320px;
  max-width:320px;
}

.home-hero__cover img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}


/* ===============================
   3. Responsive Aman
   =============================== */

@media (max-width: 768px){
  .home-hero{
    flex-direction:column;
  }
  .home-hero__cover{
    max-width:100%;
  }
}


/* ===============================
   4. Optional:
   Sembunyikan Journal Summary default
   (agar tidak dobel dengan hero)
   =============================== */

.pkp_page_index .about_the_journal{
  display:none !important;
}








/* =========================================================
   PROTEACH – FINAL HOMEPAGE ORDER + HERO LAYOUT (OJS 3.3)
   Berdasarkan DOM Anda:
   .pkp_page_index .page_index_journal
     ├ section.homepage_about
     ├ section.current_issue
     └ div.additional_content   (isi HERO Anda)
   Target:
   1) additional_content (HERO) paling atas
   2) homepage_about (journal summary) setelahnya
   3) current_issue setelah itu
   ========================================================= */

/* 1) Atur urutan blok di homepage */
.pkp_page_index .page_index_journal{
  display: flex !important;
  flex-direction: column !important;
}

/* Default: semua blok di bawah dulu */
.pkp_page_index .page_index_journal > *{
  order: 10 !important;
}

/* HERO (Additional Content) jadi paling atas */
.pkp_page_index .page_index_journal > .additional_content{
  order: 0 !important;
  display: block !important;
  margin: 10px 0 20px 0 !important;
}

/* Journal Summary (About the Journal bawaan) setelah HERO */
.pkp_page_index .page_index_journal > .homepage_about{
  order: 1 !important;
}

/* Current Issue setelah itu */
.pkp_page_index .page_index_journal > .current_issue{
  order: 2 !important;
}

/* 2) Layout HERO: teks kiri + cover kanan (gunakan HTML class home-hero) */
.home-hero{
  display:flex;
  gap:30px;
  align-items:flex-start;
  margin: 0 0 10px 0;
}

.home-hero__text{
  flex: 1 1 auto;
  min-width: 0;
}

.home-hero__cover{
  flex: 0 0 320px;
  max-width: 320px;
}

.home-hero__cover img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile */
@media (max-width:768px){
  .home-hero{ flex-direction: column; }
  .home-hero__cover{ max-width: 100%; }
}

/* =========================================================
   FINAL REMOVE "ABOUT THE JOURNAL" FROM HOMEPAGE
   OJS 3.3 Default Theme (berdasarkan DOM Anda)
   ========================================================= */

/* Hilangkan seluruh section About di homepage */
.pkp_page_index .page_index_journal > .homepage_about{
    display: none !important;
}

/* Jika theme tetap menampilkan heading kosong */
.pkp_page_index .homepage_about h2,
.pkp_page_index .homepage_about .title{
    display: none !important;
}



/* =========================================================
   HOMEPAGE: Hilangkan "Current Issue", tampilkan Vol/No saja
   + Tambahkan "Table of Contents" di homepage
   ========================================================= */

/* 1) HOMEPAGE: sembunyikan heading "Current Issue" */
.pkp_page_index .current_issue > h2{
  display:none !important;
}

/* 2) HOMEPAGE: rapikan jarak supaya Vol/No naik ke atas */
.pkp_page_index .current_issue{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3) HOMEPAGE: tampilkan heading "Table of Contents" sebelum daftar artikel */
.pkp_page_index .current_issue .sections::before{
  content: "Table of Contents";
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin: 18px 0 10px 0;
}

/* =========================================================
   FINAL SPACING: Homepage + Current Issue (Issue TOC)
   - Vol/No + Published + Table of Contents proporsional
   ========================================================= */

/* 1) VOL/NO + Published spacing (homepage & issue page) */
.pkp_page_index .current_issue .current_issue_title,
.page_issue .obj_issue_toc .heading .current_issue_title{
  margin-bottom: 4px !important;
}

.pkp_page_index .current_issue .published,
.page_issue .obj_issue_toc .heading .published{
  margin: 0 0 8px 0 !important;
}

/* 2) Table of Contents heading spacing (homepage & issue page) */
.pkp_page_index .current_issue .sections::before,
.page_issue .sections::before{
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin: 10px 0 8px 0 !important;   /* kunci jarak elegan */
}

/* 3) Hilangkan margin bawaan sections yang bikin renggang */
.pkp_page_index .current_issue .sections,
.page_issue .sections{
  margin-top: 0 !important;
}

/* 4) Rapikan jarak label Articles */
.pkp_page_index .current_issue .section h3,
.page_issue .section h3{
  margin: 6px 0 6px 0 !important;
}





/* =====================================================
   PROTEACH – JARME STYLE FINAL (CLEAN VERSION)
   ===================================================== */

#proteach-jarme{
  color:#111;
  font-family: inherit;
}

/* ================= TITLE ================= */

#proteach-jarme .pj-title{
  margin:0 0 8px 0;
  font-size:28px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:.2px;
}

/* ================= LINES ================= */

#proteach-jarme .pj-hr,
#proteach-jarme .pj-divider{
  border:0;
  border-top:1px solid #000;
  height:0;
}

#proteach-jarme .pj-hr{
  margin:10px 0 12px 0;
}

#proteach-jarme .pj-divider{
  margin:14px 0 12px 0;
}

/* ================= COVER (FLOAT RIGHT LIKE JARME) ================= */

#proteach-jarme .pj-cover-wrap{
  float:right;
  width:300px;
  margin:0 0 12px 18px;
}

#proteach-jarme .pj-cover{
  background:#ffffff;
  border:1px solid #cfcfcf;
  padding:6px;
}

#proteach-jarme .pj-cover img{
  width:100%;
  height:auto;
  display:block;
}

/* ================= JOURNAL INFO BOX ================= */

#proteach-jarme .pj-info{
  background:#dcdcdc;              /* lebih gelap agar kontras */
  padding:12px 12px 10px 12px;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
  margin:0 0 12px 0;
}

/* Info rows */
#proteach-jarme .pj-info-row{
  display:grid;
  grid-template-columns:130px 14px 1fr;
  column-gap:6px;
  padding:3px 0;
  border-bottom:1px solid #bfbfbf;
  font-size:9px;                   /* diperbesar dari 8px */
  line-height:1.1;
  align-items:start;
}

#proteach-jarme .pj-info-row:last-child{
  border-bottom:0;
}

/* Label */
#proteach-jarme .pj-label{
  white-space:nowrap;
  font-weight:600;
  color:#111;
}

/* Colon */
#proteach-jarme .pj-colon{
  text-align:center;
  font-weight:600;
  color:#111;
}

/* Value */
#proteach-jarme .pj-value{
  font-weight:700;                 /* lebih tebal supaya terbaca */
  text-align:left;
  overflow-wrap:anywhere;
  color:#000;
}

/* ================= TEXT AREA ================= */

#proteach-jarme .pj-text p{
  margin:0 0 12px 0;
  font-size:13px;
  line-height:1.3;
  text-align:justify !important;
  text-justify:inter-word;
}

#proteach-jarme .pj-text p:last-child{
  margin-bottom:0;
}

/* ================= SECTION TITLE ================= */

#proteach-jarme .pj-h3{
  margin:0 0 8px 0;
  font-size:14px;
  font-weight:800;
  line-height:1.1;
}

/* ================= LINKS ================= */

#proteach-jarme a{
  color:inherit;
  text-decoration:underline;
}

/* ================= CLEAR FLOAT ================= */

#proteach-jarme .pj-clear{
  clear:both;
}

/* ================= RESPONSIVE ================= */

@media (max-width:900px){
  #proteach-jarme .pj-cover-wrap{
    float:none;
    width:100%;
    max-width:340px;
    margin:0 0 12px 0;
  }
}












/* =========================================================
   PROTEACH – FINAL CSS (CLEAN + STABLE)  ✅ COPY-PASTE REPLACE ALL
   Target:
   1) Current Issue pindah ke bawah (setelah PROTEACH/additional_content)
   2) Tepi kiri tulisan PROTEACH (homepage atas) = tepi kiri tulisan Current Issue (presisi)
   3) Lebar tulisan PROTEACH bisa diperlebar ke kanan (padding-right berpengaruh)
   Catatan: kanan tidak dipaksa sama persis.
   ========================================================= */


/* ================= GLOBAL TOP SPACING FIX (ALL PAGES) ================= */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_body,
.pkp_structure_body .pkp_structure_content,
.pkp_structure_body .pkp_structure_main,
.page,
.pkp_page{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.pkp_structure_main > :first-child,
.pkp_structure_content > :first-child,
.cmp_breadcrumbs{
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   HOMEPAGE ONLY – REORDER (CURRENT ISSUE DI BAWAH PROTEACH)
   ========================================================= */
.pkp_page_index .page.index.journal{
  display: flex !important;
  flex-direction: column !important;
}

.pkp_page_index .page.index.journal > .homepage_about{ order: 1 !important; }
.pkp_page_index .page.index.journal > .additional_content{ order: 2 !important; } /* PROTEACH */
.pkp_page_index .page.index.journal > .current_issue{ order: 3 !important; }      /* di bawah */


/* =========================================================
   HOMEPAGE ONLY – PADDING PARENT (BIAR CURRENT ISSUE RAPI)
   Ini boleh tetap (stabil), tapi BUKAN untuk menyamai kiri PROTEACH.
   Kiri PROTEACH akan dipresisikan dengan SHIFT (di bawah).
   ========================================================= */
.pkp_page_index{
  --pj-current-left-pad: 16px;     /* padding untuk current issue */
  --pj-current-right-pad: 16px;    /* padding untuk current issue */
  --pj-proteach-shift-left: 20.006248px; /* angka ukur Anda: geser PROTEACH ke kiri */
  --pj-proteach-right-pad: 40px;   /* memperlebar tulisan PROTEACH ke kanan */
}

/* Current Issue parent padding */
.pkp_page_index .page.index.journal > .current_issue{
  padding-left: var(--pj-current-left-pad) !important;
  padding-right: var(--pj-current-right-pad) !important;
}

/* Artikel list ikut “lega” */
.pkp_page_index .page.index.journal > .current_issue .cmp_article_list{
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* =========================================================
   PROTEACH – WRAPPER (STABIL) + SHIFT PRESISI + RIGHT PAD
   PENTING: hanya SATU metode alignment: transform translateX
   ========================================================= */
.pkp_page_index #proteach-jarme{
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  max-width: 100% !important;
  color: #111 !important;
  font-family: inherit !important;

  /* 1) Presisi tepi kiri: geser seluruh blok ke kiri */
  transform: translateX(calc(-1 * var(--pj-proteach-shift-left))) !important;

  /* 2) Lebarkan tulisan ke kanan (ini yang Anda minta berpengaruh) */
  padding-right: var(--pj-proteach-right-pad) !important;
}

/* Clearfix agar float cover stabil */
.pkp_page_index #proteach-jarme::after{
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Cegah scrollbar horizontal akibat transform shift */
.pkp_page_index .pkp_structure_main{
  overflow-x: hidden !important;
}


/* ================= TITLE ================= */
#proteach-jarme .pj-title{
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: .2px;
}

/* ================= LINES ================= */
#proteach-jarme .pj-hr,
#proteach-jarme .pj-divider{
  border: 0;
  border-top: 1px solid #000;
  height: 0;
}
#proteach-jarme .pj-hr{ margin: 10px 0 12px 0; }
#proteach-jarme .pj-divider{ margin: 14px 0 12px 0; }

/* ================= COVER (FLOAT RIGHT LIKE JARME) ================= */
#proteach-jarme .pj-cover-wrap{
  float: right;
  width: 300px;
  max-width: 45%;
  margin: 0 0 12px 18px;
}
#proteach-jarme .pj-cover{
  background: #ffffff;
  border: 1px solid #cfcfcf;
  padding: 6px;
}
#proteach-jarme .pj-cover img{
  width: 100%;
  height: auto;
  display: block;
}

/* ================= JOURNAL INFO BOX ================= */
#proteach-jarme .pj-info{
  background: #dcdcdc;
  padding: 12px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin: 0 0 12px 0;
}

#proteach-jarme .pj-info-row{
  display: grid;
  grid-template-columns: 130px 14px 1fr;
  column-gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid #bfbfbf;
  font-size: 9px;
  line-height: 1.1;
  align-items: start;
}
#proteach-jarme .pj-info-row:last-child{ border-bottom: 0; }

#proteach-jarme .pj-label{
  white-space: nowrap;
  font-weight: 600;
  color: #111;
}
#proteach-jarme .pj-colon{
  text-align: center;
  font-weight: 600;
  color: #111;
}
#proteach-jarme .pj-value{
  font-weight: 700;
  text-align: left;
  overflow-wrap: anywhere;
  color: #000;
}

/* ================= TEXT AREA ================= */
#proteach-jarme .pj-text p{
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.3;
  text-align: justify !important;
  text-justify: inter-word;
}
#proteach-jarme .pj-text p:last-child{ margin-bottom: 0; }

/* ================= SECTION TITLE ================= */
#proteach-jarme .pj-h3{
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

/* ================= LINKS ================= */
#proteach-jarme a{
  color: inherit;
  text-decoration: underline;
}

/* ================= CLEAR FLOAT ================= */
#proteach-jarme .pj-clear{
  clear: both;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  #proteach-jarme .pj-cover-wrap{
    float: none;
    width: 100%;
    max-width: 340px;
    margin: 0 0 12px 0;
  }

  /* mobile padding & right pad lebih kecil biar nyaman */
  .pkp_page_index{
    --pj-current-left-pad: 12px;
    --pj-current-right-pad: 12px;
    --pj-proteach-right-pad: 16px;
  }
}








/* =========================================================
   FINAL – PROTEACH: LEFT MATCHED, RIGHT EXTENDED (HOMEPAGE ONLY)
   Measured:
     current_right - proteach_right = 40.0125732421875px
   ========================================================= */

.pkp_page_index{
  --pj-proteach-extend-right: 40.0125732421875px;
}

/* Kiri sudah presisi, jadi jangan ubah margin-left/transform lagi.
   Kita hanya extend ke kanan. */
.pkp_page_index #proteach-jarme{
  box-sizing: border-box !important;

  /* extend boundary kanan */
  width: calc(100% + var(--pj-proteach-extend-right)) !important;
  max-width: none !important;
  margin-right: calc(-1 * var(--pj-proteach-extend-right)) !important;

  /* optional: sedikit ruang dari tepi kanan agar enak dibaca */
  padding-right: 16px !important;
}

/* cegah scrollbar horizontal akibat extend-right */
.pkp_page_index .pkp_structure_main{
  overflow-x: hidden !important;
}








/*BAGIAN BANNER*/

/* =========================================================
   FINAL - OJS 3.3.0.21 Default Theme
   FIX: Banner benar-benar FULL WIDTH (memanjang), tinggi terkunci
   ========================================================= */

/* 1) Pastikan header tidak dibatasi container/float */
.pkp_structure_head,
.pkp_head_wrapper{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Paksa semua parent banner jadi FULL WIDTH (ini kunci utamanya) */
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name > a{
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 3) Kunci tinggi area banner */
.pkp_site_name_wrapper{
  height: 85px !important;        /* ubah ini jika mau */
  overflow: hidden !important;
  background: #0b2a4a !important;
}

/* 4) Banner image: dibuat MEMANJANG penuh */
.pkp_site_name > a > img{
  display: block !important;
  width: 100% !important;         /* sekarang akan bekerja karena parent sudah 100% */
  height: 85px !important;
  max-height: 85px !important;

  object-fit: cover !important;   /* isi penuh */
  object-position: right center !important; /* prioritaskan logo kanan */
  margin: 0 !important;
}

/* 5) Mobile */
@media (max-width: 992px){
  .pkp_site_name_wrapper{ height: 65px !important; }
  .pkp_site_name > a > img{
    height: 65px !important;
    max-height: 65px !important;
  }
}
/* ========================================================= */


/*MENU NAV TIMBUL*/
/* =====================================================
   INTENSE 3D NAV BUTTON – Deep Emerald Edition
   Tidak mengubah layout header
   ===================================================== */

.pkp_navigation_primary > ul > li > a,
.pkp_site_nav_menu .pkp_nav_list > li > a {

  display: inline-block;
  padding: 9px 18px;
  border-radius: 22px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  color: #ffffff !important;

  /* Deep emerald gradient */
  background: linear-gradient(145deg, #0b3a2c, #146c4c);

  border: 1px solid rgba(0,0,0,0.35);

  /* INTENSE DEPTH EFFECT */
  box-shadow:
      0 8px 18px rgba(0,0,0,0.45),     /* deep outer shadow */
      0 3px 6px rgba(0,0,0,0.35),      /* medium shadow */
      inset 0 2px 3px rgba(255,255,255,0.15), /* top inner highlight */
      inset 0 -3px 6px rgba(0,0,0,0.35);       /* bottom inner depth */

  transition: all 0.18s ease-in-out;
}

/* Hover – lebih naik & glow */
.pkp_navigation_primary > ul > li > a:hover,
.pkp_site_nav_menu .pkp_nav_list > li > a:hover {

  transform: translateY(-4px);

  background: linear-gradient(145deg, #146c4c, #1f8a62);

  box-shadow:
      0 14px 28px rgba(0,0,0,0.55),
      0 6px 12px rgba(0,0,0,0.40),
      inset 0 2px 4px rgba(255,255,255,0.18),
      inset 0 -4px 8px rgba(0,0,0,0.40);
}

/* Active (halaman aktif) – lebih terang */
.pkp_navigation_primary > ul > li.current > a,
.pkp_navigation_primary > ul > li > a[aria-current="page"],
.pkp_site_nav_menu .pkp_nav_list > li.current > a {

  background: linear-gradient(145deg, #1f8a62, #26a974);

  box-shadow:
      0 10px 22px rgba(0,0,0,0.55),
      inset 0 2px 4px rgba(255,255,255,0.20),
      inset 0 -4px 10px rgba(0,0,0,0.45);
}

/* Klik (pressed effect nyata) */
.pkp_navigation_primary > ul > li > a:active,
.pkp_site_nav_menu .pkp_nav_list > li > a:active {

  transform: translateY(2px);

  box-shadow:
      0 4px 8px rgba(0,0,0,0.45),
      inset 0 4px 8px rgba(0,0,0,0.55);
}