@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* ========================================================
   1. GLOBAL RESET & TIPOGRAFI
   ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  font-family: "Montserrat", sans-serif !important;
  margin: 0;
  padding: 0;
  background-color: #ffffff;   /* putih polos */
  color: #333333;
  width: 100% !important;
}

/* ---- BACKGROUND HALAMAN (opsional) --------------------------------
   Sekarang putih polos. Untuk pakai gambar background nanti:
   1) hapus tanda komentar blok di bawah,
   2) ganti URL gambar,
   3) atur angka 0.85 (0 = gambar penuh, 1 = putih penuh) untuk terang/gelap.
   Pakai gambar bercorak halus TANPA teks agar konten tetap terbaca.

body {
  background-image:
    linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,.85)),
    url("https://journal.bluebee.co.id/public/journals/9/NAMA-GAMBAR.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}
------------------------------------------------------------------- */

/* Sembunyikan elemen aksesibilitas (skip-link) — TAPI JANGAN tombol menu */
.pkp_screen_reader,
a.pkp_screen_reader,
.screenreader-text,
.sr-only,
.skip-link,
.cmp_skip_to_content {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* ========================================================
   2. HEADER & BARIS ATAS (LOGO + USER)
   ======================================================== */
header.pkp_structure_head,
.pkp_structure_head {
  background-color: #D32F2F !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.pkp_head_wrapper {
  max-width: 1300px;
  margin: 0 auto;
  padding: 16px 30px !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px;
}

.pkp_site_name,
.pkp_head_wrapper .pkp_site_name {
  background: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pkp_site_name img,
.journal-logo {
  max-height: 48px !important;
  width: auto !important;
  display: block;
}

.pkp_navigation_user {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 4px 12px;
}

.pkp_navigation_user li a,
.pkp_navigation_user a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
}
.pkp_navigation_user li a:hover { text-decoration: underline !important; }

/* ========================================================
   3. TOMBOL HAMBURGER (mobile) — default disembunyikan
   ======================================================== */
.pkp_site_name_wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pkp_site_nav_toggle {
  display: none;                 /* hanya muncul di mobile (lihat media query) */
  order: 2;                      /* di kanan logo */
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 6px;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
}
/* ganti teks "Open Menu" jadi ikon hamburger */
.pkp_site_nav_toggle span { display: none; }
.pkp_site_nav_toggle::before {
  content: "\F479";              /* bootstrap-icons: list */
  font-family: "bootstrap-icons";
  font-size: 24px;
  line-height: 1;
}
.pkp_site_nav_toggle--transform::before { content: "\F62A"; } /* x-lg saat terbuka */

/* ========================================================
   4. BILAH NAVIGASI UTAMA (DESKTOP — rapi & rata)
   ======================================================== */
.pkp_structure_head nav,
#siteNav {
  background-color: transparent !important;
  width: 100% !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper,
#siteNav {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px !important;
}

.pkp_navigation_primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center !important;
  justify-content: flex-start !important;   /* rata kiri, jarak konsisten */
  gap: 4px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.pkp_navigation_primary > li { position: relative !important; }

.pkp_navigation_primary > li > a {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  padding: 14px 12px !important;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  transition: opacity 0.2s ease;
}
.pkp_navigation_primary > li > a:hover { opacity: 0.85; }

.pkp_navigation_primary > li:has(ul) > a::after {
  content: " \25BE";
  font-size: 11px;
  margin-left: 3px;
}

/* Dropdown */
.pkp_navigation_primary ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  min-width: 220px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  list-style: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  z-index: 99999 !important;
  border-top: 3px solid #D32F2F !important;
  border-radius: 0 0 6px 6px;
}
.pkp_navigation_primary li:hover > ul { display: block !important; }

/* Link "Search" duplikat disembunyikan (menu SEARCH sudah ada) — semua ukuran layar */
.pkp_navigation_search_wrapper { display: none !important; }

/* Breadcrumb: mendatar, tanpa nomor */
.cmp_breadcrumbs ol {
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 !important;
  padding: 0 !important;
}
.cmp_breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.cmp_breadcrumbs a { color: #D32F2F !important; text-decoration: none; }
.cmp_breadcrumbs a:hover { text-decoration: underline; }
.cmp_breadcrumbs .separator { color: #9ca3af; }

.pkp_navigation_primary ul li a {
  color: #333333 !important;
  padding: 10px 16px !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.pkp_navigation_primary ul li a:hover {
  background-color: #fdecea !important;
  color: #D32F2F !important;
}

/* Register / Login di pojok kanan atas (desktop) */
@media (min-width: 769px) {
  .pkp_structure_head { position: relative; }
  .pkp_navigation_user_wrapper {
    position: absolute !important;
    top: 20px;
    right: 30px;
    margin: 0 !important;
  }
  .pkp_navigation_user { flex-direction: row !important; gap: 6px; }
  .pkp_navigation_user > li > a {
    padding: 4px 10px !important;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 6px;
  }
  /* dropdown user (admin/profil): tersembunyi, muncul saat hover, teks gelap */
  .pkp_navigation_user > li { position: relative; }
  .pkp_navigation_user li > ul {
    display: none;
    position: absolute !important;
    top: 100%; right: 0; left: auto !important;
    background: #fff !important;
    min-width: 210px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    border-radius: 0 0 6px 6px;
    padding: 6px 0 !important;
    border-top: 3px solid #D32F2F;
    list-style: none;
    z-index: 99999;
  }
  .pkp_navigation_user li:hover > ul,
  .pkp_navigation_user li:focus-within > ul { display: block; }
  .pkp_navigation_user ul li { border: none !important; }
  .pkp_navigation_user ul li a {
    color: #333 !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    display: block;
  }
  .pkp_navigation_user ul li a:hover { background: #fdecea !important; text-decoration: none !important; }
}

/* Kartu custom-block (sidebar) jangan sempit/patah huruf */
.sidebar_wrapper .row,
.pkp_block .row { flex-wrap: wrap !important; gap: 12px; }
.sidebar_wrapper .row > [class*="col-"],
.pkp_block .row > [class*="col-"] {
  flex: 1 1 130px !important;
  max-width: 100% !important;
  width: auto !important;
}
.sidebar_wrapper .card-body h5,
.pkp_block .card-body h5 { white-space: normal; word-break: normal; }

/* ========================================================
   5. RESPONSIVE — MOBILE (<= 768px)
   ======================================================== */
@media (max-width: 768px) {
  .pkp_head_wrapper {
    padding: 12px 16px !important;
    flex-direction: column;
    align-items: stretch !important;
  }
  .pkp_site_name_wrapper { justify-content: space-between; }

  /* tampilkan hamburger */
  .pkp_site_nav_toggle { display: inline-flex; align-items: center; }

  /* PURE CSS toggle — situs ini tak memuat JS sama sekali, jadi pakai :focus-within.
     Tap hamburger = tombol fokus = menu muncul. Tap di luar / pilih menu = tutup. */
  .pkp_site_nav_toggle { outline: none; }
  .pkp_site_nav_menu {
    display: none;
    width: 100%;
  }
  .pkp_head_wrapper:focus-within .pkp_site_nav_menu { display: block; }

  .pkp_navigation_primary_wrapper,
  #siteNav { padding: 0 !important; }
  .pkp_navigation_primary_row { border-top: 1px solid rgba(255,255,255,.2); }

  /* menu utama jadi vertikal penuh */
  .pkp_navigation_primary {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
  }
  .pkp_navigation_primary > li { width: 100%; border-top: 1px solid rgba(255,255,255,.15); }
  .pkp_navigation_primary > li > a { padding: 14px 4px !important; }
  .pkp_navigation_primary > li:has(ul) > a::after { float: right; }

  /* dropdown mobile: inline, bukan melayang */
  .pkp_navigation_primary ul {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border-top: none !important;
    border-radius: 0;
    min-width: 0 !important;
    background: rgba(255,255,255,.08) !important;
  }
  .pkp_navigation_primary ul li a { color: #ffffff !important; padding-left: 28px !important; }
  .pkp_navigation_primary ul li a:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }

  /* link "Search" duplikat disembunyikan — sudah ada menu SEARCH */
  .pkp_navigation_search_wrapper { display: none !important; }

  /* user menu (admin/login/register) ikut vertikal & bersih tanpa bullet */
  .pkp_navigation_user,
  .pkp_navigation_user ul,
  .pkp_navigation_user li {
    list-style: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }
  .pkp_navigation_user {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0;
  }
  .pkp_navigation_user > li { width: 100%; border-top: 1px solid rgba(255,255,255,.15); }
  .pkp_navigation_user > li > a {
    padding: 14px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }
  .pkp_navigation_user ul { background: rgba(255,255,255,.08) !important; }
  .pkp_navigation_user ul li a { padding: 12px 4px 12px 24px !important; color: #fff !important; }
}

/* ========================================================
   5b. HALAMAN PENCARIAN (Search)
   ======================================================== */
.pkp_structure_main form.cmp_form { max-width: 760px; }
.cmp_form .search_input { margin-bottom: 18px; }
.cmp_form input.query {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
}
.cmp_form input.query:focus {
  border-color: #D32F2F;
  box-shadow: 0 0 0 3px rgba(211,47,47,.15);
}
.cmp_form fieldset.search_advanced {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.cmp_form fieldset.search_advanced > legend { font-weight: 600; color: #D32F2F; padding: 0 8px; }
.cmp_form .date_range { display: flex; flex-wrap: wrap; gap: 24px; }
.cmp_form .date_range > div { flex: 1 1 300px; }
.cmp_form .date_range fieldset { border: none; padding: 0; margin: 0; }
.cmp_form .date_range legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; color: #374151; }
.cmp_form .date_range label { font-size: 12px; color: #6b7280; margin: 0 4px 0 0; }
.cmp_form select { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; margin-right: 10px; background: #fff; }
.cmp_form .author { margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp_form .author label { font-weight: 600; color: #374151; }
.cmp_form .author input,
.cmp_form input#authors { flex: 1 1 260px; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; }
.cmp_form .buttons button,
.cmp_form button[type=submit],
.cmp_form input[type=submit] {
  background: #D32F2F;
  color: #fff;
  border: none;
  padding: 11px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.cmp_form .buttons button:hover,
.cmp_form button[type=submit]:hover { opacity: .9; }

/* ========================================================
   5c. HALAMAN REGISTER & LOGIN
   ======================================================== */
.cmp_form.register, .cmp_form.login { max-width: 560px; }
.cmp_form.register fieldset,
.cmp_form.login fieldset {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 18px;
}
.cmp_form.register legend,
.cmp_form.login legend { font-weight: 600; color: #D32F2F; padding: 0 8px; }
.cmp_form.register .fields > div,
.cmp_form.login .fields > div { margin-bottom: 14px; }
.cmp_form.register label,
.cmp_form.login label { display: block; }
.cmp_form.register .label,
.cmp_form.login .label { display: block; font-weight: 600; font-size: 13px; color: #374151; margin-bottom: 6px; }
.cmp_form.register .required,
.cmp_form.login .required { color: #e11d48; }
.cmp_form.register input[type=text],
.cmp_form.register input[type=email],
.cmp_form.register input[type=password],
.cmp_form.register select,
.cmp_form.register textarea,
.cmp_form.login input[type=text],
.cmp_form.login input[type=email],
.cmp_form.login input[type=password] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}
.cmp_form.register input:focus,
.cmp_form.register select:focus,
.cmp_form.login input:focus {
  border-color: #D32F2F;
  box-shadow: 0 0 0 3px rgba(211,47,47,.15);
  outline: none;
}
.cmp_form.register input[type=checkbox],
.cmp_form.login input[type=checkbox] { width: auto; margin-right: 8px; }
.cmp_form.register .buttons button,
.cmp_form.register button[type=submit],
.cmp_form.register input[type=submit],
.cmp_form.login .buttons button,
.cmp_form.login button[type=submit],
.cmp_form.login input[type=submit] {
  background: #D32F2F;
  color: #fff;
  border: none;
  padding: 11px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* ========================================================
   5d. Ganti judul halaman Editorial History -> "Editorial Team"
   (halaman sistem, teks bawaan OJS ditimpa via CSS)
   ======================================================== */
.pkp_op_editorialHistory .pkp_structure_main h1 { font-size: 0 !important; line-height: 1.2; }
.pkp_op_editorialHistory .pkp_structure_main h1::after {
  content: "Editorial Team";
  font-size: 32px;
  font-weight: 700;
  color: #333;
}

/* ========================================================
   6. LAYOUT KONTEN (satu kolom penuh)
   ======================================================== */
.pkp_structure_content {
  display: block !important;
  max-width: 1300px !important;
  margin: 30px auto !important;
  padding: 0 30px !important;
}
.pkp_structure_sidebar { display: none !important; }
.pkp_structure_main { width: 100% !important; max-width: 100% !important; flex: none !important; }

.homepage_image { display: block !important; width: 100% !important; margin-bottom: 25px !important; }
.homepage_image img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block; }

.pkp_structure_main p {
  text-align: justify !important;
  line-height: 1.8 !important;
  color: #374151 !important;
  font-size: 14.5px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 768px) {
  .pkp_structure_content { padding: 0 16px !important; margin: 20px auto !important; }
}

/* ========================================================
   7. FOOTER
   ======================================================== */
.pkp_structure_footer,
.site-footer {
  background-color: #ffffff !important;
  padding: 35px 30px 20px 30px !important;
  border-top: 2px solid #D32F2F;
  margin-top: 50px;
}

/* Isi footer dibatasi selebar konten & di-tengah (map tidak keluar body) */
.pkp_footer_content {
  max-width: 1300px !important;
  margin: 0 auto !important;
}
@media (max-width: 768px) {
  .pkp_footer_content > div[style*="flex"] { flex-direction: column !important; }
}
.pkp_brand_footer, .pkp_brand_flag, footer [class*="brand"] {
  display: block !important;
  text-align: center !important;
  margin: 25px auto 10px auto !important;
}
.pkp_brand_footer img, .pkp_brand_flag img, footer [class*="brand"] img {
  width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
  margin: 6px auto 0 auto !important;
}