/* ====== HSJPI-like skin for JPV (OJS 3) ====== */
:root{
  --j-primary: #1f4e79;      /* ganti sesuai HSJPI */
  --j-primary-600:#163a5a;
  --j-accent:  #ff8a00;      /* aksen/cta */
  --j-text:    #1f2937;
  --j-muted:   #6b7280;
  --j-bg:      #ffffff;
  --j-bg-soft: #f7f7f9;
  --j-border:  #e5e7eb;
  --radius:    10px;
  --shadow:    0 6px 18px rgba(0,0,0,.06);
  --shadow-soft:0 2px 10px rgba(0,0,0,.05);
  --font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,"Noto Sans",sans-serif;
}

/* Base */
body{
  font-family: var(--font);
  color: var(--j-text);
  background: var(--j-bg);
}
a{ color: var(--j-primary); }
a:hover{ color: var(--j-primary-600); }

/* Header / Site name / Nav */
.pkp_site_name, .pkp_page_header .site-name, .pkp_head_wrapper .site-name{
  font-weight:700;
  letter-spacing:.3px;
}
.pkp_navigation_primary > li > a{
  padding: .8rem 1rem;
  border-radius: 8px;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus{
  background: var(--j-bg-soft);
}

/* Buttons */
.pkp_button, .cmp_button, .obj_galley_link, .cmp_form .submit, .cmp_notification .request{
  background: var(--j-primary);
  border: none;
  color: #fff !important;
  border-radius: 999px;
  padding: .6rem 1.1rem;
  box-shadow: var(--shadow-soft);
}
.pkp_button:hover, .cmp_button:hover, .obj_galley_link:hover{
  background: var(--j-primary-600);
}

/* Section titles */
.pkp_page_index h2, .pkp_page_index h3, .page_index_journal h2{
  border-bottom: 2px solid var(--j-border);
  padding-bottom: .4rem;
  margin-bottom: .8rem;
}

/* Home: Issue / Article cards */
.obj_issue_summary, .cmp_article_list .article-summary, .obj_article_summary{
  border:1px solid var(--j-border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
}
.obj_issue_summary:hover, .cmp_article_list .article-summary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

/* Sidebar blocks */
.pkp_block{
  border:1px solid var(--j-border);
  border-radius: var(--radius);
  background: var(--j-bg-soft);
  box-shadow: var(--shadow-soft);
  padding: 1rem;
}
.pkp_block .title{
  font-weight:700;
  color: var(--j-primary);
  margin-bottom: .6rem;
}

/* Footer */
.pkp_footer_content{
  border-top:1px solid var(--j-border);
  background:#fafafa;
}
.pkp_footer_content a{ color: var(--j-primary); }

/* Tables (About, ISSN, dsb.) */
table{
  border-collapse: collapse;
  width: 100%;
}
table td, table th{
  border-bottom:1px solid var(--j-border);
  padding:.6rem .7rem;
  vertical-align: top;
}
table tr:nth-child(odd){ background:#fafafa; }

/* Indexing logos bar (opsional) */
.indexing-logos{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--j-border); margin-bottom:16px;
}
.indexing-logos img{
  max-height:42px; height:auto; width:auto;
  filter: grayscale(30%);
  transition: filter .2s ease, transform .2s ease;
}
.indexing-logos img:hover{ filter:none; transform: translateY(-2px); }

/* Cover + detail table (layout dua kolom) */
.jpv-about-grid{
  display:grid; grid-template-columns: 220px 1fr; gap: 16px; align-items:start;
}
.jpv-about-grid .cover{
  border:1px solid var(--j-border); border-radius: var(--radius);
  background:#fff; padding:10px; box-shadow: var(--shadow-soft);
  text-align:center;
}
.jpv-about-grid .cover img{ max-width:100%; height:auto; }

/* Announcements / blocks spacing */
.cmp_announcements, .cmp_news{ gap:18px; }

/* Badges */
.badge{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background: var(--j-bg-soft); color: var(--j-primary); border:1px solid var(--j-border);
  font-size:.86rem;
}

/* Forms / search */
.pkp_search .search_controls input[type="text"]{
  border-radius: 999px; border:1px solid var(--j-border); padding:.55rem .9rem;
}

/* HR separator */
hr{ border:0; border-top:1px solid var(--j-border); margin: 1rem 0; }

/* Responsive tweaks */
@media (max-width: 992px){
  .jpv-about-grid{ grid-template-columns: 1fr; }
  .pkp_navigation_primary > li > a{ padding:.7rem .8rem; }
}