/* =========================================================
   GJPH — FINAL PREMIUM (proporsional + responsif)
   Tempel PALING BAWAH (override)
   Works with:
   .gjph-card .gjph-grid .gjph-cover img .gjph-meta .gjph-table .gjph-about
   ========================================================= */

/* Container card */
.gjph-card{
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 18px 55px rgba(15,23,42,.10) !important;
  overflow: hidden !important;
}

/* top accent */
.gjph-card::before{
  content:"";
  display:block;
  height: 6px;
  background: linear-gradient(90deg,
    rgba(59,130,246,.45),
    rgba(99,102,241,.35),
    rgba(236,72,153,.25)
  );
}

/* ======= GRID: kiri cover, kanan tabel ======= */
.gjph-grid{
  display: grid !important;
  grid-template-columns: 320px 1fr !important; /* kiri fixed, kanan fleksibel */
  gap: 18px !important;
  align-items: start !important;
  padding: 18px !important;
}

/* ======= COVER BOX ======= */
.gjph-cover{
  position: relative !important;
  border-radius: 16px !important;
  padding: 14px !important;
  background:
    radial-gradient(900px 520px at 30% 10%, rgba(59,130,246,.14), transparent 55%),
    radial-gradient(800px 480px at 90% 0%, rgba(236,72,153,.10), transparent 55%),
    linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.86)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.10) !important;
}

/* Gambar: jangan “meledak”, selalu proporsional */
.gjph-cover img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  /* kunci tinggi supaya sejajar tabel */
  max-height: 420px !important;
  object-fit: contain !important;

  border-radius: 14px !important;
  box-shadow:
    0 28px 70px rgba(15,23,42,.20),
    0 10px 18px rgba(15,23,42,.10) !important;
}

/* ======= TABLE CARD LOOK ======= */
.gjph-meta{
  min-width: 0 !important; /* penting supaya td tidak memaksa melebar */
}

.gjph-table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 12.6px !important;     /* lebih kecil biar kompak */
  line-height: 1.45 !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.75) !important;
}

/* kolom kiri label */
.gjph-table th{
  width: 200px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  padding: 9px 12px !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
  background: rgba(148,163,184,.08) !important;
}

/* kolom kanan isi */
.gjph-table td{
  color: #0f172a !important;
  padding: 9px 12px !important;
  vertical-align: top !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;

  /* biar isi panjang tidak bikin kolom aneh */
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}

/* baris terakhir hilang border */
.gjph-table tbody tr:last-child th,
.gjph-table tbody tr:last-child td{
  border-bottom: 0 !important;
}

/* ======= ABOUT TEXT ======= */
.gjph-about{
  padding: 0 18px 18px 18px !important;
}

.gjph-about p{
  margin: 10px 0 0 !important;
  line-height: 1.80 !important;
  color: #0f172a !important;
  font-size: 14px !important;
}

/* bikin bold opening lebih “branding” */
.gjph-about strong{
  font-weight: 900 !important;
}

/* rapihin kasus </strong>is (tanpa spasi) - workaround visual */
.gjph-about strong + span,
.gjph-about strong{
  word-spacing: 1px;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 992px){
  .gjph-grid{
    grid-template-columns: 280px 1fr !important;
  }
  .gjph-cover img{
    max-height: 380px !important;
  }
  .gjph-table th{
    width: 170px !important;
  }
}

@media (max-width: 768px){
  .gjph-grid{
    grid-template-columns: 1fr !important; /* stack */
  }
  .gjph-cover{
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .gjph-cover img{
    max-height: 340px !important;
  }
  .gjph-table{
    font-size: 12.4px !important;
  }
}

/* ======= (Opsional) Dark Mode kalau nanti Anda aktifkan ======= */
html.dark .gjph-card,
body.dark .gjph-card,
body.dark-mode .gjph-card,
html.dark-mode .gjph-card,
body.theme-dark .gjph-card{
  background: rgba(17,24,39,.78) !important;
  border-color: rgba(148,163,184,.18) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
}

html.dark .gjph-table,
body.dark .gjph-table,
body.dark-mode .gjph-table{
  background: rgba(17,24,39,.55) !important;
  border-color: rgba(148,163,184,.16) !important;
}

html.dark .gjph-table th,
body.dark .gjph-table th,
body.dark-mode .gjph-table th{
  color: #e5e7eb !important;
  background: rgba(148,163,184,.10) !important;
  border-bottom-color: rgba(148,163,184,.14) !important;
}

html.dark .gjph-table td,
body.dark .gjph-table td,
body.dark-mode .gjph-table td{
  color: #e5e7eb !important;
  border-bottom-color: rgba(148,163,184,.14) !important;
}

html.dark .gjph-about p,
body.dark .gjph-about p,
body.dark-mode .gjph-about p{
  color: #e5e7eb !important;
}
/* ====== TRY: TARUH ADDITIONAL CONTENT DI ATAS CURRENT ISSUE (CSS ORDER) ====== */

/* 1) Jadikan area main homepage sebagai flex kolom */
.pkp_page_index .pkp_structure_main .page_index_journal{
  display: flex;
  flex-direction: column;
}

/* 2) Additional Content biasanya punya class ini (kadang berbeda theme) */
.pkp_page_index .pkp_structure_main .additional_content,
.pkp_page_index .pkp_structure_main .additionalContent,
.pkp_page_index .pkp_structure_main .homepage_additional_content{
  order: 1 !important;
}

/* 3) Current issue container (kadang: .current_issue) */
.pkp_page_index .pkp_structure_main .current_issue,
.pkp_page_index .pkp_structure_main .cmp_issue_toc,
.pkp_page_index .pkp_structure_main .issue_toc{
  order: 2 !important;
}
/* =========================================================
   GJPH — STICKY HEADER (TARGET: #headerNavigationContainer)
   Brand color: #717b5c
   ========================================================= */

:root{
  --gjph-brand: #717b5c;
  --gjph-brand-dark: #5f684e;
  --gjph-white: rgba(255,255,255,.92);
  --gjph-white-soft: rgba(255,255,255,.78);
  --gjph-border: rgba(255,255,255,.16);
  --gjph-shadow: 0 14px 40px rgba(2, 6, 23, .12);
}

/* 0) Penyebab sticky sering mati: parent overflow/transform */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_main{
  overflow: visible !important;
  transform: none !important;
}

/* =========================================================
   1) MODE UTAMA: STICKY
   ========================================================= */
header#headerNavigationContainer.navbar.navbar-default{
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  /* Override bootstrap default */
  background: linear-gradient(180deg,
    rgba(113,123,92,.97),
    rgba(95,104,78,.95)
  ) !important;

  border: 0 !important;
  border-bottom: 1px solid var(--gjph-border) !important;
  box-shadow: var(--gjph-shadow) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  margin-bottom: 0 !important; /* bootstrap navbar sering kasih jarak bawah */
}

/* garis aksen tipis */
header#headerNavigationContainer.navbar.navbar-default::after{
  content:"";
  display:block;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.10),
    rgba(255,255,255,.18)
  );
}

/* container dalam header tetap transparan biar nyatu */
header#headerNavigationContainer .container,
header#headerNavigationContainer .container-fluid{
  background: transparent !important;
}

/* brand/title */
header#headerNavigationContainer .navbar-brand,
header#headerNavigationContainer .navbar-brand a{
  color: var(--gjph-white) !important;
  font-weight: 700 !important;
}

/* semua link nav */
header#headerNavigationContainer .navbar-nav > li > a{
  color: var(--gjph-white-soft) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  padding: 10px 12px !important;
  margin: 4px 3px !important;
  transition: all .18s ease;
}

/* hover */
header#headerNavigationContainer .navbar-nav > li > a:hover{
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  transform: translateY(-1px);
}

/* aktif/current */
header#headerNavigationContainer .navbar-nav > .active > a,
header#headerNavigationContainer .navbar-nav > .active > a:hover,
header#headerNavigationContainer .navbar-nav > li > a[aria-current="page"]{
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

/* search box */
header#headerNavigationContainer input[type="search"],
header#headerNavigationContainer input[type="text"],
header#headerNavigationContainer .form-control{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
header#headerNavigationContainer input::placeholder{
  color: rgba(255,255,255,.72) !important;
}

/* tombol (Search / dropdown / dll) */
header#headerNavigationContainer .btn,
header#headerNavigationContainer button{
  border-radius: 12px !important;
}

/* icon toggle mobile (hamburger) biar kebaca */
header#headerNavigationContainer .navbar-toggle{
  border-color: rgba(255,255,255,.35) !important;
}
header#headerNavigationContainer .navbar-toggle .icon-bar{
  background-color: rgba(255,255,255,.90) !important;
}

/* =========================================================
   2) FALLBACK: kalau sticky tetap tidak jalan -> FIXED
   Aktif otomatis jika browser aneh / sticky “kalah”
   ========================================================= */
@supports not ((position: sticky) or (position: -webkit-sticky)){
  header#headerNavigationContainer.navbar.navbar-default{
    position: fixed !important;
    left: 0; right: 0; top: 0;
  }
  body{ padding-top: 70px !important; }
}

/* Kalau ternyata sticky tidak jalan karena rule lain, Anda bisa paksa fixed
   cukup UNCOMMENT 2 blok di bawah ini:

header#headerNavigationContainer.navbar.navbar-default{
  position: fixed !important;
  left: 0; right: 0; top: 0;
}
body{ padding-top: 70px !important; }

*/

/* =========================================================
   3) MOBILE: rapihin spacing
   ========================================================= */
@media (max-width: 768px){
  header#headerNavigationContainer .navbar-nav > li > a{
    margin: 3px 0 !important;
    padding: 10px 10px !important;
  }
}
/* =========================================================
   FIX USER MENU (akun setiyo666) — selalu putih & tidak hilang saat hover
   Tempel PALING BAWAH
   ========================================================= */

/* Target header bootstrap OJS */
#headerNavigationContainer,
#headerNavigationContainer.navbar,
#headerNavigationContainer.navbar.navbar-default{
  background: transparent !important;
}

/* Paksa semua link di header jadi putih (termasuk username) */
#headerNavigationContainer a,
#headerNavigationContainer a:visited,
#headerNavigationContainer a:hover,
#headerNavigationContainer a:focus{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}

/* Khusus area user menu kanan (username + ikon) */
#headerNavigationContainer .pkp_navigation_user,
#headerNavigationContainer .pkp_navigation_user a,
#headerNavigationContainer .pkp_navigation_user a:visited{
  color: rgba(255,255,255,.92) !important;
}

/* Hover user menu: jangan bikin teks jadi gelap/hilang */
#headerNavigationContainer .pkp_navigation_user a:hover,
#headerNavigationContainer .pkp_navigation_user a:focus{
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
}

/* Kalau username ada di dropdown-toggle */
#headerNavigationContainer .dropdown-toggle,
#headerNavigationContainer .dropdown-toggle span,
#headerNavigationContainer .dropdown-toggle strong{
  color: rgba(255,255,255,.92) !important;
}

/* Ikon caret/arrow kanan */
#headerNavigationContainer .caret,
#headerNavigationContainer .pkp_user_nav .caret{
  border-top-color: rgba(255,255,255,.85) !important;
  border-bottom-color: rgba(255,255,255,.85) !important;
}

/* Badge angka (0) biar kontras */
#headerNavigationContainer .badge{
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}

/* Dropdown menu (saat diklik) */
#headerNavigationContainer .dropdown-menu{
  border-radius: 14px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
}
#headerNavigationContainer .dropdown-menu a{
  color: #0f172a !important;
}
#headerNavigationContainer .dropdown-menu a:hover{
  background: rgba(113,123,92,.12) !important; /* nyambung ke hijau #717b5c */
}
/* =========================================================
   GJPH — PREMIUM SHRINK HEADER (CSS)
   Pair with JS class: body.gjph-header--shrink
   ========================================================= */

:root{
  --gjph-header-bg1: rgba(113,123,92,.92); /* #717b5c */
  --gjph-header-bg2: rgba(90,100,74,.90);
  --gjph-header-blur: 10px;

  --gjph-header-pad-y: 14px;      /* tinggi normal */
  --gjph-header-pad-y-shrink: 7px;/* tinggi saat shrink */

  --gjph-header-shadow: 0 10px 26px rgba(2,6,23,.10);
  --gjph-header-shadow-shrink: 0 10px 22px rgba(2,6,23,.14);
}

/* Target header bootstrap OJS yang Anda punya */
#headerNavigationContainer.navbar.navbar-default{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  background: linear-gradient(180deg, var(--gjph-header-bg1), var(--gjph-header-bg2)) !important;
  backdrop-filter: blur(var(--gjph-header-blur));
  -webkit-backdrop-filter: blur(var(--gjph-header-blur));

  border: 0 !important;
  box-shadow: var(--gjph-header-shadow) !important;

  /* animasi halus */
  transition:
    padding .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    backdrop-filter .22s ease;
  padding-top: var(--gjph-header-pad-y) !important;
  padding-bottom: var(--gjph-header-pad-y) !important;
}

/* garis aksen premium (opsional) */
#headerNavigationContainer.navbar.navbar-default::after{
  content:"";
  display:block;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.22),
    rgba(255,255,255,.06),
    rgba(255,255,255,.16)
  );
}

/* SHRINK STATE (dipicu oleh JS) */
body.gjph-header--shrink #headerNavigationContainer.navbar.navbar-default{
  padding-top: var(--gjph-header-pad-y-shrink) !important;
  padding-bottom: var(--gjph-header-pad-y-shrink) !important;

  /* shadow lebih halus tapi tetap premium */
  box-shadow: var(--gjph-header-shadow-shrink) !important;

  /* sedikit lebih “solid” saat scroll */
  background: linear-gradient(180deg,
    rgba(113,123,92,.96),
    rgba(90,100,74,.95)
  ) !important;

  /* blur sedikit diturunkan biar tajam */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Menu/link ikut rapat saat shrink */
#headerNavigationContainer .navbar-nav > li > a{
  transition: padding .22s ease, margin .22s ease, transform .18s ease, background .18s ease;
}

/* Saat shrink: padding menu diperkecil */
body.gjph-header--shrink #headerNavigationContainer .navbar-nav > li > a{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* Brand/judul juga ikut rapat */
#headerNavigationContainer .navbar-brand,
#headerNavigationContainer .pkp_site_name{
  transition: font-size .22s ease, transform .22s ease;
}

body.gjph-header--shrink #headerNavigationContainer .navbar-brand,
body.gjph-header--shrink #headerNavigationContainer .pkp_site_name{
  transform: translateY(-1px);
}

/* Search box ikut mengecil */
#headerNavigationContainer input[type="search"],
#headerNavigationContainer input[type="text"],
#headerNavigationContainer .navbar-form .form-control{
  transition: height .22s ease, padding .22s ease, border-radius .22s ease;
}

body.gjph-header--shrink #headerNavigationContainer input[type="search"],
body.gjph-header--shrink #headerNavigationContainer input[type="text"],
body.gjph-header--shrink #headerNavigationContainer .navbar-form .form-control{
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-radius: 10px !important;
}

/* Mobile: jangan terlalu agresif shrink */
@media (max-width: 768px){
  :root{
    --gjph-header-pad-y: 10px;
    --gjph-header-pad-y-shrink: 6px;
  }
}
/* =========================================================
   GJPH — FINAL HEADER ONLY (STICKY + SHRINK + MOBILE CLEAN)
   Gunakan SATU BLOK INI SAJA untuk header.
   Syarat shrink: body.gjph-header--shrink (JS Anda sudah ada)
   Target: header#headerNavigationContainer.navbar.navbar-default
   ========================================================= */

:root{
  --gjph-green: #717b5c;
  --gjph-green-dark: #5f684f;
  --gjph-green-darker: #4e5642;

  --gjph-white: rgba(255,255,255,.92);
  --gjph-white-soft: rgba(255,255,255,.80);
  --gjph-line: rgba(255,255,255,.14);

  --gjph-shadow: 0 10px 26px rgba(2,6,23,.10);
  --gjph-shadow-shrink: 0 8px 20px rgba(2,6,23,.10);

  --gjph-pad-y: 12px;
  --gjph-pad-y-shrink: 6px;
}

/* ===== HEADER BASE ===== */
header#headerNavigationContainer.navbar.navbar-default{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  background: linear-gradient(180deg, var(--gjph-green), var(--gjph-green-dark)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gjph-line) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--gjph-shadow) !important;
  padding-top: var(--gjph-pad-y) !important;
  padding-bottom: var(--gjph-pad-y) !important;

  transition: padding .22s ease, box-shadow .22s ease, background .22s ease, backdrop-filter .22s ease;
}

/* accent line */
header#headerNavigationContainer.navbar.navbar-default::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.06),
    rgba(255,255,255,.18)
  );
}

/* ===== TEXT COLORS (brand, links, user) ===== */
#headerNavigationContainer .navbar-brand,
#headerNavigationContainer .navbar-brand a,
#headerNavigationContainer .pkp_site_name,
#headerNavigationContainer .pkp_site_name a{
  color: #fff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#headerNavigationContainer .navbar-nav > li > a,
#headerNavigationContainer .navbar-nav > li > a:visited{
  color: var(--gjph-white) !important;
  font-weight: 600;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}

#headerNavigationContainer .navbar-nav > li > a:hover{
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

#headerNavigationContainer .navbar-nav > .active > a,
#headerNavigationContainer .navbar-nav > .active > a:hover,
#headerNavigationContainer .navbar-nav > li > a[aria-current="page"]{
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
}

/* user menu (setiyo666) */
#headerNavigationContainer .navbar-right a,
#headerNavigationContainer .navbar-right .dropdown-toggle,
#headerNavigationContainer .navbar-right .dropdown-toggle span,
#headerNavigationContainer .navbar-right .caret{
  color: #fff !important;
  opacity: .95 !important;
}

/* ===== SEARCH ===== */
#headerNavigationContainer .navbar-form .form-control,
#headerNavigationContainer input[type="search"],
#headerNavigationContainer input[type="text"]{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#headerNavigationContainer input::placeholder{
  color: var(--gjph-white-soft) !important;
}

#headerNavigationContainer .navbar-form .btn,
#headerNavigationContainer button.btn{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
}

#headerNavigationContainer .navbar-form .btn:hover{
  background: rgba(255,255,255,.26) !important;
}

/* ===== SHRINK (saat body punya class gjph-header--shrink) ===== */
body.gjph-header--shrink header#headerNavigationContainer.navbar.navbar-default{
  padding-top: var(--gjph-pad-y-shrink) !important;
  padding-bottom: var(--gjph-pad-y-shrink) !important;
  box-shadow: var(--gjph-shadow-shrink) !important;
  background: linear-gradient(180deg, var(--gjph-green-dark), var(--gjph-green-darker)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== MOBILE CLEAN (ini yang mengembalikan posisi biar bagus) ===== */
@media (max-width: 768px){

  /* 1) brand 1 baris ellipsis (tidak bertumpuk) */
  #headerNavigationContainer .navbar-brand,
  #headerNavigationContainer .pkp_site_name,
  #headerNavigationContainer .pkp_site_name_wrapper a{
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* sisakan ruang untuk user + hamburger */
    max-width: calc(100vw - 120px) !important;

    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  /* 2) hamburger tetap kanan */
  #headerNavigationContainer .navbar-toggle{
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.08) !important;
  }
  #headerNavigationContainer .navbar-toggle .icon-bar{
    background: rgba(255,255,255,.92) !important;
  }

  /* 3) Search jangan “narik” header tinggi: turunkan jadi full width */
  #headerNavigationContainer .navbar-form{
    float: none !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }
  #headerNavigationContainer .navbar-form .form-group{
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #headerNavigationContainer .navbar-form .form-control{
    flex: 1 !important;
    min-width: 0 !important;
  }
  #headerNavigationContainer .navbar-form .btn{
    white-space: nowrap !important;
  }

  /* 4) Shrink mobile lebih kecil lagi (tetap elegan) */
  body.gjph-header--shrink #headerNavigationContainer .navbar-brand,
  body.gjph-header--shrink #headerNavigationContainer .pkp_site_name,
  body.gjph-header--shrink #headerNavigationContainer .pkp_site_name_wrapper a{
    font-size: 16px !important;
  }
}

/* super kecil */
@media (max-width: 420px){
  #headerNavigationContainer .navbar-brand,
  #headerNavigationContainer .pkp_site_name,
  #headerNavigationContainer .pkp_site_name_wrapper a{
    max-width: calc(100vw - 105px) !important;
    font-size: 16px !important;
  }
}
/* =========================================================
   GJPH — FINAL HEADER ONLY (STICKY + SHRINK + MOBILE CLEAN)
   Gunakan SATU BLOK INI SAJA untuk header.
   Syarat shrink: body.gjph-header--shrink (JS Anda sudah ada)
   Target: header#headerNavigationContainer.navbar.navbar-default
   ========================================================= */

:root{
  --gjph-green: #717b5c;
  --gjph-green-dark: #5f684f;
  --gjph-green-darker: #4e5642;

  --gjph-white: rgba(255,255,255,.92);
  --gjph-white-soft: rgba(255,255,255,.80);
  --gjph-line: rgba(255,255,255,.14);

  --gjph-shadow: 0 10px 26px rgba(2,6,23,.10);
  --gjph-shadow-shrink: 0 8px 20px rgba(2,6,23,.10);

  --gjph-pad-y: 12px;
  --gjph-pad-y-shrink: 6px;
}

/* ===== HEADER BASE ===== */
header#headerNavigationContainer.navbar.navbar-default{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;

  background: linear-gradient(180deg, var(--gjph-green), var(--gjph-green-dark)) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--gjph-line) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--gjph-shadow) !important;
  padding-top: var(--gjph-pad-y) !important;
  padding-bottom: var(--gjph-pad-y) !important;

  transition: padding .22s ease, box-shadow .22s ease, background .22s ease, backdrop-filter .22s ease;
}

/* accent line */
header#headerNavigationContainer.navbar.navbar-default::after{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.28),
    rgba(255,255,255,.06),
    rgba(255,255,255,.18)
  );
}

/* ===== TEXT COLORS (brand, links, user) ===== */
#headerNavigationContainer .navbar-brand,
#headerNavigationContainer .navbar-brand a,
#headerNavigationContainer .pkp_site_name,
#headerNavigationContainer .pkp_site_name a{
  color: #fff !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#headerNavigationContainer .navbar-nav > li > a,
#headerNavigationContainer .navbar-nav > li > a:visited{
  color: var(--gjph-white) !important;
  font-weight: 600;
  border-radius: 999px;
  transition: background .18s ease, transform .18s ease;
}

#headerNavigationContainer .navbar-nav > li > a:hover{
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}

#headerNavigationContainer .navbar-nav > .active > a,
#headerNavigationContainer .navbar-nav > .active > a:hover,
#headerNavigationContainer .navbar-nav > li > a[aria-current="page"]{
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
}

/* user menu (setiyo666) */
#headerNavigationContainer .navbar-right a,
#headerNavigationContainer .navbar-right .dropdown-toggle,
#headerNavigationContainer .navbar-right .dropdown-toggle span,
#headerNavigationContainer .navbar-right .caret{
  color: #fff !important;
  opacity: .95 !important;
}

/* ===== SEARCH ===== */
#headerNavigationContainer .navbar-form .form-control,
#headerNavigationContainer input[type="search"],
#headerNavigationContainer input[type="text"]{
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

#headerNavigationContainer input::placeholder{
  color: var(--gjph-white-soft) !important;
}

#headerNavigationContainer .navbar-form .btn,
#headerNavigationContainer button.btn{
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 12px !important;
}

#headerNavigationContainer .navbar-form .btn:hover{
  background: rgba(255,255,255,.26) !important;
}

/* ===== SHRINK (saat body punya class gjph-header--shrink) ===== */
body.gjph-header--shrink header#headerNavigationContainer.navbar.navbar-default{
  padding-top: var(--gjph-pad-y-shrink) !important;
  padding-bottom: var(--gjph-pad-y-shrink) !important;
  box-shadow: var(--gjph-shadow-shrink) !important;
  background: linear-gradient(180deg, var(--gjph-green-dark), var(--gjph-green-darker)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ===== MOBILE CLEAN (ini yang mengembalikan posisi biar bagus) ===== */
@media (max-width: 768px){

  /* 1) brand 1 baris ellipsis (tidak bertumpuk) */
  #headerNavigationContainer .navbar-brand,
  #headerNavigationContainer .pkp_site_name,
  #headerNavigationContainer .pkp_site_name_wrapper a{
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    /* sisakan ruang untuk user + hamburger */
    max-width: calc(100vw - 120px) !important;

    font-size: 18px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
  }

  /* 2) hamburger tetap kanan */
  #headerNavigationContainer .navbar-toggle{
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.08) !important;
  }
  #headerNavigationContainer .navbar-toggle .icon-bar{
    background: rgba(255,255,255,.92) !important;
  }

  /* 3) Search jangan “narik” header tinggi: turunkan jadi full width */
  #headerNavigationContainer .navbar-form{
    float: none !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
  }
  #headerNavigationContainer .navbar-form .form-group{
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #headerNavigationContainer .navbar-form .form-control{
    flex: 1 !important;
    min-width: 0 !important;
  }
  #headerNavigationContainer .navbar-form .btn{
    white-space: nowrap !important;
  }

  /* 4) Shrink mobile lebih kecil lagi (tetap elegan) */
  body.gjph-header--shrink #headerNavigationContainer .navbar-brand,
  body.gjph-header--shrink #headerNavigationContainer .pkp_site_name,
  body.gjph-header--shrink #headerNavigationContainer .pkp_site_name_wrapper a{
    font-size: 16px !important;
  }
}

/* super kecil */
@media (max-width: 420px){
  #headerNavigationContainer .navbar-brand,
  #headerNavigationContainer .pkp_site_name,
  #headerNavigationContainer .pkp_site_name_wrapper a{
    max-width: calc(100vw - 105px) !important;
    font-size: 16px !important;
  }
}
/* =========================================================
   GJPH — PREMIUM SIDEBAR (OJS Bootstrap3)
   Target: sidebar kanan + blok-bloknya
   Tempel PALING BAWAH
   ========================================================= */

:root{
  --gjph-green: #717b5c;
  --gjph-green-d: #5f684f;

  --sb-bg: rgba(255,255,255,.88);
  --sb-border: rgba(15,23,42,.08);
  --sb-shadow: 0 14px 40px rgba(2,6,23,.08);

  --sb-title: rgba(15,23,42,.92);
  --sb-link: rgba(15,23,42,.78);
  --sb-link-hover: rgba(15,23,42,.92);
  --sb-divider: rgba(15,23,42,.08);
}

/* ====== 1) Wrapper sidebar ====== */
.pkp_structure_sidebar,
.pkp_structure_main .pkp_structure_sidebar{
  padding-top: 6px !important;
}

/* OPSIONAL: Sticky sidebar di desktop (biar enak navigasi) */
@media (min-width: 992px){
  .pkp_structure_sidebar{
    position: sticky !important;
    top: 92px !important; /* sesuaikan tinggi header sticky */
    align-self: flex-start !important;
  }
}

/* ====== 2) Semua blok sidebar jadi “card premium” ====== */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar .cmp_block{
  background: var(--sb-bg) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--sb-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

/* garis aksen tipis hijau di atas card */
.pkp_structure_sidebar .pkp_block::before,
.pkp_structure_sidebar .block::before,
.pkp_structure_sidebar .cmp_block::before{
  content:"";
  display:block;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(113,123,92,.85),
    rgba(113,123,92,.25),
    rgba(113,123,92,.55)
  );
}

/* ====== 3) Judul blok (Governing Body, Editorial Policies, dst) ====== */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .block .title,
.pkp_structure_sidebar .cmp_block .title,
.pkp_structure_sidebar h2,
.pkp_structure_sidebar h3{
  color: var(--sb-title) !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  padding: 14px 14px 10px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--sb-divider) !important;
}

/* ====== 4) Isi blok ====== */
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .block .content,
.pkp_structure_sidebar .cmp_block .content{
  padding: 10px 14px 14px !important;
}

/* ====== 5) List link sidebar ====== */
.pkp_structure_sidebar ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.pkp_structure_sidebar li{
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
}

.pkp_structure_sidebar li:last-child{
  border-bottom: 0 !important;
}

.pkp_structure_sidebar a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 10px !important;
  margin: 4px 0 !important;
  border-radius: 12px !important;
  color: var(--sb-link) !important;
  text-decoration: none !important;
  transition: background .16s ease, transform .16s ease, color .16s ease !important;
}

/* dot kecil premium */
.pkp_structure_sidebar a::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(113,123,92,.55);
  box-shadow: 0 0 0 3px rgba(113,123,92,.12);
  flex: 0 0 8px;
}

/* hover */
.pkp_structure_sidebar a:hover{
  background: rgba(113,123,92,.10) !important;
  color: var(--sb-link-hover) !important;
  transform: translateX(1px);
}

/* ====== 6) Jika ada “block title” link, tetap rapi ====== */
.pkp_structure_sidebar .title a{
  color: var(--sb-title) !important;
}

/* ====== 7) Mobile: sidebar jangan sticky, spacing lebih rapat ====== */
@media (max-width: 991px){
  .pkp_structure_sidebar{
    position: static !important;
    top: auto !important;
  }
  .pkp_structure_sidebar .pkp_block,
  .pkp_structure_sidebar .block,
  .pkp_structure_sidebar .cmp_block{
    border-radius: 14px !important;
    margin-bottom: 14px !important;
  }
  .pkp_structure_sidebar a{
    padding: 10px 10px !important;
  }
}
/* ===== GJPH: SIDEBAR TARGET PALING AMAN (tanpa perlu tahu .pkp_block) ===== */
.pkp_structure_sidebar *{
  box-sizing: border-box;
}

/* Card wrapper: tangkap semua blok sidebar (berbagai theme) */
.pkp_structure_sidebar > *{
  margin-bottom: 16px !important;
}

/* Banyak theme: blok sidebar = .pkp_block / .block / .cmp_block */
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar .cmp_block,
.pkp_structure_sidebar .pkp_block.block_custom,
.pkp_structure_sidebar section,
.pkp_structure_sidebar aside{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 40px rgba(2,6,23,.08) !important;
  overflow: hidden !important;
}

/* Judul blok */
.pkp_structure_sidebar .title,
.pkp_structure_sidebar h2,
.pkp_structure_sidebar h3{
  margin: 0 !important;
  padding: 14px 14px 10px !important;
  font-weight: 800 !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

/* Isi */
.pkp_structure_sidebar .content,
.pkp_structure_sidebar .pkp_block .content{
  padding: 10px 14px 14px !important;
}

/* List link */
.pkp_structure_sidebar ul{ list-style:none !important; padding:0 !important; margin:0 !important; }
.pkp_structure_sidebar li{ border-bottom: 1px solid rgba(15,23,42,.06) !important; }
.pkp_structure_sidebar li:last-child{ border-bottom:0 !important; }

.pkp_structure_sidebar a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding: 11px 10px !important;
  margin: 4px 0 !important;
  border-radius: 12px !important;
  text-decoration:none !important;
  color: rgba(15,23,42,.78) !important;
  transition: background .16s ease, transform .16s ease, color .16s ease !important;
}
.pkp_structure_sidebar a::before{
  content:"";
  width:8px; height:8px; border-radius:999px;
  background: rgba(113,123,92,.55);
  box-shadow: 0 0 0 3px rgba(113,123,92,.12);
}
.pkp_structure_sidebar a:hover{
  background: rgba(113,123,92,.10) !important;
  color: rgba(15,23,42,.92) !important;
  transform: translateX(1px);
}
.pkp_structure_sidebar .pkp_block,
.pkp_structure_sidebar .block,
.pkp_structure_sidebar .cmp_block{
  transition: transform .18s ease, box-shadow .18s ease;
}

.pkp_structure_sidebar .pkp_block:hover,
.pkp_structure_sidebar .block:hover,
.pkp_structure_sidebar .cmp_block:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(2,6,23,.12) !important;
}
.pkp_structure_sidebar li{
  border-bottom: 1px solid rgba(0,0,0,.04) !important;
}
@media (min-width: 992px){
  body.gjph-header--shrink .pkp_structure_sidebar{
    top: 70px !important;
  }
}
/* =========================================================
   GJPH — PREMIUM FOOTER (match header green #717b5c)
   Tempel PALING BAWAH (override)
   ========================================================= */

:root{
  --gjph-green: #717b5c;
  --gjph-green-dark: #5f684f;
  --gjph-green-darker: #4e5642;

  --gjph-white: rgba(255,255,255,.92);
  --gjph-white-soft: rgba(255,255,255,.78);
  --gjph-line: rgba(255,255,255,.16);

  --gjph-footer-shadow: 0 -10px 28px rgba(2,6,23,.10);
}

/* Optional: kalau footer OJS ada wrapper, bikin background menyatu */
.pkp_structure_footer,
footer,
.pkp_page_footer{
  background: transparent !important; /* biar footer custom yang dominan */
}

/* ===== FOOTER WRAP: background hijau premium ===== */
.gj-footer3{
  /* background nyatu dengan header */
  background: linear-gradient(180deg,
    rgba(113,123,92,.96),
    rgba(95,104,79,.96)
  ) !important;

  /* glass */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* garis tipis premium */
  border-top: 1px solid var(--gjph-line) !important;

  /* shadow halus dari bawah ke atas */
  box-shadow: var(--gjph-footer-shadow) !important;

  /* spacing area footer */
  padding: 18px 18px !important;
  border-radius: 18px !important;

  /* layout grid kamu tetap */
  display:grid;
  grid-template-columns: 200px 1fr 280px;
  gap:28px;
  width:100%;
  max-width:1200px;
  margin: 18px auto 0 !important;

  align-items:start;

  /* typography */
  font-size: 12px;
  line-height: 1.6;

  color: var(--gjph-white) !important;
}

/* garis highlight tipis seperti header */
.gj-footer3::before{
  content:"";
  display:block;
  grid-column: 1 / -1;
  height: 2px;
  margin-bottom: 12px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.32),
    rgba(255,255,255,.10),
    rgba(255,255,255,.22)
  );
  border-radius: 999px;
}

/* Kolom */
.gj-logo{ text-align:left; }
.gj-info{ text-align:left; }
.gj-cc{ text-align:left; }

/* Heading lebih tegas */
.gj-info strong{
  color: #fff !important;
  font-size: 12.5px;
  letter-spacing: .2px;
}

/* Spasi antar blok */
.gj-block--mt{ margin-top:12px; }

/* Logo GENIUS */
.gj-logo-img{
  width: 160px !important;
  height:auto !important;
  display:block !important;
  box-shadow:none !important;

  /* sedikit “pop” */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

/* CC */
.gj-cc-img{
  width: 130px !important;
  height:auto !important;
  display:block !important;
  margin-bottom:10px;
  box-shadow:none !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.16));
}

.gj-cc-text{
  font-size: 11.5px;
  color: var(--gjph-white-soft) !important;
}

/* Link: putih soft + underline halus */
.gj-footer3 a{
  color: var(--gjph-white) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.0);
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}
.gj-footer3 a:hover{
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.55);
  opacity: 1;
}

/* ===== MOBILE ===== */
@media (max-width:600px){
  .gj-footer3{
    grid-template-columns: 1fr;
    gap:16px;
    text-align:center;
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .gj-logo, .gj-info, .gj-cc{ text-align:center !important; }

  .gj-logo-img, .gj-cc-img{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .gj-logo-img{ width: 165px !important; }
  .gj-cc-img{ width: 150px !important; }
}

/* ===== DARK MODE (tetap aman) ===== */
body.dark .gj-footer3,
body.dark-mode .gj-footer3,
body.theme-dark .gj-footer3,
html.dark .gj-footer3,
html.dark-mode .gj-footer3{
  color:#fff !important;
}
body.dark .gj-footer3 * ,
body.dark-mode .gj-footer3 * ,
body.theme-dark .gj-footer3 * ,
html.dark .gj-footer3 * ,
html.dark-mode .gj-footer3 *{
  color:#fff !important;
}