@charset "UTF-8";
/* ==========================================================================
   IJoMS — Innovative Journal of Mathematics and Sciences
   styleSheet.css  •  OJS 3.5.0.5  •  Tema "Default"  •  journalId 29

   Bahasa visual: MDPI-like — sans-serif bersih, kartu putih di atas latar
   biru-abu sangat muda, aksen azure, bilah navigasi navy.

   CARA PASANG
   Dashboard OJS -> Settings -> Website -> Appearance -> Journal Stylesheet
   -> unggah berkas ini. Hasilnya tersaji sebagai
   /public/journals/29/styleSheet.css

   URUTAN MUAT CSS DI HALAMAN INI — PENTING UNTUK MEMBACA BERKAS INI
   1. plugins/themes/default             (tema bawaan OJS)
   2. font + fontawesome + swiper
   3. public/journals/29/styleSheet.css  <-- BERKAS INI
   4. public/site/styleSheet             <-- CSS SITUS UKRI, DIMUAT PALING AKHIR

   Karena CSS situs dimuat SESUDAH berkas ini dan memakai !important secara
   luas (lebar 860px paksa, footer maroon, logo width:100%, nav 40px, dst),
   setiap aturan yang bentrok harus punya BOBOT SELECTOR LEBIH TINGGI.
   Caranya: awali selector dengan "body" (menambah satu poin bobot elemen)
   lalu tambahkan !important bila perlu. Baris seperti itu ditandai komentar
   [lawan CSS situs] supaya mudah dilacak. Jangan hapus kata "body" pada
   baris-baris itu — tampilan akan kembali rusak.

   PRINSIP UI/UX YANG DIPAKAI
   - Tiga kolom di layar lebar: MENU di kiri, isi di tengah, informasi
     lain di kanan; tindakan penting bagi penulis selalu di panel atas
     (tombol Submit di bilah navigasi + panel .ij-authorbar di isi halaman).
     Urutan DOM tetap "isi lebih dahulu", jadi pembaca layar dan penekan Tab
     menemui isi sebelum blok samping.
   - Satu keluarga huruf (Noto Sans, sudah disediakan OJS — tidak perlu
     mengunduh dari Google Fonts) dengan skala ukuran yang tegas.
   - Semua tautan isi memakai WARNA + GARIS BAWAH (dua penanda, bukan warna
     saja) sesuai WCAG 1.4.1. Tautan terkunjung berganti warna.
   - Sasaran sentuh minimal 44px (WCAG 2.5.8).
   - Setiap pasangan warna teks/latar dihitung rasio kontrasnya; angkanya
     dicantumkan di bagian 1. Semua lulus WCAG AA, mayoritas AAA.
   - Rumus matematika panjang dan tabel lebar bisa digeser mendatar tanpa
     merusak tata letak — penting untuk jurnal matematika.
   - Ukuran huruf memakai rem dari setelan peramban, sehingga pembaca yang
     memperbesar huruf tetap terlayani (WCAG 1.4.4).
   - Animasi mati otomatis bila pengguna memilih prefers-reduced-motion.

   DAFTAR ISI
    1. Token desain (palet, huruf, jarak, bentuk)
    2. Dasar & tipografi
    3. Kerangka tata letak (grid konten + sidebar)
    4. Kepala halaman & logo
    5. Navigasi utama + submenu + tombol menu seluler
    6. Navigasi pengguna (Register / Login / Bahasa) & pencarian
    7. Remah roti (breadcrumbs) & judul halaman
    8. Tombol
    9. Daftar artikel (kartu ala MDPI)
   10. Halaman terbitan: daftar isi, arsip, ringkasan
   11. Halaman artikel (abstrak, penulis, kata kunci, unduhan, sitasi)
   12. Tabel, gambar, rumus, kode
   13. Pengumuman & beranda
   14. Blok sidebar
   15. Formulir (login, registrasi, kontak, pencarian)
   16. Notifikasi & penomoran halaman
   17. Footer
   18. Komponen tambahan siap pakai (.ij-*) untuk halaman statis
   19. Responsif
   20. Cetak (print)
   21. Penanda "Anda di sini"
   ========================================================================== */


/* ==========================================================================
   1. TOKEN DESAIN
   Palet "Azure Academic v2". Tiga warna saja yang membawa arti:
     • NAVY  — wibawa & struktur (kepala, bilah nav, judul, footer)
     • AZURE — semua yang bisa DIKLIK (tautan, tombol sekunder, aksen)
     • TEAL  — semua yang mengajak BERTINDAK & status terbuka
               (tombol Submit, lencana Open Access, penanda bagian)
   Pemisahan "biru = tautan" vs "teal = tindakan" ini yang dipakai penerbit
   besar (MDPI, Springer, Elsevier): pembaca langsung tahu mana bacaan dan
   mana ajakan mengirim naskah, tanpa harus membaca labelnya.

   Angka dalam kurung = rasio kontras WCAG 2.1, dihitung ulang untuk setiap
   pasangan (AA butuh >= 4.5:1 untuk teks biasa, AAA >= 7:1).
   ========================================================================== */

:root {
  /* -- Navy: kepala, bilah nav, footer, judul ---------------------------- */
  --ij-navy-900: #08203c;   /* putih di atasnya 16,4:1 (AAA) — bilah utilitas */
  --ij-navy-800: #0c2e57;   /* putih di atasnya 13,6:1 (AAA) — bilah navigasi */
  --ij-navy-700: #123f74;   /* putih di atasnya 10,6:1 (AAA) — hover, judul */
  --ij-navy-600: #1a5397;   /* putih di atasnya  7,7:1 (AAA) */

  /* -- Azure: warna TAUTAN ----------------------------------------------- */
  --ij-blue:     #0b5ccc;   /* di atas putih 6,2:1 (AA); putih di atasnya 6,2:1 */
  --ij-blue-700: #0a4aa8;   /* hover/aktif — di atas putih 8,2:1 (AAA) */
  --ij-blue-300: #7fb2f0;   /* tautan di atas navy — 7,4:1 di atas navy-900 */
  --ij-blue-100: #d3e3fa;   /* garis aksen lembut */
  --ij-blue-50:  #eef4fd;   /* sorotan lembut — teks 15,9:1, tautan 5,6:1 */

  /* -- Teal: warna TINDAKAN & akses terbuka ------------------------------ */
  --ij-teal:     #0f7261;   /* di atas putih 5,8:1 (AA); putih di atasnya 5,8:1 */
  --ij-teal-700: #0b5a4c;   /* hover tombol utama — di atas putih 7,7:1 (AAA) */
  --ij-teal-100: #cbe9e1;
  --ij-teal-50:  #e6f5f1;   /* teal di atasnya 5,2:1 (AA) */

  /* -- Warna fungsional -------------------------------------------------- */
  --ij-violet:   #6d3fa0;   /* tautan terkunjung — 7,3:1 (AAA) */
  --ij-green:    #0e7c5a;   /* sukses — 5,2:1 (AA) */
  --ij-green-50: #e7f6f0;
  --ij-amber:    #b45309;   /* peringatan / isian yang belum lengkap — 5,0:1 (AA) */
  --ij-amber-50: #fdf3e7;
  --ij-red:      #b42318;   /* galat — 6,6:1 (AA) */
  --ij-red-50:   #fdecea;

  /* -- Teks -------------------------------------------------------------- */
  --ij-text:   #101a26;     /* di atas putih 17,5:1 (AAA) */
  --ij-text-2: #37455c;     /* 9,7:1 (AAA) */
  --ij-muted:  #55637a;     /* 6,1:1 (AA) — metadata, keterangan */
  --ij-faint:  #6b7a90;     /* 4,4:1 — HANYA ikon/garis, bukan teks kecil */

  /* -- Permukaan --------------------------------------------------------- */
  --ij-page:      #f4f7fb;  /* latar halaman */
  --ij-surface:   #ffffff;  /* kartu */
  --ij-surface-2: #f7fafd;  /* isian lembut, baris tabel selang-seling */
  --ij-border:    #dde5ef;
  --ij-border-2:  #c3d0e1;
  --ij-on-dark:   #e8eef7;  /* teks di atas navy — 11,7:1 (AAA) */
  --ij-on-dark-2: #a9c0dd;  /* teks sekunder di atas navy — 8,8:1 (AAA) */

  /* -- Huruf ------------------------------------------------------------- */
  --ij-sans: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, sans-serif;
  --ij-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --ij-mono: "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono",
             Menlo, monospace;

  /* -- Skala jarak (kelipatan 4px) --------------------------------------- */
  --ij-1: 4px;  --ij-2: 8px;  --ij-3: 12px; --ij-4: 16px;
  --ij-5: 20px; --ij-6: 24px; --ij-7: 32px; --ij-8: 40px;
  --ij-9: 56px; --ij-10: 72px;

  /* -- Bentuk & bayangan ------------------------------------------------- */
  /* Sudut dibuat tajam dan bayangan hampir dihilangkan: halaman jurnal
     bersandar pada tipografi dan garis rambut, bukan pada kartu melayang. */
  --ij-radius:    4px;
  --ij-radius-sm: 3px;
  --ij-radius-lg: 5px;
  --ij-pill:      999px;
  --ij-shadow-sm: none;
  --ij-shadow:    0 1px 2px rgba(8, 32, 60, .06);
  --ij-shadow-lg: 0 6px 24px rgba(8, 32, 60, .10);

  /* -- Ukuran tata letak — ubah di sini bila perlu ------------------------ */
  --ij-container: 1440px;   /* lebar maksimum situs */
  --ij-menu:      240px;    /* KOLOM KIRI  — blok "Menu" */
  --ij-sidebar:   288px;    /* KOLOM KANAN — blok informasi lainnya */
  --ij-gap:       28px;     /* jarak antar kolom */
  --ij-pad:       36px;     /* padding dalam kartu konten utama */
  --ij-measure:   72ch;     /* panjang baris nyaman baca */
  --ij-logo-h:    56px;     /* tinggi logo di layar besar (berkas logo: 955x160) */
  --ij-navh:      46px;     /* tinggi butir menu navigasi */
  /* Tinggi bagian kepala yang boleh menghilang saat digulir (bilah utilitas
     + bidang logo). Dipakai bagian 5 untuk menempelkan bilah navigasi.
     Cara mengukur ulang bila kepala halaman diubah: buka konsol peramban
     lalu jalankan
       document.querySelector('.pkp_navigation_primary_row').getBoundingClientRect().top
     pada posisi halaman belum digulir. */
  --ij-head-hide: 162px;

  --ij-t: 150ms cubic-bezier(.2, 0, .2, 1);

  color-scheme: light;      /* cegah peramban menggelapkan halaman otomatis */
}


/* ==========================================================================
   2. DASAR & TIPOGRAFI
   ========================================================================== */

/* Tema mengunci font-size di 14px sehingga setelan huruf peramban pengguna
   diabaikan. Dikembalikan ke 100% (umumnya 16px) demi WCAG 1.4.4. */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--ij-6);
}

body {
  font-family: var(--ij-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ij-text);
  background: var(--ij-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

/* Judul: sans-serif tebal (tema aslinya serif) dengan warna navy sebagai
   penanda hierarki. text-wrap:balance meratakan judul dua baris; peramban
   lama mengabaikannya tanpa efek samping. */
/* Judul memakai Noto Serif (sudah disediakan OJS, tidak perlu unduhan
   tambahan). Serif untuk judul + sans untuk isi adalah pasangan yang lazim
   pada jurnal ilmiah dan memberi kesan terbitan, bukan aplikasi. */
body .pkp_structure_main h1,
body .pkp_structure_main h2,
body .pkp_structure_main h3,
body .pkp_structure_main h4,
body .pkp_structure_main h5,
body .pkp_structure_main h6 {
  font-family: var(--ij-serif);
  color: var(--ij-navy-800);
  letter-spacing: -.01em;
  text-wrap: balance;
  scroll-margin-top: var(--ij-7);
}

body .pkp_structure_main h1 { font-size: 1.75rem;   line-height: 1.25; font-weight: 700; margin: 0 0 var(--ij-5); }
body .pkp_structure_main h2 { font-size: 1.3125rem; line-height: 1.35; font-weight: 700; margin: var(--ij-8) 0 var(--ij-4); }
body .pkp_structure_main h3 { font-size: 1.125rem;  line-height: 1.4;  font-weight: 700; margin: var(--ij-7) 0 var(--ij-3); }
body .pkp_structure_main h4 { font-size: 1rem;      line-height: 1.45; font-weight: 700; margin: var(--ij-6) 0 var(--ij-3); }
body .pkp_structure_main h5,
body .pkp_structure_main h6 { font-size: .9375rem;  line-height: 1.5;  font-weight: 700; margin: var(--ij-5) 0 var(--ij-2); }

body .pkp_structure_main h1:first-child,
body .pkp_structure_main h2:first-child,
body .pkp_structure_main h3:first-child { margin-top: 0; }

body .pkp_structure_main p,
body .pkp_structure_main li { line-height: 1.7; text-wrap: pretty; }
body .pkp_structure_main p  { margin: 0 0 var(--ij-4); }
body .pkp_structure_main p:last-child { margin-bottom: 0; }

/* Panjang baris dibatasi hanya pada teks naratif; tabel, daftar artikel,
   dan formulir tidak terpengaruh. */
body .homepage_about p,
body .obj_article_details .item.abstract p,
body .obj_issue_toc .description p,
body .page .about_section .description p,
body .static_page p,
body .ij-prose p { max-width: var(--ij-measure); }

/* Rata KIRI, bukan rata kanan-kiri. Peramban belum punya kamus pemenggalan
   kata bahasa Indonesia, sehingga teks yang dirata kanan-kiri memunculkan
   "sungai" spasi lebar antarkata - paling kentara pada abstrak yang
   kolomnya sempit. Ingin kembali rata kanan-kiri? ganti nilai text-align
   di bawah menjadi justify. */
body .homepage_about p,
body .main_entry .item.abstract,
body .obj_article_details .item.abstract {
  text-align: left;                                        /* [lawan CSS situs] */
  hyphens: auto;
  -webkit-hyphens: auto;
}

body .pkp_structure_main ul,
body .pkp_structure_main ol { margin: 0 0 var(--ij-4); padding-left: var(--ij-6); }
body .pkp_structure_main li { margin-bottom: var(--ij-1); }

body .pkp_structure_main blockquote {
  margin: var(--ij-6) 0;
  padding: var(--ij-2) var(--ij-6);
  border-left: 4px solid var(--ij-blue-100);
  color: var(--ij-text-2);
  font-style: normal;
}

body .pkp_structure_main hr {
  height: 1px;
  margin: var(--ij-7) 0;
  border: 0;
  background: var(--ij-border);
}

body .pkp_structure_main strong,
body .pkp_structure_main b { font-weight: 600; color: var(--ij-text); }

body .pkp_structure_main small { font-size: .8125rem; color: var(--ij-muted); }

/* Tautan isi: warna + garis bawah yang menebal saat disorot. */
body .pkp_structure_main a {
  color: var(--ij-blue);                                   /* [lawan CSS situs] */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--ij-t), text-decoration-color var(--ij-t);
}
body .pkp_structure_main a:visited { color: var(--ij-violet); }
body .pkp_structure_main a:hover,
body .pkp_structure_main a:focus-visible {
  color: var(--ij-blue-700);                               /* [lawan CSS situs] */
  text-decoration-thickness: 2px;
}

/* Cincin fokus keyboard — satu gaya untuk seluruh situs. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ij-blue);
  outline-offset: 2px;
  border-radius: var(--ij-radius-sm);
}
.pkp_structure_head a:focus-visible,
.pkp_structure_footer_wrapper a:focus-visible,
.pkp_site_nav_menu a:focus-visible,
.pkp_site_nav_toggle:focus-visible { outline-color: var(--ij-blue-300); }

::selection { background: var(--ij-blue-100); color: var(--ij-navy-900); }

/* Tautan lompat ("Skip to main content") — tampil hanya saat di-Tab. */
.cmp_skip_to_content a:focus {
  background: var(--ij-navy-800);
  color: #fff;
  padding: var(--ij-3) var(--ij-5);
  border-radius: 0 0 var(--ij-radius) 0;
  font-weight: 600;
  box-shadow: var(--ij-shadow-lg);
}

/* Hormati preferensi sistem: matikan animasi bila diminta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   3. KERANGKA TATA LETAK
   Tema memakai float + lebar px tetap (652/860px) dan CSS situs memaksa
   860px !important; akibatnya pada layar 992–1199px sidebar tidak muat dan
   tata letak menabrak. Seluruh kerangka dipindah ke CSS Grid:
     < 1000px  : satu kolom (isi, lalu semua blok samping)
     1000–1299 : dua kolom  (isi | semua blok samping di kanan)
     >= 1300px : tiga kolom (MENU kiri | isi | blok lain di kanan)
   ========================================================================== */

/* Semua wadah tema memakai lebar sama supaya tepi kiri-kanan sejajar dari
   kepala halaman sampai footer. */
body .pkp_site_name_wrapper,
body .pkp_navigation_primary_wrapper,
body .pkp_search_mobile,
body .pkp_structure_content,
body .pkp_structure_footer {
  width: 100%;
  max-width: var(--ij-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ij-6);
  padding-right: var(--ij-6);
}

body .pkp_structure_page { overflow-x: clip; }

/* Tema memasang clearfix ::before/::after (display:table) pada beberapa
   pembungkus. Begitu pembungkus itu diubah menjadi grid/flex, kedua
   pseudo-elemen tersebut ikut menjadi ITEM grid/flex dan menggeser kolom.
   Karena itu semuanya dimatikan di sini. */
body .pkp_structure_content::before,
body .pkp_structure_content::after,
body .pkp_navigation_primary_wrapper::before,
body .pkp_navigation_primary_wrapper::after,
body .pkp_navigation_user::before,
body .pkp_navigation_user::after,
body .obj_article_details .row::before,
body .obj_article_details .row::after,
body.pkp_page_index .cmp_announcements::before,
body.pkp_page_index .cmp_announcements::after,
body .cmp_announcements.cmp_announcements::before,
body .cmp_announcements.cmp_announcements::after,
body .cmp_form .buttons::before,
body .cmp_form .buttons::after,
body .cmp_pagination::before,
body .cmp_pagination::after {
  content: none;
  display: none;
}

body .pkp_structure_content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--ij-gap);
  padding-top: var(--ij-7);
  padding-bottom: var(--ij-9);
  align-items: start;
}

/* Kolom utama sebagai kartu putih di atas latar halaman. */
body .pkp_structure_main {
  float: none !important;                                  /* [lawan CSS situs] */
  width: auto !important;                                  /* [lawan CSS situs] */
  max-width: none !important;                              /* [lawan CSS situs] */
  min-width: 0;
  margin: 0 !important;
  padding: var(--ij-pad) !important;
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
}
/* Garis pembatas dekoratif bawaan tema tidak dipakai lagi. */
body .pkp_structure_main::before,
body .pkp_structure_main::after { display: none !important; content: none !important; }

body .pkp_structure_content.has_sidebar .pkp_structure_main.site {
  width: auto !important;                                  /* [lawan CSS situs] */
}

body .pkp_structure_sidebar {
  float: none;
  width: auto;
  min-width: 0;
  margin-top: var(--ij-6);
}

@media (min-width: 1000px) {
  /* DUA KOLOM: isi + sidebar kanan. Sidebar bermarkup kelas .left, tetapi
     ditempatkan di KANAN supaya urutan visual sama dengan urutan DOM —
     pembaca layar dan penekan Tab menemui isi lebih dahulu. */
  body .pkp_structure_content.has_sidebar {
    grid-template-columns: minmax(0, 1fr) var(--ij-sidebar);
  }
  body .pkp_structure_main    { order: 1; }
  body .pkp_structure_sidebar { order: 2; margin-top: 0; }

  /* Halaman tanpa sidebar: lebar kartu dibatasi agar baris tidak melebar. */
  body .pkp_structure_content:not(.has_sidebar) .pkp_structure_main {
    max-width: 1000px !important;
    margin: 0 auto !important;
  }
}

/* --- TIGA KOLOM (>= 1300px) ----------------------------------------------
   Permintaan tata letak: MENU di kiri, informasi lain di kanan. OJS hanya
   menyediakan SATU wadah sidebar, jadi wadah itu dibuat display:contents —
   kotaknya hilang dan ketiga bloknya naik menjadi item grid langsung, lalu
   ditempatkan sendiri-sendiri.

   Barisnya sengaja "min-content min-content 1fr": kolom menu dan kolom isi
   membentang penuh (grid-row: 1 / -1), sementara kelebihan tingginya diserap
   baris ke-3 yang fleksibel. Tanpa itu, sisa tinggi akan dibagi rata ke
   semua baris dan blok di kolom kanan jadi terpisah-pisah.

   Cara ini menggantikan versi lama yang memasang menu secara melayang
   (position:absolute) dan memerlukan min-height buatan; kini tinggi wadah
   mengikuti kolom yang paling panjang, sehingga halaman pendek tidak lagi
   menyisakan ruang kosong.

   Semua dibungkus :has(#customblock-menu) — bila blok menu belum dibuat,
   aturan diabaikan dan tata letak kembali menjadi dua kolom.

   Ingin menu kembali ke kanan? Hapus satu blok @media ini saja.           */
@media (min-width: 1300px) {
  body .pkp_structure_content.has_sidebar:has(#customblock-menu) {
    grid-template-columns: var(--ij-menu) minmax(0, 1fr) var(--ij-sidebar);
    grid-template-rows: min-content min-content 1fr;
    column-gap: var(--ij-gap);
    row-gap: 0;
  }
  /* Wadah sidebar dihilangkan; isinya menjadi item grid. */
  body .pkp_structure_content.has_sidebar:has(#customblock-menu) .pkp_structure_sidebar {
    display: contents;
  }
  body .pkp_structure_content.has_sidebar:has(#customblock-menu) #customblock-menu {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    margin: 0;
  }
  body .pkp_structure_content.has_sidebar:has(#customblock-menu) .pkp_structure_main {
    grid-column: 2;
    grid-row: 1 / -1;
  }
  /* Blok lain mengisi kolom kanan, mengurut sendiri baris demi baris. */
  body .pkp_structure_content.has_sidebar:has(#customblock-menu) .pkp_block:not(#customblock-menu) {
    grid-column: 3;
    align-self: start;
  }
}


/* ==========================================================================
   4. KEPALA HALAMAN & LOGO
   Susunan ala MDPI: bilah utilitas navy tipis di paling atas (Register /
   Login / Bahasa), lalu bidang putih berisi logo, lalu bilah navigasi navy.
   ========================================================================== */

body .pkp_structure_head {
  background: var(--ij-surface);
  border-bottom: 1px solid var(--ij-border);
}

/* Wadah kepala dibuat selebar layar; pembatas kiri-kanan dipindah ke
   elemen di dalamnya, supaya bilah navigasi bisa penuh dari tepi ke tepi. */
body .pkp_head_wrapper,
body.has_site_logo .pkp_head_wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* CSS situs memaksa padding & margin 0 pada baris nama jurnal;
   dikembalikan supaya logo sejajar dengan konten di bawahnya. */
body .pkp_site_name_wrapper {
  margin-left: auto !important;                            /* [lawan CSS situs] */
  margin-right: auto !important;                           /* [lawan CSS situs] */
  padding-left: var(--ij-6) !important;                    /* [lawan CSS situs] */
  padding-right: var(--ij-6) !important;                   /* [lawan CSS situs] */
  max-width: var(--ij-container);
}

/* Logo. CSS situs memaksa .is_img dan .is_img img selebar 100% sehingga
   logo 520x343px melar memenuhi layar; di sini dikembalikan ke proporsi
   asli dengan batas tinggi. Ubah tinggi lewat --ij-logo-h di bagian 1. */
body .pkp_site_name .is_img,
body .pkp_site_name .is_img img {
  width: auto !important;                                  /* [lawan CSS situs] */
  max-width: 100% !important;                              /* [lawan CSS situs] */
  max-height: var(--ij-logo-h) !important;                 /* [lawan CSS situs] */
  height: auto !important;
}
body .pkp_site_name .is_img:focus-visible {
  outline: 3px solid var(--ij-blue);                       /* tema memakai garis putih di latar putih */
  outline-offset: 3px;
}
body .pkp_site_name .is_img {
  display: inline-block;
  margin: 0;
  padding: 0;
  border-radius: var(--ij-radius-sm);
}
/* Tautan logo dan gambarnya dibuat block agar tidak menyisakan celah baris
   (descender) di bawah logo; celah itu membuat bidang kepala 14px lebih
   tinggi daripada yang terlihat. */
body .pkp_site_name > a { display: block; line-height: 0; }
body .pkp_site_name .is_img img { display: block; }

body .pkp_site_name .is_text {
  font-family: var(--ij-sans);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ij-navy-900);
  text-decoration: none;
}

@media (min-width: 992px) {
  /* Bilah utilitas navy setinggi 44px di paling atas, sisanya putih.
     Satu gradient menggantikan kebutuhan markup tambahan. */
  body .pkp_structure_head {
    background: linear-gradient(to bottom,
                var(--ij-navy-900) 0, var(--ij-navy-900) 44px,
                var(--ij-surface) 44px);
  }
  body.has_site_logo .pkp_head_wrapper { padding-top: 44px !important; } /* [lawan CSS situs] */

  body .pkp_site_name_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ij-6);
    padding-top: 18px !important;                          /* [lawan CSS situs] */
    padding-bottom: 18px !important;                       /* [lawan CSS situs] */
    height: auto !important;                               /* [lawan CSS situs] */
  }

  /* Keterangan singkat di sisi kanan kepala halaman, mengisi ruang kosong di
     samping logo dan mengulang tiga hal yang paling dicari penulis. Teksnya
     mengikuti bahasa antarmuka lewat atribut lang pada <html>.

     Ingin mengubah kalimatnya? Ubah nilai content di dua baris di bawah.
     Ingin menghapusnya? Hapus kedua aturan ::after ini saja. */
  body .pkp_site_name_wrapper::after {
    content: "Open Access  ·  Peer-reviewed  ·  No author fees";
    flex: 0 1 auto;
    max-width: 30em;
    text-align: right;
    color: var(--ij-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.5;
    text-transform: uppercase;
  }
  html[lang="id"] body .pkp_site_name_wrapper::after {
    content: "Open Access  ·  Peer-review  ·  Tanpa biaya publikasi";
  }
  body .pkp_site_name {
    position: relative;
    flex: 0 1 auto;
    width: auto;
    left: auto;
    right: auto;
    margin: 0 auto 0 0 !important;                         /* [lawan CSS situs] */
    padding: 0;
    text-align: left;
    background: transparent;
    overflow: visible;
  }
}

@media (max-width: 991px) {
  /* CSS situs mengunci tinggi baris nama jurnal 60px di layar kecil. */
  body .pkp_site_name { left: 72px !important; right: var(--ij-4); }
  body .pkp_site_name .is_img,
  body .pkp_site_name .is_img img { max-height: 40px !important; }
  body .pkp_site_name_wrapper::after { content: none; }
  body .pkp_site_name .is_text { font-size: 1rem; line-height: 60px; }
}


/* ==========================================================================
   5. NAVIGASI UTAMA
   Bilah navy penuh lebar layar, butir menu 48px (sasaran sentuh aman),
   garis azure muncul di bawah butir yang disorot. Submenu diubah menjadi
   kartu putih melayang — lebih terbaca daripada submenu maroon bawaan
   CSS situs.
   ========================================================================== */

body .pkp_navigation_primary_row {
  background: var(--ij-navy-800);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

body .pkp_navigation_primary_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--ij-2);
  /* dikurangi 14px (padding dalam butir menu) supaya HURUF butir pertama
     lurus dengan tepi kiri kartu konten di bawahnya. */
  padding-left: calc(var(--ij-6) - 14px);
  padding-right: var(--ij-6);
}

body .pkp_navigation_primary {
  display: flex;
  flex-wrap: wrap;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

body .pkp_navigation_primary > li { position: relative; display: block; }

/* Butir menu. CSS situs mengunci padding/line-height/warna/tebal huruf,
   jadi semuanya ditulis ulang dengan bobot lebih tinggi. */
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  display: block;
  margin: 0 !important;                                    /* [lawan CSS situs] */
  padding: 0 14px !important;                              /* [lawan CSS situs] */
  line-height: var(--ij-navh) !important;                  /* [lawan CSS situs] */
  color: var(--ij-on-dark) !important;                     /* [lawan CSS situs] */
  font-family: var(--ij-sans);
  font-size: .8125rem;
  font-weight: 600 !important;                             /* [lawan CSS situs] */
  letter-spacing: .01em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  transition: background var(--ij-t), color var(--ij-t), box-shadow var(--ij-t);
}

body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover,
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:focus {
  background: var(--ij-navy-700);                          /* [lawan CSS situs] */
  color: #fff !important;                                  /* [lawan CSS situs] */
  box-shadow: inset 0 -3px 0 var(--ij-blue-300);
}

/* Halaman yang sedang dibuka (bila tema/menu menandainya). */
body .pkp_navigation_primary > li > a[aria-current="page"],
body .pkp_navigation_primary > li.current > a {
  background: var(--ij-navy-700);
  box-shadow: inset 0 -3px 0 var(--ij-blue-300);
  color: #fff !important;
}

/* Tanda panah kecil pada butir yang punya submenu. */
body .pkp_nav_list [aria-haspopup]::after {
  margin-left: .4em;
  border-top-color: currentColor;
  opacity: .7;
}

/* --- Submenu ------------------------------------------------------------- */

body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  width: 17.5em;
  padding: var(--ij-1) !important;                         /* [lawan CSS situs] */
  background: var(--ij-surface) !important;                /* [lawan CSS situs] */
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius) !important;              /* [lawan CSS situs] */
  box-shadow: var(--ij-shadow-lg);
  z-index: 1200;
}
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
  display: block;
  border-bottom: 0 !important;                             /* [lawan CSS situs] */
}
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a {
  padding: 10px 12px !important;                           /* [lawan CSS situs] */
  line-height: 1.4 !important;                             /* [lawan CSS situs] */
  color: var(--ij-navy-800) !important;                    /* [lawan CSS situs] */
  font-weight: 500 !important;                             /* [lawan CSS situs] */
  border-left: 0;
  border-radius: var(--ij-radius-sm) !important;           /* [lawan CSS situs] */
  box-shadow: none;
}
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:focus {
  background: var(--ij-blue-50) !important;                /* [lawan CSS situs] */
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  border-radius: var(--ij-radius-sm) !important;           /* [lawan CSS situs] */
  box-shadow: none;
}

/* Posisi submenu: tepat di bawah butir induknya. Tema menggesernya dengan
   transform 40px (mengikuti tinggi menu lama) sehingga tersisa celah. */
body .pkp_navigation_primary > li > ul,
body .pkp_navigation_primary > li:hover > ul,
body .pkp_navigation_primary > li:focus-within > ul {
  top: 100%;
  transform: none;
}
/* Tampilkan juga saat difokus lewat papan ketik, bukan hanya saat disorot. */
body .pkp_navigation_primary > li:hover > ul,
body .pkp_navigation_primary > li:focus-within > ul { left: 0; }
/* Tiga butir terakhir membuka submenu ke kiri agar tidak keluar layar. */
body .pkp_navigation_primary > li:nth-last-child(-n+3):hover > ul,
body .pkp_navigation_primary > li:nth-last-child(-n+3):focus-within > ul {
  left: auto;
  right: 0;
}

/* --- Tombol menu di layar kecil ------------------------------------------ */
/* CSS situs memaksa latar tombol transparan sementara garisnya putih,
   sehingga tombol praktis tak terlihat. Dikembalikan jadi kotak navy. */
body .pkp_site_nav_toggle {
  top: 8px !important;                                     /* [lawan CSS situs] */
  left: var(--ij-4) !important;                            /* [lawan CSS situs] */
  width: 44px !important;
  height: 44px !important;
  background: var(--ij-navy-800) !important;               /* [lawan CSS situs] */
  border-radius: var(--ij-radius) !important;
  box-shadow: none !important;                             /* [lawan CSS situs] */
}
body .pkp_site_nav_toggle:hover { background: var(--ij-navy-700) !important; }

/* Panel menu layar kecil. */
body .pkp_site_nav_menu {
  background: var(--ij-navy-900);
  padding: var(--ij-3) var(--ij-4) var(--ij-5);
  box-shadow: var(--ij-shadow-lg);
}
body .pkp_site_nav_menu ul ul { padding-left: var(--ij-3); }

@media (max-width: 991px) {
  body .pkp_navigation_primary_row { background: transparent; border-top: 0; }
  body .pkp_navigation_primary_wrapper { display: block; padding-left: 0; padding-right: 0; }
  body .pkp_navigation_primary { display: block; }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
    padding: 0 var(--ij-3) !important;                     /* [lawan CSS situs] */
    line-height: 44px !important;                          /* [lawan CSS situs] */
    border-radius: var(--ij-radius-sm);
  }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
    position: static;
    width: auto;
    background: rgba(255, 255, 255, .06) !important;       /* [lawan CSS situs] */
    border: 0;
    box-shadow: none;
    margin: var(--ij-1) 0 var(--ij-2) var(--ij-3);
  }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a {
    color: var(--ij-on-dark) !important;                   /* [lawan CSS situs] */
  }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:focus {
    background: rgba(255, 255, 255, .12) !important;       /* [lawan CSS situs] */
    color: #fff !important;                                /* [lawan CSS situs] */
  }
}


/* --- Tombol ajakan "Submit" di bilah navigasi -----------------------------
   Butir menu mana pun yang menuju halaman pengiriman naskah berubah menjadi
   tombol TEAL dan terdorong ke ujung kanan bilah. Inilah "panel atas" bagi
   penulis: satu tindakan utama yang selalu terlihat di setiap halaman.
   Agar rapi, taruh butir ini PALING AKHIR pada Settings -> Website ->
   Navigation Menus. Cocok untuk tautan .../about/submissions.             */
@media (min-width: 992px) {
  body .pkp_navigation_primary > li:has(> a[href*="submissions"]) { margin-left: auto; }

  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper
       ul li > a[href*="submissions"] {
    margin: 5px 0 5px var(--ij-2) !important;              /* [lawan CSS situs] */
    padding: 0 var(--ij-5) !important;                     /* [lawan CSS situs] */
    line-height: 36px !important;                          /* [lawan CSS situs] */
    background: var(--ij-teal);
    border-radius: var(--ij-pill);
    color: #fff !important;                                /* [lawan CSS situs] */
    font-weight: 700 !important;                           /* [lawan CSS situs] */
    box-shadow: none;
  }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper
       ul li > a[href*="submissions"]::before {
    content: "\f093";                                      /* ikon unggah */
    font: normal normal normal 13px/1 FontAwesome;
    margin-right: var(--ij-2);
  }
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper
       ul li > a[href*="submissions"]:hover,
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper
       ul li > a[href*="submissions"]:focus {
    background: var(--ij-teal-700);                         /* [lawan CSS situs] */
    box-shadow: none;
  }
  /* Submenu milik tombol itu tetap rata kanan agar tidak keluar layar. */
  body .pkp_navigation_primary > li:has(> a[href*="submissions"]):hover > ul,
  body .pkp_navigation_primary > li:has(> a[href*="submissions"]):focus-within > ul {
    left: auto;
    right: 0;
  }
}


/* --- Bilah navigasi menempel saat digulir --------------------------------
   Halaman petunjuk penulisan dan etika publikasi cukup panjang; tanpa ini
   pembaca harus menggulir kembali ke atas hanya untuk berpindah halaman.

   Caranya: seluruh KEPALA halaman dibuat sticky dengan offset negatif
   setinggi bagian yang boleh menghilang (bilah utilitas + bidang logo),
   sehingga yang tersisa menempel di tepi atas hanyalah bilah navigasinya.
   Angka 44px = tinggi bilah utilitas, 36px = padding atas+bawah bidang logo.

   Hanya di layar >= 992px: di layar kecil navigasi sudah berupa tombol menu,
   dan bilah menempel justru memakan ruang baca.                            */
@media (min-width: 992px) {
  body .pkp_structure_head {
    position: sticky;
    top: calc(-1 * var(--ij-head-hide));
    z-index: 60;
  }
  /* Submenu harus tetap di atas isi halaman saat kepala menempel. */
  body .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul { z-index: 1200; }
  /* Tautan dalam halaman tidak tertutup bilah navigasi saat diloncati. */
  html { scroll-padding-top: calc(var(--ij-navh) + var(--ij-4)); }
}


/* ==========================================================================
   6. NAVIGASI PENGGUNA & PENCARIAN
   ========================================================================== */

@media (min-width: 992px) {
  body .pkp_navigation_user_wrapper {
    position: absolute;
    top: 0 !important;                                     /* [lawan CSS situs] */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--ij-container);
    padding: 0 var(--ij-6);
    text-align: right;
    z-index: 1100;
  }
  body .pkp_navigation_user {
    display: inline-flex;
    align-items: center;
    gap: var(--ij-1);
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* CSS situs memberi setiap butir latar putih; hanya submenu yang
     memang perlu latar putih. */
  body .pkp_navigation_user > li { background: transparent !important; } /* [lawan CSS situs] */
  body .pkp_navigation_user > li > a {
    display: inline-block;
    padding: 12px !important;
    line-height: 20px;
    color: var(--ij-on-dark) !important;                   /* [lawan CSS situs] */
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--ij-radius-sm);
    transition: background var(--ij-t), color var(--ij-t);
  }
  body .pkp_navigation_user > li > a:hover,
  body .pkp_navigation_user > li > a:focus {
    background: rgba(255, 255, 255, .12) !important;       /* [lawan CSS situs] */
    color: #fff !important;                                /* [lawan CSS situs] */
  }
  /* Submenu bahasa / profil sebagai kartu putih. */
  body .pkp_navigation_user > li > ul {
    width: 12em;
    padding: var(--ij-1);
    background: var(--ij-surface) !important;              /* [lawan CSS situs] */
    border: 1px solid var(--ij-border);
    border-radius: var(--ij-radius);
    box-shadow: var(--ij-shadow-lg);
  }
  body .pkp_navigation_user > li > ul li { background: transparent !important; } /* [lawan CSS situs] */
  body .pkp_navigation_user > li > ul a {
    padding: 10px 12px !important;
    color: var(--ij-navy-800) !important;                  /* [lawan CSS situs] */
    font-size: .8125rem;
    font-weight: 500;
    border-left: 0;
    border-radius: var(--ij-radius-sm);
  }
  body .pkp_navigation_user > li > ul a:hover,
  body .pkp_navigation_user > li > ul a:focus {
    background: var(--ij-blue-50) !important;              /* [lawan CSS situs] */
    color: var(--ij-blue-700) !important;                  /* [lawan CSS situs] */
  }
  body .pkp_navigation_user .task_count {
    background: var(--ij-blue);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
  }
}

@media (max-width: 991px) {
  body .pkp_navigation_user_wrapper {
    margin-top: var(--ij-3);
    padding-top: var(--ij-3);
    border-top: 1px solid rgba(255, 255, 255, .15);
  }
  body .pkp_navigation_user > li { display: block; background: transparent !important; }
  body .pkp_navigation_user a {
    display: block;
    padding: 10px var(--ij-3) !important;
    color: var(--ij-on-dark) !important;
    font-size: .9375rem;
    border-radius: var(--ij-radius-sm);
  }
}

/* Tautan pencarian di ujung kanan bilah navigasi — dibuat menonjol
   seperti tombol, karena pencarian adalah aksi yang paling sering dicari
   pembaca jurnal. */
body .pkp_navigation_search_wrapper {
  float: none;
  margin-left: auto;
  padding: 0;
  border: 0;
}
body .pkp_navigation_search_wrapper a {
  display: inline-flex;
  align-items: center;
  gap: var(--ij-2);
  margin: 0;
  padding: 0 var(--ij-4);
  height: var(--ij-navh);
  color: #fff !important;                                  /* [lawan CSS situs] */
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--ij-pill);
  transition: background var(--ij-t), border-color var(--ij-t);
}
body .pkp_navigation_search_wrapper a:hover,
body .pkp_navigation_search_wrapper a:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #fff !important;                                  /* [lawan CSS situs] */
}
@media (min-width: 992px) {
  body .pkp_navigation_search_wrapper a { height: 34px; }
  body .pkp_search_desktop .search_prompt { padding: 0 !important; color: #fff !important; }
}
@media (max-width: 991px) {
  body .pkp_navigation_search_wrapper { margin: var(--ij-3) 0 0; }
  body .pkp_navigation_search_wrapper a { width: 100%; justify-content: center; }
}


/* ==========================================================================
   7. REMAH ROTI & JUDUL HALAMAN
   ========================================================================== */

body .cmp_breadcrumbs {
  display: block;
  width: 100%;
  margin-bottom: var(--ij-5);
}
body .cmp_breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ij-1) var(--ij-2);
  margin: 0 !important;                                    /* [lawan CSS situs] */
  padding: 0 !important;                                   /* [lawan CSS situs] */
  background: transparent;                                 /* [lawan CSS situs] */
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ij-muted);
}
body .cmp_breadcrumbs li { margin: 0; }
body .cmp_breadcrumbs a { color: var(--ij-muted); text-decoration: none; }
body .cmp_breadcrumbs a:hover { color: var(--ij-blue); text-decoration: underline; }
body .cmp_breadcrumbs .separator {
  margin: 0 0 0 var(--ij-2);      /* markup menaruh pemisah di dalam <li> */
  color: var(--ij-border-2);
}
body .cmp_breadcrumbs [aria-current="page"] { color: var(--ij-text-2); font-weight: 600; }

/* Judul halaman: rata kiri (CSS situs memaksa rata tengah 20px) dengan
   garis aksen azure pendek di bawahnya — penanda khas jurnal modern. */
body .pkp_structure_main h1 {
  text-align: left !important;                             /* [lawan CSS situs] */
  font-family: var(--ij-serif) !important;                 /* [lawan CSS situs] */
  font-size: 1.75rem !important;                           /* [lawan CSS situs] */
  font-weight: 700 !important;                             /* [lawan CSS situs] */
  color: var(--ij-navy-900);
  padding-bottom: var(--ij-4);
  border-bottom: 1px solid var(--ij-border);
  position: relative;
}
body .pkp_structure_main h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 3px;
  background: var(--ij-blue);
  border-radius: var(--ij-pill);
}
/* Judul artikel tidak memakai garis aksen (sudah punya blok metadata). */
body .obj_article_details > .page_title { border-bottom: 0; padding-bottom: 0; }
body .obj_article_details > .page_title::after { content: none; }

/* Judul bagian di dalam isi: garis vertikal teal di kiri. Halaman statis
   ikut memakai aturan ini tanpa perlu menambahkan kelas apa pun, karena
   penyaring OJS memang cenderung membuang atribut class pada <h2>. */
body .pkp_structure_main .page > h2,
body .obj_issue_toc .section > h2,
body .homepage_about h2,
body .additional_content h2,
body .current_issue h2 {
  padding-left: var(--ij-3);
  border-left: 4px solid var(--ij-teal);
  line-height: 1.3;
}


/* ==========================================================================
   8. TOMBOL
   Dua jenis saja: terisi (aksi utama) dan bergaris (aksi pendukung).
   Tinggi 44px agar nyaman disentuh.
   ========================================================================== */

body .cmp_button,
body .pkp_button,
body .pkp_button_primary,
body .cmp_form .buttons button,
body .page_lost_password .buttons button,
body .page_search .submit button,
body .block_make_submission a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ij-2);
  min-height: 44px;
  padding: 0 var(--ij-5);
  background: var(--ij-blue);
  border: 1px solid var(--ij-blue);
  border-radius: var(--ij-radius);
  color: #fff;
  font-family: var(--ij-sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ij-shadow-sm);
  transition: background var(--ij-t), border-color var(--ij-t), box-shadow var(--ij-t), transform var(--ij-t);
}
body .cmp_button:hover,
body .pkp_button:hover,
body .cmp_form .buttons button:hover,
body .page_search .submit button:hover,
body .block_make_submission a:hover,
body .cmp_button:focus,
body .cmp_form .buttons button:focus,
body .block_make_submission a:focus {
  background: var(--ij-blue-700);
  border-color: var(--ij-blue-700);
  color: #fff;
  box-shadow: var(--ij-shadow);
  text-decoration: none;
}
body .cmp_button:active,
body .cmp_form .buttons button:active { transform: translateY(1px); box-shadow: var(--ij-shadow-sm); }

/* CSS situs mewarnai tombol login biru muda #03a9f4 dan melebarkannya. */
body .page_login .buttons button {
  background: var(--ij-blue) !important;                   /* [lawan CSS situs] */
  border-color: var(--ij-blue) !important;
  color: #fff !important;                                  /* [lawan CSS situs] */
  width: 100% !important;                                  /* [lawan CSS situs] */
  float: none !important;
}
body .page_login .buttons button:hover { background: var(--ij-blue-700) !important; }

/* Tombol bergaris + tautan berkas (PDF/HTML) */
body .cmp_button_wire,
body .obj_galley_link {
  display: inline-flex;
  align-items: center;
  gap: var(--ij-2);
  min-height: 38px;
  padding: 0 var(--ij-4);
  background: var(--ij-surface);
  border: 1px solid var(--ij-blue);
  border-radius: var(--ij-pill);
  color: var(--ij-blue) !important;                        /* [lawan CSS situs] */
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  letter-spacing: .01em;
  transition: background var(--ij-t), color var(--ij-t), border-color var(--ij-t);
}
body .cmp_button_wire:hover,
body .obj_galley_link:hover,
body .cmp_button_wire:focus,
body .obj_galley_link:focus {
  background: var(--ij-blue);
  border-color: var(--ij-blue);
  color: #fff !important;                                  /* [lawan CSS situs] */
}
/* Tautan galley yang pernah dibuka tidak boleh berubah ungu — ia tombol,
   bukan tautan bacaan. */
body .obj_galley_link:visited { color: var(--ij-blue) !important; }
body .obj_galley_link:visited:hover { color: #fff !important; }

/* Ikon berkas (FontAwesome 4 sudah dimuat OJS). */
body .obj_galley_link::before {
  font: normal normal normal 14px/1 FontAwesome;
  content: "\f019";                    /* unduh */
  opacity: .9;
}
body .obj_galley_link.pdf::before  { content: "\f1c1"; }   /* berkas PDF */
body .obj_galley_link.html::before { content: "\f0ac"; }   /* teks daring */
body .obj_galley_link_supplementary::before { content: "\f0c6"; } /* lampiran */
/* Tema memasang ikon KEDUA (::after, posisi absolut) pada tautan
   lampiran; hanya satu ikon yang dipakai. */
body .obj_galley_link_supplementary::after { content: none; display: none; }

body .cmp_back_link a {
  display: inline-flex;
  align-items: center;
  gap: var(--ij-2);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}


/* ==========================================================================
   9. DAFTAR ARTIKEL — kartu ala MDPI
   Dipakai di daftar isi terbitan, hasil pencarian, dan beranda.
   CSS situs memberi tiap kartu latar abu, garis maroon 4px, dan huruf 12px;
   semuanya ditulis ulang di sini.
   ========================================================================== */

body .cmp_article_list > li { margin: 0 0 var(--ij-4); }
body .cmp_article_list > li:last-child { margin-bottom: 0; }

body .obj_article_summary {
  position: relative;
  overflow: hidden;
  padding: var(--ij-5) var(--ij-5) var(--ij-5) var(--ij-6) !important; /* [lawan CSS situs] */
  background: var(--ij-surface);                           /* [lawan CSS situs] */
  border: 1px solid var(--ij-border);
  border-bottom: 1px solid var(--ij-border);               /* [lawan CSS situs] */
  border-radius: var(--ij-radius);
  font-size: 1rem;                                         /* [lawan CSS situs] */
  transition: border-color var(--ij-t), box-shadow var(--ij-t), transform var(--ij-t);
}
/* Pita azure tipis di tepi kiri, menebal saat kartu disorot. */
body .obj_article_summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--ij-blue-100);
  transition: background var(--ij-t);
}
body .obj_article_summary:hover {
  background: var(--ij-surface);                           /* [lawan CSS situs] */
  border-color: var(--ij-border-2);
  box-shadow: var(--ij-shadow);
}
body .obj_article_summary:hover::before { background: var(--ij-blue); }
body .obj_article_summary:focus-within {
  border-color: var(--ij-blue);
  box-shadow: var(--ij-shadow);
}

body .obj_article_summary > .title {
  margin: 0 0 var(--ij-2);
  font-family: var(--ij-sans);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.005em;
}
body .obj_article_summary > .title a {
  color: var(--ij-navy-800) !important;                    /* [lawan CSS situs] */
  text-decoration: none;
}
body .obj_article_summary > .title a:hover,
body .obj_article_summary > .title a:focus {
  color: var(--ij-blue) !important;                        /* [lawan CSS situs] */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Judul artikel tetap navy walau sudah pernah dibuka: dalam daftar panjang,
   warna ungu di mana-mana justru mengacaukan pemindaian mata. */
body .obj_article_summary > .title a:visited { color: var(--ij-navy-800) !important; }

body .obj_article_summary .subtitle {
  display: block;
  margin: calc(var(--ij-1) * -1) 0 var(--ij-2);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ij-muted);
}

body .obj_article_summary .meta { padding-top: 0; font-size: .875rem; line-height: 1.6; }

body .obj_article_summary .meta .authors {
  margin: 0 !important;                                    /* [lawan CSS situs] */
  padding: 0 !important;                                   /* [lawan CSS situs] */
  font-size: .875rem !important;                           /* [lawan CSS situs] */
  font-weight: 400 !important;                             /* [lawan CSS situs] */
  font-style: normal !important;
  color: var(--ij-muted);
  background: none !important;                             /* [lawan CSS situs] */
}
body .obj_article_summary .authors .author { line-height: 1.6; }
body .obj_article_summary .authors .author-person-icon { fill: var(--ij-faint); }
body .obj_article_summary .authors .author-affiliation,
body .obj_article_summary .authors .author-country { color: var(--ij-faint); }

body .obj_article_summary .pages,
body .obj_article_summary .published {
  color: var(--ij-muted);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  body .obj_article_summary .pages {
    top: var(--ij-1);
    right: 0;
    padding: 2px var(--ij-2);
    background: var(--ij-surface-2);
    border: 1px solid var(--ij-border);
    border-radius: var(--ij-radius-sm);
    line-height: 1.5;
  }
}

/* Baris statistik (DOI, dilihat, diunduh) bawaan OJS 3.5. */
body .obj_article_summary .article-stats,
body .article_sum_stats {
  margin-top: var(--ij-3);
  padding-top: var(--ij-3);
  border-top: 1px dashed var(--ij-border);
  font-size: .8125rem;
  color: var(--ij-muted);
}
body .obj_article_summary .article-stats .article-stat-icon,
body .obj_article_summary .article-stats .article-doi-icon { opacity: .75; }
body .obj_article_summary .article-stats a { color: var(--ij-blue); text-decoration: none; }
body .obj_article_summary .article-stats a:hover { text-decoration: underline; }
body .doi_logo { font-size: .8125rem; color: var(--ij-muted); }
body .doi_logo > a { color: var(--ij-blue) !important; }
body .doi_logo > a:hover,
body .doi_logo > a:focus { color: var(--ij-blue-700) !important; } /* [lawan CSS situs] */

body .obj_article_summary .galleys_links { margin-top: var(--ij-4); gap: var(--ij-2); flex-wrap: wrap; }
body .obj_article_summary .galleys_links li { margin-inline-end: 0; }

body .obj_article_summary .cover img { border-radius: var(--ij-radius-sm); box-shadow: var(--ij-shadow-sm); }

/* Hasil pencarian memakai kartu yang sama. */
body .page_search .search_results .obj_article_summary { margin: 0 0 var(--ij-4); }
body .page_search .search_results > li { margin-bottom: 0; }


/* ==========================================================================
   10. HALAMAN TERBITAN: DAFTAR ISI, ARSIP, RINGKASAN
   ========================================================================== */

body .obj_issue_toc .heading {
  padding-bottom: var(--ij-5);
  margin-bottom: var(--ij-6);
  border-bottom: 1px solid var(--ij-border);
}
body .obj_issue_toc .cover img {
  border-radius: var(--ij-radius);
  box-shadow: var(--ij-shadow);
  max-height: 320px;
}
body .obj_issue_toc .description { color: var(--ij-text-2); }
body .obj_issue_toc .published,
body .obj_issue_toc .pub_id {
  margin: var(--ij-3) 0;
  font-size: .875rem;
  color: var(--ij-muted);
}
body .obj_issue_toc .published .label,
body .obj_issue_toc .pub_id .type { color: var(--ij-text-2); font-weight: 600; }

/* Judul rubrik (Articles, Reviews, ...) sebagai pemisah yang jelas.
   Sejak 768px tema membungkus tiap rubrik dengan margin negatif, padding
   34px, sebuah garis mendatar semu (::before) dan judul bergaya "legenda"
   berlatar putih di atas garis itu. Gaya tersebut dilepas seluruhnya di
   sini dan diganti judul dengan batang aksen azure. */
body .obj_issue_toc .section,
body .obj_issue_toc .galleys {
  position: relative;
  margin: var(--ij-8) 0 0;
  padding: 0;
}
body .obj_issue_toc .sections > .section:first-child { margin-top: var(--ij-6); }
body .obj_issue_toc .section::before,
body .obj_issue_toc .galleys::before { content: none; display: none; }

body .obj_issue_toc .section > h2,
body .obj_issue_toc .section > h3,
body .obj_issue_toc .galleys > h2,
body .obj_issue_toc .galleys > h3 {
  display: block;
  position: static;
  left: auto;
  margin: 0 0 var(--ij-4);
  padding: 0 0 var(--ij-2) var(--ij-3);
  background: transparent;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ij-navy-700);
  border-left: 4px solid var(--ij-blue);
}
body .obj_issue_toc .sections:not(:first-child) { margin-top: var(--ij-6); }
body .obj_issue_toc .articles { margin-top: 0; margin-bottom: 0; }

/* Arsip terbitan: kisi kartu, bukan daftar panjang. */
body .page_issue_archive .issues_archive {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--ij-4);
  margin: 0;
  padding: 0;
  border-top: 0;
}
body .page_issue_archive .issues_archive > li {
  padding: var(--ij-5) !important;
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  transition: border-color var(--ij-t), box-shadow var(--ij-t);
}
body .page_issue_archive .issues_archive > li:hover {
  border-color: var(--ij-border-2);
  box-shadow: var(--ij-shadow);
}
body .obj_issue_summary .cover img {
  width: 100%;
  height: auto;
  border-radius: var(--ij-radius-sm);
  margin-bottom: var(--ij-3);
}
body .obj_issue_summary .title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ij-navy-800) !important;                    /* [lawan CSS situs] */
  text-decoration: none;
}
body .obj_issue_summary .title:hover { color: var(--ij-blue) !important; text-decoration: underline; }
body .obj_issue_summary .series,
body .obj_issue_summary .published {
  display: block;
  margin-top: var(--ij-2);
  font-size: .8125rem;
  color: var(--ij-muted);
}


/* ==========================================================================
   11. HALAMAN ARTIKEL
   Dua kolom: badan artikel di kiri, panel metadata + unduhan di kanan —
   pola yang dipakai MDPI, Elsevier, dan Springer karena tombol unduh selalu
   terlihat tanpa perlu menggulir.
   ========================================================================== */

body .obj_article_details > .page_title {
  margin: 0 0 var(--ij-2);
  font-size: 1.625rem !important;                          /* [lawan CSS situs] */
  line-height: 1.3;
  color: var(--ij-navy-900);
}
body .obj_article_details > .subtitle {
  margin: 0 0 var(--ij-4);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ij-muted);
}

body .obj_article_details .row {
  display: block;                                          /* [lawan CSS situs] */
  margin: var(--ij-6) 0 0 !important;
  border-top: 1px solid var(--ij-border);
  border-bottom: 0;
}
/* Di bawah 900px kedua kolom ditumpuk; float bawaan tema dilepas. */
body .obj_article_details .main_entry,
body .obj_article_details .entry_details {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  border: 0;
}
body .obj_article_details .item { padding: var(--ij-5) 0; }
body .obj_article_details .item + .item { border-top: 1px solid var(--ij-border); }

@media (min-width: 900px) {
  body .obj_article_details .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 0 var(--ij-6);
    border-bottom: 0;
  }
  body .obj_article_details .main_entry {
    float: none;
    width: auto;
    min-width: 0;
    padding-right: var(--ij-7);
    border-right: 1px solid var(--ij-border);
  }
  body .obj_article_details .entry_details {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
  }
  body .obj_article_details .item { padding: var(--ij-5) 0; }
}

/* Label bagian (Abstract, Keywords, References, ...) */
body .obj_article_details .main_entry .item .label {
  margin: 0 0 var(--ij-3);
  font-family: var(--ij-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-blue-700);
}

/* Abstrak — bagian yang paling sering dibaca, sedikit lebih besar. */
body .obj_article_details .item.abstract {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ij-text);
}

/* Penulis */
body .obj_article_details .authors { margin: 0; padding: 0; }
body .obj_article_details .authors li {
  margin-bottom: var(--ij-3);
  padding-bottom: var(--ij-3);
  border-bottom: 1px dashed var(--ij-border);
}
body .obj_article_details .authors li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
body .obj_article_details .authors .name { font-size: 1rem; font-weight: 700; color: var(--ij-navy-800); }
body .obj_article_details .authors .affiliation { font-size: .875rem; color: var(--ij-muted); }
body .obj_article_details .authors .orcid { font-size: .8125rem; color: var(--ij-muted); }
body .obj_article_details .authors .userGroup { font-size: .8125rem; color: var(--ij-faint); }

/* Kata kunci sebagai label kecil, bukan teks lepas. */
body .obj_article_details .item.keywords .value,
body .obj_article_details .item.keywords ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ij-2);
  margin: var(--ij-2) 0 0;
  padding: 0;
  list-style: none;
}
body .obj_article_details .item.keywords li,
body .obj_article_details .item.keywords .value span {
  display: inline-block;
  padding: 4px var(--ij-3);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-radius: var(--ij-pill);
  font-size: .8125rem;
  color: var(--ij-navy-700);
}

/* Daftar pustaka: mudah dipindai, indentasi gantung. */
body .obj_article_details .item.references .value p,
body .obj_article_details .references_list li {
  padding-left: var(--ij-5);
  text-indent: calc(var(--ij-5) * -1);
  margin-bottom: var(--ij-3);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ij-text-2);
}

/* --- Panel kanan: metadata & unduhan ------------------------------------- */
body .obj_article_details .entry_details .item {
  padding: var(--ij-4);
  border-bottom: 1px solid var(--ij-border);
  border-top: 0;
  word-wrap: break-word;
}
body .obj_article_details .entry_details .item:first-child { border-radius: var(--ij-radius) var(--ij-radius) 0 0; }
body .obj_article_details .entry_details .item:last-child  { border-radius: 0 0 var(--ij-radius) var(--ij-radius); border-bottom: 0; }
body .obj_article_details .entry_details > .item {
  background: var(--ij-surface-2);
  border-left: 1px solid var(--ij-border);
  border-right: 1px solid var(--ij-border);
}
body .obj_article_details .entry_details > .item:first-child { border-top: 1px solid var(--ij-border); }
body .obj_article_details .entry_details .item .label {
  display: block;            /* tema membuat label DOI & kata kunci inline */
  margin: 0 0 var(--ij-1);
  font-family: var(--ij-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
body .obj_article_details .entry_details .item .value { font-size: .9375rem; color: var(--ij-text); }

/* Tombol unduh utama dibuat penuh lebar dan terisi penuh. */
body .obj_article_details .entry_details .item.galleys .galleys_links { display: block; }
body .obj_article_details .entry_details .item.galleys .galleys_links li { margin: 0 0 var(--ij-2); }
body .obj_article_details .entry_details .item.galleys .obj_galley_link {
  display: flex;
  width: 100%;
  min-height: 46px;
  background: var(--ij-blue);
  border-color: var(--ij-blue);
  border-radius: var(--ij-radius);
  color: #fff !important;                                  /* [lawan CSS situs] */
  font-size: .9375rem;
}
body .obj_article_details .entry_details .item.galleys .obj_galley_link:hover {
  background: var(--ij-blue-700);
  border-color: var(--ij-blue-700);
}
body .obj_article_details .entry_details .item.galleys .obj_galley_link_supplementary {
  background: var(--ij-surface);
  border-color: var(--ij-border-2);
  color: var(--ij-navy-700) !important;                    /* [lawan CSS situs] */
}

body .obj_article_details .item.doi .value a { font-size: .875rem; overflow-wrap: anywhere; }
body .obj_article_details .copyright { font-size: .8125rem; color: var(--ij-muted); }

/* Kotak "How to Cite" */
body .obj_article_details .citation_display .value {
  padding: var(--ij-3);
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius-sm);
  font-size: .875rem;
  line-height: 1.6;
}
body .obj_article_details .citation_display .citation_formats {
  margin-top: var(--ij-3);
  border: 1px solid var(--ij-border-2);
  border-radius: var(--ij-radius);
  overflow: hidden;
}
body .obj_article_details .citation_display .citation_formats_button {
  min-height: 42px;
  padding: 0 var(--ij-3);
  background: var(--ij-surface);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ij-navy-800);
  text-align: left;
}
body .obj_article_details .citation_display .citation_formats_button:hover,
body .obj_article_details .citation_display .citation_formats_button:focus {
  background: var(--ij-blue-50);
}
body .obj_article_details .citation_display .citation_formats_styles a {
  padding: 10px var(--ij-3);
  border-bottom: 1px solid var(--ij-border);
  font-size: .875rem;
  text-decoration: none;
}
body .obj_article_details .citation_display .citation_formats_styles a:hover,
body .obj_article_details .citation_display .citation_formats_styles a:focus {
  background: var(--ij-blue-50);
}

/* Ikon FontAwesome yang ditambahkan CSS situs pada nama & afiliasi penulis
   diberi jarak dan warna yang sesuai. */
body .item.authors span.name::before,
body .item.authors span.affiliation::before { margin-right: 6px; color: var(--ij-faint); }


/* ==========================================================================
   12. TABEL, GAMBAR, RUMUS, KODE
   Bagian ini penting untuk jurnal matematika: rumus panjang dan tabel lebar
   harus bisa digeser mendatar sendiri, bukan merusak lebar halaman.
   ========================================================================== */

body .pkp_structure_main img,
body .pkp_structure_main video,
body .pkp_structure_main iframe { max-width: 100%; height: auto; }
body .pkp_structure_main figure { margin: var(--ij-6) 0; }
body .pkp_structure_main figcaption {
  margin-top: var(--ij-2);
  font-size: .875rem;
  color: var(--ij-muted);
}

body .pkp_structure_main table,
body .cmp_table {
  width: 100%;
  margin: var(--ij-6) 0;
  border-collapse: collapse;
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  overflow: hidden;
  font-size: .9375rem;
  background: var(--ij-surface);
}
body .pkp_structure_main th,
body .cmp_table th {
  padding: var(--ij-3) var(--ij-4);
  background: var(--ij-navy-800);
  color: #fff;
  font-weight: 600;
  text-align: left;
  vertical-align: top;
  border: 0;
}
body .pkp_structure_main td,
body .cmp_table td {
  padding: var(--ij-3) var(--ij-4);
  border-top: 1px solid var(--ij-border);
  vertical-align: top;
}
/* Baris selang-seling memudahkan mata mengikuti baris panjang. */
body .pkp_structure_main tbody tr:nth-child(even),
body .cmp_table tbody tr:nth-child(even) { background: var(--ij-surface-2); }
body .pkp_structure_main caption {
  padding-bottom: var(--ij-2);
  font-size: .875rem;
  color: var(--ij-muted);
  text-align: left;
}

/* Bungkus tabel lebar dengan <div class="ij-scroll"> ... </div> agar bisa
   digeser. Di layar sempit, tabel tanpa pembungkus pun dibuat bisa digeser. */
body .ij-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--ij-6) 0;
  border-radius: var(--ij-radius);
}
body .ij-scroll > table { margin: 0; }
@media (max-width: 767px) {
  body .pkp_structure_main table:not(.ij-plain) { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Rumus MathJax / KaTeX yang lebih lebar dari kolom. */
body mjx-container[display="true"],
body .MathJax_Display,
body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--ij-1) 0;
  max-width: 100%;
}

body .pkp_structure_main pre,
body .pkp_structure_main code,
body .pkp_structure_main kbd {
  font-family: var(--ij-mono);
  font-size: .875em;
}
body .pkp_structure_main code {
  padding: 2px 6px;
  background: var(--ij-surface-2);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius-sm);
  color: var(--ij-navy-800);
}
body .pkp_structure_main pre {
  padding: var(--ij-4);
  overflow-x: auto;
  background: var(--ij-navy-900);
  color: var(--ij-on-dark);
  border-radius: var(--ij-radius);
  line-height: 1.6;
}
body .pkp_structure_main pre code { background: none; border: 0; color: inherit; padding: 0; }

/* Penampil galley (PDF di dalam halaman). */
body .galley_view,
body iframe[id*="pdfCanvasContainer"],
body .pkp_structure_main iframe.galley_view {
  width: 100%;
  min-height: 80vh;
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  background: var(--ij-surface-2);
}


/* ==========================================================================
   13. PENGUMUMAN & BERANDA
   ========================================================================== */

body .cmp_announcements.cmp_announcements {
  margin: 0 !important;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--ij-4);
}
body .cmp_announcements.cmp_announcements > li {
  padding: var(--ij-5) !important;
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-bottom: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  transition: border-color var(--ij-t), box-shadow var(--ij-t);
}
body .cmp_announcements.cmp_announcements > li:hover {
  border-color: var(--ij-border-2);
  box-shadow: var(--ij-shadow);
}
body .obj_announcement_summary h2,
body .obj_announcement_summary h3,
body .obj_announcement_summary h4 { margin: 0 0 var(--ij-2); font-size: 1.0625rem; line-height: 1.4; }
body .obj_announcement_summary h2 a,
body .obj_announcement_summary h3 a,
body .obj_announcement_summary h4 a { color: var(--ij-navy-800) !important; text-decoration: none; }
body .obj_announcement_summary h2 a:hover,
body .obj_announcement_summary h3 a:hover,
body .obj_announcement_summary h4 a:hover { color: var(--ij-blue) !important; text-decoration: underline; }
body .obj_announcement_summary .date,
body .obj_announcement_full .date {
  display: inline-block;
  margin-bottom: var(--ij-2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
body .obj_announcement_summary .summary { color: var(--ij-text-2); }

/* Korsel pengumuman bawaan OJS 3.5 (Swiper) mengikuti warna merek. */
body .swiper { --swiper-theme-color: var(--ij-blue); }
body .swiper-slide { border-radius: var(--ij-radius-lg); overflow: hidden; }
body .swiper-slide-image { border-radius: var(--ij-radius-lg); }

/* --- Beranda -------------------------------------------------------------- */

/* Tanpa gambar beranda, CSS situs menyisakan 30% ruang kosong di kanan. */
body .homepage_about {
  display: block;
  width: 100%;                                             /* [lawan CSS situs] */
  padding-top: 0;
  padding-bottom: var(--ij-6);
}
body .homepage_about h2 { margin-top: 0; }

/* Isi tambahan beranda (panel penulis, sekilas jurnal, ruang lingkup)
   dipisahkan garis tipis dari ringkasan jurnal di atasnya. */
body.pkp_page_index .additional_content {
  margin-top: var(--ij-6);
  padding-top: var(--ij-7);
  border-top: 1px solid var(--ij-border);
}
body.pkp_page_index .additional_content > :first-child { margin-top: 0; }
body.pkp_page_index .homepage_image {
  width: 34%;
  margin: 0 0 var(--ij-5) var(--ij-6);
  float: right;
}
body.pkp_page_index .homepage_image img {
  width: 100%;                                             /* [lawan CSS situs] */
  margin: 0 !important;                                    /* [lawan CSS situs] */
  border-radius: var(--ij-radius-lg);
  box-shadow: var(--ij-shadow);                            /* [lawan CSS situs] */
}

body.pkp_page_index .cmp_announcements { border: 0; padding-top: var(--ij-6); }
/* Di beranda, tema membuat pengumuman mengambang 65%/35% dengan garis
   pemisah semu. Karena daftar sudah memakai kisi kartu, semuanya dilepas. */
body.pkp_page_index .cmp_announcements > .obj_announcement_summary,
body.pkp_page_index .cmp_announcements .more {
  float: none;
  width: auto;
  padding: var(--ij-5) !important;
}
body.pkp_page_index .cmp_announcements > .obj_announcement_summary::before,
body.pkp_page_index .cmp_announcements .more::before { content: none; display: none; }
body .obj_announcement_summary .date::before { margin-right: 6px; opacity: .75; }
body.pkp_page_index .current_issue { display: block; padding-top: var(--ij-6); }
body.pkp_page_index .current_issue .current_issue_title {
  margin: 0 0 var(--ij-4);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ij-navy-800);
}
body.pkp_page_index .current_issue .read_more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--ij-5);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-radius: var(--ij-pill);
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
}
/* Panah bawaan tema diposisikan absolut di tepi kanan; di dalam tombol pil
   posisinya jadi menumpuk teks, sehingga dijadikan sebaris biasa. */
body.pkp_page_index .current_issue .read_more::after {
  position: static;
  width: auto;
  height: auto;
  margin-left: var(--ij-2);
}
body.pkp_page_index .current_issue .read_more:hover,
body.pkp_page_index .current_issue .read_more:focus {
  background: var(--ij-blue);
  border-color: var(--ij-blue);
  color: #fff !important;                                  /* [lawan CSS situs] */
}


/* ==========================================================================
   14. BLOK SIDEBAR
   Setiap blok jadi kartu putih; judulnya huruf kecil berspasi lebar dengan
   garis azure — CSS situs aslinya memberi gradasi abu dan teks maroon.
   ========================================================================== */

body .pkp_block {
  margin: 0 0 var(--ij-4);
  padding: 0;
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  overflow: hidden;
}
body .pkp_block:last-child { margin-bottom: 0; }

body .pkp_block .title {
  margin: 0 !important;                                    /* [lawan CSS situs] */
  padding: var(--ij-4) var(--ij-5) var(--ij-3) !important; /* [lawan CSS situs] */
  background: var(--ij-surface);                           /* [lawan CSS situs] */
  border: 0;                                               /* [lawan CSS situs] */
  border-bottom: 1px solid var(--ij-border);               /* [lawan CSS situs] */
  color: var(--ij-navy-800);                               /* [lawan CSS situs] */
  font-family: var(--ij-sans);
  font-size: .75rem;                                       /* [lawan CSS situs] */
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;                                        /* [lawan CSS situs] */
  position: relative;
}
body .pkp_block .title::after {
  content: "";
  position: absolute;
  left: var(--ij-5);
  bottom: -1px;
  width: 32px;
  height: 2px;
  background: var(--ij-blue);
}

body .pkp_block .content { padding: var(--ij-2) 0; font-size: .9375rem; }
body .pkp_block .content > p { padding: var(--ij-2) var(--ij-5); margin: 0; }
body .pkp_block .content ul { margin: 0; padding: 0; list-style: none; }
body .pkp_block .content li { margin: 0; }

/* Tiap baris menjadi sasaran klik penuh setinggi 44px. */
body .pkp_block .content li > a {
  display: flex;
  align-items: center;
  gap: var(--ij-2);
  min-height: 44px;
  padding: var(--ij-2) var(--ij-5);
  color: var(--ij-navy-700) !important;                    /* [lawan CSS situs] */
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--ij-t), border-color var(--ij-t), color var(--ij-t);
}
body .pkp_block .content li > a:hover,
body .pkp_block .content li > a:focus {
  background: var(--ij-blue-50);
  border-left-color: var(--ij-blue);
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  text-decoration: none;
}
body .pkp_block .content li > a:visited { color: var(--ij-navy-700) !important; }

/* Bahasa yang sedang aktif ditandai. */
body .block_language .current > a {
  background: var(--ij-blue-50);
  border-left-color: var(--ij-blue);
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  font-weight: 700;
}
body .block_language .current > a::after {
  content: "\f00c";                                        /* centang */
  font: normal normal normal 12px/1 FontAwesome;
  margin-left: auto;
  opacity: .8;
}

/* Tombol "Make a Submission" dibuat menonjol penuh lebar. Warna teks ditulis
   dengan bobot tinggi karena aturan tautan blok umum di bawah juga
   mengenainya. */
/* Warna tindakan konsisten: semua ajakan kirim naskah memakai teal, sama
   dengan tombol Submit di bilah navigasi dan di kaki menu kiri. */
body .pkp_block.block_make_submission { border: 0; background: transparent; box-shadow: none; }
body .pkp_block.block_make_submission .content a {
  background: var(--ij-teal);
  border-color: var(--ij-teal);
}
body .pkp_block.block_make_submission .content a:hover,
body .pkp_block.block_make_submission .content a:focus {
  background: var(--ij-teal-700);
  border-color: var(--ij-teal-700);
}
body .pkp_block.block_make_submission .content a::before {
  content: "\f1d8";
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: var(--ij-2);
}
body .pkp_block.block_make_submission .content { padding: 0; }
body .pkp_block.block_make_submission .content a {
  display: flex;
  width: 100%;
  color: #fff !important;
  text-decoration: none;
}
body .pkp_block.block_make_submission .content a:hover,
body .pkp_block.block_make_submission .content a:focus {
  color: #fff !important;
  text-decoration: none;
}

/* Tautan di dalam blok yang TIDAK berbentuk daftar (mis. blok kustom). */
body .pkp_block .content a { color: var(--ij-navy-700); text-decoration: none; }
body .pkp_block .content a:hover,
body .pkp_block .content a:focus { color: var(--ij-blue-700); text-decoration: underline; }

/* --- Blok bawaan OJS yang tidak dipakai ----------------------------------
   Blok Latest publications, Browse, Subscription, dan Announcement feed
   sudah dilepas dari sidebar (Settings -> Website -> Appearance -> Sidebar),
   jadi gayanya tidak perlu disimpan di sini. Begitu pula dukungan markup
   menu lama berbasis <div style="...">: isi blok menu kini memakai markup
   bersih .ij-menu, dan versi lamanya tersimpan di map "Cadangan Sebelum
   Perubahan". Bila salah satu blok itu diaktifkan lagi, tampilannya
   mengikuti gaya .pkp_block umum di atas.                                 */

/* --- KOLOM KIRI: blok "Menu" ---------------------------------------------
   Markup yang diharapkan ada di berkas
   "Pengelolaan Manager Umum/menu" (tempel di Custom Block Manager).
   Strukturnya:

     <div class="ij-menu">
       <div class="ij-menu__group">
         <div class="ij-menu__title">For Authors</div>
         <ul class="ij-menu__list">
           <li><a href="..."><em class="fa fa-book"></em>Author Guidelines</a></li>
         </ul>
       </div>
       ...
     </div>

   Gaya lama berbasis <div style="..."> tetap didukung di blok sebelumnya,
   jadi tampilan tidak rusak selama isinya belum diganti.                  */

body #customblock-menu > .content,
body .pkp_block .content > .ij-menu { padding: 0; }
body .pkp_block .content .ij-menu { font-size: .9375rem; }

/* Kepala kolom menu — batang navy tipis sebagai penanda kolom kiri. */
body .pkp_block .content .ij-menu__head {
  display: flex;
  align-items: center;
  gap: var(--ij-2);
  padding: 11px var(--ij-4);
  background: var(--ij-navy-800);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body .pkp_block .content .ij-menu__head em { color: var(--ij-blue-300); font-style: normal; }

/* Judul kelompok — huruf kecil berspasi lebar di atas isian biru muda. */
body .pkp_block .content .ij-menu__title {
  padding: 10px var(--ij-4) 8px;
  background: var(--ij-blue-50);
  border-top: 1px solid var(--ij-border);
  border-bottom: 1px solid var(--ij-blue-100);
  color: var(--ij-navy-800);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body .pkp_block .content .ij-menu__group:first-child > .ij-menu__title { border-top: 0; }

body .pkp_block .content .ij-menu__list {
  margin: 0;
  padding: 2px 0;
  list-style: none;
}
/* Tema memberi <li> padding 0.357rem; dilepas karena tinggi baris sudah
   diatur oleh tautannya sendiri. */
body .pkp_block .content .ij-menu__list li { margin: 0; padding: 0; }

/* Baris menu: seluruh baris jadi sasaran klik, tinggi 40px (padat tetapi
   masih nyaman ditekan karena lebar penuh kolom). */
body .pkp_block .content .ij-menu__list li > a,
body .pkp_block .content .ij-menu__list li > span {
  display: flex;
  align-items: center;
  gap: var(--ij-3);
  min-height: 38px;
  padding: 6px var(--ij-4);
  border-left: 3px solid transparent;
  color: var(--ij-text-2) !important;                      /* [lawan CSS situs] */
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background var(--ij-t), border-color var(--ij-t), color var(--ij-t);
}
body .pkp_block .content .ij-menu__list li > a:hover,
body .pkp_block .content .ij-menu__list li > a:focus {
  background: var(--ij-blue-50);
  border-left-color: var(--ij-blue);
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  text-decoration: none;
}
body .pkp_block .content .ij-menu__list li > a:visited { color: var(--ij-text-2) !important; }
/* Butir tanpa tautan (halaman belum dibuat) tampil redup, bukan seperti
   tautan rusak. */
body .pkp_block .content .ij-menu__list li > span { color: var(--ij-faint) !important; cursor: default; }

body .pkp_block .content .ij-menu em.fa,
body .pkp_block .content .ij-menu em[class*="fa-"] {
  flex: 0 0 auto;
  width: 1.15em;
  text-align: center;
  color: var(--ij-faint);
  font-style: normal;
  transition: color var(--ij-t);
}
body .pkp_block .content .ij-menu__list li > a:hover em { color: var(--ij-blue); }

/* Butir yang ditandai penting bagi penulis (tambahkan kelas ij-menu__key). */
body .pkp_block .content .ij-menu__list li.ij-menu__key > a {
  font-weight: 700;
  color: var(--ij-navy-700) !important;                    /* [lawan CSS situs] */
}
body .pkp_block .content .ij-menu__list li.ij-menu__key > a em { color: var(--ij-teal); }

/* Tombol di kaki kolom menu. */
body .pkp_block .content .ij-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ij-2);
  min-height: 42px;
  margin: var(--ij-3) var(--ij-4);
  padding: 0 var(--ij-4);
  background: var(--ij-teal);
  border-radius: var(--ij-radius-sm);
  color: #fff !important;                                  /* [lawan CSS situs] */
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none !important;
}
body .pkp_block .content .ij-menu__cta:hover,
body .pkp_block .content .ij-menu__cta:focus { background: var(--ij-teal-700); color: #fff !important; }
body .pkp_block .content .ij-menu__cta em { color: #fff !important; }

/* Di layar besar tombol ini disembunyikan: bilah navigasi kini menempel saat
   digulir sehingga tombol Submit di sana selalu terlihat, dan panel penulis
   di awal setiap halaman memuat tautan yang sama. Di layar kecil tombol ini
   tetap tampil karena navigasi tersembunyi di balik tombol menu. */
@media (min-width: 992px) {
  body .pkp_block .content .ij-menu__cta { display: none; }
}


/* Blok atribusi OJS: tetap ada (etiket PKP) tetapi dibuat tenang, tidak
   menyaingi blok informasi di atasnya. */
body .pkp_block.block_developed_by {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body .pkp_block.block_developed_by .content { padding: 0; }
body .pkp_block.block_developed_by a {
  display: block;
  padding: var(--ij-2) 0;
  color: var(--ij-muted) !important;                       /* [lawan CSS situs] */
  font-size: .75rem;
}
body .pkp_block.block_developed_by a:hover { color: var(--ij-blue-700) !important; }


/* ==========================================================================
   15. FORMULIR
   ========================================================================== */

body .cmp_form fieldset { margin-bottom: var(--ij-5); }
body .cmp_form legend {
  margin-bottom: var(--ij-3);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ij-navy-800);
}
body .cmp_form .fields > div { padding-bottom: var(--ij-5); }
body .cmp_form .label,
body .cmp_form label > span:first-child {
  margin-bottom: var(--ij-1);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ij-text-2);
}
body .cmp_form input[type="text"],
body .cmp_form input[type="email"],
body .cmp_form input[type="password"],
body .cmp_form input[type="url"],
body .cmp_form input[type="tel"],
body .cmp_form input[type="search"],
body .cmp_form input[type="number"],
body .cmp_form select,
body .cmp_form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--ij-3);
  background: var(--ij-surface);
  border: 1px solid var(--ij-border-2);
  border-radius: var(--ij-radius);
  font-family: var(--ij-sans);
  font-size: 1rem;
  color: var(--ij-text);
  transition: border-color var(--ij-t), box-shadow var(--ij-t);
}
body .cmp_form textarea { min-height: 9em; line-height: 1.6; }
body .cmp_form input:hover,
body .cmp_form select:hover,
body .cmp_form textarea:hover { border-color: var(--ij-faint); }
body .cmp_form input:focus,
body .cmp_form select:focus,
body .cmp_form textarea:focus {
  border-color: var(--ij-blue);
  box-shadow: 0 0 0 3px var(--ij-blue-100);
  outline: none;
}
body .cmp_form ::placeholder { color: var(--ij-faint); }
body .cmp_form .description { font-size: .8125rem; color: var(--ij-muted); }
body .cmp_form .buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ij-3); }
body .cmp_form .buttons a { margin-left: 0; font-size: .875rem; }
body .cmp_form .fields > div .error,
body .cmp_form .pkp_form_error {
  background: var(--ij-red);
  border-radius: var(--ij-radius-sm);
  font-size: .8125rem;
  font-weight: 600;
  color: #fff;
}
body .cmp_form label > input[type="checkbox"],
body .cmp_form label > input[type="radio"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-right: var(--ij-2);
  accent-color: var(--ij-blue);
  vertical-align: -3px;
}

/* Formulir masuk terlalu sempit (17em) di CSS situs. */
body .page_login .login {
  max-width: 26em !important;                              /* [lawan CSS situs] */
  margin: 0 auto !important;                               /* [lawan CSS situs] */
  padding: var(--ij-6);
  background: var(--ij-surface-2);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius-lg);
}

/* Penyaring pada halaman pencarian. */
body .cmp_search_filter {
  padding: var(--ij-4);
  background: var(--ij-surface-2);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  margin-bottom: var(--ij-4);
}
body .page_search .search_results h2 { margin-top: 0; }

/* --- Halaman Cari --------------------------------------------------------
   Kotak pencarian dibuat besar dan menonjol; blok "Filter lanjutan" jadi
   kartu abu lembut. Tata letak mengambang bawaan tema (dua kolom rentang
   tanggal) sengaja dibiarkan karena sudah bekerja baik. */
body .page_search .search_input { margin-bottom: var(--ij-4); }
body .page_search .search_input .query {
  height: auto;
  min-height: 52px;
  padding: var(--ij-3) var(--ij-4);
  line-height: 1.4;                /* tema memakai line-height setinggi kotak */
  font-size: 1.0625rem;
  border-radius: var(--ij-radius);
}
body .page_search .search_advanced {
  padding: 0 var(--ij-5) var(--ij-5);
  background: var(--ij-surface-2);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
}
body .page_search .search_advanced > legend {
  margin-left: calc(var(--ij-5) * -1);
  padding: var(--ij-4) 0 var(--ij-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
body .page_search .date_range fieldset { margin-bottom: var(--ij-4); }
body .page_search .date_range legend {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ij-text-2);
}
body .page_search .date_range select { min-height: 40px; padding: 6px var(--ij-2); }
body .page_search .search_results { margin-top: var(--ij-6); }
/* Tombol "Cari": tema menempelkan ikon kaca pembesar dengan posisi absolut
   di tepi kiri tombol sehingga menimpa tulisannya. Ikon dijadikan sebaris. */
body .page_search .submit { text-align: right; }
body .page_search .submit button::after {
  position: static;
  width: auto;
  height: auto;
  margin-left: var(--ij-2);
  background: none;
  border-radius: 0;
  box-shadow: none;
  line-height: inherit;
}
body .page_search .submit button:hover::after,
body .page_search .submit button:focus::after { background: none; box-shadow: none; }

/* --- Halaman Kontak ------------------------------------------------------
   Tema menyusun dua kontak dengan float 50%; diganti kisi kartu agar rapi
   di semua lebar layar. Alamat memanjang penuh di atasnya. */
body .page_contact .contact_section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ij-4);
  margin-top: var(--ij-6);
}
body .page_contact .contact_section::before,
body .page_contact .contact_section::after { content: none; display: none; }

body .page_contact .address {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--ij-5);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-radius: var(--ij-radius);
  font-size: 1rem;
  color: var(--ij-navy-800);
}
body .page_contact .address::before {
  content: "\f041";                                        /* penanda peta */
  font: normal normal normal 15px/1 FontAwesome;
  margin-right: var(--ij-2);
  color: var(--ij-blue);
}
body .page_contact .contact {
  float: none;
  width: auto;
  margin: 0;
  padding: var(--ij-5);
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
}
body .page_contact .contact.primary { padding-right: var(--ij-5); }
body .page_contact .contact.support { margin-top: 0; }
body .page_contact .contact h2 {
  margin: 0 0 var(--ij-3);
  padding-bottom: var(--ij-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-blue-700);
  border-bottom: 1px solid var(--ij-border);
}
body .page_contact .name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ij-navy-800);
}
body .page_contact .phone,
body .page_contact .email { margin: var(--ij-3) 0 0; font-size: .9375rem; }
body .page_contact .label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ij-muted);
}
body .page_contact .value { color: var(--ij-text); }
body .page_contact .email a { font-weight: 600; }

/* --- Halaman Registrasi --------------------------------------------------
   Baris persetujuan (surel & privasi) dijadikan kotak agar kotak centangnya
   tidak tenggelam di antara isian lain. */
body .page_register .fields .optin,
body .page_register .fields .consent {
  padding: var(--ij-3) var(--ij-4) !important;
  margin-bottom: var(--ij-3);
  background: var(--ij-surface-2);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
}
body .page_register .fields .optin label,
body .page_register .fields .consent label {
  display: flex;
  gap: var(--ij-2);
  align-items: flex-start;
  font-size: .9375rem;
  line-height: 1.6;
}
body .page_register .fields .optin input[type="checkbox"],
body .page_register .fields .consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
}
body .recaptcha_wrapper,
body .g-recaptcha { margin: var(--ij-4) 0; }
body .cmp_form .required { color: var(--ij-red); font-weight: 700; }
body .cmp_form abbr[title] { text-decoration: none; border-bottom: 0; }


/* ==========================================================================
   16. NOTIFIKASI & PENOMORAN HALAMAN
   ========================================================================== */

body .cmp_notification {
  display: flex;
  gap: var(--ij-3);
  padding: var(--ij-4) var(--ij-5);
  margin-bottom: var(--ij-6);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-left: 4px solid var(--ij-blue);
  border-radius: var(--ij-radius);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ij-text);
}
body .cmp_notification.warning {
  background: var(--ij-amber-50);
  border-color: #f3dcc0;
  border-left-color: var(--ij-amber);
}
body .cmp_notification.success,
body .cmp_notification .success {
  background: var(--ij-green-50);
  border-color: #c9e9dc;
  border-left-color: var(--ij-green);
}
body .cmp_notification.no,
body .cmp_notification .no {
  background: var(--ij-red-50);
  border-color: #f4cfcb;
  border-left-color: var(--ij-red);
}
body .cmp_notification a { font-weight: 600; }

body .cmp_pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ij-2);
  margin-top: var(--ij-6);
  padding-top: var(--ij-4);
  border-top: 1px solid var(--ij-border);
  font-size: .875rem;
  color: var(--ij-muted);
}
body .cmp_pagination .prev,
body .cmp_pagination .next {
  display: inline-flex;
  align-items: center;
  gap: var(--ij-2);
  min-height: 40px;
  padding: 0 var(--ij-4);
  background: var(--ij-surface);
  border: 1px solid var(--ij-border-2);
  border-radius: var(--ij-pill);
  color: var(--ij-blue) !important;                        /* [lawan CSS situs] */
  font-weight: 600;
  text-decoration: none !important;
  float: none;
  margin: 0;
}
body .cmp_pagination .next { margin-left: auto; }
body .cmp_pagination .prev:hover,
body .cmp_pagination .next:hover {
  background: var(--ij-blue);
  border-color: var(--ij-blue);
  color: #fff !important;                                  /* [lawan CSS situs] */
}


/* ==========================================================================
   17. FOOTER
   CSS situs mewarnai seluruh footer maroon (#790304). Di sini diganti navy
   agar sewarna dengan kepala halaman, dengan garis aksen azure tipis di
   batas atasnya.
   ========================================================================== */

body .pkp_structure_footer_wrapper {
  margin-top: var(--ij-8);
  background: var(--ij-navy-900);                          /* [lawan CSS situs] */
  border-top: 3px solid var(--ij-blue);
  border-bottom: 0;                                        /* [lawan CSS situs] */
  color: var(--ij-on-dark);
}
body .pkp_structure_footer {
  margin-top: 0;                                           /* [lawan CSS situs] */
  padding-top: var(--ij-8);
  padding-bottom: var(--ij-6);
  background: transparent;                                 /* [lawan CSS situs] */
  text-align: left;                                        /* [lawan CSS situs] */
}
body .pkp_footer_content {
  float: none;                                             /* [lawan CSS situs] */
  width: 100%;                                             /* [lawan CSS situs] */
  padding: 0;                                              /* [lawan CSS situs] */
  background: transparent;                                 /* [lawan CSS situs] */
  color: var(--ij-on-dark);
  font-size: .9375rem;
  line-height: 1.7;
}
body .pkp_footer_content a {
  color: var(--ij-blue-300) !important;                    /* [lawan CSS situs] */
  text-decoration: underline;
  text-underline-offset: 2px;
}
body .pkp_footer_content a:hover { color: #fff !important; }

/* Tata letak tiga kolom untuk markup .ijoms-footer yang sudah dipakai. */
body .ijoms-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ij-7);
  padding-bottom: var(--ij-7);
}
body .ijoms-footer__col > h3,
body .ijoms-footer__col > h2 {
  margin: 0 0 var(--ij-3);
  padding-bottom: var(--ij-2);
  font-family: var(--ij-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 2px solid var(--ij-blue);
  display: inline-block;
}
body .ijoms-footer__col p,
body .ijoms-footer__col li {
  margin: 0 0 var(--ij-3);
  color: var(--ij-on-dark-2);
  font-size: .9375rem;
  line-height: 1.75;
}
body .ijoms-footer__col ul { margin: 0; padding: 0; list-style: none; }
body .ijoms-footer__col a { color: var(--ij-on-dark-2) !important; text-decoration: none; }
body .ijoms-footer__col a:hover,
body .ijoms-footer__col a:focus { color: #fff !important; text-decoration: underline; }

body .ijoms-footer__copyright {
  margin: 0;
  padding-top: var(--ij-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .8125rem;
  color: var(--ij-on-dark-2);
}

/* Logo OJS/PKP disembunyikan oleh CSS situs (display:none !important).
   Ingin menampilkannya kembali? tambahkan di paling bawah berkas ini:
   body .pkp_brand_footer { display: block !important; opacity: .7; }        */
body .pkp_brand_footer img { filter: brightness(0) invert(1); opacity: .65; }


/* ==========================================================================
   18. KOMPONEN TAMBAHAN SIAP PAKAI
   Kelas .ij-* di bawah ini TIDAK dipakai OJS secara otomatis. Tempelkan
   kelasnya di editor HTML halaman statis (About, Focus & Scope, Author
   Guidelines, Editorial Board, blok sidebar khusus) untuk mendapat tampilan
   yang seragam dengan sisa situs. Contoh pemakaian ada di tiap blok.
   ========================================================================== */

/* --- Label kecil ---------------------------------------------------------
   <span class="ij-badge ij-badge--oa">Open Access</span>                   */
body .ij-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--ij-3);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-radius: var(--ij-pill);
  color: var(--ij-blue-700);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.5;
  vertical-align: middle;
}
body .ij-badge--oa    { background: var(--ij-green-50); border-color: #c9e9dc; color: var(--ij-green); }
body .ij-badge--new   { background: var(--ij-amber-50); border-color: #f3dcc0; color: var(--ij-amber); }
body .ij-badge--solid { background: var(--ij-blue); border-color: var(--ij-blue); color: #fff; }

/* --- Kisi kartu ----------------------------------------------------------
   <div class="ij-grid ij-grid--3">
     <div class="ij-card"><h3>Judul</h3><p>Isi</p></div>
     ...
   </div>                                                                   */
body .ij-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--ij-4);
  margin: var(--ij-6) 0;
}
body .ij-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
body .ij-grid--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

body .ij-card {
  padding: var(--ij-5);
  background: var(--ij-surface);
  border: 1px solid var(--ij-border);
  border-radius: var(--ij-radius);
  transition: border-color var(--ij-t);
}
body .ij-card:hover { border-color: var(--ij-border-2); }
body .ij-card > :first-child { margin-top: 0 !important; }
body .ij-card > :last-child { margin-bottom: 0 !important; }
body .ij-card h3, body .ij-card h4 { margin-top: 0 !important; }

/* --- Angka penting -------------------------------------------------------
   <div class="ij-grid ij-grid--3">
     <div class="ij-stat"><b>2</b><span>Terbitan per tahun</span></div>
   </div>                                                                   */
body .ij-stat {
  padding: var(--ij-5);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-radius: var(--ij-radius);
  text-align: center;
}
body .ij-stat { color: var(--ij-muted); font-size: .8125rem; line-height: 1.45; }
body .ij-stat b,
body .ij-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ij-navy-800);
  font-variant-numeric: tabular-nums;
}
body .ij-stat span {
  display: block;
  margin-top: var(--ij-1);
  font-size: .8125rem;
  color: var(--ij-muted);
}

/* --- Kotak catatan -------------------------------------------------------
   <div class="ij-note">Isi catatan</div>  (varian: ij-note--warn / --ok)   */
body .ij-note {
  margin: var(--ij-6) 0;
  padding: var(--ij-4) var(--ij-5);
  background: var(--ij-blue-50);
  border: 1px solid var(--ij-blue-100);
  border-left: 4px solid var(--ij-blue);
  border-radius: var(--ij-radius);
  color: var(--ij-text);
}
body .ij-note--warn { background: var(--ij-amber-50); border-color: #f3dcc0; border-left-color: var(--ij-amber); }
body .ij-note--ok   { background: var(--ij-green-50); border-color: #c9e9dc; border-left-color: var(--ij-green); }
body .ij-note > :first-child { margin-top: 0; }
body .ij-note > :last-child { margin-bottom: 0; }

/* --- Tombol mandiri ------------------------------------------------------
   <a class="ij-btn" href="...">Submit Manuskrip</a>
   <a class="ij-btn ij-btn--ghost" href="...">Unduh Template</a>            */
body .ij-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ij-2);
  min-height: 46px;
  padding: 0 var(--ij-6);
  background: var(--ij-blue);
  border: 1px solid var(--ij-blue);
  border-radius: var(--ij-radius);
  color: #fff !important;                                  /* [lawan CSS situs] */
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: var(--ij-shadow-sm);
  transition: background var(--ij-t), box-shadow var(--ij-t);
}
body .ij-btn:hover, body .ij-btn:focus { background: var(--ij-blue-700); border-color: var(--ij-blue-700); color: #fff !important; }
body .ij-btn--ghost {
  background: var(--ij-surface);
  color: var(--ij-blue) !important;                        /* [lawan CSS situs] */
}
body .ij-btn--ghost:hover { background: var(--ij-blue-50); color: var(--ij-blue-700) !important; }

/* --- Daftar bercentang ---------------------------------------------------
   <ul class="ij-list-check"><li>Poin pertama</li></ul>                     */
body .ij-list-check { list-style: none; margin: var(--ij-4) 0; padding: 0; }
body .ij-list-check li {
  position: relative;
  padding-left: var(--ij-7);
  margin-bottom: var(--ij-3);
}
body .ij-list-check li::before {
  content: "\f058";                                        /* centang lingkaran */
  position: absolute;
  left: 0;
  top: 2px;
  font: normal normal normal 16px/1.4 FontAwesome;
  color: var(--ij-green);
}

/* --- Baris logo pengindeks ----------------------------------------------
   <div class="ij-logos"><img src="..." alt="Google Scholar"> ...</div>     */
body .ij-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ij-5);
  margin: var(--ij-5) 0;
}
body .ij-logos img {
  max-height: 46px;
  width: auto !important;                                  /* [lawan CSS situs] */
  filter: grayscale(1);
  opacity: .75;
  transition: filter var(--ij-t), opacity var(--ij-t);
}
body .ij-logos a:hover img { filter: none; opacity: 1; }

/* --- Daftar nama (Dewan Redaksi / Mitra Bestari) -------------------------
   Menggantikan deretan <p> panjang pada halaman Editorial Board:
   <div class="ij-people">
     <div class="ij-person">
       <b>Nama Lengkap</b>
       <span>Universitas, Negara</span>
       <span>Scopus ID: 000000</span>
     </div>
     ...
   </div>                                                                   */
body .ij-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 var(--ij-8);
  margin: var(--ij-4) 0 var(--ij-8);
  padding: 0;
  border-top: 1px solid var(--ij-border);
  list-style: none;
}
body .ij-person {
  padding: var(--ij-3) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ij-border);
  border-radius: 0;
}
body .ij-person b,
body .ij-person strong {
  display: block;
  font-family: var(--ij-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ij-navy-900);
}
body .ij-person span {
  display: block;
  margin-top: 2px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ij-muted);
}
body .ij-person a { font-size: .875rem; }

/* --- Teks naratif dengan panjang baris terkendali -------------------------
   <div class="ij-prose"> ... </div>                                        */
body .ij-prose { max-width: var(--ij-measure); }


/* --- KONTRAK MARKUP UNTUK HALAMAN STATIS ---------------------------------
   Penyaring HTML OJS pada Static Pages hanya meloloskan sebagian tag dan
   atribut. Yang TERBUKTI lolos di situs ini:

       div[class]   a[class|href|target|rel]   strong   em
       p   h2   h3   ul   ol   li   br   img[src|alt]

   Yang DIBUANG: <span class="...">, tag sebaris yang kosong
   (mis. <em class="fa fa-book"></em>), dan <style>. <b> diubah jadi
   <strong>.

   Karena itu SELURUH komponen di bawah ini dibangun hanya dari <div>,
   <a>, dan <strong>; ikon TIDAK ditulis di markup melainkan berasal dari
   kelas .ij-i-* yang menggambar ikon lewat ::before. Keterangan kecil
   ditulis sebagai teks polos setelah </strong> — bukan <span>.

   Bentuk baku sebuah butir:
       <a class="ij-authorbar__item ij-i-submit" href="...">
         <strong>Judul</strong>keterangan singkat
       </a>
   ========================================================================= */

/* --- Pustaka ikon (FontAwesome 4, sudah dimuat OJS) -----------------------
   Tambahkan salah satu kelas ini pada elemen komponen untuk memberi ikon.  */
body [class*="ij-i-"]::before {
  font: normal normal normal 15px/1 FontAwesome;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
body .ij-i-submit::before    { content: "\f1d8"; }  /* pesawat kertas   */
body .ij-i-book::before      { content: "\f02d"; }  /* buku             */
body .ij-i-download::before  { content: "\f019"; }  /* unduh            */
body .ij-i-money::before     { content: "\f157"; }  /* rupiah/uang      */
body .ij-i-review::before    { content: "\f021"; }  /* daur ulang       */
body .ij-i-ethics::before    { content: "\f24e"; }  /* timbangan        */
body .ij-i-oa::before        { content: "\f13e"; }  /* gembok terbuka   */
body .ij-i-copyright::before { content: "\f1f9"; }
body .ij-i-archive::before   { content: "\f187"; }
body .ij-i-index::before     { content: "\f0e8"; }  /* sitemap          */
body .ij-i-scope::before     { content: "\f140"; }  /* sasaran          */
body .ij-i-users::before     { content: "\f0c0"; }
body .ij-i-user::before      { content: "\f007"; }
body .ij-i-chart::before     { content: "\f080"; }
body .ij-i-calendar::before  { content: "\f133"; }
body .ij-i-lang::before      { content: "\f1ab"; }
body .ij-i-uni::before       { content: "\f19c"; }
body .ij-i-mail::before      { content: "\f0e0"; }
body .ij-i-phone::before     { content: "\f095"; }
body .ij-i-map::before       { content: "\f041"; }
body .ij-i-clock::before     { content: "\f017"; }
body .ij-i-check::before     { content: "\f00c"; }
body .ij-i-doc::before       { content: "\f15c"; }
body .ij-i-search::before    { content: "\f002"; }
body .ij-i-lab::before       { content: "\f0c3"; }
body .ij-i-code::before      { content: "\f121"; }
body .ij-i-sigma::before     { content: "\f12b"; }  /* superscript      */
body .ij-i-cogs::before      { content: "\f085"; }
body .ij-i-grad::before      { content: "\f19d"; }
body .ij-i-quote::before     { content: "\f10d"; }
body .ij-i-warning::before   { content: "\f071"; }

/* --- PANEL ATAS UNTUK PENULIS --------------------------------------------
   Baris pertama setiap halaman statis dan beranda.

   <div class="ij-authorbar">
     <div class="ij-authorbar__label">For Authors</div>
     <div class="ij-authorbar__items">
       <a class="ij-authorbar__item is-primary ij-i-submit" href="...">
         <strong>Submit Manuscript</strong>Online via OJS
       </a>
       ...
     </div>
   </div>                                                                   */
body .ij-authorbar {
  margin: 0 0 var(--ij-8);
  padding: var(--ij-4) 0 0;
  border-top: 2px solid var(--ij-navy-800);
  border-bottom: 1px solid var(--ij-border);
}
/* Bila panel berada tepat di bawah judul halaman, garis atasnya dilepas:
   judul sudah punya garis bawah sendiri, dan dua garis berdempetan hanya
   membuat kepala halaman terasa ramai. */
body h1 + .ij-authorbar { border-top: 0; padding-top: var(--ij-2); }
body .ij-authorbar__label {
  margin-bottom: var(--ij-3);
  color: var(--ij-teal-700);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body .ij-authorbar__label::before { content: none; }

/* Butir tindakan dijajar tanpa kotak; pemisahnya garis rambut, seperti
   daftar isi pada terbitan cetak. */
body .ij-authorbar__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
body .ij-authorbar__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--ij-3);
  padding: var(--ij-3) 0;
  border-top: 1px solid var(--ij-border);
  color: var(--ij-muted) !important;                       /* [lawan CSS situs] */
  font-size: .8125rem;
  line-height: 1.45;
  text-decoration: none !important;
  transition: color var(--ij-t);
}
body .ij-authorbar__item::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--ij-faint);
  font-size: 13px !important;
  transition: color var(--ij-t);
}
body .ij-authorbar__item > strong,
body .ij-authorbar__item > b {
  grid-column: 2;
  display: block;
  color: var(--ij-navy-800);
  font-family: var(--ij-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
body .ij-authorbar__item:hover > strong,
body .ij-authorbar__item:focus > strong { color: var(--ij-blue-700); text-decoration: underline; }
body .ij-authorbar__item:hover::before { color: var(--ij-blue); }

/* Tindakan utama: satu-satunya yang diberi warna penuh. */
/* Butir utama tidak dibuat tombol terisi: tombol Submit sudah ada di bilah
   navigasi, di kaki menu kiri, dan di akhir halaman. Di sini cukup ditandai
   warna teal dan tanda panah, sehingga panelnya tetap terbaca sebagai
   daftar, bukan deretan kotak. */
body .ij-authorbar__item.is-primary::before { color: var(--ij-teal); }
body .ij-authorbar__item.is-primary > strong,
body .ij-authorbar__item.is-primary > b { color: var(--ij-teal-700); }
body .ij-authorbar__item.is-primary > strong::after,
body .ij-authorbar__item.is-primary > b::after {
  content: "\00a0\f105";                                  /* panah kanan */
  font: normal normal normal 15px/1 FontAwesome;
}
body .ij-authorbar__item.is-primary:hover > strong { color: var(--ij-teal); }

@media (min-width: 700px) {
  body .ij-authorbar {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 0 var(--ij-6);
    align-items: start;
  }
  body .ij-authorbar__label { padding-top: var(--ij-3); }
  body .ij-authorbar__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ij-7); }
  /* Butir ke-1 dan ke-2 mengapit garis atas yang sama, jadi garisnya
     dirapikan agar tidak terlihat menggantung. */
  body .ij-authorbar__items > *:nth-child(-n+2) { border-top-color: var(--ij-border); }

}

/* --- Paragraf pembuka ----------------------------------------------------
   <p class="ij-lead">...</p>  atau  <div class="ij-lead">...</div>         */
body .ij-lead {
  max-width: var(--ij-measure);
  margin-bottom: var(--ij-6);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ij-text-2);
}

/* --- Deretan label kecil --------------------------------------------------
   <div class="ij-chips">
     <div class="ij-chip ij-i-oa is-oa">Open Access</div>
   </div>                                                                   */
body .ij-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ij-2);
  margin: var(--ij-4) 0 var(--ij-7);
  padding-bottom: var(--ij-3);
  border-bottom: 1px solid var(--ij-border);
  color: var(--ij-muted);
  font-size: .8125rem;
}
/* Tiap keterangan dipisah titik tengah, bukan dibungkus kotak. Cara ini
   dipakai halaman terbitan cetak dan jauh lebih tenang daripada deretan
   lencana berwarna. */
body .ij-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
}
body .ij-chip::before { content: none; }
body .ij-chip + .ij-chip::after { content: none; }
body .ij-chip:not(:last-child)::after {
  content: "\00b7";
  margin-left: var(--ij-2);
  color: var(--ij-border-2);
  font-weight: 700;
}
/* Satu penanda saja yang diberi warna: status akses terbuka. */
body .ij-chip.is-oa { color: var(--ij-teal-700); font-weight: 700; }
body .ij-chip.is-oa::before {
  content: "\f13e";
  font: normal normal normal 12px/1 FontAwesome;
  color: var(--ij-teal);
}

/* --- Judul bagian dengan garis teal ---------------------------------------
   Judul <h2> pada halaman statis SUDAH bergaris teal lewat aturan di
   bagian 7 (tanpa perlu kelas apa pun, karena penyaring OJS cenderung
   membuang atribut class pada <h2>). Kelas ini hanya diperlukan bila
   sebuah judul berada di luar pembungkus .page.                          */
body .ij-h2 { display: flex; align-items: center; gap: var(--ij-3); }
body .ij-h2::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.1em;
  background: var(--ij-teal);
  border-radius: 2px;
}

/* --- Tabel keterangan jurnal ("Journal Information" ala MDPI) -------------
   Dibangun dari <div> saja supaya lolos penyaring OJS:

   <div class="ij-facts">
     <div class="ij-facts__row">
       <div class="ij-facts__k">e-ISSN</div>
       <div class="ij-facts__v">0000-0000</div>
     </div>
   </div>

   Bentuk <dl><dt><dd> juga tetap didukung untuk kolom yang mengizinkannya. */
body .ij-facts {
  margin: var(--ij-5) 0 var(--ij-8);
  padding: 0;
  border: 0;
  border-top: 2px solid var(--ij-navy-800);
  border-bottom: 1px solid var(--ij-border-2);
  overflow: visible;
}
body .ij-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--ij-border);
}
body .ij-facts__row:last-child { border-bottom: 0; }
body .ij-facts__k,
body .ij-facts dt {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: var(--ij-3) 0 0;
  background: none;
  color: var(--ij-muted);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body .ij-facts__v,
body .ij-facts dd {
  margin: 0;
  padding: 2px 0 var(--ij-3);
  color: var(--ij-text);
  font-size: .9375rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
body .ij-facts dt, body .ij-facts dd { border-bottom: 1px solid var(--ij-border); }
body .ij-facts > :nth-last-child(-n+2):not(.ij-facts__row) { border-bottom: 0; }
@media (min-width: 620px) {
  body .ij-facts__row { grid-template-columns: minmax(150px, 15em) minmax(0, 1fr); column-gap: var(--ij-6); }
  body .ij-facts__k, body .ij-facts dt { padding: var(--ij-3) 0; border-right: 0; }
  body .ij-facts__v, body .ij-facts dd { padding: var(--ij-3) 0; }
  body .ij-facts { display: block; }
}

/* --- Langkah bernomor -----------------------------------------------------
   <div class="ij-steps">
     <div class="ij-step"><strong>Judul langkah</strong>Penjelasan.</div>
   </div>                                                                   */
body .ij-steps { counter-reset: ijstep; margin: var(--ij-5) 0 var(--ij-8); }
body .ij-step {
  position: relative;
  padding: 0 0 var(--ij-6) var(--ij-8);
  color: var(--ij-text-2);
  font-size: .9375rem;
  line-height: 1.65;
}
body .ij-step::before {
  counter-increment: ijstep;
  content: counter(ijstep);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--ij-border-2);
  border-radius: 50%;
  color: var(--ij-navy-700);
  font: 600 .8125rem/1 var(--ij-serif);
  font-variant-numeric: tabular-nums;
}
body .ij-step::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: var(--ij-border);
}
body .ij-step:last-child { padding-bottom: 0; }
body .ij-step:last-child::after { display: none; }
body .ij-step > strong,
body .ij-step > b {
  display: block;
  margin-bottom: var(--ij-1);
  color: var(--ij-navy-900);
  font-family: var(--ij-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}
/* Keterangan waktu: teks kecil bercetak miring, bukan lencana. */
body .ij-step__time {
  display: block;
  margin-bottom: var(--ij-2);
  color: var(--ij-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- Penanda "belum diisi" ------------------------------------------------
   <div class="ij-todo">ISI: nomor rekening bank</div>
   Sengaja mencolok supaya tidak lolos ke publik tanpa sengaja.             */
body .ij-todo {
  display: inline-block;
  margin: var(--ij-1) 0;
  padding: 3px var(--ij-3);
  background: var(--ij-amber-50);
  border: 1px dashed var(--ij-amber);
  border-radius: var(--ij-radius-sm);
  color: var(--ij-amber);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.5;
}
body .ij-todo::before { content: "\f071\00a0\00a0"; font: normal normal normal 12px/1 FontAwesome; }

/* --- Daftar isi halaman ---------------------------------------------------
   <div class="ij-toc"><div class="ij-toc__t">On this page</div>
     <ul><li><a href="#s1">Before you submit</a></li></ul></div>            */
body .ij-toc {
  margin: 0 0 var(--ij-7);
  padding: var(--ij-3) 0 var(--ij-4);
  background: none;
  border: 0;
  border-top: 1px solid var(--ij-border);
  border-bottom: 1px solid var(--ij-border);
  border-radius: 0;
}
body .ij-toc__t {
  margin-bottom: var(--ij-2);
  color: var(--ij-navy-800);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body .ij-toc ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px var(--ij-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
body .ij-toc li { margin: 0; }
body .ij-toc a { font-size: .875rem; }

/* --- Ajakan bertindak besar -----------------------------------------------
   <div class="ij-cta">
     <div class="ij-cta__text"><strong>Siap mengirim naskah?</strong>Keterangan.</div>
     <a class="ij-btn ij-btn--cta" href="...">Submit Manuscript</a>
   </div>                                                                   */
body .ij-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ij-4);
  margin: var(--ij-9) 0 0;
  padding: var(--ij-6) 0 0;
  background: none;
  border-top: 2px solid var(--ij-navy-800);
  border-radius: 0;
}
body .ij-cta__text { color: var(--ij-text-2); font-size: .9375rem; max-width: 46ch; }
body .ij-cta__text > strong,
body .ij-cta__text > b {
  display: block;
  margin-bottom: var(--ij-1);
  color: var(--ij-navy-900);
  font-family: var(--ij-serif);
  font-size: 1.25rem;
  font-weight: 600;
}
body .ij-cta a { flex: 0 0 auto; }
body .ij-btn--cta { background: var(--ij-teal); border-color: var(--ij-teal); }
body .ij-btn--cta:hover,
body .ij-btn--cta:focus { background: var(--ij-teal-700); border-color: var(--ij-teal-700); }

/* --- Dua kolom di dalam halaman -------------------------------------------
   <div class="ij-split"><div>...</div><div>...</div></div>                 */
body .ij-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ij-6);
  margin: var(--ij-5) 0 var(--ij-7);
}
body .ij-split > * > :first-child { margin-top: 0 !important; }

/* --- Kotak kontak ---------------------------------------------------------
   <div class="ij-contact ij-i-mail"><strong>Email</strong>math.ukri@gmail.com</div> */
body .ij-contact {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--ij-3);
  margin: 0;
  padding: var(--ij-3) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ij-border);
  color: var(--ij-text-2);
  font-size: .9375rem;
  line-height: 1.55;
}
body .ij-contact:first-of-type { border-top: 1px solid var(--ij-border); }
body .ij-contact::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--ij-faint);
  font-size: 13px !important;
}
body .ij-contact > strong,
body .ij-contact > b {
  grid-column: 2;
  display: block;
  color: var(--ij-muted);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* --- Kisi topik/ruang lingkup ---------------------------------------------
   <div class="ij-topics">
     <div class="ij-topic ij-i-cogs"><strong>Applied Mathematics</strong>
       Pemodelan, optimasi, sistem dinamik.</div>
   </div>                                                                   */
body .ij-topics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--ij-8);
  margin: var(--ij-5) 0 var(--ij-8);
  border-top: 1px solid var(--ij-border);
}
body .ij-topic {
  padding: var(--ij-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ij-border);
  border-radius: 0;
  box-shadow: none;
  color: var(--ij-muted);
  font-size: .875rem;
  line-height: 1.6;
}
/* Ikon tidak dipakai di sini: judul tebal sudah cukup sebagai penanda, dan
   deretan ikon membuat halaman terasa seperti katalog produk. */
body .ij-topic::before { content: none !important; }
body .ij-topic > strong,
body .ij-topic > b {
  display: block;
  margin-bottom: 2px;
  color: var(--ij-navy-900);
  font-family: var(--ij-serif);
  font-size: 1.0625rem;
  font-weight: 600;
}
body .ij-topic > strong > a { color: var(--ij-navy-900); text-decoration: none; }
body .ij-topic > strong > a:hover { color: var(--ij-blue-700); text-decoration: underline; }
@media (min-width: 700px) {
  body .ij-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Kartu angka ---------------------------------------------------------
   <div class="ij-grid ij-grid--3">
     <div class="ij-stat"><strong>2</strong>Issues per year</div>
   </div>                                                                   */
body .ij-stat--teal { background: var(--ij-teal-50); border-color: var(--ij-teal-100); }
body .ij-stat--teal b, body .ij-stat--teal strong { color: var(--ij-teal-700); }

/* --- Daftar orang (dewan redaksi / mitra bestari) -------------------------
   <div class="ij-people">
     <div class="ij-person"><strong>Nama Lengkap</strong>Universitas, Negara<br>Scopus ID: 000</div>
   </div>                                                                   */
body .ij-person { color: var(--ij-muted); font-size: .875rem; line-height: 1.55; }
body .ij-person__role {
  display: block;
  margin-top: var(--ij-1);
  color: var(--ij-teal-700);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}


/* --- Kotak "ISI:" hanya untuk pengelola -----------------------------------
   Penanda oranye .ij-todo berguna bagi pengelola, tetapi tidak pantas
   dilihat pengunjung. OJS hanya menampilkan tautan dasbor keredaksian
   kepada pengguna yang sudah masuk sebagai editor/manajer, jadi tautan itu
   dipakai sebagai penanda: bila tidak ada, kotak disembunyikan.

   Akibatnya: pengunjung melihat halaman yang bersih, sementara pengelola
   yang sedang masuk tetap melihat daftar isian yang belum lengkap.
   Setelah semua kotak diisi, aturan ini boleh dibiarkan saja.               */
body:not(:has(a[href*="dashboard/editorial"])) .ij-todo { display: none !important; }
/* Judul bagian yang isinya hanya penanda ISI ikut disembunyikan, supaya
   pengunjung tidak menemui judul tanpa isi. */
body:not(:has(a[href*="dashboard/editorial"])) h2:has(+ .ij-todo:last-child),
body:not(:has(a[href*="dashboard/editorial"])) h2:has(+ .ij-todo + .ij-cta) { display: none; }
/* Baris tabel yang isinya hanya kotak ISI ikut disembunyikan agar tidak
   menyisakan sel kosong. */
body:not(:has(a[href*="dashboard/editorial"])) .ij-facts__row:has(> .ij-facts__v > .ij-todo:only-child) { display: none; }
/* Bagian yang SELURUH isinya masih penanda ditandai kelas .ij-only-todo di
   markup-nya; kelas itu (berikut judul tepat di atasnya) disembunyikan dari
   pengunjung, supaya tidak ada judul yang menggantung tanpa isi.
   Catatan: :has() tidak boleh disarangkan di dalam :has() lain — selectornya
   menjadi tidak sah dan seluruh aturannya diabaikan peramban. Karena itu
   dipakai penanda kelas, bukan uji "semua baris masih penanda". */
body:not(:has(a[href*="dashboard/editorial"])) .ij-only-todo,
body:not(:has(a[href*="dashboard/editorial"])) h2:has(+ .ij-only-todo) { display: none; }
body:not(:has(a[href*="dashboard/editorial"])) .ij-person:has(> .ij-todo:only-of-type):has(> strong:only-of-type) .ij-todo { display: none !important; }


/* ==========================================================================
   19. RESPONSIF
   ========================================================================== */

/* 1300–1439px: tiga kolom masih aktif, jadi lebar kolom samping dikecilkan
   supaya kolom isi tidak tersisa terlalu sempit. */
@media (max-width: 1439px) {
  :root { --ij-menu: 216px; --ij-sidebar: 272px; --ij-gap: 24px; }
}

@media (max-width: 1199px) {
  :root { --ij-gap: 28px; --ij-pad: 28px; }
}

@media (max-width: 999px) {
  :root { --ij-logo-h: 76px; }
  body .pkp_structure_content { padding-top: var(--ij-5); padding-bottom: var(--ij-7); }
  body .pkp_structure_sidebar { position: static; }
}

@media (max-width: 767px) {
  :root { --ij-pad: 20px; --ij-container: 100%; }
  body .pkp_site_name_wrapper,
  body .pkp_navigation_primary_wrapper,
  body .pkp_structure_content,
  body .pkp_structure_footer { padding-left: var(--ij-4); padding-right: var(--ij-4); }
  body .pkp_site_name_wrapper { padding-left: var(--ij-4) !important; padding-right: var(--ij-4) !important; }

  body .pkp_structure_main {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: var(--ij-4) !important;
    padding-right: var(--ij-4) !important;
  }
  body .pkp_structure_main h1 { font-size: 1.375rem !important; }
  body .obj_article_details > .page_title { font-size: 1.25rem !important; }
  body .obj_article_summary { padding: var(--ij-4) var(--ij-4) var(--ij-4) var(--ij-5) !important; }
  body .obj_article_summary > .title { font-size: 1rem; }
  body .obj_article_summary .galleys_links { display: flex; }
  body .obj_article_summary .galleys_links li,
  body .obj_article_details .galleys_links li { margin-inline-end: var(--ij-2); }
  body .ijoms-footer { gap: var(--ij-6); }
  body .page_issue_archive .issues_archive { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 479px) {
  body .page_issue_archive .issues_archive { grid-template-columns: 1fr; }
  body .cmp_form .buttons { flex-direction: column; align-items: stretch; }
  body .cmp_form .buttons button { width: 100%; }
  body .cmp_pagination { flex-direction: column; align-items: stretch; }
  body .cmp_pagination .prev,
  body .cmp_pagination .next { justify-content: center; margin: 0; }
}

/* Layar sangat lebar: naikkan sedikit ukuran huruf isi agar tetap seimbang. */
@media (min-width: 1600px) {
  body .obj_article_details .item.abstract { font-size: 1.125rem; }
}

/* Mode kontras tinggi Windows: pastikan garis tepi tetap terlihat. */
@media (forced-colors: active) {
  body .obj_article_summary,
  body .pkp_block,
  body .ij-card { border: 1px solid CanvasText; }
  body .cmp_button, body .ij-btn, body .obj_galley_link { border: 1px solid ButtonText; }
}


/* ==========================================================================
   21. PENANDA "ANDA DI SINI"
   OJS memberi <body> kelas pkp_page_<path> pada setiap halaman (mis.
   pkp_page_guidelines) dan pkp_op_<operation> untuk halaman bawaan. Kelas
   itu dipakai di sini untuk menyorot butir menu yang sedang dibuka, baik di
   kolom menu kiri maupun di bilah navigasi atas — pembaca selalu tahu
   posisinya tanpa perlu membaca ulang judul halaman.

   Menambah halaman baru? Salin satu baris pada masing-masing daftar dan
   ganti nama path-nya.
   ========================================================================== */

/* --- Kolom menu kiri ----------------------------------------------------- */
body.pkp_page_guidelines .ij-menu__list li > a[href$="/guidelines"],
body.pkp_page_prp .ij-menu__list li > a[href$="/prp"],
body.pkp_page_ethics .ij-menu__list li > a[href$="/ethics"],
body.pkp_page_fees .ij-menu__list li > a[href$="/fees"],
body.pkp_page_oap .ij-menu__list li > a[href$="/oap"],
body.pkp_page_copyright .ij-menu__list li > a[href$="/copyright"],
body.pkp_page_eb .ij-menu__list li > a[href$="/eb"],
body.pkp_page_reviewers .ij-menu__list li > a[href$="/reviewers"],
body.pkp_page_archiving .ij-menu__list li > a[href$="/archiving"],
body.pkp_page_focusandscope .ij-menu__list li > a[href$="/focusandscope"],
body.pkp_page_indexing .ij-menu__list li > a[href$="/indexing"],
body.pkp_page_statistics .ij-menu__list li > a[href$="/statistics"],
body.pkp_page_authors .ij-menu__list li > a[href$="/authors"],
body.pkp_page_policies .ij-menu__list li > a[href$="/policies"],
body.pkp_op_contact .ij-menu__list li > a[href$="/about/contact"] {
  background: var(--ij-blue-50);
  border-left-color: var(--ij-blue);
  color: var(--ij-blue-700) !important;                    /* [lawan CSS situs] */
  font-weight: 700;
}
body.pkp_page_guidelines .ij-menu__list li > a[href$="/guidelines"] em,
body.pkp_page_prp .ij-menu__list li > a[href$="/prp"] em,
body.pkp_page_ethics .ij-menu__list li > a[href$="/ethics"] em,
body.pkp_page_fees .ij-menu__list li > a[href$="/fees"] em,
body.pkp_page_oap .ij-menu__list li > a[href$="/oap"] em,
body.pkp_page_copyright .ij-menu__list li > a[href$="/copyright"] em,
body.pkp_page_eb .ij-menu__list li > a[href$="/eb"] em,
body.pkp_page_reviewers .ij-menu__list li > a[href$="/reviewers"] em,
body.pkp_page_archiving .ij-menu__list li > a[href$="/archiving"] em,
body.pkp_page_focusandscope .ij-menu__list li > a[href$="/focusandscope"] em,
body.pkp_page_indexing .ij-menu__list li > a[href$="/indexing"] em,
body.pkp_page_statistics .ij-menu__list li > a[href$="/statistics"] em,
body.pkp_page_authors .ij-menu__list li > a[href$="/authors"] em,
body.pkp_page_policies .ij-menu__list li > a[href$="/policies"] em,
body.pkp_op_contact .ij-menu__list li > a[href$="/about/contact"] em {
  color: var(--ij-blue) !important;
}

/* --- Bilah navigasi atas -------------------------------------------------- */
body.pkp_page_guidelines .pkp_navigation_primary a[href$="/guidelines"],
body.pkp_page_prp .pkp_navigation_primary a[href$="/prp"],
body.pkp_page_ethics .pkp_navigation_primary a[href$="/ethics"],
body.pkp_page_fees .pkp_navigation_primary a[href$="/fees"],
body.pkp_page_oap .pkp_navigation_primary a[href$="/oap"],
body.pkp_page_copyright .pkp_navigation_primary a[href$="/copyright"],
body.pkp_page_eb .pkp_navigation_primary a[href$="/eb"],
body.pkp_page_reviewers .pkp_navigation_primary a[href$="/reviewers"],
body.pkp_page_archiving .pkp_navigation_primary a[href$="/archiving"],
body.pkp_page_focusandscope .pkp_navigation_primary a[href$="/focusandscope"],
body.pkp_page_indexing .pkp_navigation_primary a[href$="/indexing"],
body.pkp_page_statistics .pkp_navigation_primary a[href$="/statistics"],
body.pkp_page_authors .pkp_navigation_primary a[href$="/authors"],
body.pkp_page_policies .pkp_navigation_primary a[href$="/policies"],
body.pkp_page_about.pkp_op_index .pkp_navigation_primary a[href$="/about"],
body.pkp_page_search.pkp_op_index .pkp_navigation_primary a[href$="/search"],
body.pkp_op_contact .pkp_navigation_primary a[href$="/about/contact"],
body.pkp_op_privacy .pkp_navigation_primary a[href$="/about/privacy"],
body.pkp_op_submissions .pkp_navigation_primary a[href$="/about/submissions"],
body.pkp_op_current .pkp_navigation_primary a[href$="/issue/current"],
body.pkp_op_archive .pkp_navigation_primary a[href$="/issue/archive"] {
  background: var(--ij-navy-700) !important;               /* [lawan CSS situs] */
  color: #fff !important;                                  /* [lawan CSS situs] */
  box-shadow: inset 0 -3px 0 var(--ij-blue-300);
}
/* Butir induk ikut ditandai bila salah satu anaknya sedang dibuka. */
body .pkp_navigation_primary > li:has(> ul a[aria-current="page"]) > a { box-shadow: inset 0 -3px 0 var(--ij-blue-300); }


/* ==========================================================================
   20. CETAK
   Yang dicetak hanyalah isi artikel: navigasi, sidebar, dan footer dibuang;
   alamat tautan dimunculkan agar rujukan tetap bisa ditelusuri di kertas.
   ========================================================================== */

@media print {
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  body .pkp_structure_head,
  body .pkp_site_nav_menu,
  body .pkp_navigation_user_wrapper,
  body .pkp_structure_sidebar,
  body .pkp_structure_footer_wrapper,
  body .cmp_breadcrumbs,
  body .cmp_skip_to_content,
  body .cmp_pagination,
  body .galleys_links,
  body .ij-authorbar,
  body .ij-cta,
  body .ij-toc,
  body .citation_formats { display: none !important; }

  body .pkp_structure_content { display: block; padding: 0; max-width: none; }
  body .pkp_structure_main {
    padding: 0 !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
  body .obj_article_details .row { display: block; }
  body .obj_article_details .main_entry { border-right: 0; padding-right: 0; }
  body .obj_article_details .entry_details > .item { background: #fff; }

  body .pkp_structure_main a { color: #000 !important; text-decoration: underline; }
  body .obj_article_details .item.abstract a[href^="http"]::after,
  body .item.references a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }
  body h1, body h2, body h3 { break-after: avoid-page; page-break-after: avoid; }
  body .obj_article_summary, body .ij-card { break-inside: avoid-page; page-break-inside: avoid; }
}


/* ==========================================================================
   CATATAN PEMELIHARAAN
   - Ganti warna merek: cukup ubah nilai --ij-navy-*, --ij-blue-*, dan
     --ij-teal-* di bagian 1. Semua komponen mengikuti otomatis.
   - Lebar kolom: --ij-container, --ij-menu (kiri), --ij-sidebar (kanan).
   - Tinggi kolom kiri mengikuti isinya sendiri; tidak ada lagi tinggi
     minimum buatan yang perlu disetel.
   - Ingin menu kembali ke kanan: hapus blok @media (min-width: 1300px)
     berjudul "TIGA KOLOM" di bagian 3.
   - Baris yang diawali kata "body" sengaja demikian: CSS situs UKRI dimuat
     sesudah berkas ini dan memakai !important. Jangan hapus kata itu.
   - Halaman statis hanya boleh memakai div[class], a[class|href], strong,
     em, p, h2, h3, ul, ol, li, br, img. <span> dan tag sebaris yang kosong
     dibuang oleh penyaring OJS; karena itu ikon digambar lewat kelas
     .ij-i-* (bagian 18), bukan lewat markup.
   */