/* ==========================================================
   Journal stylesheet untuk OJS 3.3 (tema Default)
   Gaya: hijau toska (#0FAA8B) + putih
   Pasang di: Website Settings > Appearance > Advanced > Journal Style Sheet
   Situs: jurnal.gerakanedukasi.com/index.php/gerasi
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Poppins:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

:root {
  --primary-900: #0A5C4C;
  --primary-800: #0B7F68;   /* teal gelap: judul, tombol, tautan */
  --primary-700: #0FAA8B;   /* WARNA UTAMA: bar menu, ikon */
  --accent:      #5CD6BC;   /* aksen mint */
  --accent-soft: #CDF3EA;
  --cream:       #F2F9F7;   /* latar halaman: putih kebiruan */
  --paper:       #FFFFFF;
  --ink:         #1D2B28;
  --muted:       #5B6B67;
  --line:        #D9EAE5;
  --radius:      10px;
  --shadow:      0 2px 10px rgba(11, 127, 104, .10);
}

/* ---------- Dasar ---------- */
body {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6,
.page_title, .obj_article_summary .title,
.obj_issue_summary .title {
  font-family: 'Merriweather', Georgia, serif;
  color: var(--primary-800);
}
a { color: var(--primary-800); }
a:hover, a:focus { color: var(--accent); text-decoration: none; }

.pkp_structure_page {
  background: var(--cream);
  box-shadow: none;
}
.pkp_structure_content { padding-top: 24px; }
.pkp_structure_main { background: transparent; }
.pkp_structure_main:before,
.pkp_structure_main:after { background: transparent; }

/* ---------- Header (polos putih) ---------- */
.pkp_structure_head {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.pkp_head_wrapper { padding: 0 15px; }
.pkp_site_name_wrapper { padding-top: 14px; padding-bottom: 10px; }
.pkp_site_name .is_img img { max-height: 120px; width: auto; }
.pkp_site_name .is_text {
  color: var(--primary-900);
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
  letter-spacing: .3px;
}

/* Menu user (Register / Login / nama pengguna) */
.pkp_navigation_user_wrapper { top: 0; }
.pkp_navigation_user > li > a { color: var(--primary-800); font-size: 13px; }
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus { color: var(--accent); background: var(--cream); }
.pkp_navigation_user .task_count { background: var(--primary-800); color: #fff; }

/* Menu utama */
.pkp_navigation_primary_row {
  background: var(--primary-700);
}
.pkp_navigation_primary > li > a {
  color: #fff;
  font-weight: 500;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 14px 16px;
  border-bottom: 3px solid transparent;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
  color: #fff;
  background: rgba(0,0,0,.12);
  border-bottom-color: #fff;
}
.pkp_navigation_primary ul {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}
.pkp_navigation_primary ul a {
  color: var(--primary-800);
  font-size: 13.5px;
  padding: 10px 16px;
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
  background: var(--cream);
  color: var(--accent);
}

/* Search di menu */
.pkp_search .search_prompt,
.pkp_search_desktop .search_controls .search_prompt { color: #fff; }

/* Tombol menu di HP */
.pkp_site_nav_toggle { background: var(--primary-800); border-radius: 6px; }

/* ---------- Menu di header: Search | Register | Login + tombol Submit ----------
   Item menunya ditambahkan di dashboard (lihat petunjuk), urutan:
   Search, Register, Login, Submit Manuscript                                  */
.pkp_navigation_user > li > a { color: var(--ink); font-size: 15px; padding: 6px 18px; }
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus { color: var(--primary-800); background: transparent; }
.pkp_navigation_user > li + li { border-left: 1px solid var(--line); }

/* ikon Search */
.pkp_navigation_user a[href$="/search"]:before {
  font-family: FontAwesome; font-weight: normal;
  content: "\f002"; margin-right: 8px;
}

/* tombol Submit Manuscript */
.pkp_navigation_user > li > a[href$="/submission"] {
  display: inline-flex; align-items: center;
  background: var(--primary-800);
  color: #fff;
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700; font-size: 15px;
  padding: 12px 26px;
  border-radius: 6px;
}
.pkp_navigation_user > li > a[href$="/submission"]:before {
  font-family: FontAwesome; font-weight: normal;
  content: "\f1d8"; margin-right: 10px;
}
.pkp_navigation_user > li > a[href$="/submission"]:hover,
.pkp_navigation_user > li > a[href$="/submission"]:focus {
  background: var(--primary-900); color: #fff;
}

@media (min-width: 992px) {
  .pkp_head_wrapper { position: relative; }
  .pkp_site_name_wrapper { min-height: 140px; }

  /* menu user di kanan atas, sejajar dengan banner/logo.
     Geser kanan-kiri dengan mengubah nilai right, naik-turun dengan top. */
  .pkp_navigation_user_wrapper {
    position: absolute;
    top: 34px;
    right: 24px;
    left: auto;
    width: auto;
    transform: none;
    z-index: 5;
  }
  .pkp_navigation_user {
    display: flex; flex-wrap: wrap;
    justify-content: flex-end; align-items: center;
    margin: 0; padding: 0; list-style: none;
  }
  /* tombol Submit turun ke baris kedua, rata kanan */
  .pkp_navigation_user > li:has(> a[href$="/submission"]) {
    flex: 0 0 100%;
    display: flex; justify-content: flex-end;
    margin-top: 14px;
    border-left: 0;
  }
  /* Search bawaan di bar menu disembunyikan bila Search sudah ada di menu user */
  .pkp_head_wrapper:has(.pkp_navigation_user a[href$="/search"]) .pkp_navigation_search_wrapper {
    display: none;
  }
}

/* ---------- Halaman depan ---------- */
.page_index_journal .homepage_image {
  margin: 0 0 24px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.page_index_journal .homepage_image img { width: 100%; height: auto; display: block; }

.page_index_journal .additional_content,
.page_index_journal .journal_description {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

/* Judul section */
.page_index_journal .current_issue h2,
.page_index_journal .announcements h2,
.page_index_journal .homepage_about h2,
.page_index_journal .additional_content h2,
.page_index_journal .additional_content h3 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 18px;
  font-size: 22px;
}
.page_index_journal .current_issue h2:after,
.page_index_journal .announcements h2:after,
.page_index_journal .additional_content h2:after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 60px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* ---------- Kartu issue & artikel ---------- */
.obj_issue_summary,
.obj_article_summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.obj_issue_summary:hover,
.obj_article_summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 127, 104, .18);
}
.obj_article_summary .title a,
.obj_issue_summary .title {
  color: var(--primary-800);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
}
.obj_article_summary .title a:hover { color: var(--accent); }
.obj_article_summary .authors { color: var(--muted); font-size: 13.5px; }
.obj_article_summary .meta,
.obj_article_summary .pages,
.obj_article_summary .published { color: var(--muted); font-size: 12.5px; }
.obj_article_summary .cover img,
.obj_issue_summary .cover img {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Section judul daftar isi issue */
.obj_issue_toc .heading,
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .section > h2 {
  background: var(--primary-800);
  color: #fff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 8px 14px;
  border-radius: 6px;
  border-bottom: 0;
}

/* ---------- Tombol ---------- */
.cmp_button, .cmp_button_wire, .obj_galley_link,
a.obj_galley_link, button.pkp_button,
.pkp_button, input[type="submit"] {
  font-family: 'Poppins', sans-serif;
  border-radius: 999px;
  font-weight: 500;
  transition: all .15s ease;
}
.cmp_button, .obj_galley_link, a.obj_galley_link,
button[type="submit"], input[type="submit"] {
  background: var(--primary-800);
  border: 2px solid var(--primary-800);
  color: #fff;
}
.cmp_button:hover, .cmp_button:focus,
.obj_galley_link:hover, .obj_galley_link:focus,
button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--primary-900);
  border-color: var(--primary-900);
  color: #fff;
}
.cmp_button_wire {
  background: transparent;
  border: 2px solid var(--primary-800);
  color: var(--primary-800);
}
.cmp_button_wire:hover, .cmp_button_wire:focus {
  background: var(--primary-800);
  color: #fff;
}
a.obj_galley_link.pdf { background: var(--primary-800); }
a.obj_galley_link.pdf:hover { background: var(--primary-900); }

/* ---------- Sidebar ---------- */
.pkp_structure_sidebar { padding-top: 0; }
.pkp_block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 20px;
  padding: 0 0 14px;
  overflow: hidden;
}
.pkp_block .title {
  background: var(--primary-800);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 10px 16px;
  margin: 0 0 12px;
  border-bottom: 3px solid var(--accent);
}
.pkp_block .content, .pkp_block > ul, .pkp_block > div { padding-left: 16px; padding-right: 16px; }
.pkp_block ul { list-style: none; margin: 0; padding: 0 16px; }
.pkp_block li { border-bottom: 1px dashed var(--line); }
.pkp_block li:last-child { border-bottom: 0; }
.pkp_block li a { display: block; padding: 7px 0; color: var(--primary-800); }
.pkp_block li a:hover { color: var(--accent); padding-left: 4px; }
.pkp_block img { max-width: 100%; height: auto; border-radius: 6px; }

/* ---------- Halaman artikel ---------- */
.obj_article_details .page_title {
  font-size: 24px;
  line-height: 1.4;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 10px;
}
.obj_article_details .item,
.obj_article_details .main_entry .item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.obj_article_details .item .label {
  color: var(--primary-800);
  font-weight: 700;
  font-family: 'Merriweather', Georgia, serif;
}
.obj_article_details .entry_details .item { box-shadow: var(--shadow); }
.obj_article_details .entry_details .item .label { color: var(--primary-800); }

/* ---------- Pengumuman ---------- */
.obj_announcement_summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.obj_announcement_summary h4 a { color: var(--primary-800); }
.obj_announcement_summary .date { color: var(--muted); font-size: 12.5px; }

/* ---------- Breadcrumb, pagination, form ---------- */
.cmp_breadcrumbs { background: transparent; }
.cmp_breadcrumbs a { color: var(--primary-800); }
.cmp_pagination a, .cmp_pagination span { border-radius: 6px; }
.cmp_pagination .current { background: var(--primary-800); color: #fff; }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="tel"],
textarea, select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}
input:focus, textarea:focus, select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(92, 214, 188, .35);
}

table { border-collapse: collapse; }
table th { background: var(--primary-800); color: #fff; }
table td, table th { border: 1px solid var(--line); padding: 8px 12px; }
table tr:nth-child(even) td { background: #F5FBF9; }

/* ---------- Footer ---------- */
.pkp_structure_footer_wrapper {
  background: var(--primary-800);
  border-top: 4px solid var(--accent);
  margin-top: 30px;
}
.pkp_footer_content {
  color: #E3F7F2;
  padding: 30px 15px;
}
.pkp_footer_content h1, .pkp_footer_content h2,
.pkp_footer_content h3, .pkp_footer_content h4 { color: var(--accent-soft); }
.pkp_footer_content a { color: var(--accent-soft); }
.pkp_footer_content a:hover { color: #fff; }
.pkp_brand_footer {
  background: var(--primary-900);
  padding: 12px 0;
}
.pkp_brand_footer a, .pkp_brand_footer { color: var(--accent-soft); }

/* ==========================================================
   HALAMAN DEPAN: hero + About the Journal + Journal Information
   HTML-nya ada di gerasi-homepage.html
   ========================================================== */

/* konten beranda selebar penuh (sidebar dipindah ke bawah, lihat bagian SIDEBAR DI BAWAH) */
.pkp_page_index .pkp_structure_main { width: 100% !important; float: none !important; padding-right: 0 !important; }
.pkp_page_index .pkp_structure_main:before,
.pkp_page_index .pkp_structure_main:after { display: none !important; }

html, body { overflow-x: hidden; }

.page_index_journal .additional_content {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 24px;
}

/* ----- Urutan beranda: Additional Content tampil paling atas,
   di atas Current Issue (urutan blok lain tidak berubah) ----- */
.page_index_journal { display: flex; flex-direction: column; }
.page_index_journal > * { min-width: 0; }
.page_index_journal .additional_content { order: -1; }

/* hilangkan jarak putih antara menu dan hero di beranda */
.pkp_page_index .pkp_structure_content { padding-top: 0 !important; }
.pkp_page_index .pkp_structure_main { padding-top: 0 !important; margin-top: 0 !important; }
.page_index_journal { margin-top: 0 !important; padding-top: 0 !important; }
.page_index_journal .additional_content { margin-top: 0 !important; }

/* ----- Hero ----- */
.jil-hero {
  position: relative;
  isolation: isolate;
  padding: 70px 0 64px;
}
.jil-hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 200vw;
  transform: translateX(-50%);
  z-index: -1;
  background-color: var(--primary-900);
  background-image:
    linear-gradient(90deg, rgba(10,92,76,.94) 0%, rgba(10,92,76,.80) 45%, rgba(11,127,104,.35) 100%),
    var(--jil-hero-img, linear-gradient(135deg, #0A5C4C 0%, #0B7F68 55%, #12B596 100%));
  background-size: cover;
  background-position: center;
}
.jil-hero .jil-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.2;
  margin: 0 0 20px;
  max-width: 760px;
  border-left: 4px solid var(--accent);
  padding-left: 24px;
}
.jil-hero .jil-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0 0 26px; padding: 0;
  color: #E3F7F2; font-size: 14px;
}
.jil-hero .jil-meta li { padding: 0 16px; border-left: 1px solid rgba(255,255,255,.35); }
.jil-hero .jil-meta li:first-child { padding-left: 0; border-left: 0; }
.jil-hero .jil-meta i { margin-right: 8px; color: var(--accent-soft); }
.jil-hero .jil-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jil-hero .jil-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px;
  border-radius: 6px;
  border: 2px solid transparent;
  font-weight: 600; font-size: 14.5px;
  color: #fff; text-decoration: none;
  transition: all .15s ease;
}
.jil-hero .jil-btn-solid { background: #0FAA8B; border-color: #0FAA8B; }
.jil-hero .jil-btn-outline { background: transparent; border-color: rgba(255,255,255,.85); }
.jil-hero .jil-btn:hover,
.jil-hero .jil-btn:focus { background: #fff; border-color: #fff; color: var(--primary-800); }

/* ----- Judul section bergaya dua garis ----- */
.page_index_journal .additional_content .jil-h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 26px; line-height: 1.3;
  margin: 0 0 18px; padding: 0;
}
.page_index_journal .additional_content .jil-h2:before {
  content: '';
  flex: 0 0 13px; height: 26px;
  background: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px, var(--primary-700) 8px 13px);
}
.page_index_journal .additional_content .jil-h2:after { display: none; }

/* ----- About + Journal Information ----- */
.jil-about { padding: 46px 0 6px; }
.jil-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}
.jil-about p { margin: 0 0 14px; }
.jil-more { font-weight: 600; color: var(--primary-800); }
.jil-more i { margin-left: 6px; }

.jil-features {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.jil-features li {
  text-align: center; padding: 6px 10px;
  border-left: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.jil-features li:first-child { border-left: 0; }
.jil-features i { display: block; font-size: 30px; color: var(--primary-700); margin-bottom: 8px; }

.jil-info {
  background: #E6F4F0;
  border: 0;
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: none;
}
.jil-info .jil-row { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.jil-info .jil-row:last-child { margin-bottom: 0; }
/* ikon digambar lewat CSS (tidak bergantung pada tag <i> di editor OJS) */
.jil-info .jil-row:before {
  flex: 0 0 40px; text-align: center;
  font-family: FontAwesome; font-weight: normal; font-style: normal;
  font-size: 30px; line-height: 1.1;
  color: var(--primary-700); margin-top: 2px;
}
.jil-info .jil-ic-calendar:before { content: "\f073"; }
.jil-info .jil-ic-users:before    { content: "\f0c0"; }
.jil-info .jil-ic-money:before    { content: "\f0d6"; }
.jil-info .jil-ic-language:before { content: "\f1ab"; }
.jil-info .jil-ic-search:before   { content: "\f002"; }
.jil-info .jil-ic-archive:before  { content: "\f187"; }
.jil-info .jil-row-label { font-weight: 700; color: var(--primary-800); font-size: 17px; line-height: 1.3; }
.jil-info .jil-row-value { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.jil-info .jil-row-value a { color: var(--primary-800); font-weight: 500; }
.jil-info .jil-row-value a:hover { color: var(--primary-700); text-decoration: underline; }

/* ----- Focus and Scope: daftar kartu dengan ikon centang ----- */
.jil-about-text { display: flex; flex-direction: column; }
.jil-about-text .jil-scope { flex: 1; display: flex; flex-direction: column; padding: 30px 0 0; }
.jil-scope-list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  align-content: stretch;
  flex: 1;
  gap: 10px;
}
.jil-scope-list li {
  display: flex; align-items: center; gap: 14px;
  margin: 0;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  color: var(--ink); font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.jil-scope-list li:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(11, 127, 104, .16);
}
.jil-scope-list li i { flex: 0 0 auto; font-size: 22px; color: var(--primary-700); }
/* item ganjil terakhir melebar penuh */
.jil-scope-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .jil-scope-list { grid-template-columns: 1fr; }
}

@media (max-width: 991px) {
  .jil-hero { padding: 48px 0 44px; }
  .jil-about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .jil-hero .jil-title { padding-left: 16px; }
  .jil-features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .jil-features li:nth-child(3) { border-left: 0; }
}

/* ==========================================================
   MENU & HEADER FULL WIDTH (desktop)
   Latar header dan baris menu membentang selebar layar,
   isi di dalamnya tetap rapi di tengah (maks. 1128px).
   ========================================================== */
@media (min-width: 992px) {
  html, body { overflow-x: hidden; }

  /* header membentang penuh */
  .pkp_structure_head {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .pkp_head_wrapper {
    max-width: none;
    width: 100%;
    padding: 0;
  }

  /* logo/nama jurnal & menu user tetap di tengah */
  .pkp_site_name_wrapper,
  .pkp_navigation_user_wrapper {
    max-width: 1128px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  /* baris menu utama: latar dibentangkan selebar layar,
     posisi isi menu (CURRENT, ARCHIVES, Search) tidak berubah */
  .pkp_navigation_primary_row {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    overflow: visible !important;
  }
  .pkp_navigation_primary_row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--primary-700);
    z-index: -1;
  }
}

/* footer juga membentang penuh agar serasi */
@media (min-width: 992px) {
  .pkp_structure_footer_wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .pkp_structure_footer { max-width: 1128px; margin: 0 auto; }
}

/* ==========================================================
   ANNOUNCEMENTS di beranda (judul dua garis + kartu dengan ikon)
   ========================================================== */
.page_index_journal .cmp_announcements { margin: 0 0 30px; }

.page_index_journal .cmp_announcements > h2 {
  display: flex; align-items: center; gap: 12px;
  font-size: 26px; line-height: 1.3;
  margin: 0 0 18px; padding: 0; border: 0;
  text-transform: none;
}
.page_index_journal .cmp_announcements > h2:before {
  content: '';
  flex: 0 0 13px; height: 26px;
  background: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px, var(--primary-700) 8px 13px);
}
.page_index_journal .cmp_announcements > h2:after { display: none; }

.page_index_journal .cmp_announcements .obj_announcement_summary {
  position: relative;
  background: #E6F4F0;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  padding: 26px 100px 26px 96px;
  margin: 0 0 14px;
  transition: background .15s ease, box-shadow .15s ease;
}
.page_index_journal .cmp_announcements .obj_announcement_summary:hover {
  background: #D8EEE8;
  box-shadow: var(--shadow);
}

/* ikon pengeras suara di kiri */
.page_index_journal .cmp_announcements .obj_announcement_summary:before {
  content: "\f0a1";
  font-family: FontAwesome;
  position: absolute; left: 34px; top: 50%;
  transform: translateY(-50%);
  font-size: 38px; line-height: 1;
  color: var(--primary-700);
}
/* tombol panah bulat di kanan */
.page_index_journal .cmp_announcements .obj_announcement_summary:after {
  content: "\f061";
  font-family: FontAwesome;
  position: absolute; right: 30px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px; line-height: 40px;
  text-align: center; font-size: 16px;
  border-radius: 50%;
  background: var(--primary-700); color: #fff;
}

.page_index_journal .cmp_announcements .obj_announcement_summary h3,
.page_index_journal .cmp_announcements .obj_announcement_summary h4 {
  margin: 0 0 4px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 17px; font-weight: 700; line-height: 1.4;
}
.page_index_journal .cmp_announcements .obj_announcement_summary h3:before,
.page_index_journal .cmp_announcements .obj_announcement_summary h4:before {
  content: 'Announcements';
  display: block;
  margin-bottom: 4px;
  font-size: 21px; font-weight: 400;
  color: var(--primary-900);
}
.page_index_journal .cmp_announcements .obj_announcement_summary h3 a,
.page_index_journal .cmp_announcements .obj_announcement_summary h4 a { color: var(--primary-800); }
/* seluruh kartu bisa diklik */
.page_index_journal .cmp_announcements .obj_announcement_summary h3 a:after,
.page_index_journal .cmp_announcements .obj_announcement_summary h4 a:after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
}
.page_index_journal .cmp_announcements .obj_announcement_summary .date { color: var(--muted); font-size: 14px; }
.page_index_journal .cmp_announcements .obj_announcement_summary .summary { display: none; }

@media (max-width: 575px) {
  .page_index_journal .cmp_announcements .obj_announcement_summary { padding: 22px 70px 22px 22px; }
  .page_index_journal .cmp_announcements .obj_announcement_summary:before { display: none; }
  .page_index_journal .cmp_announcements .obj_announcement_summary:after { right: 18px; }
}

/* ==========================================================
   HALAMAN ARTIKEL: lebar penuh + kolom kanan berisi kartu
   (tombol PDF, How to Cite, Article Information,
    Corresponding Author, License)
   ========================================================== */

/* ----- lebar halaman ----- */
.pkp_page_article .pkp_structure_page { max-width: none !important; width: 100% !important; }
.pkp_page_article .pkp_structure_content {
  max-width: 1240px !important; width: 100% !important;
  margin: 0 auto !important;
  padding: 24px 28px 44px !important;
  box-sizing: border-box;
}
.pkp_page_article .pkp_structure_sidebar { display: none !important; }
.pkp_page_article .pkp_structure_main {
  width: 100% !important; float: none !important;
  padding: 0 !important; margin: 0 !important;
}
.pkp_page_article .pkp_structure_main:before,
.pkp_page_article .pkp_structure_main:after { display: none !important; }

/* ----- dua kolom: isi artikel + kolom kanan ----- */
.obj_article_details { max-width: none; width: 100%; }
.obj_article_details .row {
  display: flex !important;
  align-items: flex-start;
  gap: 28px;
  margin: 0 !important;
}
.obj_article_details .row:before,
.obj_article_details .row:after { content: none !important; display: none !important; }
.obj_article_details .main_entry {
  float: none !important;
  flex: 1 1 0; min-width: 0;
  width: auto !important;
  margin: 0 !important; padding: 0 !important;
}
.obj_article_details .entry_details {
  float: none !important;
  flex: 0 0 340px;
  width: 340px !important;
  margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
}

/* ----- kartu di kolom kanan ----- */
.obj_article_details .entry_details .item {
  order: 9;
  font-size: 13.5px;
  margin: 0 0 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.obj_article_details .entry_details .item.galleys     { order: 0; }
.obj_article_details .entry_details .item.cover_image { order: 1; }
.obj_article_details .entry_details .item.citation    { order: 2; }
.obj_article_details .entry_details .item.published   { order: 3; }
.obj_article_details .entry_details .item.issue       { order: 4; }
.obj_article_details .entry_details .item.jil_corresponding { order: 5; }
.obj_article_details .entry_details .item.copyright   { order: 6; }

.obj_article_details .entry_details .item.cover_image img {
  display: block; width: 100%; height: auto; border-radius: 8px;
}

/* tombol PDF */
.obj_article_details .entry_details .item.galleys { padding: 14px; }
.obj_article_details .entry_details .item.galleys ul { margin: 0; padding: 0; list-style: none; }
.obj_article_details .entry_details .item.galleys li { margin: 0 0 8px; }
.obj_article_details .entry_details .item.galleys li:last-child { margin: 0; }
.obj_article_details .entry_details .obj_galley_link {
  display: flex; justify-content: center; align-items: center;
  width: 100%; box-sizing: border-box;
  border-radius: 8px; padding: 12px 16px;
}

/* isi tiap sub-item: label tebal + nilai */
.obj_article_details .entry_details .sub_item { margin: 0 0 12px; }
.obj_article_details .entry_details .sub_item:last-child { margin: 0; }
.obj_article_details .entry_details .item .sub_item > .label {
  display: block; margin: 0 0 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 14.5px; font-weight: 600;
  color: var(--primary-800);
}
.obj_article_details .entry_details .item .sub_item > .value { color: var(--muted); }

/* Article Information = kartu gabungan Published + Issue */
.obj_article_details .entry_details .item.published {
  border-bottom: 0; border-radius: 14px 14px 0 0;
  margin-bottom: 0; padding-bottom: 6px;
}
.obj_article_details .entry_details .item.issue {
  border-top: 0; border-radius: 0 0 14px 14px;
  padding-top: 6px; box-shadow: none;
}

/* judul kartu bergaya dua garis */
.obj_article_details .entry_details .item.published:before,
.obj_article_details .entry_details .item.copyright:before,
.obj_article_details .entry_details .item.citation .sub_item.citation_display > .label,
.obj_article_details .entry_details .item.jil_corresponding > .label {
  display: block; margin: 0 0 14px; padding-left: 22px;
  background: linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 8px, var(--primary-700) 8px 13px) no-repeat left center / 13px 24px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 20px; line-height: 1.3; font-weight: 700;
  color: var(--primary-800);
}
.obj_article_details .entry_details .item.published:before { content: "Article Information"; }
.obj_article_details .entry_details .item.copyright:before { content: "License"; }

/* How to Cite */
.obj_article_details .entry_details .item.citation #citationOutput,
.obj_article_details .entry_details .item.citation .csl-bib-body {
  font-size: 13px; line-height: 1.7; color: var(--ink);
  word-wrap: break-word; overflow-wrap: anywhere;
}

/* Corresponding Author (butuh potongan template, lihat petunjuk) */
.obj_article_details .entry_details .item.jil_corresponding .value { color: var(--ink); line-height: 1.6; }
.obj_article_details .entry_details .item.jil_corresponding .value strong { display: block; color: var(--primary-900); }
.obj_article_details .entry_details .item.jil_corresponding .value a { overflow-wrap: anywhere; }

/* License */
.obj_article_details .entry_details .item.copyright img { max-width: 100%; height: auto; }

@media (max-width: 991px) {
  .pkp_page_article .pkp_structure_content { padding: 18px 16px 32px !important; }
  .obj_article_details .row { flex-direction: column; }
  .obj_article_details .entry_details { flex: 1 1 auto; width: 100% !important; }
}

/* ==========================================================
   Dropdown menu harus selalu berada di atas isi halaman
   (hero, kartu pengumuman, kartu artikel, dll.)
   ========================================================== */
.pkp_structure_head { position: relative; z-index: 1000; }
.pkp_navigation_primary_row { z-index: 1000; }
.pkp_navigation_primary ul,
.pkp_navigation_user ul { z-index: 1001; }

/* ==========================================================
   SIDEBAR DI BAWAH: blok sidebar tampil sebagai baris kartu
   di bawah isi halaman (halaman artikel tidak memakai sidebar).
   Agar hanya berlaku di beranda, ganti
   body:not(.pkp_page_article) menjadi .pkp_page_index
   ========================================================== */
body:not(.pkp_page_article) .pkp_structure_content {
  display: flex !important;
  flex-direction: column;
  padding-bottom: 0 !important;
}
body:not(.pkp_page_article) .pkp_structure_main {
  order: 1;
  width: 100% !important; float: none !important;
  padding-right: 0 !important;
}
body:not(.pkp_page_article) .pkp_structure_main:before,
body:not(.pkp_page_article) .pkp_structure_main:after { display: none !important; }

body:not(.pkp_page_article) .pkp_structure_sidebar {
  order: 2;
  position: relative;
  isolation: isolate;
  float: none !important;
  width: 100% !important;
  margin: 40px 0 0 !important;
  padding: 36px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items: stretch;
}
/* latar pita selebar layar di belakang kartu */
body:not(.pkp_page_article) .pkp_structure_sidebar:before {
  content: '';
  position: absolute;
  top: 0; bottom: -30px; left: 50%;
  width: 200vw;
  transform: translateX(-50%);
  background: #E2F3EF;
  border-top: 1px solid var(--line);
  z-index: -1;
}

/* kartu */
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block {
  float: none !important; width: auto !important;
  margin: 0 !important;
  padding: 22px !important;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* judul kartu: pita teal di dalam kartu */
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block .title {
  margin: 0 0 16px;
  padding: 14px 10px;
  text-align: center;
  border: 0;
  border-radius: 4px;
  font-family: 'Merriweather', Georgia, serif;
}
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block .content,
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block > div { padding-left: 0; padding-right: 0; }
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block ul { padding-left: 0; padding-right: 0; }
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block img {
  display: block; max-width: 100%; height: auto;
  margin: 0 auto; border-radius: 6px;
}

/* ----- Efek mengambang saat kursor di atas kartu sidebar ----- */
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block .title { transition: background-color .22s ease; }
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block img { transition: transform .3s ease; }

body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:hover,
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 16px 30px rgba(15, 170, 139, .28);
  border-color: var(--accent);
  background-color: #F1FAF7;
}
/* judul berubah ke ungu yang lebih terang */
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:hover .title,
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:focus-within .title { background-color: #0FAA8B; }
body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block,
  body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block img { transition: none; }
  body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:hover,
  body:not(.pkp_page_article) .pkp_structure_sidebar .pkp_block:hover img { transform: none; }
}

/* ==========================================================
   FOOTER 3 kolom (isi HTML: gerasi-footer.html, ditempel di
   Settings > Website > Appearance > Setup > Footer)
   ========================================================== */
.pkp_structure_footer_wrapper {
  background: var(--primary-900);
  border-top: 0;
  margin-top: 30px;
}
/* pita ornamen di bagian atas footer */
.pkp_structure_footer_wrapper:before {
  content: '';
  display: block;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' viewBox='0 0 40 22'%3E%3Cg fill='none' stroke='%23B5E8DC' stroke-width='1.2' stroke-opacity='.6'%3E%3Cpath d='M20 3 27 11 20 19 13 11Z'/%3E%3Ccircle cx='20' cy='11' r='2.6'/%3E%3Cpath d='M0 11H11M29 11H40'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 22px, rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.pkp_footer_content { color: #E3F7F2; padding: 40px 15px 22px; }

.pkp_footer_content .jil-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.1fr 1.1fr;
}
.pkp_footer_content .jil-footer-col {
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,.18);
}
.pkp_footer_content .jil-footer-col:first-child { padding-left: 0; border-left: 0; }
.pkp_footer_content .jil-footer-col:last-child { padding-right: 0; }

.pkp_footer_content .jil-footer-title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 22px; line-height: 1.3;
  color: #fff; margin: 0 0 12px;
}
.pkp_footer_content .jil-footer-about p { margin: 0 0 6px; color: #CDF3EA; font-size: 14.5px; }
.pkp_footer_content .jil-footer-label {
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 500;
  color: #fff; margin: 0 0 14px;
}

.pkp_footer_content .jil-contact { list-style: none; margin: 0; padding: 0; }
.pkp_footer_content .jil-contact li { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; border: 0; }
.pkp_footer_content .jil-contact i { flex: 0 0 22px; text-align: center; color: var(--accent-soft); }
.pkp_footer_content .jil-contact a { color: #fff; overflow-wrap: anywhere; }

.pkp_footer_content .jil-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pkp_footer_content .jil-pills li { margin: 0; border: 0; }
.pkp_footer_content .jil-pills a {
  display: inline-block;
  padding: 5px 16px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  color: #fff; font-size: 14px;
  transition: all .15s ease;
}
.pkp_footer_content .jil-pills a:hover,
.pkp_footer_content .jil-pills a:focus { background: #fff; border-color: #fff; color: var(--primary-800); }

.pkp_footer_content .jil-footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin-top: 30px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 13px; color: #B5E3D8;
}
.pkp_footer_content .jil-footer-bottom a { color: #CDF3EA; }
.pkp_footer_content .jil-footer-bottom a:hover { color: #fff; }
.pkp_footer_content .jil-bottom-links a + a {
  margin-left: 18px; padding-left: 18px;
  border-left: 1px solid rgba(255,255,255,.3);
}

.pkp_brand_footer { background: #083F34; }

@media (max-width: 767px) {
  .pkp_footer_content .jil-footer-grid { grid-template-columns: 1fr; }
  .pkp_footer_content .jil-footer-col { padding: 0 0 22px; border-left: 0; }
}

/* ==========================================================
   HEADER = BLOK PUTIH (logo + menu user).
   Bar menu di bawahnya tetap berwarna. !important dipakai agar
   warna header bawaan tema OJS tidak menimpa.
   ========================================================== */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name .is_img img,
.pkp_navigation_user_wrapper { background: #fff !important; }
.pkp_structure_head { border-bottom: 1px solid var(--line) !important; }

/* ==========================================================
   IKON LEWAT CSS (editor OJS sering menghapus tag <i> kosong)
   Pasang class ikon pada elemen induknya, mis. <li class="jil-i-globe">
   ========================================================== */
.jil-i-unlock:before   { content: "\f13e"; }
.jil-i-send:before     { content: "\f1d8"; }
.jil-i-book:before     { content: "\f02d"; }
.jil-i-globe:before    { content: "\f0ac"; }
.jil-i-users:before    { content: "\f0c0"; }
.jil-i-calendar:before { content: "\f073"; }
.jil-i-link:before     { content: "\f0c1"; }
.jil-i-check:before    { content: "\f058"; }
.jil-i-mail:before     { content: "\f003"; }
.jil-i-phone:before    { content: "\f095"; }

.jil-hero .jil-meta li:before,
.jil-hero .jil-btn:before,
.jil-features li:before,
.jil-scope-list li:before,
.jil-contact li:before,
.jil-more:after {
  font-family: FontAwesome; font-style: normal; font-weight: normal;
  display: inline-block; line-height: 1;
}
.jil-hero .jil-meta li:before { margin-right: 8px; color: var(--accent-soft); }
.jil-hero .jil-btn:before { font-size: 15px; }
.jil-features li:before { display: block; font-size: 30px; color: var(--primary-700); margin-bottom: 8px; }
.jil-scope-list li:before { flex: 0 0 auto; font-size: 22px; color: var(--primary-700); }
.pkp_footer_content .jil-contact li:before { flex: 0 0 22px; text-align: center; color: var(--accent-soft); }
.jil-more:after { content: "\f061"; margin-left: 6px; }

/* ---------- Responsif ---------- */
@media (max-width: 767px) {
  .pkp_site_name .is_img img { max-height: 80px; }
  .obj_article_details .page_title { font-size: 20px; }
}