/* =========================================================
   IJILE — CUSTOM OJS STYLESHEET
   =========================================================

   WARNA UTAMA IJILE
   ---------------------------------------------------------
   Hijau Lime   : #80B028
   Hijau Tua    : #275F45
   Hijau Gelap  : #173A33
   Emas IJILE   : #E6C84A
   Emas Gelap   : #B99D28
   Putih        : #FFFFFF

   ========================================================= */


/* =========================================================
   1. PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary > li > a {
  display: block !important;

  /* WARNA UTAMA = EMAS */
  background: #E6C84A !important;
  color: #275F45 !important;

  font-weight: 600 !important;

  padding: 7px 15px !important;

  border-radius: 5px !important;

  margin: 2px 3px !important;

  text-align: center !important;

  border: 1px solid rgba(255,255,255,0.30) !important;

  /* EFEK TOMBOL TIMBUL */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 3px 0 #B99D28,
    0 5px 8px rgba(0,0,0,0.28) !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease !important;
}


/* =========================================================
   HOVER PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary > li > a:hover {
  /* HOVER = HIJAU TUA */
  background: #275F45 !important;

  color: #E6C84A !important;

  transform: translateY(-2px) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 4px 0 #174532,
    0 6px 10px rgba(0,0,0,0.30) !important;
}


/* =========================================================
   MENU AKTIF
   ========================================================= */

.pkp_navigation_primary > li > a[aria-current="page"],
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a {

  background: #E6C84A !important;

  color: #275F45 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 3px 0 #B99D28,
    0 5px 8px rgba(0,0,0,0.28) !important;
}


/* =========================================================
   2. USER NAVIGATION — LOGIN & REGISTER
   ========================================================= */

.pkp_navigation_user > li > a {

  /* WARNA UTAMA = EMAS */
  background: #E6C84A !important;

  color: #275F45 !important;

  font-weight: 600 !important;

  padding: 6px 14px !important;

  border-radius: 4px !important;

  margin: 2px !important;

  text-align: center !important;

  border: 1px solid rgba(255,255,255,0.25) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 3px 0 #B99D28,
    0 5px 8px rgba(0,0,0,0.28) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease !important;
}


.pkp_navigation_user > li > a:hover {

  background: #275F45 !important;

  color: #E6C84A !important;

  transform: translateY(-2px) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 0 #174532,
    0 6px 10px rgba(0,0,0,0.30) !important;
}


/* =========================================================
   3. LOGO HEADER — DESKTOP
   ========================================================= */

.pkp_site_name {
  max-width: 100%;

  padding: 10px 0 15px 0;

  text-align: center;
}


.pkp_site_name a.is_img {
  display: block;

  width: 100%;

  text-align: center;
}


.pkp_site_name img {
  width: 100% !important;

  max-width: none !important;

  height: auto !important;

  display: block;
}


/* =========================================================
   4. LOGO HEADER — MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .pkp_site_name {
    text-align: center;

    padding: 6px 0;
  }


  .pkp_site_name img {
    width: 100% !important;

    max-width: 300px;

    max-height: 56px;

    height: auto !important;

    margin: 0 auto;

    display: block;
  }

}


/* =========================================================
   5. SIDEBAR CUSTOM BLOCK
   ========================================================= */


/* Matikan style bawaan block */

.pkp_block.block_custom {
  border: none !important;

  background: transparent !important;
}


/* Container sidebar */

.pkp_block.block_custom .sidebar__container {
  background: #FFFFFF;

  border: 1px solid #E5E5E5;

  border-radius: 10px;

  padding: 14px;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.06);
}


/* =========================================================
   JUDUL SIDEBAR
   ========================================================= */

.pkp_block.block_custom .menu__title {

  font-size: 17px;

  font-weight: 700;

  color: #275F45;

  margin-bottom: 12px;

  padding-left: 10px;

  border-left: 4px solid #E6C84A;

  letter-spacing: 0.5px;
}


/* =========================================================
   GROUP MENU SIDEBAR
   ========================================================= */

.pkp_block.block_custom .menu__group {

  display: flex;

  flex-direction: column;

  gap: 8px;
}


/* =========================================================
   SIDEBAR BUTTON
   ========================================================= */

.pkp_block.block_custom .menu__link {

  display: block;

  padding: 10px 14px;

  border-radius: 8px;

  /* WARNA UTAMA SIDEBAR = EMAS */
  background: #E6C84A;

  color: #275F45 !important;

  text-decoration: none !important;

  font-size: 14px;

  font-weight: 600;

  text-align: center;

  border: 1px solid rgba(255,255,255,0.25);

  /* EFEK TIMBUL */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 3px 0 #B99D28,
    0 5px 8px rgba(0,0,0,0.22);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}


/* =========================================================
   SIDEBAR HOVER
   ========================================================= */

.pkp_block.block_custom .menu__link:hover {

  background: #275F45;

  color: #E6C84A !important;

  transform: translateY(-2px);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 4px 0 #174532,
    0 6px 10px rgba(0,0,0,0.30);
}


/* =========================================================
   SIDEBAR ACTIVE
   ========================================================= */

.pkp_block.block_custom .menu__link.active {

  background: #E6C84A !important;

  color: #275F45 !important;

  font-weight: 700;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 3px 0 #B99D28,
    0 5px 8px rgba(0,0,0,0.25);
}


/* =========================================================
   6. HEADER / OJS STRUCTURE
   ========================================================= */

.pkp_structure_head,
.pkp_head_wrapper {

  background-color: #80B028 !important;
}


/* =========================================================
   7. FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper,
.pkp_structure_footer,
.pkp_footer_content,
.pkp_brand_footer {

  background-color: #80B028 !important;
}


/* Footer text */

.pkp_footer_content,
.pkp_footer_content p,
.pkp_footer_content a,
.pkp_brand_footer a {

  color: #173A33 !important;
}


/* Footer link hover */

.pkp_footer_content a:hover {

  text-decoration: underline;

  opacity: 0.9;
}


/* =========================================================
   8. FOOTER CUSTOM GRID
   ========================================================= */

.footer__grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr));

  gap: 20px;

  margin-top: 20px;
}


/* Footer box */

.footer__box {

  background: #FFFFFF;

  border-radius: 6px;

  box-shadow:
    0 3px 8px rgba(0,0,0,0.15);

  overflow: hidden;
}


/* Footer content */

.footer__content {

  padding: 12px;

  font-size: 14px;

  line-height: 1.6;

  color: #333333;
}


/* Footer links */

.footer__content a {

  color: #275F45;

  font-weight: 600;

  text-decoration: none;
}


.footer__content a:hover {

  text-decoration: underline;
}


/* Footer small text */

.footer__small {

  font-size: 13px;

  color: #444444;
}


/* Footer title */

.footer__box .menu__title {

  color: #275F45;
}


/* Footer iframe mobile */

@media (max-width: 600px) {

  .footer__content iframe {

    height: 160px;
  }

}


/* =========================================================
   9. LOGIN PAGE
   ========================================================= */

.page_login h1 {

  color: #E6C84A;
}


.page_login .cmp_form label .label {

  color: #275F45;
}


.page_login .cmp_form .submit {

  background: #E6C84A;

  color: #275F45;

  border: 1px solid #B99D28;

  font-weight: 600;

  box-shadow:
    0 3px 0 #B99D28,
    0 4px 7px rgba(0,0,0,0.20);
}


.page_login .cmp_form .submit:hover {

  background: #275F45;

  color: #E6C84A;
}


/* =========================================================
   10. MOBILE BURGER
   ========================================================= */


/* Sembunyikan icon bawaan */

.pkp_site_nav_toggle span {

  display: none !important;
}


/* Icon burger baru */

.pkp_site_nav_toggle::after {

  content: "\f0c9";

  font-family: FontAwesome;

  font-size: 22px;

  color: #E6C84A;
}


/* =========================================================
   11. HIDE AUTHOR ROLE
   ========================================================= */

.item.author .userGroup,
.pkp_page_article .authors .userGroup,
.pkp_page_article .authors .roles {

  display: none !important;
}


/* =========================================================
   12. FIX BACKGROUND PRIMARY NAVIGATION
   ========================================================= */

.pkp_navigation_primary_wrapper {

  background: #80B028 !important;
}


.pkp_navigation_primary {

  background: transparent !important;
}


.pkp_navigation_primary_row {

  background: #80B028 !important;
}