/* =====================================================================
   JURNAL META-YURIDIS — OJS 2.x / BPTIKBLUE
   Redesain stylesheet pengganti (bukan patch tambahan)
   Tema: maroon elegan + hover emas

   Catatan pemasangan:
   Unggah file ini sebagai Journal Style Sheet yang aktif. Hapus/ganti
   stylesheet kustom versi perbaikan sebelumnya, jangan ditumpuk manual.
   ===================================================================== */

:root {
  --my-maroon: #650019;
  --my-maroon-mid: #790021;
  --my-maroon-dark: #430010;
  --my-maroon-deep: #30000a;
  --my-gold: #e0b84f;
  --my-gold-light: #f5d982;
  --my-ink: #30232a;
  --my-muted: #76636b;
  --my-line: #eadde1;
  --my-paper: #ffffff;
  --my-page: #f7f4f5;
}

/* ------------------------------- Dasar ------------------------------- */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  margin: 0 !important;
  color: var(--my-ink);
  background: var(--my-page);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* Header jurnal: satu banner gambar penuh dari tepi kiri sampai tepi kanan viewport.
   Gunakan gambar header asli sebagai satu-satunya banner; background duplikat
   dimatikan agar tidak membuat skala Home dan halaman lain berbeda. Teks judul
   HTML disembunyikan secara visual karena nama jurnal sudah tercetak pada gambar. */
#header {
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;
  float: none !important;
  overflow: hidden !important;
  background-color: var(--my-maroon-dark) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 4px solid var(--my-gold) !important;
  text-align: center !important;
  line-height: 0 !important;
}

#headerTitle {
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
  line-height: 0 !important;
}

/* Link/heading pembungkus gambar harus sama lebar dengan banner, bukan shrink-to-fit. */
#headerTitle h1,
#headerTitle h2,
#headerTitle h3,
#headerTitle a {
  display: block !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  text-align: center !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Banner asli membentang penuh; jangan membatasi ke lebar intrinsik gambar. */
#headerTitle img,
#header img:not(#headerTitle img) {
  display: block !important;
  position: static !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
}

/* Hilangkan teks judul HTML yang menimpa nama jurnal pada gambar, tetapi jangan
   menyembunyikan elemen gambar atau tautan pembungkusnya. */
#header h1,
#header h2,
#header h3,
#headerTitle .title,
#headerTitle .journalTitle,
#headerTitle .journal-title,
#headerTitle .journalName,
#headerTitle .journal-name,
#headerTitle .pageTitle,
#headerTitle .page-title {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
}

/* Sebagian markup tema menaruh teks judul di span/div di dalam header. Aturan ini
   hanya menghilangkan tampilan teks, bukan struktur atau gambar bannernya. */
#header :not(img) {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}
#header :not(img) {
  font-size: 0 !important;
  line-height: 0 !important;
}

/* -------------------- Layout utama tiga kolom ------------------------
   OJS 2 pada sejumlah tema menempatkan #rightSidebar di dalam #sidebar,
   bukan sebagai anak langsung #body. Sidebar kanan diposisikan relatif ke
   #body supaya tidak terjepit di kolom kiri. Ruang kolom kanan tetap
   disediakan sehingga area tengah tidak tertutup.
*/
#body {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(175px, 200px) minmax(0, 1fr) minmax(185px, 215px) !important;
  column-gap: 24px !important;
  row-gap: 20px !important;
  align-items: start !important;
  width: calc(100% - 40px) !important;
  max-width: 1700px !important;
  margin: 0 auto !important;
  padding: 12px 0 32px !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Kolom kiri: jangan biarkan aturan float lama mengecilkannya. */
#body > #sidebar,
#body > #leftSidebar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: static !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#body > #sidebar #leftSidebar,
#body > #sidebar > .leftSidebar {
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#body > #main {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Sidebar kanan: bekerja baik jika langsung di dalam #body maupun berada
   di dalam #sidebar (struktur yang dipakai beberapa skin OJS 2). */
#body > #rightSidebar,
#body #sidebar #rightSidebar {
  position: absolute !important;
  top: 12px !important;
  right: 0 !important;
  left: auto !important;
  float: none !important;
  clear: none !important;
  display: block !important;
  width: 215px !important;
  min-width: 0 !important;
  max-width: 215px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
}

/* Placeholder widths: ukuran kolom stabil di layar desktop. */
#body > #sidebar { min-width: 0 !important; }

/* Area konten tetap lebar, bersih, dan mudah dibaca. */
#main #content,
#content {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 0 24px !important;
  color: var(--my-ink);
  background: transparent !important;
  overflow-wrap: anywhere;
}

#main h1, #main h2, #main h3, #main h4,
#content h1, #content h2, #content h3, #content h4 {
  color: var(--my-maroon-dark) !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.35;
}

#main h1, #content h1 {
  margin-top: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--my-gold) !important;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 650;
}

#main p, #content p { margin: 0 0 1em; }
#main img, #content img { max-width: 100%; height: auto; }

#main blockquote, #content blockquote {
  margin: 1.25em 0;
  padding: 14px 18px;
  background: #fcf8f0;
  border-left: 4px solid var(--my-gold);
}

/* --------------------- Navigasi utama satu baris -------------------- */
#navbar, #nav, #topNav, #navigation, #mainNav,
.navbar, .topnav {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--my-maroon-dark) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 3px solid var(--my-gold) !important;
  box-shadow: 0 5px 14px rgba(48, 0, 10, .10) !important;
  z-index: 5;
}

#navbar ul, #nav ul, #topNav ul, #navigation ul, #mainNav ul,
.navbar ul, .topnav ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  background-image: none !important;
  overflow: visible !important;
}

#navbar ul li, #nav ul li, #topNav ul li,
#navigation ul li, #mainNav ul li,
.navbar ul li, .topnav ul li {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-direction: row !important;
  align-items: stretch !important;
  float: none !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

#navbar ul li a, #nav ul li a, #topNav ul li a,
#navigation ul li a, #mainNav ul li a,
.navbar ul li a, .topnav ul li a,
#navbar a, #nav a, #topNav a, #navigation a, #mainNav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 47px !important;
  margin: 0 !important;
  padding: 10px 9px !important;
  color: #fff !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap !important;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

#navbar ul li a:hover, #navbar ul li a:focus,
#nav ul li a:hover, #nav ul li a:focus,
#topNav ul li a:hover, #topNav ul li a:focus,
#navigation ul li a:hover, #navigation ul li a:focus,
#mainNav ul li a:hover, #mainNav ul li a:focus,
.navbar ul li a:hover, .navbar ul li a:focus,
.topnav ul li a:hover, .topnav ul li a:focus {
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
  background-image: none !important;
  box-shadow: inset 0 -3px 0 var(--my-gold-light) !important;
  text-decoration: none !important;
}

#navbar li.current a, #navbar li.active a,
#nav li.current a, #nav li.active a,
#topNav li.current a, #topNav li.active a,
#navigation li.current a, #navigation li.active a,
#mainNav li.current a, #mainNav li.active a {
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
}

/* ------------------ Sidebar kiri dan kanan maroon ------------------- */
#sidebar, #leftSidebar, #rightSidebar {
  color: #fff;
  background: transparent !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}

#sidebar .block, #leftSidebar .block, #rightSidebar .block,
#sidebar div.block, #leftSidebar div.block, #rightSidebar div.block {
  margin: 0 0 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  background: var(--my-maroon) !important;
  border: 1px solid var(--my-maroon-dark) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 16px rgba(48, 0, 10, .12) !important;
}

#sidebar .block h3, #sidebar .block h4,
#leftSidebar .block h3, #leftSidebar .block h4,
#rightSidebar .block h3, #rightSidebar .block h4 {
  margin: 0 !important;
  padding: 12px 13px !important;
  color: #fff !important;
  background: var(--my-maroon-dark) !important;
  background-image: linear-gradient(115deg, var(--my-maroon-dark), var(--my-maroon)) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--my-gold) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
  letter-spacing: .035em;
  text-transform: uppercase;
}

#sidebar .block ul, #leftSidebar .block ul, #rightSidebar .block ul {
  margin: 0 !important;
  padding: 7px !important;
  list-style: none !important;
  background: var(--my-maroon) !important;
}

#sidebar .block li, #leftSidebar .block li, #rightSidebar .block li {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  background: transparent !important;
}

#sidebar .block li:last-child, #leftSidebar .block li:last-child,
#rightSidebar .block li:last-child { border-bottom: 0 !important; }

#sidebar .block li a, #leftSidebar .block li a, #rightSidebar .block li a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  color: #fff !important;
  background: var(--my-maroon) !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, padding-left .18s ease !important;
}

#sidebar .block li a:hover, #sidebar .block li a:focus,
#leftSidebar .block li a:hover, #leftSidebar .block li a:focus,
#rightSidebar .block li a:hover, #rightSidebar .block li a:focus {
  padding-left: 14px !important;
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
  border-left-color: var(--my-gold-light) !important;
  text-decoration: none !important;
}

/*
   Menu HTML khusus di sidebar. Aturan mencakup tautan bertingkat juga,
   karena beberapa sub-menu pada screenshot tidak berada langsung di LI.
*/
ul.sidemenu.full,
#sidebar ul.sidemenu, #leftSidebar ul.sidemenu, #rightSidebar ul.sidemenu {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 7px !important;
  list-style: none !important;
  color: #fff !important;
  background: var(--my-maroon) !important;
  border: 1px solid var(--my-maroon-dark) !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 16px rgba(48, 0, 10, .12) !important;
}

ul.sidemenu.full li,
#sidebar ul.sidemenu li, #leftSidebar ul.sidemenu li, #rightSidebar ul.sidemenu li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
}

ul.sidemenu.full li:last-child,
#sidebar ul.sidemenu li:last-child, #leftSidebar ul.sidemenu li:last-child,
#rightSidebar ul.sidemenu li:last-child { border-bottom: 0 !important; }

ul.sidemenu.full a,
#sidebar ul.sidemenu a, #leftSidebar ul.sidemenu a, #rightSidebar ul.sidemenu a {
  display: block !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  color: #fff !important;
  background: var(--my-maroon) !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  float: none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, padding-left .18s ease !important;
}

/* Sub-menu seperti AI Author / AI Editor / AI Reviewer tetap terbaca. */
ul.sidemenu.full li li a,
#sidebar ul.sidemenu li li a, #leftSidebar ul.sidemenu li li a,
#rightSidebar ul.sidemenu li li a,
ul.sidemenu.full a + a {
  padding: 7px 10px 7px 18px !important;
  font-size: 12px !important;
  font-weight: 450 !important;
}

ul.sidemenu.full a:hover, ul.sidemenu.full a:focus,
#sidebar ul.sidemenu a:hover, #sidebar ul.sidemenu a:focus,
#leftSidebar ul.sidemenu a:hover, #leftSidebar ul.sidemenu a:focus,
#rightSidebar ul.sidemenu a:hover, #rightSidebar ul.sidemenu a:focus {
  padding-left: 15px !important;
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
  border-left-color: var(--my-gold-light) !important;
  text-decoration: none !important;
}

ul.sidemenu.full li.current > a,
ul.sidemenu.full li.active > a,
ul.sidemenu.full a[aria-current="page"] {
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
  border-left-color: var(--my-gold-light) !important;
  font-weight: 750 !important;
}

/* Images, badges, and certificate blocks in the left sidebar stay visible. */
#sidebar img, #leftSidebar img, #rightSidebar img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
#sidebar p, #leftSidebar p, #rightSidebar p { color: inherit; }

/* ----------------------- Tabel & formulir ---------------------------- */
#main table, #content table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  border-color: var(--my-line);
}
#main th, #content th {
  color: #fff !important;
  background: var(--my-maroon) !important;
  border-color: var(--my-maroon-dark) !important;
}
#main td, #content td { border-color: var(--my-line); }

input[type="text"], input[type="password"], input[type="email"],
input[type="search"], select, textarea {
  max-width: 100%;
  border: 1px solid #d9c5cc;
  border-radius: 4px;
}

input[type="submit"], input[type="button"], button, a.button {
  color: #fff !important;
  background: var(--my-maroon) !important;
  border: 1px solid var(--my-maroon-dark) !important;
  border-radius: 4px;
}
input[type="submit"]:hover, input[type="button"]:hover,
button:hover, a.button:hover {
  color: var(--my-maroon-dark) !important;
  background: var(--my-gold) !important;
  border-color: var(--my-gold) !important;
}

/* ------------------------------- Footer ------------------------------ */
#footer, #pageFooter, .footer {
  color: #f7e9ed !important;
  background: var(--my-maroon-dark) !important;
  border-top: 3px solid var(--my-gold) !important;
}
#footer a, #pageFooter a, .footer a { color: var(--my-gold-light) !important; }

/* ----------------------------- Responsif ---------------------------- */
@media (max-width: 1050px) {
  #body {
    grid-template-columns: minmax(155px, 180px) minmax(0, 1fr) !important;
    column-gap: 18px !important;
    width: calc(100% - 28px) !important;
  }
  #body > #sidebar, #body > #leftSidebar { grid-column: 1 !important; }
  #body > #main { grid-column: 2 !important; }
  #body > #rightSidebar,
  #body #sidebar #rightSidebar {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 14px !important;
  }
  #navbar ul, #nav ul, #topNav ul, #navigation ul, #mainNav ul,
  .navbar ul, .topnav ul { overflow-x: auto !important; }
}

@media (max-width: 680px) {
  #body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: calc(100% - 22px) !important;
    padding-top: 10px !important;
  }
  #body > #sidebar, #body > #leftSidebar,
  #body > #main, #body > #rightSidebar,
  #body #sidebar #rightSidebar {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #body > #sidebar, #body > #leftSidebar { order: 2 !important; }
  #body > #main { order: 1 !important; }
  #body > #rightSidebar, #body #sidebar #rightSidebar { order: 3 !important; display: block !important; }
  #headerTitle img, #header img { max-width: 100% !important; }
  #navbar ul, #nav ul, #topNav ul, #navigation ul, #mainNav ul,
  .navbar ul, .topnav ul {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #navbar ul li a, #nav ul li a, #topNav ul li a,
  #navigation ul li a, #mainNav ul li a,
  .navbar ul li a, .topnav ul li a {
    min-height: 43px !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   AREA KONTEN — META-YURIDIS
   Satu aturan konsisten untuk halaman pengantar, sampul, pengumuman,
   dan daftar isi. Tidak memakai grid global pada #content agar TOC tidak
   terseret ke kolom samping.
   ===================================================================== */

#main,
#main #content,
#content {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #35252c !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

#main #content,
#content {
  padding: 14px 0 28px !important;
  background: transparent !important;
}

#content h1, #content h2, #content h3, #content h4,
#main h1, #main h2, #main h3, #main h4 {
  color: #430010 !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#content h1, #main h1 {
  margin: 0 0 18px !important;
  padding: 0 0 12px !important;
  border-bottom: 2px solid #e0b84f !important;
  font-size: 29px !important;
}
#content h2, #main h2 {
  margin: 22px 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid #eadde1 !important;
  font-size: 25px !important;
}
#content h3, #main h3 {
  margin: 18px 0 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #eadde1 !important;
  font-size: 21px !important;
}
#content h4, #main h4 { font-size: 18px !important; }

#content p, #main #content p {
  margin: 0 0 1em !important;
  color: #35252c !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: left;
}
#content img, #main img { max-width: 100%; height: auto; }
#content a, #main #content a {
  color: #176d70 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s ease;
}
#content a:hover, #main #content a:hover { color: #9b7420 !important; }

/* Breadcrumb jangan ikut menyempit ketika sampul diletakkan di kanan. */
#breadcrumb {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 0 9px !important;
  color: #796971 !important;
  border-bottom: 1px solid #eadde1 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
#breadcrumb a { color: #650019 !important; text-decoration: none !important; }
#breadcrumb a:hover { color: #9b7420 !important; }

/* ---------------- Sampul dan pengantar jurnal di halaman depan --------
   OJS 2 menghasilkan #homepageImage setelah HTML deskripsi. Sampul
   diposisikan visual di kanan atas, sementara deskripsi di sebelah kiri.
   #content tetap block supaya tabel daftar isi tidak masuk ke grid kedua.
*/
#content:has(#homepageImage) {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

/* Batasi hanya area pengantar. Pengumuman, tabel, dan Table of Contents
   sengaja tidak masuk ke aturan lebar kolom deskripsi. */
#content:has(#homepageImage) > p,
#content:has(#homepageImage) > #journalDescription,
#content:has(#homepageImage) > .journalDescription,
#content:has(#homepageImage) > .aboutJournal {
  width: auto !important;
  max-width: calc(100% - 250px) !important;
  min-width: 0 !important;
}

#content:has(#homepageImage) > #breadcrumb,
#content:has(#homepageImage) > h1,
#content:has(#homepageImage) > h2,
#content:has(#homepageImage) > h3,
#content:has(#homepageImage) > #announcements,
#content:has(#homepageImage) > #currentIssue,
#content:has(#homepageImage) > #additionalHomeContent,
#content:has(#homepageImage) > #toc,
#content:has(#homepageImage) > #issueToc,
#content:has(#homepageImage) > .tocArticleList,
#content:has(#homepageImage) > table,
#content:has(#homepageImage) > .separator,
#content:has(#homepageImage) > hr {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  clear: both !important;
}

#content #homepageImage {
  display: block !important;
  position: absolute !important;
  top: 100px !important;
  right: 0 !important;
  left: auto !important;
  float: none !important;
  box-sizing: border-box !important;
  width: 220px !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  background: #fff !important;
  border: 1px solid #eadde1 !important;
  border-radius: 7px !important;
  box-shadow: 0 5px 16px rgba(48, 0, 10, .09) !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
#content #homepageImage img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#content #journalDescription,
#content #additionalHomeContent,
#content .journalDescription,
#content .aboutJournal {
  color: #35252c !important;
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
#content #journalDescription p,
#content .journalDescription p,
#content .aboutJournal p,
#content #additionalHomeContent p {
  margin: 0 0 14px !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: justify !important;
  text-justify: inter-word !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
}

/* Tabel informasi profil di dalam deskripsi menggunakan panel lembut. */
#content #journalDescription table,
#content #additionalHomeContent table,
#content .journalDescription table,
#content .aboutJournal table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #f4f1f2 !important;
  border: 1px solid #ebe3e6 !important;
  border-left: 3px solid #e0b84f !important;
  border-radius: 5px !important;
}
#content #journalDescription table td,
#content #journalDescription table th,
#content #additionalHomeContent table td,
#content #additionalHomeContent table th,
#content .journalDescription table td,
#content .journalDescription table th,
#content .aboutJournal table td,
#content .aboutJournal table th {
  padding: 7px 10px !important;
  color: #30232a !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  vertical-align: top !important;
}
#content #journalDescription table td:first-child,
#content #additionalHomeContent table td:first-child,
#content .journalDescription table td:first-child,
#content .aboutJournal table td:first-child {
  width: 28% !important;
  min-width: 105px !important;
  color: #66545b !important;
  font-weight: 600 !important;
}

/* ------------------- Pengumuman dan issue terkini -------------------- */
#content #announcements,
#content #currentIssue,
#content #toc,
#content #issueToc,
#content .tocArticleList {
  display: block !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 24px 0 0 !important;
  padding-top: 18px !important;
  border-top: 1px solid #eadde1 !important;
  overflow: visible !important;
}
#content #announcements h3,
#content #announcements h4,
#content #currentIssue h3,
#content #currentIssue h4 {
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  color: #650019 !important;
  border-bottom: 2px solid #e0b84f !important;
  font-size: 21px !important;
  line-height: 1.4 !important;
}
#content #announcements .announcementSummary,
#content .announcementSummary {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 1px solid #eadde1 !important;
  border-radius: 6px !important;
}
#content #announcements .announcementSummary h4,
#content .announcementSummary h4 {
  margin: 0 0 7px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 17px !important;
}

/* -------------------- Table of Contents — OJS 2.4 --------------------
   Markup OJS 2.4 yang benar:
   td.tocArticleTitleAuthors > div.tocTitle / div.tocAuthors
   td.tocArticleGalleysPages > div.tocGalleys / div.tocPages

   Catatan penting: link judul dan link PDF sama-sama dapat memakai class
   "file". Tombol hanya diterapkan ke link di dalam .tocGalleys, bukan ke
   setiap a.file di tabel.
*/
#content table.tocArticle {
  display: table !important;
  position: static !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  background: #fff !important;
}

#content table.tocArticle tbody {
  width: 100% !important;
}

#content table.tocArticle tr {
  display: table-row !important;
  width: 100% !important;
  background: #fff !important;
}

/* A thin separator spans the full width of each article row. */
#content table.tocArticle td {
  display: table-cell !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 13px 12px !important;
  color: #35252c !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #eadde1 !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* OJS creates a cover-image cell even when the article has no cover image.
   Hide that empty cell so it cannot steal width from the title. */
#content table.tocArticle td.tocArticleCoverImage:not(:has(img)) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

#content table.tocArticle td.tocArticleCoverImage:has(img) {
  width: 112px !important;
  min-width: 112px !important;
  padding: 12px 8px !important;
  text-align: center !important;
}

#content table.tocArticle td.tocArticleCoverImage img {
  display: block !important;
  width: auto !important;
  max-width: 96px !important;
  max-height: 140px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Broad title/authors column. These are the actual OJS 2.4 class names. */
#content table.tocArticle td.tocArticleTitleAuthors {
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 14px 13px !important;
  text-align: left !important;
  vertical-align: top !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Title wrapper must not inherit the maroon pill/button presentation. */
#content table.tocArticle td.tocArticleTitleAuthors .tocTitle {
  display: block !important;
  position: static !important;
  float: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #650019 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* The title is also an a.file on some OJS 2 skins. Keep it a plain link. */
#content table.tocArticle td.tocArticleTitleAuthors .tocTitle a,
#content table.tocArticle td.tocArticleTitleAuthors .tocTitle a.file {
  display: inline !important;
  position: static !important;
  float: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #650019 !important;
  -webkit-text-fill-color: #650019 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.55 !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: auto !important;
}

#content table.tocArticle td.tocArticleTitleAuthors .tocTitle a:hover,
#content table.tocArticle td.tocArticleTitleAuthors .tocTitle a.file:hover {
  color: #9b7420 !important;
  -webkit-text-fill-color: #9b7420 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: underline !important;
}

/* Author names remain beneath the title. */
#content table.tocArticle td.tocArticleTitleAuthors .tocAuthors {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #76636b !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Right-hand PDF/pages column uses the exact OJS 2.4 wrapper class. */
#content table.tocArticle td.tocArticleGalleysPages {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  padding: 14px 10px 12px !important;
  color: #76636b !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #eadde1 !important;
  text-align: right !important;
  vertical-align: top !important;
  white-space: normal !important;
}

#content table.tocArticle td.tocArticleGalleysPages .tocGalleys {
  display: block !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: right !important;
  white-space: normal !important;
}

/* PDF button style is limited ONLY to the galley column.
   Higher specificity also overrides the general #content a link color. */
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys a,
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys a.file,
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys li a,
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys li a.file {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  float: none !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 46px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 3px auto !important;
  padding: 5px 10px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #650019 !important;
  background-color: #650019 !important;
  background-image: none !important;
  border: 1px solid #650019 !important;
  border-radius: 5px !important;
  box-shadow: 0 2px 5px rgba(67, 0, 16, .12) !important;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

#content table.tocArticle td.tocArticleGalleysPages .tocGalleys a:hover,
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys a.file:hover,
#content table.tocArticle td.tocArticleGalleysPages .tocGalleys li a:hover {
  color: #430010 !important;
  -webkit-text-fill-color: #430010 !important;
  background: #e0b84f !important;
  background-color: #e0b84f !important;
  border-color: #e0b84f !important;
  text-decoration: none !important;
}

/* Page range is a separate line under the button. */
#content table.tocArticle td.tocArticleGalleysPages .tocPages {
  display: block !important;
  width: 100% !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  color: #76636b !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: right !important;
  white-space: nowrap !important;
}

#content table.tocArticle tr:hover td {
  background: #fffaf0 !important;
}

/* Section heading stays distinct, with a fine divider. */
#content h4.tocSectionTitle,
#content .tocSectionTitle {
  display: block !important;
  width: 100% !important;
  margin: 22px 0 8px !important;
  padding: 0 0 8px !important;
  color: #650019 !important;
  background: transparent !important;
  border-bottom: 1px solid #eadde1 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* OJS skin variants using div wrappers are supported without touching .file links globally. */
#content div.tocArticle,
#content .tocArticleSummary,
#content .articleSummary {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
  padding: 13px 15px !important;
  background: #fff !important;
  border: 1px solid #eee4e7 !important;
  border-left: 3px solid #e0b84f !important;
  border-radius: 5px !important;
}

/* ------------------------------ Responsive --------------------------- */
@media (max-width: 900px) {
  #content #homepageImage {
    width: 190px !important;
    max-width: 190px !important;
  }
  #content:has(#homepageImage) > p,
  #content:has(#homepageImage) > #journalDescription,
  #content:has(#homepageImage) > .journalDescription,
  #content:has(#homepageImage) > .aboutJournal {
    max-width: calc(100% - 215px) !important;
  }
}
@media (max-width: 640px) {
  #content:has(#homepageImage) #homepageImage,
  #content #homepageImage {
    position: static !important;
    width: min(100%, 240px) !important;
    max-width: 240px !important;
    margin: 10px auto 20px !important;
  }
  #content:has(#homepageImage) > p,
  #content:has(#homepageImage) > #journalDescription,
  #content:has(#homepageImage) > .journalDescription,
  #content:has(#homepageImage) > .aboutJournal {
    width: 100% !important;
    max-width: 100% !important;
  }
  #content #journalDescription p,
  #content .journalDescription p,
  #content .aboutJournal p,
  #content #additionalHomeContent p {
    text-align: left !important;
    font-size: 15px !important;
  }
  #content h1, #main h1 { font-size: 24px !important; }
  #content h2, #main h2 { font-size: 22px !important; }
  #content h3, #main h3 { font-size: 19px !important; }
  #content table.tocArticle td {
    padding: 9px 7px !important;
    font-size: 13px !important;
  }
  #content table.tocArticle td.tocArticleGalleysPages {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    padding: 10px 5px !important;
  }
  #content table.tocArticle td.tocArticleTitleAuthors .tocTitle,
  #content table.tocArticle td.tocArticleTitleAuthors .tocTitle a,
  #content table.tocArticle td.tocArticleTitleAuthors .tocTitle a.file {
    font-size: 14px !important;
    overflow-wrap: anywhere !important;
  }
  #content table.tocArticle td.tocArticleCoverImage:has(img) {
    width: 70px !important;
    min-width: 70px !important;
  }
  #content table.tocArticle td.tocArticleCoverImage:has(img) img {
    max-width: 58px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------- Home: normalisasi pembungkus daftar artikel -------------------
   Daftar Home dapat mempunyai pembungkus bertingkat yang berbeda lebar. Semua
   pembungkus yang memuat table.tocArticle dipaksa memenuhi kolom #content; tabel
   Issue tidak terkena aturan khusus ini. */
#container:has(#homepageImage) #content
  :not(table):not(tbody):not(tr):not(td):not(th):not(a):not(img):has(table.tocArticle) {
  display: block !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#container:has(#homepageImage) #content table.tocArticle {
  display: table !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kolom PDF dan nomor halaman tetap sama di setiap tabel artikel Home. */
#container:has(#homepageImage) #content table.tocArticle td.tocArticleGalleysPages {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  padding-left: 8px !important;
  padding-right: 10px !important;
  text-align: right !important;
  vertical-align: top !important;
}

#container:has(#homepageImage) #content table.tocArticle td.tocArticleGalleysPages .tocGalleys,
#container:has(#homepageImage) #content table.tocArticle td.tocArticleGalleysPages .tocPages {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: right !important;
}

/* Pertahankan garis footer Home seperti pada stylesheet sebelumnya. */
#container:has(#homepageImage) #content #pageFooter,
#container:has(#homepageImage) #content #footer,
#container:has(#homepageImage) #content .footer,
#container:has(#homepageImage) #content .separator,
#container:has(#homepageImage) #content hr {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
  float: none !important;
}

@media (max-width: 700px) {
  #header {
    width: 100vw !important;
    min-height: 0 !important;
    height: auto !important;
    background-image: none !important;
    margin-left: calc(50% - 50vw) !important;
  }
  #headerTitle {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
  #headerTitle h1,
  #headerTitle h2,
  #headerTitle h3,
  #headerTitle a {
    width: 100% !important;
    max-width: none !important;
  }
  #headerTitle img,
  #header img:not(#headerTitle img) {
    width: 100% !important;
    max-width: none !important;
  }
  #container:has(#homepageImage) #content table.tocArticle td.tocArticleGalleysPages {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
  }
}


/* =====================================================================
   V19 — PERBAIKAN KHUSUS HEADER HOME
   Penyebab: pada Home, elemen gambar di #headerTitle tidak tersedia/
   tidak dirender; v18 mematikan background-image dan akibatnya header
   runtuh menjadi garis tipis. Halaman selain Home tidak diubah.
   ===================================================================== */
body:has(#homepageImage) #header {
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  height: clamp(150px, 19.15vw, 290px) !important;
  min-height: clamp(150px, 19.15vw, 290px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding: 0 !important;
  float: none !important;
  overflow: hidden !important;
  background-color: #430010 !important;
  background-image: url("https://journal.upgris.ac.id/public/journals/32/homeHeaderTitleImage_en_US.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  border: 0 !important;
  border-bottom: 4px solid #e0b84f !important;
  text-align: center !important;
  line-height: 0 !important;
}

/* Di Home gunakan banner background sebagai satu-satunya gambar header.
   Ini mencegah gambar/teks judul berulang atau bertumpuk di atas banner. */
body:has(#homepageImage) #headerTitle,
body:has(#homepageImage) #headerTitle h1,
body:has(#homepageImage) #headerTitle h2,
body:has(#homepageImage) #headerTitle h3,
body:has(#homepageImage) #headerTitle a {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(#homepageImage) #header img {
  display: none !important;
}

@media (max-width: 700px) {
  body:has(#homepageImage) #header {
    width: 100vw !important;
    height: clamp(110px, 19.15vw, 150px) !important;
    min-height: clamp(110px, 19.15vw, 150px) !important;
    margin-left: calc(50% - 50vw) !important;
    background-image: url("https://journal.upgris.ac.id/public/journals/32/homeHeaderTitleImage_en_US.jpg") !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
}


/* =====================================================================
   V20 — RAPikan JARAK ISI SIDEBAR
   Hanya memberi ruang di sisi dalam blok USER dan JOURNAL CONTENT.
   Tidak menggeser atau mengubah lebar kotak sidebar.
   ===================================================================== */
#sidebarUser,
#leftSidebar #sidebarUser,
#rightSidebar #sidebarUser,
#sidebar div.block,
#leftSidebar div.block,
#rightSidebar div.block,
#leftSidebar .block,
#rightSidebar .block {
  box-sizing: border-box !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Jaga isi blok tetap masuk ke dalam area yang sudah diberi padding. */
#sidebarUser > *,
#sidebar div.block > *,
#leftSidebar div.block > *,
#rightSidebar div.block > *,
#leftSidebar .block > *,
#rightSidebar .block > * {
  box-sizing: border-box !important;
  max-width: 100%;
}

/* Form pencarian tidak menempel ke sisi kotak dan tetap muat di dalamnya. */
#sidebar form,
#leftSidebar form,
#rightSidebar form,
#sidebarUser form {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

#sidebar input[type="text"],
#sidebar input[type="search"],
#leftSidebar input[type="text"],
#leftSidebar input[type="search"],
#rightSidebar input[type="text"],
#rightSidebar input[type="search"] {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Beberapa variasi markup OJS 2.4 menggunakan ID tanpa #sidebar. */
#journalContent,
#search,
#browse {
  box-sizing: border-box !important;
  max-width: 100% !important;
}


/* =====================================================================
   V21 — SIDEBAR TANPA GARIS TEPI GELAP
   Mengembalikan tampilan sidebar maroon yang lebih bersih.
   Padding internal v20 tetap dipertahankan.
   ===================================================================== */
#sidebar .block,
#leftSidebar .block,
#rightSidebar .block,
#sidebar div.block,
#leftSidebar div.block,
#rightSidebar div.block,
ul.sidemenu.full,
#sidebar ul.sidemenu,
#leftSidebar ul.sidemenu,
#rightSidebar ul.sidemenu {
  border: 0 !important;
  outline: 0 !important;
}

/* Hindari garis kontur tambahan yang berasal dari elemen pembungkus. */
#sidebar .block,
#leftSidebar .block,
#rightSidebar .block,
#sidebar ul.sidemenu,
#leftSidebar ul.sidemenu,
#rightSidebar ul.sidemenu {
  box-shadow: none !important;
}


/* =====================================================================
   V25 — RESET SETUP > STEP 5 TANPA KOLOM ADMIN BUATAN
   Diagnosis: V24 menyempitkan setiap anak langsung #content menjadi
   calc(100% - 240px), sementara #homepageImage tetap diposisikan absolute.
   Akibatnya bagian 5.2 tampak berada dalam kolom sempit di samping panel.
   Berikut override hanya untuk halaman The Look; frontend tetap terpisah.
   ===================================================================== */

/* Pertahankan koreksi cover pada Home publik, bukan pada halaman pengaturan. */
body:has(#content #homepageImage):not(:has(#content input[type="file"])) #content #homepageImage {
  top: 29px !important;
}

/* Batalkan lebar kolom buatan v24: setiap bagian formulir menggunakan lebar
   normal kolom konten, jadi 5.2 tidak dipaksa menyempit karena panel gambar. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content > :not(#homepageImage),
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > p,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > #journalDescription,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > .journalDescription,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > .aboutJournal,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > h1,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > h2,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > h3,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > hr,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > .separator {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  clear: both !important;
}

/* Di Setup, #homepageImage bukan cover floating pada halaman publik.
   Kembalikan panel ke alur dokumen agar tidak menimpa judul 5.1/5.2,
   isian, maupun editor deskripsi. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content #homepageImage {
  display: block !important;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 18px 0 !important;
  padding: 14px !important;
  text-align: left !important;
  background: #fff !important;
  border: 1px solid #eadde1 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* Pratinjau gambar tetap memiliki ukuran terkendali dalam panel. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content #homepageImage img {
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto !important;
  max-width: min(100%, 260px) !important;
  max-height: 320px !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 12px 0 !important;
}

/* Formulir, tabel input, dan editor tidak boleh memiliki lebar melebihi konten. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content form,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content fieldset,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content iframe,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceLayout {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Hindari aturan Home publik yang mengecilkan teks pengantar saat dipakai
   di halaman pengaturan The Look. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content #journalDescription,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .journalDescription,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .aboutJournal,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content p {
  width: auto !important;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* Pada layar kecil, pertahankan satu kolom dan ukuran gambar yang responsif. */
@media (max-width: 700px) {
  body:has(#content input[type="file"]):has(#content input[type="radio"]) #content > :not(#homepageImage),
  body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > p,
  body:has(#content input[type="file"]):has(#content input[type="radio"]) #content:has(#homepageImage) > h2 {
    width: 100% !important;
    max-width: 100% !important;
  }

  body:has(#content input[type="file"]):has(#content input[type="radio"]) #content #homepageImage {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =====================================================================
   V26 — RUANG EDITOR JOURNAL DESCRIPTION LEBIH NYAMAN
   Khusus Setup > Step 5. Membatasi lebar editor TinyMCE agar tidak
   membentang berlebihan dan menambah tinggi area ketik agar konten
   mudah ditinjau serta diedit. Tidak mengubah halaman publik, cover,
   panel Homepage image, atau urutan bagian 5.1/5.2/5.3.
   ===================================================================== */

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table[id$="_tbl"].mceLayout,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceEditor table {
  display: table !important;
  box-sizing: border-box !important;
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  min-width: 0 !important;
  table-layout: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Kolom sel editor dan area toolbar tetap berada dalam lebar yang sama. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout > tbody,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout tr,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout td {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* Tambahkan ruang vertikal untuk mengedit deskripsi yang panjang.
   Selector mencakup TinyMCE lama yang digunakan OJS 2.4. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content iframe[id$="_ifr"],
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer iframe {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
}

/* Pada beberapa versi TinyMCE, ketinggian iframe ditentukan oleh sel ini. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer {
  box-sizing: border-box !important;
  height: 320px !important;
  min-height: 320px !important;
  max-width: 100% !important;
}

/* Batas lebar editor teks jika TinyMCE gagal aktif dan textarea terlihat. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea.mceEditor,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea[id*="description"] {
  display: block !important;
  box-sizing: border-box !important;
  width: min(100%, 780px) !important;
  max-width: 780px !important;
  min-height: 320px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Tombol toolbar jangan memaksakan lebar editor melebihi batasnya. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceToolbar,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceToolbar table {
  box-sizing: border-box !important;
  max-width: 100% !important;
}


/* =====================================================================
   V27 — HIDE TEXTAREA SUMBER HTML DUPLIKAT
   TinyMCE OJS 2.4 menyembunyikan textarea asal setelah editor visual aktif.
   V26 secara keliru memaksa textarea.mceEditor tampil sebagai kotak biasa,
   sehingga kode HTML mentah tampak di atas editor visual. Sembunyikan
   textarea asal hanya pada halaman Setup > The Look; editor visual tetap ada.
   ===================================================================== */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea.mceEditor,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea[id*="description"],
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content textarea[id*="Description"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  max-width: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Pastikan editor visual TinyMCE yang berada di bawah tetap tampil normal. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceEditor table {
  display: table !important;
  visibility: visible !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer iframe,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content iframe[id$="_ifr"] {
  display: block !important;
  visibility: visible !important;
}


/* =====================================================================
   V28 — PAKSA AREA ISI TINYMCE MENGIKUTI LEBAR KOTAK EDITOR
   Pada screenshot, toolbar dan bingkai editor sudah lebar tetapi iframe
   isi hanya sekitar 200px. TinyMCE OJS 2.4 memberi lebar inline pada
   table.mceLayout / td.mceIframeContainer / iframe; aturan ini mengunci
   seluruh rantai lebar ke 100% dari pembungkus editor.
   ===================================================================== */

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceEditor,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content span.mceEditor,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content div.mceEditor {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout[id$="_tbl"],
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceEditor > table {
  display: table !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout > tbody,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout > tbody > tr,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout > tbody > tr > td,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceLayout td,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content td.mceIframeContainer {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content td.mceIframeContainer {
  display: table-cell !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer iframe,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content iframe[id$="_ifr"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  margin: 0 !important;
}

body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceIframeContainer {
  height: 320px !important;
  min-height: 320px !important;
  overflow: hidden !important;
}

/* Toolbar mengikuti lebar penuh yang sama; tidak mengunci lebar area teks. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceToolbar,
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content .mceToolbar table {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Pastikan semua sel toolbar tetap bisa menyesuaikan, tanpa mengecilkan iframe. */
body:has(#content input[type="file"]):has(#content input[type="radio"]) #content table.mceToolbar td {
  box-sizing: border-box !important;
  max-width: 100% !important;
}


/* =====================================================================
   V30 — FIX TEPAT KOLOM USERNAME/PASSWORD DI BLOK LOGIN SIDEBAR
   Perbaikan sebelumnya hanya mengandalkan #sidebarUser, sementara markup
   OJS/tema bisa menaruh form pada pembungkus block lain. Selector v30
   mencari blok yang benar-benar memuat input username/password.
   Hanya baris field login yang diubah; Remember me dan tombol Login
   tetap mengikuti markup semula.
   ===================================================================== */

#sidebar .block:has(input[name="username"]),
#sidebar .block:has(input[name="password"]),
#leftSidebar .block:has(input[name="username"]),
#leftSidebar .block:has(input[name="password"]),
#sidebarUser:has(input[name="username"]),
#sidebarUser:has(input[name="password"]) {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* Pertahankan lebar tabel form, tetapi gunakan kolom otomatis agar sel label
   tidak dipaksa menyempit oleh table-layout: fixed sebelumnya. */
#sidebar .block:has(input[name="username"]) form table,
#sidebar .block:has(input[name="password"]) form table,
#leftSidebar .block:has(input[name="username"]) form table,
#leftSidebar .block:has(input[name="password"]) form table,
#sidebarUser:has(input[name="username"]) table,
#sidebarUser:has(input[name="password"]) table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 3px !important;
}

/* Kolom label hanya pada baris Username dan Password: 76px agar teks utuh. */
#sidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:first-child,
#sidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:first-child,
#sidebar .block:has(input[name="username"]) tr:has(input[id*="loginUsername"]) > td:first-child,
#sidebar .block:has(input[name="password"]) tr:has(input[id*="loginPassword"]) > td:first-child,
#leftSidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:first-child,
#leftSidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:first-child,
#leftSidebar .block:has(input[name="username"]) tr:has(input[id*="loginUsername"]) > td:first-child,
#leftSidebar .block:has(input[name="password"]) tr:has(input[id*="loginPassword"]) > td:first-child,
#sidebarUser tr:has(input[name="username"]) > td:first-child,
#sidebarUser tr:has(input[name="password"]) > td:first-child,
#sidebarUser tr:has(input[id*="loginUsername"]) > td:first-child,
#sidebarUser tr:has(input[id*="loginPassword"]) > td:first-child {
  display: table-cell !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  padding: 3px 5px 3px 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Pastikan isi label tidak membungkus kata dan tidak mendorong input ke bawah. */
#sidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:first-child *,
#sidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:first-child *,
#leftSidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:first-child *,
#leftSidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:first-child *,
#sidebarUser tr:has(input[name="username"]) > td:first-child *,
#sidebarUser tr:has(input[name="password"]) > td:first-child * {
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Kolom input mengambil sisa ruang; input tidak boleh melampaui kotak USER. */
#sidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:last-child,
#sidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:last-child,
#leftSidebar .block:has(input[name="username"]) tr:has(input[name="username"]) > td:last-child,
#leftSidebar .block:has(input[name="password"]) tr:has(input[name="password"]) > td:last-child,
#sidebarUser tr:has(input[name="username"]) > td:last-child,
#sidebarUser tr:has(input[name="password"]) > td:last-child {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 3px 0 !important;
}

#sidebar .block:has(input[name="username"]) input[name="username"],
#sidebar .block:has(input[name="password"]) input[name="password"],
#leftSidebar .block:has(input[name="username"]) input[name="username"],
#leftSidebar .block:has(input[name="password"]) input[name="password"],
#sidebarUser input[name="username"],
#sidebarUser input[name="password"],
#sidebarUser input[id*="loginUsername"],
#sidebarUser input[id*="loginPassword"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 23px !important;
  margin: 0 !important;
  padding: 2px 5px !important;
  line-height: 1.2 !important;
}

/* Fallback jika tema memakai label/input tanpa tabel. */
#sidebarUser label[for*="loginUsername"],
#sidebarUser label[for*="loginPassword"],
#sidebar label[for*="loginUsername"],
#sidebar label[for*="loginPassword"],
#leftSidebar label[for*="loginUsername"],
#leftSidebar label[for*="loginPassword"] {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  vertical-align: middle !important;
}

/* Baris Remember me dan tombol Login tidak dipaksa ke kolom label 76px. */
#sidebar .block:has(input[name="username"]) tr:has(input[type="checkbox"]),
#sidebar .block:has(input[name="password"]) tr:has(input[type="checkbox"]),
#leftSidebar .block:has(input[name="username"]) tr:has(input[type="checkbox"]),
#leftSidebar .block:has(input[name="password"]) tr:has(input[type="checkbox"]),
#sidebarUser tr:has(input[type="checkbox"]),
#sidebarUser tr:has(input[type="submit"]) {
  border-spacing: 0 !important;
}