/* ==================================================
   JEA OJS CLEAN STYLE
   Versi aman dari awal
   Warna khas: biru, pink lembut, putih
   ================================================== */

/* ==================================================
   1. WARNA DASAR
   ================================================== */

:root {
  --jea-blue: #1688c9;
  --jea-blue-dark: #07556f;
  --jea-blue-soft: #f2fbff;
  --jea-pink: #e7b8bd;
  --jea-border: #dbeaf0;
  --jea-text: #222222;
  --jea-muted: #666666;
}

html,
body {
  background: #ffffff !important;
}

body {
  color: var(--jea-text);
  font-size: 15px;
  line-height: 1.7;
}

a {
  color: var(--jea-blue-dark);
  text-decoration: none;
}

a:hover {
  color: var(--jea-blue);
  text-decoration: underline;
}

/* ==================================================
   2. RESET LAYOUT AGAR TIDAK BERANTAKAN
   Jangan paksa grid atau flex pada struktur OJS
   ================================================== */

.pkp_structure_page,
.pkp_structure_head,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_footer {
  box-sizing: border-box;
}

.pkp_structure_content {
  background: #ffffff !important;
}

/* Hapus garis vertikal yang bertabrakan */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content,
.pkp_structure_page {
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

/* Garis pemisah sidebar hanya untuk laptop */
@media (min-width: 992px) {
  .pkp_structure_sidebar {
    border-left: 1px solid var(--jea-border) !important;
    padding-left: 24px !important;
  }
}

/* HP tanpa garis sidebar */
@media (max-width: 991px) {
  .pkp_structure_sidebar {
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 28px !important;
  }
}

/* ==================================================
   3. HEADER DAN LOGO
   ================================================== */

.pkp_structure_head {
  background: var(--jea-blue) !important;
  border-bottom: none !important;
}

.pkp_head_wrapper {
  max-width: 1140px;
  margin: 0 auto;
}

/* Logo/header */
.pkp_site_name {
  padding-top: 18px !important;
  padding-bottom: 12px !important;
}

.pkp_site_name .is_img img,
.pkp_site_name img {
  display: block !important;
  max-width: 100% !important;
  max-height: 220px !important;
  width: auto !important;
  height: auto !important;
}

/* Navigasi */
.pkp_navigation_primary_row {
  background: var(--jea-blue) !important;
  border-top: none !important;
  border-bottom: none !important;
}

.pkp_navigation_primary > li > a {
  color: #ffffff !important;
  font-weight: 600;
}

.pkp_navigation_primary > li > a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
  text-decoration: none;
}

.pkp_navigation_search_wrapper a,
.pkp_navigation_user a {
  color: #ffffff !important;
}

/* ==================================================
   4. KONTEN UTAMA
   ================================================== */

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.page-header h1,
.obj_issue_toc .heading {
  color: var(--jea-text);
  font-weight: 700;
  line-height: 1.35;
}

.pkp_structure_main p {
  margin-bottom: 16px;
}

/* Pembatas antar bagian */
.cmp_announcements,
.obj_issue_toc {
  border-top: 1px solid #e5e5e5 !important;
  padding-top: 24px;
  margin-top: 24px;
}

/* Jangan ada garis vertikal pada announcement */
.cmp_announcements,
.cmp_announcements *,
.obj_announcement_summary,
.obj_announcement_summary * {
  border-left: none !important;
  border-right: none !important;
}

/* ==================================================
   5. CURRENT ISSUE
   Kartu artikel rapi dan tidak terlalu besar
   ================================================== */

/* Reset list artikel agar tidak dobel kotak */
.obj_issue_toc .articles,
.cmp_article_list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

.obj_issue_toc .articles > li,
.cmp_article_list > li {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  list-style: none !important;
}

.obj_issue_toc .articles > li::before,
.cmp_article_list > li::before {
  content: none !important;
  display: none !important;
}

/* Rectangle artikel */
.obj_article_summary {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid var(--jea-border) !important;
  border-left: 5px solid var(--jea-blue) !important;
  border-radius: 10px !important;
  padding: 15px 16px 15px 58px !important;
  margin: 0 0 16px 0 !important;
  box-shadow: 0 3px 10px rgba(7, 85, 111, 0.08) !important;
  overflow: hidden !important;
}

.obj_article_summary:hover {
  border-left-color: var(--jea-pink) !important;
  box-shadow: 0 6px 16px rgba(7, 85, 111, 0.13) !important;
}

/* Ikon artikel */
.obj_article_summary::before {
  content: "▤" !important;
  position: absolute !important;
  left: 16px !important;
  top: 17px !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--jea-blue) !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Judul artikel */
.obj_article_summary .title,
.obj_article_summary .title a {
  color: var(--jea-blue-dark) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin-bottom: 5px !important;
  text-decoration: none !important;
}

.obj_article_summary .title a:hover {
  color: var(--jea-blue) !important;
  text-decoration: none !important;
}

/* Subjudul */
.obj_article_summary .subtitle {
  color: var(--jea-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  margin-bottom: 5px !important;
}

/* Penulis */
.obj_article_summary .authors {
  color: #333333 !important;
  font-size: 12.8px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  margin-bottom: 4px !important;
}

/* Nomor halaman */
.obj_article_summary .pages {
  color: #555555 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: var(--jea-blue-soft) !important;
  border: 1px solid var(--jea-border) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  display: inline-block !important;
  margin: 4px 0 !important;
}

/* DOI dengan logo kecil */
.obj_article_summary .doi {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12.8px !important;
  color: #555555 !important;
  line-height: 1.4 !important;
  margin: 5px 0 7px 0 !important;
}

.obj_article_summary .doi::before {
  content: "DOI" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 30px !important;
  height: 18px !important;
  padding: 0 5px !important;
  background: var(--jea-blue) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  line-height: 1 !important;
}

.obj_article_summary .doi a {
  color: var(--jea-blue-dark) !important;
  font-weight: 600 !important;
  word-break: break-word !important;
}

/* Tombol PDF */
.obj_article_summary .galleys_links {
  margin-top: 8px !important;
}

.obj_galley_link,
.obj_article_summary .galleys_links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--jea-blue-soft) !important;
  border: 1px solid var(--jea-blue) !important;
  color: var(--jea-blue-dark) !important;
  border-radius: 6px !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.obj_galley_link::before,
.obj_article_summary .galleys_links a::before {
  content: "PDF" !important;
  color: var(--jea-blue-dark) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.obj_galley_link:hover,
.obj_article_summary .galleys_links a:hover {
  background: var(--jea-blue) !important;
  color: #ffffff !important;
  border-color: var(--jea-blue) !important;
  text-decoration: none !important;
}

.obj_galley_link:hover::before,
.obj_article_summary .galleys_links a:hover::before {
  color: #ffffff !important;
}

/* Statistik artikel */
.obj_article_summary .meta {
  font-size: 12px !important;
  color: #555555 !important;
  margin-top: 5px !important;
}

/* ==================================================
   6. SIDEBAR
   ================================================== */

.jea-sidebar-box,
.pkp_block {
  background: #ffffff !important;
  border: 1px solid var(--jea-border) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.jea-sidebar-box h3,
.pkp_block .title {
  background: var(--jea-blue) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: -10px -10px 10px -10px !important;
  padding: 8px 10px !important;
  border-radius: 8px 8px 0 0 !important;
}

.jea-sidebar-box a,
.pkp_block .content a {
  display: block !important;
  background: var(--jea-blue-soft) !important;
  border-left: 4px solid var(--jea-pink) !important;
  color: var(--jea-blue-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 7px 8px !important;
  margin-bottom: 6px !important;
  text-decoration: none !important;
}

.jea-sidebar-box a:hover,
.pkp_block .content a:hover {
  background: #e8f7fd !important;
  color: var(--jea-blue) !important;
  text-decoration: none !important;
}

.jea-sidebar-box p {
  font-size: 12px !important;
  line-height: 1.5 !important;
  margin: 0 0 8px 0 !important;
}

.jea-sidebar-box img,
.pkp_block img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 8px auto !important;
}

/* ==================================================
   7. GAMBAR INDEXED BY
   ================================================== */

.pkp_structure_main img {
  max-width: 100%;
  height: auto;
}

/* ==================================================
   8. FOOTER
   ================================================== */

.pkp_structure_footer {
  background: #ffffff !important;
  border-top: 4px solid var(--jea-blue-dark) !important;
  border-bottom: none !important;
  margin-top: 36px !important;
  padding-top: 26px !important;
  padding-bottom: 34px !important;
}

.pkp_footer_content {
  background: #ffffff !important;
  color: #222222 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  border: none !important;
  box-shadow: none !important;
}

.pkp_footer_content a {
  color: var(--jea-blue-dark) !important;
  font-weight: 600 !important;
}

.pkp_footer_content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ==================================================
   9. RESPONSIVE HP
   ================================================== */

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }

  .pkp_site_name .is_img img,
  .pkp_site_name img {
    max-height: 160px !important;
  }

  .obj_article_summary {
    padding: 14px 12px 14px 54px !important;
    margin-bottom: 14px !important;
  }

  .obj_article_summary::before {
    left: 13px !important;
    top: 15px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }

  .obj_article_summary .title,
  .obj_article_summary .title a {
    font-size: 13.5px !important;
  }

  .obj_article_summary .authors,
  .obj_article_summary .subtitle,
  .obj_article_summary .doi {
    font-size: 12.5px !important;
  }

  .jea-sidebar-box,
  .pkp_block {
    margin-bottom: 12px !important;
  }

  .pkp_structure_footer {
    margin-top: 24px !important;
    padding-top: 22px !important;
  }
}