@import url(https://media.anwardani.id/css/ojs3/jkp-apmd.css);

/* =========================================================
   DEVOTION / IZZAN OJS - KILLER STRONG BLUE THEME
   Final polished version
   ========================================================= */

:root {
  --blue-900: #0d47a1;
  --blue-800: #1565c0;
  --blue-700: #1976d2;
  --blue-600: #1e88e5;
  --blue-500: #42a5f5;
  --blue-100: #e3f2fd;
  --blue-050: #f5faff;

  --text-900: #162534;
  --text-700: #425466;
  --text-500: #6b7c93;

  --white: #ffffff;
  --border: #dbe7f3;
  --border-strong: #c7d8ea;

  --shadow-sm: 0 4px 12px rgba(21, 101, 192, 0.08);
  --shadow-md: 0 10px 30px rgba(21, 101, 192, 0.12);
  --shadow-lg: 0 16px 38px rgba(13, 71, 161, 0.16);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --grad-primary: linear-gradient(135deg, #1565c0 0%, #1e88e5 55%, #42a5f5 100%);
  --grad-strong: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1e88e5 100%);
  --grad-soft: linear-gradient(180deg, #f9fcff 0%, #eef6fd 100%);
}

/* =========================================================
   GLOBAL
   ========================================================= */

html,
body {
  background: #f7fbff !important;
  color: var(--text-900) !important;
  font-family: "Segoe UI", Arial, sans-serif !important;
}

body {
  line-height: 1.7;
}

a {
  color: var(--blue-700) !important;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover,
a:focus {
  color: var(--blue-900) !important;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--blue-900) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

img {
  max-width: 100%;
  height: auto;
}

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

.pkp_structure_head {
  background: var(--grad-primary) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(13, 71, 161, 0.18);
}

/* =========================================================
   SITE NAVIGATION
   ========================================================= */

.pkp_site_nav_menu {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 4px solid var(--blue-700) !important;
  box-shadow: 0 8px 24px rgba(21, 101, 192, 0.08) !important;
  margin-bottom: 24px !important;
  position: relative;
  z-index: 10;
}

.pkp_navigation_primary {
  gap: 4px;
}

.pkp_navigation_primary > li > a {
  color: var(--blue-800) !important;
  font-weight: 800 !important;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 10px 16px !important;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-expanded="true"] {
  background: var(--grad-primary) !important;
  color: var(--white) !important;
  box-shadow: 0 6px 16px rgba(21, 101, 192, 0.22);
}

/* spacing between header and content */
.page_index_journal .page,
.page_index_journal main,
.page_index_journal .homepage_content,
.page_index_journal .current_issue,
.page_index_journal .cmp_announcements,
.pkp_structure_content {
  margin-top: 18px !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */

.pkp_button,
.pkp_button_primary,
.obj_galley_link,
.cmp_button,
button,
input[type="submit"] {
  background: var(--grad-primary) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.18);
  font-weight: 700 !important;
  transition: all 0.2s ease;
}

.pkp_button:hover,
.pkp_button:focus,
.pkp_button_primary:hover,
.pkp_button_primary:focus,
.obj_galley_link:hover,
.obj_galley_link:focus,
.cmp_button:hover,
.cmp_button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: var(--grad-strong) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(13, 71, 161, 0.24);
}

/* =========================================================
   CONTENT CARDS / BOXES
   ========================================================= */

.pkp_block,
.obj_article_summary,
.obj_issue_summary,
.current_issue,
.cmp_announcements .obj_announcement_summary,
.page_article .main_entry,
.page_issue .current_issue,
.page_search .results > li {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}

.current_issue,
.obj_issue_summary,
.obj_article_summary {
  overflow: hidden;
}

/* =========================================================
   ARTICLE LIST
   ========================================================= */

.obj_article_summary,
.obj_issue_summary,
.current_issue .section {
  padding: 24px 28px !important;
}

.obj_article_summary {
  margin-bottom: 20px !important;
  border-radius: 18px !important;
  transition: all 0.22s ease !important;
}

.obj_article_summary:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
  border-color: #c4dbf5 !important;
}

.obj_article_summary .title {
  margin-bottom: 10px !important;
  line-height: 1.45 !important;
}

.obj_article_summary .title a {
  color: var(--blue-900) !important;
  font-weight: 800 !important;
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .item {
  margin-top: 6px !important;
  color: var(--text-700) !important;
  line-height: 1.65 !important;
}

.obj_article_summary .doi,
.obj_article_summary .item.doi {
  margin-top: 8px !important;
}

.obj_article_summary .btn,
.obj_article_summary .pdf,
.obj_article_summary .obj_galley_link {
  margin-top: 14px !important;
}

/* =========================================================
   ARTICLE DOI / METADATA
   ========================================================= */

.page_article .item.doi {
  background: var(--blue-100) !important;
  border: 1px solid #cfe3f7 !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
  border-collapse: collapse;
}

table th {
  background: var(--blue-100) !important;
  color: var(--blue-900) !important;
  font-weight: 800 !important;
}

table th,
table td {
  border-color: var(--border) !important;
}

/* =========================================================
   SIDEBAR - MAIN
   ========================================================= */

.pkp_structure_sidebar {
  position: relative;
}

.pkp_structure_sidebar .pkp_block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
}

/* sidebar titles */
.pkp_structure_sidebar .title {
  display: block;
  background: var(--grad-strong) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.18);
}

/* sidebar lists reset */
.pkp_structure_sidebar ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_structure_sidebar li {
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
}

/* sidebar links: killer pill style */
.pkp_structure_sidebar .pkp_block ul li a,
.pkp_structure_sidebar .pkp_block .content li a,
.pkp_structure_sidebar .item_menu a,
.izzan-sidebar-menu li a {
  display: block !important;
  background: var(--grad-primary) !important;
  color: var(--white) !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  box-shadow: 0 6px 14px rgba(21, 101, 192, 0.18);
  transition: all 0.2s ease;
}

.pkp_structure_sidebar .pkp_block ul li a:hover,
.pkp_structure_sidebar .pkp_block ul li a:focus,
.pkp_structure_sidebar .pkp_block .content li a:hover,
.pkp_structure_sidebar .pkp_block .content li a:focus,
.pkp_structure_sidebar .item_menu a:hover,
.pkp_structure_sidebar .item_menu a:focus,
.izzan-sidebar-menu li a:hover,
.izzan-sidebar-menu li a:focus {
  background: var(--grad-strong) !important;
  color: var(--white) !important;
  transform: translateX(3px);
  box-shadow: 0 10px 20px rgba(13, 71, 161, 0.24);
}

/* sidebar icons */
.pkp_structure_sidebar .pkp_block ul li a em,
.pkp_structure_sidebar .pkp_block ul li a i,
.izzan-sidebar-menu li a em {
  margin-right: 7px;
  font-size: 12px;
}

/* sidebar image cards */
.pkp_structure_sidebar .content img,
.izzan-sidebar-card img {
  border-radius: 12px;
}

.izzan-sidebar-card,
.pkp_structure_sidebar .block_custom .content,
.pkp_structure_sidebar .block_web_feed .content {
  background: var(--grad-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   QUICK MENU / CUSTOM MENU
   ========================================================= */

.item_menu a {
  margin-bottom: 6px;
}

/* =========================================================
   JOURNAL PROFILE / ABOUT SECTION
   ========================================================= */

.izzan-journal-profile {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  border-radius: 18px;
}

.izzan-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--blue-900);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 2px solid #dce9f7;
  line-height: 1.3;
}

.izzan-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.izzan-cover {
  flex: 0 0 270px;
}

.izzan-cover img {
  display: block;
  width: 100%;
  max-width: 270px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.14);
}

.izzan-meta-box {
  flex: 1;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f9fe 100%);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.izzan-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 34px;
}

.izzan-meta-item {
  min-width: 0;
}

.izzan-label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--blue-900);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.izzan-value {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-900);
  word-break: break-word;
}

.izzan-value a {
  color: var(--blue-700) !important;
  font-weight: 600;
}

.izzan-value a:hover,
.izzan-value a:focus {
  color: var(--blue-900) !important;
  text-decoration: underline;
}

.izzan-desc {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-900);
}

.izzan-desc p {
  margin-bottom: 16px;
}

/* right-side custom boxes */
.izzan-side-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.izzan-side-title {
  margin-bottom: 12px;
  padding: 11px 16px;
  background: var(--grad-primary);
  color: var(--white);
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(21, 101, 192, 0.18);
}

.izzan-side-content {
  text-align: center;
}

.izzan-side-content img {
  max-width: 100%;
  height: auto;
}

.izzan-template-btn {
  display: block;
  padding: 16px 14px;
  background: var(--grad-primary);
  border: none;
  border-radius: 18px;
  color: var(--white) !important;
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.18);
}

.izzan-template-btn:hover,
.izzan-template-btn:focus {
  background: var(--grad-strong);
  color: var(--white) !important;
}

.izzan-menu-list a {
  display: block;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: var(--grad-primary);
  color: var(--white) !important;
  text-decoration: none;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(21, 101, 192, 0.16);
}

.izzan-menu-list a:hover,
.izzan-menu-list a:focus {
  background: var(--grad-strong);
  color: var(--white) !important;
  transform: translateX(3px);
}

/* =========================================================
   CUSTOM SIDEBAR SECTION STYLE
   ========================================================= */

.izzan-sidebar-section {
  margin-bottom: 16px;
}

.izzan-sidebar-title {
  background: var(--grad-strong);
  color: var(--white);
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  box-shadow: 0 10px 24px rgba(21, 101, 192, 0.18);
}

.izzan-sidebar-title em {
  margin-right: 8px;
}

.izzan-sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.izzan-sidebar-menu li {
  margin-bottom: 5px;
}

.izzan-sidebar-menu li a {
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.3 !important;
  border-radius: 999px !important;
}

.izzan-sidebar-card {
  padding: 10px;
}

.izzan-sidebar-card p {
  margin: 0 0 8px;
}

.izzan-sidebar-card p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   FORMS / INPUTS
   ========================================================= */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 4px rgba(30, 136, 229, 0.12) !important;
  outline: none !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.pkp_structure_footer_wrapper,
.izzan-footer-full {
  background: var(--grad-strong) !important;
  color: var(--white) !important;
  margin-top: 34px;
  box-shadow: 0 -8px 24px rgba(13, 71, 161, 0.12);
}

.pkp_structure_footer,
.pkp_structure_footer_wrapper a,
.pkp_structure_footer a {
  color: var(--white) !important;
}

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

@media (max-width: 991px) {
  .izzan-top {
    flex-direction: column;
  }

  .izzan-cover {
    flex: unset;
  }

  .izzan-meta-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .izzan-journal-profile {
    padding: 18px;
  }
}

@media (max-width: 768px) {
  .pkp_navigation_primary > li > a {
    font-size: 0.9rem !important;
    padding: 9px 12px !important;
  }

  .obj_article_summary,
  .obj_issue_summary,
  .current_issue .section {
    padding: 20px !important;
  }

  .izzan-title {
    font-size: 22px;
  }

  .izzan-desc,
  .izzan-value {
    font-size: 15px;
  }

  .pkp_structure_sidebar .title,
  .izzan-sidebar-title {
    font-size: 15px !important;
  }
}
/* =========================================================
   CLEAN UP GARIS IDENTITAS + HAPUS BIRU QUICK MENU
   ========================================================= */

/* 1) IDENTITAS JURNAL: kurangi garis yang terlalu ramai */
.izzan-journal-profile,
.izzan-journal-profile .row,
.izzan-journal-profile .col,
.izzan-journal-profile .container,
.izzan-journal-profile .panel,
.izzan-journal-profile .card {
  border: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* hanya sisakan 1 garis tipis pada judul */
.izzan-title {
  border-bottom: 1px solid #d9e6f2 !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}

/* hilangkan garis/border berlapis di area pembungkus konten identitas */
.izzan-journal-profile,
.izzan-top,
.izzan-desc {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* meta box tetap ada, tapi dibuat lebih clean */
.izzan-meta-box {
  border: 1px solid #dbe7f3 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

/* cover tanpa garis tambahan */
.izzan-cover,
.izzan-cover a,
.izzan-cover img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* kalau ada wrapper OJS lain yang ikut memberi garis */
.page_index_journal .page,
.page_index_journal main,
.page_index_journal .homepage_content,
.pkp_structure_content,
.pkp_block {
  box-shadow: none !important;
}

/* 2) HAPUS WARNA BIRU DI BAGIAN QUICK MENU YANG DITUNJUK */
.pkp_structure_sidebar .pkp_block ul,
.pkp_structure_sidebar .pkp_block .content ul,
.item_menu_list {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* hilangkan panel biru pembungkus menu */
.pkp_structure_sidebar .pkp_block .content,
.pkp_structure_sidebar .block_custom .content,
.pkp_structure_sidebar .block_web_feed .content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* menu jadi list clean dengan garis tipis */
.item_menu {
  background: transparent !important;
  border-bottom: 1px solid #dbe7f3 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.item_menu:last-child {
  border-bottom: none !important;
}

.item_menu a {
  display: block !important;
  background: transparent !important;
  color: #1565c0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}

.item_menu a:hover {
  background: transparent !important;
  color: #0d47a1 !important;
  text-decoration: none !important;
  padding-left: 4px !important;
  transform: none !important;
}

/* judul Quick Menu boleh tetap biru */
.pkp_structure_sidebar .title {
  box-shadow: none !important;
}
/* JUDUL SIDEBAR (Quick Menu / About Journal) */
.pkp_structure_sidebar .title {
  text-align: center !important;

  background: #0d47a1 !important;   /* lebih gelap dari menu */
  color: #ffffff !important;

  padding: 12px 16px !important;
  border-radius: 999px !important;

  font-weight: 800 !important;
  font-size: 16px;

  box-shadow: none !important;
}

/* ISI MENU DI BAWAHNYA (dibuat lebih ringan) */
.item_menu a {
  color: #1565c0 !important; /* lebih terang */
  font-weight: 600;
}
/* =========================================================
   FIX IDENTITAS - LEBIH LEBAR & FONT LEBIH PROPORSIONAL
   ========================================================= */

/* container utama identitas */
.izzan-journal-profile {
  padding: 16px 18px !important; /* sebelumnya terlalu besar */
}

/* bagian atas (cover + meta) */
.izzan-top {
  gap: 18px; /* sebelumnya 24px → diperkecil */
}

/* box informasi (kanan) */
.izzan-meta-box {
  padding: 18px 18px !important; /* lebih compact */
}

/* grid antar item */
.izzan-meta-grid {
  gap: 18px 22px; /* lebih rapat tapi tetap lega */
}

/* label (judul kecil seperti E-ISSN, Editor, dll) */
.izzan-label {
  font-size: 11.5px !important;
  margin-bottom: 6px;
}

/* isi value */
.izzan-value {
  font-size: 14px !important; /* sebelumnya 16px */
  line-height: 1.6;
}

/* judul utama */
.izzan-title {
  font-size: 24px !important; /* sebelumnya terlalu besar */
  margin-bottom: 16px;
}

/* deskripsi */
.izzan-desc {
  font-size: 15px !important;
  line-height: 1.8;
}

/* cover jangan terlalu makan tempat */
.izzan-cover {
  flex: 0 0 240px; /* sebelumnya 270px */
}

.izzan-cover img {
  max-width: 240px;
}