@charset "UTF-8";

/*
  JURIBMAS OJS Stylesheet (versi dirapikan)
  Theme: Bright Blue, Light Blue, Gold, Clean Academic Layout
  OJS 3.3.x custom stylesheet.

  Catatan perapian:
  - Aturan ganda/bertumpuk (menu user Register/Login ditulis 5x, metrik
    artikel 3x, kontras warna, cover issue, DOI/keywords) digabung menjadi
    satu aturan per elemen dengan nilai akhir yang sebelumnya "menang".
  - Aturan yang saling membatalkan (mis. .obj_issue_toc .cover display:none
    lalu display:block !important; overflow:hidden lalu visible !important)
    dihapus dan diganti nilai akhirnya.
  - Media query yang seluruh isinya tertimpa aturan lain dihapus.
  - Bug hover tombol Login/Register (sudut jadi kotak & border hilang saat
    hover) diperbaiki.
  - Pembersihan 8 Nov 2026: dibuang aturan untuk class yang tidak dipakai
    di 135 halaman situs maupun di template (sisa stylesheet JUKTISI:
    homepage V2, What We Do, Editorial Board, custom menubar, aim*; metrik
    versi lama .article-summary-metrics/.article-metric-*; .doi_summary,
    .doi_link, fallback ORCID bawaan). Aturan bawaan OJS yang hanya muncul
    pada kondisi tertentu (blok Make a Submission, pengumuman, search)
    tetap dipertahankan.
*/

/* =========================================================
   01. GLOBAL VARIABLES AND RESET
   ========================================================= */

:root {
  --juktisi-navy: #1f4e79;
  --juktisi-navy-dark: #173b5f;
  --juktisi-blue: #2f6f9f;
  --juktisi-blue-soft: #397ca1;
  --juktisi-cyan: #3a7898;
  --juktisi-gold: #c8923b;
  --juktisi-brown: #8b5e34;
  --juktisi-text: #24304f;
  --juktisi-muted: #667085;
  --juktisi-border: #dbe6f3;
  --juktisi-border-blue: #b8d5e6;
  --juktisi-bg: #f6f9fc;
  --juktisi-soft: #eef6fb;
  --juktisi-gray: #f2f4f7;
  --juktisi-gray-hover: #e6e9ef;
  --juktisi-cream: #f7efe6;
  --juktisi-white: #ffffff;
  --juktisi-shadow: 0 10px 28px rgba(13, 110, 253, 0.14);
  --juktisi-radius: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--juktisi-text);
  background:
    radial-gradient(circle at 10% 10%, rgba(47, 111, 159, 0.08), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #f8fbff 100%);
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  line-height: 1.65;
}

a {
  color: var(--juktisi-navy);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--juktisi-brown);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* =========================================================
   02. MAIN STRUCTURE
   ========================================================= */

/* overflow: visible agar dropdown menu tidak terpotong */
.pkp_structure_page {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--juktisi-white);
  box-shadow: var(--juktisi-shadow);
  border-radius: 0 0 var(--juktisi-radius) var(--juktisi-radius);
  overflow: visible !important;
}

.pkp_structure_content {
  font-size: 15px;
  margin-bottom: 0.5rem;
  background: var(--juktisi-white);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  border-radius: var(--juktisi-radius);
}

.pkp_structure_main {
  padding: 24px 28px;
  background: var(--juktisi-white);
}

.pkp_structure_sidebar {
  padding-top: 18px;
}

/* URL panjang (mis. di About the Journal, referensi) dipotong ke baris baru
   agar tidak melebar keluar layar di HP/tablet */
.pkp_structure_main,
.pkp_structure_sidebar {
  overflow-wrap: anywhere;
}

.pkp_structure_sidebar:before {
  border-left: 1px solid var(--juktisi-border);
}

/* =========================================================
   03. HEADER AND JOURNAL LOGO
   ========================================================= */

.pkp_structure_head {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  overflow: visible !important;
  background: linear-gradient(135deg, var(--juktisi-navy) 0%, var(--juktisi-blue-soft) 48%, var(--juktisi-cyan) 100%);
}

.pkp_structure_head:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(255, 255, 255, 0.18), transparent 25%),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 76% 90%, rgba(200, 146, 59, 0.20), transparent 30%);
  pointer-events: none;
}

.pkp_site_name,
.pkp_site_name .is_img {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}

.pkp_site_name .is_img img {
  display: block;
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: cover;
}

/* =========================================================
   04. PRIMARY NAVIGATION + DROPDOWN
   ========================================================= */

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_site_nav_menu {
  background: var(--juktisi-gray) !important;
}

.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  overflow: visible !important;
}

.pkp_navigation_primary_row {
  padding: 8px 12px;
  border-bottom: 1px solid var(--juktisi-border) !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08) !important;
}

#navigationPrimary > li {
  position: relative;
}

#navigationPrimary > li > a,
#navigationPrimary ul a {
  color: var(--juktisi-navy) !important;
  background: transparent !important;
  font-weight: 700;
  letter-spacing: 0.1px;
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus,
#navigationPrimary ul a:hover,
#navigationPrimary ul a:focus {
  color: var(--juktisi-brown) !important;
  background: var(--juktisi-gray-hover) !important;
  text-decoration: none;
}

/* Submenu */
#navigationPrimary li ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: var(--juktisi-white);
  border: 1px solid var(--juktisi-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 99999;
}

#navigationPrimary li ul li {
  width: 100%;
}

#navigationPrimary li ul li a {
  display: block;
  padding: 12px 16px;
}

/* Hover submenu tanpa efek yang mengubah ukuran */
.pkp_nav_list ul a:hover {
  display: block;
  padding-left: 16px !important;
  border-left: none !important;
}

/* =========================================================
   05. USER NAVIGATION (REGISTER / LOGIN / PROFILE)
   ========================================================= */

.pkp_navigation_user,
.pkp_navigation_user_wrapper,
.pkp_navigation_user > li,
.pkp_nav_list li.profile {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pkp_nav_list li.profile {
  padding: 3px 10px;
  font-size: 15px;
  margin-left: 8px;
  margin-right: 5px;
}

/* Dasar semua tombol user nav */
.pkp_navigation_user > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  min-height: 32px !important;
  padding: 7px 16px !important;
  margin: 3px 5px !important;
  background: transparent !important;
  color: var(--juktisi-navy) !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 14px rgba(31, 78, 121, 0.16) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: all 0.2s ease !important;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  background: var(--juktisi-gray-hover) !important;
  color: var(--juktisi-navy-dark) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Login */
.pkp_navigation_user > li > a[href*="login"] {
  background: #f8fbff !important;
  border: 1px solid var(--juktisi-border-blue) !important;
}

.pkp_navigation_user > li > a[href*="login"]:hover,
.pkp_navigation_user > li > a[href*="login"]:focus {
  background: var(--juktisi-soft) !important;
  border-color: var(--juktisi-blue-soft) !important;
  box-shadow: 0 7px 18px rgba(31, 78, 121, 0.20) !important;
}

/* Register ("register" juga mencakup "user/register") */
.pkp_navigation_user > li > a[href*="register"] {
  background: #f7c65f !important;
  color: var(--juktisi-navy-dark) !important;
  border: 1px solid #d9a441 !important;
}

.pkp_navigation_user > li > a[href*="register"]:hover,
.pkp_navigation_user > li > a[href*="register"]:focus {
  background: #d9a441 !important;
  border-color: var(--juktisi-gold) !important;
  box-shadow: 0 7px 18px rgba(200, 146, 59, 0.28) !important;
}

/* =========================================================
   06. SEARCH
   ========================================================= */

.pkp_head_wrapper .pkp_search,
.pkp_head_wrapper .pkp_search a,
.pkp_head_wrapper .pkp_search button,
.pkp_search .search_prompt,
.pkp_search .search_prompt:before,
.pkp_search .search_prompt:after {
  color: var(--juktisi-navy) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.pkp_search .search_prompt {
  font-weight: 700;
}

.pkp_search input,
.pkp_search .search_input,
.pkp_search .query {
  color: var(--juktisi-navy) !important;
  background: var(--juktisi-white) !important;
  border-color: var(--juktisi-border-blue) !important;
}

.pkp_search input::placeholder {
  color: var(--juktisi-blue-soft) !important;
  opacity: 1 !important;
}

/* =========================================================
   07. HOMEPAGE AND ADDITIONAL CONTENT
   ========================================================= */

.pkp_page_index .homepage_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--juktisi-radius) var(--juktisi-radius) 0 0;
}

.pkp_page_index .additional_content {
  border-top: 0;
  padding: 16px 0 0;
  text-align: justify;
}

.row {
  margin-right: 0;
  margin-left: 0;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* =========================================================
   08. BUTTONS AND SUBMISSION LINKS
   ========================================================= */

/* Tombol Make a Submission (tetap penuh) */
.cmp_manuscript_button,
.block_make_submission a {
  display: inline-block;
  width: 100%;
  background: var(--juktisi-navy);
  color: var(--juktisi-white) !important;
  border: 1px solid var(--juktisi-navy);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none !important;
  font-weight: 700;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.cmp_manuscript_button:hover,
.block_make_submission a:hover {
  background: var(--juktisi-brown);
  border-color: var(--juktisi-brown);
}

/* Tombol PDF / galley: outline sederhana (latar putih, garis & teks biru).
   line-height ditimpa karena bawaan tema (~2.86rem) membuat box tinggi. */
.obj_galley_link,
.obj_article_summary > .galleys_links a,
.obj_article_details .entry_details .item.galleys .galleys_links a {
  display: inline-block;
  padding: 4px 14px;
  background: var(--juktisi-white) !important;
  color: var(--juktisi-navy) !important;
  border: 1px solid var(--juktisi-navy) !important;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.obj_galley_link:before {
  color: inherit !important;
}

.obj_galley_link:hover,
.obj_galley_link:focus,
.obj_article_summary > .galleys_links a:hover,
.obj_article_details .entry_details .item.galleys .galleys_links a:hover {
  background: var(--juktisi-navy) !important;
  color: var(--juktisi-white) !important;
}

/* =========================================================
   09. ISSUE ARCHIVE, TABLE OF CONTENTS, ISSUE COVER
   ========================================================= */

.obj_issue_toc .description,
.obj_issue_summary .description {
  text-align: justify;
}

.obj_issue_summary {
  margin: 0 1.5rem 1rem;
  padding: 1rem 1rem 1rem 1.25rem;
  border-left: 4px solid var(--juktisi-navy);
  background: var(--juktisi-bg);
  border-radius: 0 var(--juktisi-radius) var(--juktisi-radius) 0;
}

.page_issue_archive .issues_archive > li {
  margin: 0;
  padding: 1.4rem 0 0 0.7rem;
}

.obj_issue_toc .sections:not(:first-child) {
  margin-top: 0;
}

/* Judul section ("Articles"): di beranda OJS 3.3 memakai h3, di halaman issue h2.
   Garis tipis bawaan tema (.section:before) dimatikan agar diganti bar biru. */
.obj_issue_toc .section:before {
  display: none;
}

.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
  display: block;
  position: relative;
  left: 0;
  margin: 0 0 1rem;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.3px;
  border: 0;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 800;
  text-transform: none;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--juktisi-navy), var(--juktisi-blue));
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(13, 110, 253, 0.18);
}

/* Thumbnail cover issue */
.obj_issue_toc .cover,
.current_issue .cover,
.current_issue_cover {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.obj_issue_toc .cover {
  float: left !important;
  width: 180px !important;
  max-width: 180px !important;
  margin: 0 22px 16px 0 !important;
  padding: 0 !important;
}

.obj_issue_toc .cover img,
.current_issue .cover img,
.current_issue_cover img {
  display: block !important;
  width: 100% !important;
  max-width: 180px !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 1px solid var(--juktisi-border) !important;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12) !important;
}

.obj_issue_toc:after,
.current_issue:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Cover issue mengapung (float) di kiri. Blok judul issue dibuat membungkus
   cover (flow-root) dan daftar artikel selalu mulai di bawah cover (clear),
   agar bar "Articles" & kartu pertama tidak menimpa/terdorong oleh cover.
   Terjadi di tablet (mis. Samsung) saat isi blok judul lebih pendek dari cover. */
.obj_issue_toc .heading {
  display: flow-root;
}

.obj_issue_toc .sections {
  clear: both;
}

/* =========================================================
   10. ARTICLE SUMMARY CARDS
   ========================================================= */

.obj_article_summary {
  background: var(--juktisi-white);
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 14px;
  text-align: justify;
  border: 1px solid var(--juktisi-border);
  border-left: 5px solid var(--juktisi-gold);
  padding: 1rem 1.25rem;
  border-radius: var(--juktisi-radius);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
  margin-bottom: 1rem;
}

.obj_article_summary:hover {
  border-left-color: var(--juktisi-navy);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
}

/* Label "Open Access" (pil oranye) di atas judul (CSS saja, tanpa ubah template) */
.obj_article_summary::before {
  content: "Open Access";
  display: inline-block;
  margin: 0 0 6px;
  padding: 3px 11px 3px 25px;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: #D9730D;
  border: 1px solid #F5B971;
  border-radius: 999px;
  background: #FFF6EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11V6.5a4 4 0 0 1 8 0V9' fill='none' stroke='%23D9730D' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='2' y='11' width='14' height='11' rx='2' fill='%23D9730D'/%3E%3C/svg%3E") no-repeat 10px center;
  background-size: 11px 11px;
}

.obj_article_summary .cover {
  display: block;
  float: left;
  width: 70px;
  height: auto;
  margin-right: 15px;
  border-radius: 8px;
  overflow: hidden;
}

/* Judul rata kiri: rata kiri-kanan (justify) membuat celah besar antarkata,
   terutama di layar sempit */
.obj_article_summary > .title {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 800;
  font-size: 19px;
  text-transform: none;
  line-height: 1.35;
  text-align: left;
}

.obj_article_summary > .title a {
  display: block;
  color: #26304f;
  font-size: 19px;
  text-decoration: none;
}

.obj_article_summary > .title a:hover {
  color: var(--juktisi-brown);
  text-decoration: none;
}

.obj_article_summary .authors {
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--juktisi-muted);
  text-transform: none;
}

/* Daftar penulis custom: <div class="consent"><b>Nama</b> <sup>(Afiliasi)</sup></div> */
/* Penulis dalam 2 kolom; afiliasi di baris sendiri dengan ikon institusi */
.obj_article_summary .authors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 10px;
  margin-top: 6px;
  /* ruang untuk nomor halaman di kanan */
  padding-right: 115px;
  text-align: left;
  overflow-wrap: anywhere;
  counter-reset: author;
}

/* padding-left = ruang nomor; font-size 0 menyembunyikan &nbsp; di template lama
   yang membuat baris kosong saat nama panjang turun baris */
.obj_article_summary .authors .consent {
  display: block;
  margin: 0;
  padding-left: 24px;
  font-size: 0;
  line-height: 1.35;
  counter-increment: author;
}

/* Nomor urut author (1, 2, 3 ...) di depan nama */
.obj_article_summary .authors .consent > b:before {
  content: counter(author);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 -24px;
  border-radius: 50%;
  background: var(--juktisi-navy);
  color: var(--juktisi-white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: 1px;
}

.obj_article_summary .authors .consent > b {
  color: var(--juktisi-navy);
  font-size: 15px;
  font-weight: 700;
}

.obj_article_summary .authors .consent > sup {
  display: block;
  position: static;
  top: auto;
  margin-top: 3px;
  padding-left: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  vertical-align: baseline;
  color: #4b5563;
}

/* Ikon institusi di depan afiliasi */
.obj_article_summary .authors .consent > sup:before {
  content: "\f19c";
  font-family: "FontAwesome";
  display: inline-block;
  width: 14px;
  margin: 0 6px 0 -20px;
  font-size: 12px;
  color: var(--juktisi-gold);
  text-align: center;
}

/* Nomor halaman di kanan atas daftar penulis */
.obj_article_summary .meta {
  position: relative;
}

.obj_article_summary .pages {
  position: absolute;
  top: 6px;
  right: 0;
}

/* Baris bawah kartu: tombol PDF di kiri, metrik di kanan (float, lihat
   article_summary-metrics.tpl), dipisah garis tipis di atasnya; DOI di bawahnya */
.obj_article_summary > .galleys_links {
  display: block;
  margin: 12px 0 8px;
  padding-top: 12px;
  border-top: 1px solid #eceff4;
}

.obj_article_summary > .galleys_links li {
  display: inline-block;
  margin: 0 6px 0 0;
}

/* =========================================================
   ORCID & EMAIL ICONS (dipakai di summary dan detail artikel)
   ========================================================= */

:root {
  --icon-orcid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23A6CE39' d='M256 128c0 70.7-57.3 128-128 128S0 198.7 0 128 57.3 0 128 0s128 57.3 128 128z'/%3E%3Cpath fill='%23fff' d='M86.3 186.2H70.9V79.1h15.4v107.1zM108.9 79.1h41.6c39.6 0 57 28.3 57 53.6 0 27.5-21.5 53.6-56.8 53.6h-41.8V79.1zm15.4 93.3h24.5c34.9 0 42.9-26.5 42.9-39.7C191.7 111.2 178 93 148 93h-23.7v79.4zM88.7 56.8c0 5.5-4.5 10.1-10.1 10.1s-10.1-4.6-10.1-10.1c0-5.6 4.5-10.1 10.1-10.1s10.1 4.6 10.1 10.1z'/%3E%3C/svg%3E");
  --icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%231f4e79'/%3E%3Cpath d='M6 8h12v8H6z' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='m6 8 6 4.6L18 8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Ikon bulat kecil yang bisa diklik (tanpa teks) */
.orcid-icon,
.tf-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  vertical-align: -2px;
  background: no-repeat center / 16px 16px;
  border-radius: 50%;
  text-decoration: none !important;
  transition: transform 0.15s ease;
}

.orcid-icon:hover,
.tf-icon:hover {
  transform: scale(1.15);
}

.orcid-icon,
.tf-orcid {
  background-image: var(--icon-orcid);
}

.tf-email {
  background-image: var(--icon-email);
}

.obj_article_summary .pages:before {
  content: "\f0f6";
  width: 20px;
  font-family: "FontAwesome";
  margin-right: 5px;
  font-size: 13px;
  color: var(--juktisi-gold);
}

.obj_article_summary > .galleys_links,
ul.galleys_links {
  list-style: none;
  padding-left: 0;
}

ul.galleys_links {
  margin-bottom: 0.5em;
}

/* ---------------------------------------------------------
   Metrik artikel (.juktisi-metrics) tampilan sederhana satu baris:
   [ikon] Abstract Views: 222 times | [ikon] Downloaded: 172 times
   Dipakai di detail artikel dan daftar artikel (article_summary-metrics.tpl).
   Label asli ("Full Text Views", "PDF Downloads") diganti lewat CSS.
   --------------------------------------------------------- */
.juktisi-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
  margin: 8px 0 14px;
  padding: 0;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
}

.juktisi-metric {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-left: 1px solid #c7ccd6;
  background: none;
  white-space: nowrap;
}

.juktisi-metric:first-child {
  padding-left: 0;
  border-left: 0;
}

/* Ikon: grafik batang (views), file PDF (downloads) */
.juktisi-metric:before {
  order: -2;
  margin-right: 5px;
  font-family: "FontAwesome";
  font-size: 13px;
  color: #6b7280;
}

.juktisi-metric:nth-child(1):before { content: "\f080"; }
.juktisi-metric:nth-child(2):before { content: "\f1c1"; color: #c0392b; }

/* Label asli disembunyikan, diganti teks baru di depan angka */
.juktisi-metric-label {
  order: -1;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.juktisi-metric-label br {
  display: none;
}

.juktisi-metric-label:before {
  margin-right: 4px;
  font-size: 13px;
  color: #6b7280;
}

.juktisi-metric:nth-child(1) .juktisi-metric-label:before { content: "Abstract Views:"; }
.juktisi-metric:nth-child(2) .juktisi-metric-label:before { content: "Downloaded:"; }

.juktisi-metric-number {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}

.juktisi-metric-number:after {
  content: " times";
  white-space: pre;
}

/* Di detail artikel: tepi kiri/kanan sama dengan bagian lain (30px) */
.obj_article_details .main_entry > .juktisi-metrics {
  margin: 0 30px 6px 30px;
}

/* DOI di daftar artikel */
.obj_article_summary .summary_doi {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--juktisi-text);
}

.obj_article_summary .dimensions-badge {
  margin: 8px 0 4px;
}

.entry_details .dimensions-badge-detail {
  margin-top: 12px;
}

/* Di daftar artikel: metrik di kanan, sebaris dengan tombol PDF.
   Blok metrik ditempel SEBELUM <ul class="galleys_links">. */
.obj_article_summary > .juktisi-metrics {
  float: right;
  margin: 29px 0 0 16px;
}

/* =========================================================
   12. ARTICLE DETAIL PAGE
   ========================================================= */

.obj_article_details > .page_title,
.obj_article_details .page_title,
.obj_article_details > .subtitle {
  text-align: left;
  color: var(--juktisi-navy);
  font-weight: 800;
  line-height: 1.35;
}

.obj_article_details .main_entry .label {
  display: inline-block;
  border: 0;
  font-weight: 800;
  text-transform: uppercase;
  width: 100%;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--juktisi-navy), var(--juktisi-blue));
}

/* Semua bagian kolom utama (penulis, DOI, keywords, abstrak, grafik, referensi)
   punya tepi kiri & kanan yang sama: 30px, agar rata dan tidak menempel
   ke garis pemisah sidebar. */
.obj_article_details .item {
  padding: 1em 30px 2em 30px;
}

.obj_article_details .main_entry > .item {
  padding-left: 30px;
  padding-right: 30px;
}

.obj_article_details .item.abstract,
.obj_article_details .item.references .value {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Referensi format APA 7th:
   tanpa nomor, hanging indent 0,5 inci (baris kedua dst. menjorok),
   rata kiri, jarak antar entri, tanpa garis pemisah.
   Isi teks (urutan nama, huruf miring judul jurnal, dll.) mengikuti
   yang diketik penulis di OJS.
   --------------------------------------------------------- */
.obj_article_details .item.references .tf-ref-count {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.85;
}

.obj_article_details .tf-references {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obj_article_details .tf-references > li {
  margin: 0 0 12px;
  padding: 0 0 0 0.5in;
  text-indent: -0.5in;
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
  color: #2e2e2e;
  overflow-wrap: anywhere;
}

.obj_article_details .tf-references > li:last-child {
  margin-bottom: 0;
}

.obj_article_details .tf-references a {
  color: var(--juktisi-navy);
  text-decoration: none;
}

.obj_article_details .tf-references a:hover {
  color: var(--juktisi-brown);
  text-decoration: underline;
}

.obj_article_details .main_entry .item .label {
  font-size: 16px;
}

.obj_article_details .entry_details .sub_item:not(:first-child) .label {
  display: inline-block;
  padding: 0.5em 0;
  margin: 0 20px;
  width: 83%;
  border-bottom: 1px solid var(--juktisi-navy);
}

.obj_article_details .entry_details .item > .value ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.obj_article_details .entry_details .item > .value ul li {
  padding: 5px 0;
}

.obj_article_details .entry_details .cover_image img {
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
}

.item.abstract {
  text-align: justify;
  padding-top: 0;
}

/* ---------------------------------------------------------
   Penulis di detail artikel, gaya Taylor & Francis:
   Nama A¹ (iD)(✉), Nama B² (iD), ... & Nama E⁵
   ¹ Afiliasi A   ² Afiliasi B ...   (nomor = urutan penulis)
   CONTACT  Nama  email
   --------------------------------------------------------- */
.obj_article_details .item.tf-authors {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--juktisi-border);
  font-size: 15px;
}

.tf-author-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  line-height: 1.8;
}

/* inline-block: nama + nomor + ikon + koma tetap satu kesatuan */
.tf-author-list > li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.tf-author-list > li:not(:last-child):after {
  content: ",";
  margin-right: 6px;
  color: var(--juktisi-text);
}

.tf-author-list > li:nth-last-child(2):after {
  content: " &";
  margin-right: 6px;
}

.tf-name {
  color: var(--juktisi-navy);
  font-size: 17px;
  font-weight: 700;
}

/* Nomor di belakang nama author ditulis "(1)", "(2)", ... */
.tf-aff-ref {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--juktisi-gold);
}

.tf-aff-ref:before {
  content: "(";
}

.tf-aff-ref:after {
  content: ")";
}

.tf-affiliations {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

/* Nomor di depan afiliasi ditulis "(1)", "(2)", ... sejajar teks;
   teks afiliasi yang turun baris tetap rata dengan baris pertama */
.tf-affiliations > li {
  position: relative;
  margin-bottom: 2px;
  padding-left: 30px;
}

.tf-aff-num {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--juktisi-gold);
}

.tf-aff-num:before {
  content: "(";
}

.tf-aff-num:after {
  content: ")";
}

.tf-contact {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--juktisi-text);
  background: var(--juktisi-soft);
  border-left: 3px solid var(--juktisi-navy);
  border-radius: 0 6px 6px 0;
}

.tf-contact-label {
  margin-right: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--juktisi-navy);
}

.tf-contact a {
  color: var(--juktisi-navy);
  word-break: break-all;
}

/* Ikon orang sebelum nama, ikon amplop sebelum email */
.tf-contact-name,
.tf-contact-email {
  display: inline-block;
  margin-right: 12px;
}

.tf-contact-name:before,
.tf-contact-email:before {
  font-family: "FontAwesome";
  display: inline-block;
  margin-right: 5px;
  font-size: 13px;
  font-weight: normal;
  color: var(--juktisi-navy);
}

.tf-contact-name:before {
  content: "\f007";
}

.tf-contact-email:before {
  content: "\f0e0";
}

/* DOI (oranye) & Keywords (biru) */
.obj_article_details .item.doi,
.obj_article_details .item.keywords {
  background: transparent !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* padding kiri 2em agar sejajar blok penulis & keywords (templates/.../article_details.tpl) */
.obj_article_details .item.doi {
  text-align: left;
  text-decoration: none;
  padding-left: 30px;
  padding-right: 30px;
}

.obj_article_details .item.keywords {
  text-transform: capitalize;
}

.obj_article_details .item.doi,
.obj_article_details .item.doi a,
.item.doi,
.item.doi a,
.item.doi:before {
  color: #F28C00 !important;
  font-weight: 700 !important;
}

.obj_article_details .item.keywords,
.obj_article_details .item.keywords .value,
.obj_article_details .item.keywords a,
.item.keywords,
.item.keywords .value,
.item.keywords a {
  color: var(--juktisi-navy) !important;
}

/* Label DOI & Keywords tanpa kapsul.
   Selektor .obj_article_details ... dipertahankan karena spesifisitasnya
   diperlukan untuk mengalahkan warna putih label .main_entry. */
.obj_article_details .item.doi .label,
.obj_article_details .item.keywords .label,
.item.doi .label,
.item.keywords .label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-right: 10px !important;
  width: auto !important;
  display: inline !important;
  border-radius: 0 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}

.obj_article_details .item.doi .label,
.item.doi .label {
  color: #F28C00 !important;
}

.obj_article_details .item.keywords .label,
.item.keywords .label {
  color: var(--juktisi-navy) !important;
}

/* =========================================================
   13. SIDEBAR BLOCKS
   ========================================================= */

.pkp_block {
  padding: 0 3px 12px 5px;
  font-size: 14px;
  line-height: 1.55;
}

.block_make_submission {
  padding: 15px 3px 8px 5px;
}

.pkp_block .title {
  width: 100%;
  min-height: 34px;
  background: linear-gradient(135deg, var(--juktisi-navy), var(--juktisi-blue));
  font-size: 13px;
  font-weight: 800;
  padding: 0.55em 0.8em;
  margin-bottom: 0;
  border: 0;
  text-align: center;
  border-radius: 12px 12px 0 0;
  font-family: "Source Sans Pro", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.pkp_block .content {
  background: var(--juktisi-white);
  border: 1px solid var(--juktisi-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.pkp_block li {
  border-radius: 0;
  position: relative;
  background: var(--juktisi-white);
  display: block;
}

.pkp_block ul > li {
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.pkp_block ul > li:last-child {
  border-bottom: 0;
}

.pkp_block ul > li a {
  color: var(--juktisi-navy) !important;
  padding: 0.75rem 1rem;
  display: flex;
  text-decoration: none;
  font-weight: 600;
}

.pkp_block ul > li a:hover {
  text-decoration: none;
  background: var(--juktisi-cream);
  color: var(--juktisi-brown) !important;
}

/* =========================================================
   14. ANNOUNCEMENTS, DOI LINK
   ========================================================= */

.block_announcements_article {
  padding: 1em;
  background: linear-gradient(135deg, var(--juktisi-navy), var(--juktisi-blue));
  border-radius: var(--juktisi-radius);
}

/* Teks putih di atas latar biru (satu aturan untuk semua) */
.pkp_block .title,
.pkp_block .title a,
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h2 a,
.obj_issue_toc .section > h3,
.obj_issue_toc .section > h3 a,
.obj_article_details .main_entry .label,
.obj_article_details .main_entry .label a,
.block_announcements_article,
.block_announcements_article a {
  color: var(--juktisi-white) !important;
}

/* =========================================================
   19. FOOTER AND BRAND
   ========================================================= */

.pkp_brand_footer {
  display: none;
}

.pkp_footer_content {
  color: var(--juktisi-text);
}

/* =========================================================
   20. RESPONSIVE RULES (semua media query digabung di sini)
   ========================================================= */

@media screen and (max-width: 991px) {
  .pkp_structure_page {
    max-width: 100%;
    border-radius: 0;
  }

  .pkp_structure_main {
    padding: 18px 14px;
    overflow: auto;
  }

  .pkp_block {
    padding: 0 0 18px;
  }

  /* Header: tema mengunci tinggi wrapper 2.857rem (~40px), padahal logo
     dibuat selebar layar; tanpa height:auto logo terpotong. */
  .pkp_head_wrapper,
  .pkp_site_name_wrapper {
    height: auto;
  }

  .has_site_logo .pkp_site_name {
    text-align: center;
    left: 0;
    padding-left: 0;
  }

  /* Tombol menu (☰) di pojok kanan atas, berlatar agar terbaca di atas logo */
  .pkp_site_nav_toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 5;
    width: 42px;
    height: 38px;
    margin: 0;
    padding: 0;
    background: rgba(31, 78, 121, 0.88);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }

  /* Menu terbuka: daftar rata kiri dengan garis pemisah */
  .pkp_site_nav_menu {
    top: auto;
    padding: 4px 0 12px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 24px rgba(16, 24, 40, 0.14);
  }

  .pkp_site_nav_menu a {
    color: var(--juktisi-navy);
  }

  .pkp_navigation_primary_row {
    padding: 0;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .pkp_navigation_primary_wrapper {
    text-align: left;
  }

  #navigationPrimary > li {
    display: block;
    border-bottom: 1px solid #e3e7ee;
  }

  #navigationPrimary > li > a {
    display: block;
    padding: 12px 18px;
    text-align: left;
  }

  /* Submenu tidak melayang (aturan dropdown desktop), tapi menjorok di bawah induknya */
  #navigationPrimary li ul {
    position: static;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0 0 0 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #navigationPrimary li ul li a {
    padding: 8px 18px;
    font-weight: 600;
  }

  .pkp_navigation_search_wrapper {
    padding: 8px 18px;
    text-align: left;
  }

  .pkp_navigation_user_wrapper {
    padding: 10px 14px 0;
  }

  /* width:auto: lebar bawaan tema + padding membuat halaman bisa digeser ke samping */
  .pkp_navigation_user {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: auto;
    max-width: 100%;
  }

  .pkp_navigation_user > li > a[href*="login"],
  .pkp_navigation_user > li > a[href*="register"] {
    min-width: 74px !important;
    margin: 4px 5px !important;
  }

  /* Margin negatif bawaan tema (-30px) lebih lebar dari padding konten (14px)
     sehingga daftar artikel melebar keluar layar */
  .obj_issue_toc .section {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Tablet: blok sidebar dua kolom agar tidak memanjang satu per satu */
@media screen and (min-width: 600px) and (max-width: 991px) {
  .pkp_structure_sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    align-items: start;
  }
}

/* HP: metrik yang turun baris tidak menyisakan garis "|" di awal baris */
@media screen and (max-width: 600px) {
  .juktisi-metrics {
    column-gap: 14px;
  }

  .juktisi-metric,
  .juktisi-metric:first-child {
    padding: 0;
    border-left: 0;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .pkp_structure_main {
    padding: 12px 10px;
    margin-bottom: 1rem;
  }

  .pkp_structure_head {
    min-height: auto;
  }

  .obj_article_details .item,
  .obj_article_details .main_entry > .item {
    padding: 1rem 12px;
  }

  .obj_article_details .main_entry > .juktisi-metrics {
    margin: 0 12px 6px;
  }

  .obj_article_summary {
    padding: 0.9rem;
  }

  .obj_article_summary .cover {
    float: none;
    width: 90px;
    margin: 0 0 12px 0;
  }

  .obj_article_summary .authors {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
  }

  .obj_article_summary .pages {
    position: static;
    margin-top: 6px;
  }

  .pkp_nav_list li.profile {
    margin: 6px 8px;
    text-align: center;
  }

  .pkp_block .title {
    font-size: 12px;
  }

  .obj_issue_toc .cover,
  .current_issue .cover,
  .current_issue_cover {
    float: none !important;
    width: 130px !important;
    max-width: 130px !important;
    margin: 0 0 14px 0 !important;
  }

  .obj_issue_toc .cover img,
  .current_issue .cover img,
  .current_issue_cover img {
    max-width: 130px !important;
  }

  /* Layar kecil: metrik tidak lagi di kanan, tampil di baris sendiri di atas tombol PDF */
  .obj_article_summary > .juktisi-metrics {
    float: none;
    margin: 0 0 8px;
  }
}

/* =========================================================
   21. PRINT CLEANUP
   ========================================================= */

@media print {
  body {
    background: #ffffff;
  }

  .pkp_navigation_primary_row,
  .pkp_structure_sidebar,
  .pkp_site_nav_toggle,
  .block_make_submission,
  .pkp_brand_footer {
    display: none !important;
  }

  .pkp_structure_page,
  .pkp_structure_content,
  .obj_article_summary {
    box-shadow: none;
    border-radius: 0;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }
}