/* =====================================================================
   Sustainable Penal Reform Journal — tema OJS 3.5 (Default Theme)
   Unggah di: Settings > Website > Appearance > Advanced > Journal style sheet
   Palet:
     --navy  #16324F  header, footer, judul, tombol utama
     --teal  #18A999  aksen garis, ikon, latar tombol sekunder
     --mint  #DDF4EF  latar blok sidebar dan tabel informasi
     --paper #FAFBF8  latar halaman
     --gold  #D7A84B  aksen kecil: garis atas, menu aktif, tombol Submit
   Catatan: teal #18A999 terlalu terang untuk teks tautan di atas putih,
   jadi teks tautan memakai varian gelap --teal-ink (#0F7A6E).
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
  --navy: #16324F;
  --navy-deep: #0F2438;
  --teal: #18A999;
  --teal-ink: #0F7A6E;
  --mint: #DDF4EF;
  --paper: #FAFBF8;
  --gold: #D7A84B;
  --ink: #1D2A36;
  --muted: #5A6875;
  --rule: #D9E3E0;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Dasar ---------- */
body,
.pkp_structure_page {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--teal-ink); }
a:hover, a:focus { color: var(--navy); }
h1, h2, h3, h4,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
}

/* ---------- Header ---------- */
.pkp_structure_head {
  background: var(--navy) !important;
  border-top: 4px solid var(--gold);
  border-bottom: 0;
}
.pkp_head_wrapper { padding-top: 0; }
.pkp_site_name_wrapper { padding-top: 22px; padding-bottom: 18px; }
.pkp_site_name .is_text,
.pkp_site_name a.is_text {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 700;
  color: #FFFFFF !important;
  letter-spacing: .005em;
}
.pkp_site_name .is_img img { max-height: 96px; }

/* Menu pengguna (Register / Login) */
.pkp_navigation_user_wrapper a,
.pkp_navigation_user > li > a { color: var(--mint) !important; font-size: .85rem; }
.pkp_navigation_user > li > a:hover { color: var(--gold) !important; }

/* Menu utama */
.pkp_navigation_primary_row {
  background: var(--navy-deep) !important;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pkp_navigation_primary > li > a {
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 3px solid transparent;
  padding-bottom: .5rem;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current] {
  color: var(--gold) !important;
  border-bottom-color: var(--gold);
  background: transparent !important;
}
.pkp_navigation_primary ul {
  background: #FFFFFF;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--teal);
  border-radius: 0 0 6px 6px;
}
.pkp_navigation_primary ul a { color: var(--navy) !important; }
.pkp_navigation_primary ul a:hover { background: var(--mint) !important; color: var(--navy) !important; }

/* Kotak pencarian di menu */
.pkp_navigation_search_wrapper a { color: #FFFFFF !important; }
.pkp_navigation_search_wrapper a:hover { color: var(--gold) !important; }

/* Tombol menu pada layar ponsel */
.pkp_site_nav_toggle { background: var(--teal) !important; color: #FFFFFF; border-radius: 4px; }

/* ---------- Badan halaman ---------- */
.pkp_structure_content { background: #FFFFFF; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.pkp_structure_main::before,
.pkp_structure_main::after { display: none; } /* garis vertikal bawaan tema */

/* Gambar beranda (Homepage image) */
.homepage_image img { width: 100%; border-bottom: 4px solid var(--teal); }

/* Judul bagian beranda */
.page_index_journal h2,
.current_issue > h2 {
  font-size: 1.35rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--mint);
  position: relative;
}
.page_index_journal h2::after,
.current_issue > h2::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 64px; height: 2px; background: var(--teal);
}

/* Ringkasan terbitan & artikel */
.obj_issue_toc .heading .pub_id,
.obj_issue_toc .published { color: var(--muted); }
.obj_issue_toc .sections .section > h2,
.obj_issue_toc .section > h3 {
  background: var(--mint);
  color: var(--navy);
  font-family: var(--sans);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .45rem .75rem;
  border-left: 4px solid var(--teal);
}
.obj_article_summary { padding-bottom: 1rem; border-bottom: 1px dashed var(--rule); }
.obj_article_summary .title a {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
}
.obj_article_summary .title a:hover { color: var(--teal-ink); }
.obj_article_summary .authors { color: var(--muted); font-size: .92rem; }
.obj_article_summary .pages { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Tombol galley PDF & tombol umum */
.obj_galley_link,
.cmp_button,
.cmp_form .buttons button,
.pkp_button {
  border: 1px solid var(--navy) !important;
  color: var(--navy) !important;
  background: #FFFFFF !important;
  border-radius: 4px !important;
  font-weight: 600;
}
.obj_galley_link:hover,
.cmp_button:hover,
.pkp_button:hover {
  background: var(--navy) !important;
  color: #FFFFFF !important;
}
.obj_galley_link.pdf::before { color: inherit; }
.cmp_form .buttons button.submit,
.page_submissions .cmp_notification a,
.read_more {
  background: var(--navy) !important;
  color: #FFFFFF !important;
  border-color: var(--navy) !important;
}

/* Halaman artikel */
.obj_article_details .page_title { font-family: var(--serif); color: var(--navy); }
.obj_article_details .main_entry .item .label,
.obj_article_details .entry_details .item .label {
  font-family: var(--sans);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--teal-ink);
}
.obj_article_details .entry_details { border-left: 1px solid var(--rule); }
.obj_article_details .entry_details .item { border-bottom: 1px solid var(--rule); }

/* ---------- Sidebar ---------- */
.pkp_structure_sidebar .pkp_block {
  background: var(--mint);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  border: 0;
}
.pkp_block .title {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--navy) !important;
  border-bottom: 2px solid var(--teal);
  padding-bottom: .4rem;
  margin-bottom: .7rem;
  display: block;
}
.pkp_block ul { padding-left: 0; list-style: none; margin: 0; }
.pkp_block li { border-bottom: 1px solid rgba(22,50,79,.10); }
.pkp_block li:last-child { border-bottom: 0; }
.pkp_block li a {
  display: block;
  padding: .42rem 0;
  color: var(--navy);
  text-decoration: none;
  font-size: .94rem;
}
.pkp_block li a:hover { color: var(--teal-ink); padding-left: .25rem; }
.pkp_block img { max-width: 100%; height: auto; }

/* Blok tombol (Submit, Template, Guidelines) */
.sprj-btn {
  display: block;
  text-align: center;
  padding: .7rem .9rem;
  margin-bottom: .5rem;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: .01em;
}
.sprj-btn--gold { background: var(--gold); color: var(--navy) !important; }
.sprj-btn--gold:hover { background: #C9963A; }
.sprj-btn--navy { background: var(--navy); color: #FFFFFF !important; }
.sprj-btn--navy:hover { background: var(--navy-deep); }
.sprj-btn--line { background: #FFFFFF; color: var(--navy) !important; border: 1px solid var(--navy); }
.sprj-btn--line:hover { background: var(--navy); color: #FFFFFF !important; }

/* Logo pengindeks */
.sprj-logos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sprj-logos a { background: #FFFFFF; border-radius: 4px; padding: .4rem; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--rule); }
.sprj-logos a:hover { border-color: var(--teal); }

/* ---------- Konten tambahan beranda ---------- */
.sprj-about { display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem; align-items: start; margin-bottom: 1.5rem; }
.sprj-about img { width: 100%; border: 1px solid var(--rule); box-shadow: 0 6px 18px rgba(22,50,79,.12); }
.sprj-about p { margin-top: 0; text-align: justify; }
@media (max-width: 640px) { .sprj-about { grid-template-columns: 1fr; } .sprj-about img { max-width: 200px; } }

.sprj-info { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .95rem; }
.sprj-info th, .sprj-info td { padding: .55rem .8rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.sprj-info th { width: 34%; background: var(--mint); color: var(--navy); font-weight: 600; }
.sprj-info tr:first-child th, .sprj-info tr:first-child td { border-top: 3px solid var(--navy); }

.sprj-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.75rem; }
.sprj-actions .sprj-btn { margin: 0; }
@media (max-width: 640px) { .sprj-actions { grid-template-columns: 1fr; } }

.sprj-accred { border: 1px dashed var(--gold); background: #FFFFFF; padding: .6rem .8rem; border-radius: 4px; font-size: .9rem; color: var(--muted); }

/* ---------- Footer ---------- */
.pkp_structure_footer_wrapper {
  background: var(--navy) !important;
  border-top: 4px solid var(--teal);
  color: #E6EEF2;
}
.pkp_structure_footer_wrapper a { color: var(--gold) !important; }
.pkp_structure_footer_wrapper a:hover { color: #FFFFFF !important; }
.pkp_footer_content { padding-top: 2rem; padding-bottom: 1.5rem; font-size: .92rem; }
.pkp_brand_footer { background: var(--navy-deep); }
.pkp_brand_footer img { filter: brightness(0) invert(1); opacity: .7; }

.sprj-footer { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1.5rem; }
.sprj-footer h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); margin: 0 0 .5rem; }
.sprj-footer p { margin: 0 0 .35rem; }
.sprj-footer .cc { display: flex; gap: .6rem; align-items: center; margin-top: .6rem; }
@media (max-width: 760px) { .sprj-footer { grid-template-columns: 1fr; } }

/* Fokus keyboard tetap terlihat */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* =====================================================================
   BANNER BERANDA & THUMBNAIL (versi HTML, pengganti gambar)
   Dipakai oleh sprj-banner-thumbnail.html. Ukuran memakai cqw agar
   seluruh banner mengecil/membesar proporsional mengikuti lebar kolom.
   ===================================================================== */

/* ---- Sampul jurnal (dipakai di buku, tablet, ponsel) ---- */
.sprj-cover {
  container-type: inline-size;
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 3 / 4;
  background: var(--navy);
  box-sizing: border-box;
  padding: 11.1cqw 8.33cqw 7.2cqw;
  display: flex; flex-direction: column;
  font-family: var(--sans);
}
.sprj-cover::before { /* pita emas atas */
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2.78cqw; background: var(--gold);
}
.sprj-cover::after { /* cincin teal */
  content: ""; position: absolute; right: -30.56cqw; bottom: -22.2cqw;
  width: 88.9cqw; height: 88.9cqw; border-radius: 50%;
  border: 6.1cqw solid var(--teal); box-sizing: border-box; opacity: .45;
}
.sprj-cover p { margin: 0; position: relative; z-index: 1; }
.sprj-cover__s { margin-top: 3.3cqw !important; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 9.44cqw; line-height: 1; color: var(--mint); }
.sprj-cover__pr { margin-top: 2.2cqw !important; font-family: var(--serif); font-weight: 700; font-size: 14.44cqw; line-height: .95; color: var(--paper); }
.sprj-cover__j { margin-top: 3.9cqw !important; align-self: flex-start; background: var(--teal); color: var(--navy); font-weight: 700; font-size: 3.89cqw; letter-spacing: .32em; padding: 1.4cqw 2.8cqw 1.4cqw 3.6cqw; line-height: 1.2; }
.sprj-cover__j::after { /* cincin emas tipis */
  content: ""; position: absolute; right: 5.56cqw; bottom: 16.67cqw;
  width: 41.7cqw; height: 41.7cqw; border-radius: 50%;
  border: max(1px, .56cqw) solid var(--gold); box-sizing: border-box; pointer-events: none;
}
.sprj-cover__pub { margin-top: auto !important; font-size: 2.78cqw; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--mint); }

/* ---- Bingkai perangkat (umum) ---- */
.sprj-dev-book, .sprj-dev-tablet, .sprj-dev-phone { position: absolute; box-sizing: border-box; }
.sprj-dev-book { box-shadow: 0 30px 50px rgba(22,50,79,.28); }
.sprj-dev-book::after { /* tebal halaman buku */
  content: ""; position: absolute; left: 100%; top: 1%; height: 98%;
  background: repeating-linear-gradient(180deg, #F1F3F0 0 2px, #D6DBD7 2px 3px);
  box-shadow: 8px 20px 30px rgba(22,50,79,.18);
}
.sprj-dev-tablet, .sprj-dev-phone { background: #0E1A26; box-shadow: 0 24px 40px rgba(22,50,79,.32); }
.sprj-dev-screen { background: var(--navy); overflow: hidden; }
.sprj-dev-phone .sprj-dev-screen { display: flex; align-items: center; }
.sprj-dev-phone::before { /* speaker ponsel */
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 3px; background: #3A4A5C;
}

/* ---- Banner beranda 2000 × 895 ---- */
.sprj-hero {
  container-type: inline-size;
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 2000 / 895;
  background: var(--paper);
  color: var(--navy); font-family: var(--sans);
  margin: 0 0 1.5rem;
}
.sprj-hero::before { /* lingkaran mint */
  content: ""; position: absolute; left: 7.5%; top: 6.7%; width: 39%; aspect-ratio: 1; border-radius: 50%; background: var(--mint);
}
.sprj-hero::after { /* pita bawah emas–teal–navy */
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2.9%;
  background: linear-gradient(90deg, var(--gold) 0 7%, var(--teal) 7% 31%, var(--navy) 31% 100%);
}
.sprj-hero__devices { position: absolute; inset: 0; }
.sprj-hero__devices::before { /* cincin emas */
  content: ""; position: absolute; left: 5.5%; top: 2.23%; width: 43%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--gold); box-sizing: border-box; opacity: .55;
}
.sprj-hero__devices::after { /* bayangan lantai */
  content: ""; position: absolute; left: 7%; top: 90.7%; width: 38%; height: 3.8%; border-radius: 50%;
  background: var(--navy); opacity: .16; filter: blur(14px);
}
.sprj-hero .sprj-dev-book   { left: 26%; top: 13.41%; width: 22.5%; z-index: 1; }
.sprj-hero .sprj-dev-book::after { width: 5.33%; }
.sprj-hero .sprj-dev-tablet { left: 7.5%; top: 24.58%; width: 19.5%; padding: 2.5cqw 1.5cqw 3.5cqw; border-radius: 1.4cqw; z-index: 2; }
.sprj-hero .sprj-dev-phone  { left: 22%; top: 48.04%; width: 10.5%; padding: 2cqw .7cqw; border-radius: 1.6cqw; z-index: 3; }
.sprj-hero .sprj-dev-phone::before { top: .85cqw; width: 2cqw; height: .3cqw; }
.sprj-hero .sprj-dev-phone .sprj-dev-screen { height: 16.5cqw; }

.sprj-hero__text { position: absolute; left: 53.5%; top: 13.18%; width: 44%; display: flex; flex-direction: column; z-index: 4; }
.sprj-hero__text::before { content: ""; display: block; width: 3.6cqw; height: .25cqw; background: var(--gold); }
.sprj-hero__text p { margin: 0; }
.sprj-hero__s  { margin-top: 1.3cqw !important; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 4.6cqw; line-height: 1; color: var(--navy); }
.sprj-hero__pr { margin-top: .3cqw !important; font-family: var(--serif); font-weight: 700; font-size: 6.6cqw; line-height: .92; letter-spacing: -.01em; color: var(--navy); }
.sprj-hero__j  { margin-top: 1.1cqw !important; align-self: flex-start; background: var(--teal); color: var(--navy); font-weight: 700; font-size: 2.2cqw; letter-spacing: .34em; padding: .4cqw .8cqw .4cqw 1.1cqw; line-height: 1.1; }
.sprj-hero__pub { margin-top: 2.2cqw !important; font-size: 1.45cqw; line-height: 1.32; color: #2B4560; }
.sprj-hero__pub strong { color: var(--navy); font-weight: 700; }
.sprj-hero__mail { margin-top: 1.7cqw !important; display: flex; align-items: center; gap: .9cqw; font-size: 1.9cqw; font-weight: 700; color: var(--navy); letter-spacing: .01em; }
.sprj-hero__mail::before { /* ikon amplop dari garis */
  content: ""; flex: none; width: 2cqw; height: 1.45cqw; box-sizing: border-box;
  border: max(1.5px, .17cqw) solid var(--navy); border-radius: .15cqw;
  background: linear-gradient(to bottom right, transparent calc(50% - .09cqw), var(--navy) calc(50% - .09cqw) calc(50% + .09cqw), transparent calc(50% + .09cqw)) left top / 50% 70% no-repeat,
              linear-gradient(to bottom left,  transparent calc(50% - .09cqw), var(--navy) calc(50% - .09cqw) calc(50% + .09cqw), transparent calc(50% + .09cqw)) right top / 50% 70% no-repeat;
}

/* ---- Thumbnail jurnal 430 × 352 ---- */
.sprj-thumb {
  container-type: inline-size;
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 430 / 352;
  background: #FFFFFF;
}
.sprj-thumb::after { /* bayangan lantai */
  content: ""; position: absolute; left: 9.3%; top: 90.34%; width: 83.7%; height: 5.1%; border-radius: 50%;
  background: var(--navy); opacity: .18; filter: blur(8px);
}
.sprj-thumb .sprj-dev-book   { left: 45.58%; top: 6.25%; width: 46.51%; z-index: 1; box-shadow: 0 14px 22px rgba(22,50,79,.28); }
.sprj-thumb .sprj-dev-book::after { width: 6%; box-shadow: 4px 10px 14px rgba(22,50,79,.16); }
.sprj-thumb .sprj-dev-tablet { left: 5.12%; top: 26.14%; width: 39.53%; padding: 3.72cqw 2.33cqw 4.19cqw; border-radius: 3.26cqw; z-index: 2; box-shadow: 0 14px 22px rgba(22,50,79,.3); }
.sprj-thumb .sprj-dev-phone  { left: 30.7%; top: 47.73%; width: 22.33%; padding: 4.19cqw 1.63cqw; border-radius: 3.72cqw; z-index: 3; box-shadow: 0 12px 18px rgba(22,50,79,.34); }
.sprj-thumb .sprj-dev-phone::before { top: 1.6cqw; width: 4.65cqw; height: .93cqw; }
.sprj-thumb .sprj-dev-phone .sprj-dev-screen { height: 32.1cqw; }

/* Thumbnail di blok About beranda menggantikan <img> */
.sprj-about .sprj-thumb { box-shadow: none; }

/* =====================================================================
   TATA LETAK: sidebar di kanan, sejajar dengan bagian atas konten
   Tema Default OJS 3.5 menaruh sidebar setelah konten utama, sehingga
   pada layar lebar ia baru tampil di bawah. Grid ini menempatkan konten
   di kolom kiri dan sidebar di kolom kanan, keduanya mulai dari atas.
   Di layar < 992px sidebar tetap turun ke bawah konten (perilaku ponsel).
   ===================================================================== */
@media (min-width: 992px) {
  .pkp_structure_content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 32px;
    align-items: start;
  }
  .pkp_structure_content::before,
  .pkp_structure_content::after { display: none !important; content: none !important; }
  .pkp_structure_main {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    min-width: 0;
  }
  .pkp_structure_sidebar {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding-top: 1.5rem;
  }
}