/* =========================================
   IJSBMMS Custom CSS - OJS 3.1.1.4 (Default Theme)
   Versi 2 - Header gambar full width
   Gambar header: 1200 x 200 px (Settings > Website > Appearance > Logo)
   ========================================= */

/* ===== Variabel warna (selaras dengan gambar header) ===== */
:root {
  --navy-900: #081a33;
  --navy-800: #0d2a4a;
  --navy-700: #1a365d;
  --blue-600: #2b6cb0;
  --blue-50:  #ebf8ff;
  --gold:     #f4b740;
  --text:     #2d3748;
  --muted:    #4a5568;
  --line:     #e2e8f0;
  --bg:       #edf2f7;
}

/* ===== Global ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text);
  background: var(--bg) !important;
  line-height: 1.65;
}

a {
  color: var(--blue-600);
  transition: all 0.2s ease;
}

/* =========================================
   HEADER
   ========================================= */

.pkp_structure_head {
  background:
    radial-gradient(circle at 85% 0%, rgba(63, 208, 201, 0.18), transparent 45%),
    linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, #0f4a64 100%) !important;
  border-bottom: 3px solid var(--gold) !important;
  padding: 0 0 28px !important;
  overflow: visible !important;
}

/* Ruang di atas gambar untuk menu user (Register / Login / admin) */
.pkp_head_wrapper {
  padding-top: 44px !important;
  overflow: visible !important;
}

/* Hilangkan batas max-height 80px bawaan tema agar logo full */
.pkp_site_name_wrapper {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.pkp_site_name {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.pkp_site_name > a.is_img {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_site_name .is_img img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  aspect-ratio: 1200 / 200;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.pkp_site_name .is_img:focus {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: none !important;
}

/* Jika logo belum diupload (judul teks) */
.pkp_site_name .is_text {
  display: block !important;
  padding: 28px 0 !important;
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
  color: #fff !important;
}

/* ===== Menu user (kanan atas) ===== */
.pkp_navigation_user_wrapper {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  right: 0 !important;
  width: auto !important;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pkp_navigation_user {
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
}

.pkp_navigation_user > li > a {
  color: #dbe7f3 !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px;
}

.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.pkp_navigation_user .task_count {
  background: var(--gold) !important;
  color: var(--navy-900) !important;
}

/* ===== Primary Navigation (menempel di bawah gambar) ===== */
.pkp_navigation_primary_row {
  position: relative;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: visible !important;
}

.pkp_navigation_primary_wrapper {
  width: 100% !important;
  padding: 0 12px !important;
}

.pkp_navigation_primary {
  background: transparent !important;
  overflow: visible !important;
}

.pkp_navigation_primary > li > a {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary .pkp_nav_list li:hover > a {
  background: var(--blue-50) !important;
  color: var(--blue-600) !important;
  border-bottom-color: var(--gold) !important;
}

/* Pencarian di kanan menu */
.pkp_head_wrapper .pkp_search {
  top: 50% !important;
  transform: translateY(-50%);
  right: 16px !important;
}

.pkp_head_wrapper .pkp_search input[type="text"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.pkp_head_wrapper .pkp_search input[type="text"]:focus {
  border-bottom: 1.5px solid var(--blue-600) !important;
}

.pkp_head_wrapper .pkp_search .search_prompt {
  color: var(--navy-700) !important;
  font-weight: 600;
}

/* ===== Dropdown submenu ===== */
.pkp_navigation_primary .pkp_nav_list > li {
  position: relative !important;
}

.pkp_navigation_primary .pkp_nav_list li ul,
.pkp_nav_list > li > ul {
  position: absolute !important;
  z-index: 9999 !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 220px !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--gold) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  display: none;
}

.pkp_navigation_primary .pkp_nav_list li:hover > ul,
.pkp_navigation_primary .pkp_nav_list li:focus-within > ul {
  display: block !important;
}

.pkp_navigation_primary .pkp_nav_list li ul a {
  display: block !important;
  padding: 10px 18px !important;
  color: var(--text) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.pkp_navigation_primary .pkp_nav_list li ul a:hover {
  background: var(--blue-50) !important;
  color: var(--blue-600) !important;
}

/* =========================================
   KONTEN & SIDEBAR
   ========================================= */

.pkp_structure_content {
  padding-top: 28px !important;
}

.pkp_structure_main {
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
  padding: 32px 36px !important;
  min-height: 420px;
  width: calc(100% - 280px - 28px) !important;
  margin-right: 28px !important;
}

.pkp_structure_main:before,
.pkp_structure_main:after {
  display: none !important;   /* garis vertikal bawaan tema */
}

.page h1,
.page_index_journal h1 {
  color: var(--navy-700) !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  border-bottom: 3px solid var(--blue-600) !important;
  padding-bottom: 12px !important;
  margin-bottom: 24px !important;
}

.page h2 {
  color: #2c5282 !important;
  font-weight: 600 !important;
}

.pkp_structure_sidebar {
  width: 280px !important;
  background: transparent !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

/* ===== Sidebar blocks ===== */
.pkp_block {
  background: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07) !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.pkp_block .title {
  background: linear-gradient(135deg, var(--navy-700), var(--blue-600)) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.pkp_block .content {
  padding: 8px 14px 10px !important;
}

.pkp_block .content a,
.pkp_block .content li,
.pkp_block .content ul {
  margin: 0 !important;
  padding: 3px 0 !important;
  font-size: 0.87rem !important;
  line-height: 1.45 !important;
}

/* ===== Main Menu Block (Custom) ===== */
.main-menu-block {
  padding: 4px 0 !important;
}

.main-menu-block ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.main-menu-block li {
  border-bottom: 1px solid var(--bg) !important;
  margin: 0 !important;
}

.main-menu-block li:last-child {
  border-bottom: none !important;
}

.main-menu-block a {
  display: block !important;
  position: relative;
  padding: 7px 14px !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease;
}

.main-menu-block a:hover {
  background: var(--blue-50) !important;
  color: var(--blue-600) !important;
  padding-left: 18px !important;
}

.main-menu-block a:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gold);
}

/* ===== Buttons ===== */
.cmp_button,
.pkp_button,
button,
input[type="submit"],
.pkp_linkActions a {
  background: linear-gradient(135deg, var(--blue-600), #3182ce) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  box-shadow: 0 2px 6px rgba(43, 108, 176, 0.3);
  transition: all 0.2s ease;
}

.cmp_button:hover,
.pkp_button:hover,
button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--navy-700), #2c5282) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26, 54, 93, 0.35);
}

/* ===== Article & Issue Cards ===== */
.obj_article_summary,
.obj_issue_summary {
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 18px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
}

.obj_article_summary:hover,
.obj_issue_summary:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
  border-color: #bee3f8 !important;
}

.obj_article_summary .title a {
  color: var(--navy-700) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}

.obj_article_summary .title a:hover {
  color: var(--blue-600) !important;
}

/* ===== Forms ===== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  border: 1.5px solid #cbd5e0 !important;
  border-radius: 6px !important;
  padding: 11px 14px !important;
  background: #fff !important;
  transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.18) !important;
  outline: none !important;
}

/* ===== Editorial Team ===== */
.editorial-team h3 {
  color: var(--navy-700) !important;
  margin: 0 0 3px 0 !important;
  font-size: 1.1rem !important;
}

.editorial-team p {
  margin: 1px 0 !important;
  color: var(--muted) !important;
  font-size: 0.92rem !important;
}

/* ===== Footer ===== */
.pkp_structure_footer_wrapper {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700)) !important;
  color: var(--line) !important;
  margin-top: 50px !important;
  padding: 35px 0 !important;
  border-top: 4px solid var(--gold);
}

.pkp_structure_footer a {
  color: #90cdf4 !important;
}

.pkp_structure_footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1199px) {
  .pkp_head_wrapper,
  .pkp_structure_content,
  .pkp_structure_footer {
    width: auto !important;
    max-width: 952px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 992px) {
  .pkp_head_wrapper,
  .pkp_structure_content,
  .pkp_structure_footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .pkp_structure_main {
    width: 100% !important;
    margin-right: 0 !important;
    padding: 24px 20px !important;
  }

  .pkp_structure_sidebar {
    width: 100% !important;
    margin-top: 24px !important;
  }

  .pkp_navigation_user_wrapper {
    right: 12px !important;
  }
}

@media (max-width: 768px) {
  .pkp_structure_head {
    padding-bottom: 16px !important;
  }

  .pkp_site_name .is_img img {
    border-radius: 6px 6px 0 0;
  }

  .pkp_navigation_primary_row {
    border-radius: 0 0 6px 6px;
  }

  .pkp_navigation_primary > li > a {
    padding: 12px 14px !important;
  }

  .pkp_head_wrapper .pkp_search {
    position: static !important;
    transform: none;
    padding: 0 0 10px !important;
    text-align: left;
  }

  .main-menu-block a {
    padding: 13px 16px !important;
  }
}