.header {
    background-color: #18396c;
    padding: 20px 0;
}
.header .site-title {
    color: #2d2d2d;
    font-size: 28px;
    letter-spacing: 2px;
}

.topbar {
  background: #18396c; /* biru gelap */
  color: #fff;
  font-size: .9rem;
  padding: .35rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar .social {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.topbar .user-links {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.topbar i, .topbar svg {
  font-size: 1rem;
  vertical-align: middle;
}



.journal-logo{
  width: 100%;
  height: 450px;
}
.site-header {
  background-color: #18396c; /* biru gelap */
  padding: 1.2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header .branding img.logo {
  height: 56px;
  width: auto;
  display: block;
}

.site-header .search-area {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.site-header .search-area input[type="search"],
.site-header .search-area input[type="text"] {
  height: 38px;
  padding: 0 .75rem;
  border-radius: 4px 0 0 4px;
  border: none;
  min-width: 220px;
  box-sizing: border-box;
}

.site-header .search-area button {
  height: 38px;
  padding: 0 .9rem;
  border-radius: 0 4px 4px 0;
  border: none;
  background-color: #ef8a28; /* oranye */
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.pkp_navigation_primary {
  background-color: #18396c; /* biru gelap */
  padding: .6rem 1rem 1.1rem;
}

.pkp_navigation_primary > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.pkp_navigation_primary > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background-color: #18396c; /* sama dengan header */
  color: #ffffff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
  transition: background .15s ease, transform .06s ease;
  white-space: nowrap;
}

.pkp_navigation_primary > ul > li > a:hover,
.pkp_navigation_primary > ul > li > a:focus {
  background-color: #102040; /* biru dongker */
  color: #fff;
  transform: translateY(-1px);
}

.pkp_navigation_primary > ul > li.current > a,
.pkp_navigation_primary > ul > li.is_active > a {
  background-color: #18396c; /* warna berbeda untuk aktif */
  color: #fff;
}

@media (max-width: 992px) {
  .site-header {
    padding: .9rem 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .site-header .branding { justify-content: flex-start; }
  .site-header .search-area { justify-content: flex-end; }
  .pkp_navigation_primary > ul { gap: .5rem; }
  #user-nav-wrapper.col-md-5,
  #user-nav-wraper.col-md-5 {
    gap: .6rem;
    justify-content: center;
    max-width: 100%;
  }
}

@media (max-width: 576px) {
  .pkp_navigation_primary > ul {
    gap: .45rem;
    justify-content: center;
  }
  .pkp_navigation_primary > ul > li > a {
    padding: .45rem .7rem;
    font-size: .95rem;
  }
  .site-header .search-area input { min-width: 140px; }
}