/* OJS COMBINED STYLESHEET
   Base: newly uploaded styleSheet.css
   Added layer: modern design rules from styleSheet_JSLR_combined_modern.css
   Final layer: navigation visibility and responsive fixes
*/


.pkp_structure_page {
  margin: 0 auto;
  max-width: 1160px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1200px) {
  .pkp_structure_page {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  padding-top: 0;
}

/* Struktur Sidebar */
.kepala {
  background-image: linear-gradient(to bottom right, #012060, #152954);
  color: #fff;
  padding: 1rem;
  border-bottom: 0.3rem solid #012060;
  font-weight: bold;

}


.badan {
  /* background-color: rgb(83, 248, 111); */
  margin-top: -12px;
}

.badan a {
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  background-color: #dddddd;
  color: #012060;
  border-bottom: rgb(255 255 255) 0.2rem solid;
  transition: 0.4s;
  /* margin: 0.5rem 0rem 0.5rem 0rem; */
  position: relative;
  z-index: 1;
}

.badan .fa {
  padding-right: 10px;
}

.badan a:hover {
  /* background-color: #fab062;*/
  background-color: #fab062;
  box-shadow: gray 0px 0px 1px 0px;
  color: #012060;
}

.badan a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2rem;
  background-color: #012060;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: 800ms;
}

.badan a:hover::after {
  transform: scaleX(1);
}

/* Table of content */

.obj_article_summary {
  box-shadow: 3px 3px 5px;
  padding: 20px;
  border-radius: 10px;
  background: #dddddd;
}

.obj_article_summary:hover {
  background: #fab062;
}

.obj_article_summary {
  padding-bottom: 15px !important;
  border-bottom: solid 4px #012060 !important;
  font-size: 12px;
  padding-top: 12px;
}

.pkp_structure_main h1 {
  font-weight: 600;
  font-size: 20px;
}

.pkp_structure_main a {
  color: #012060 !important;
}

.pkp_structure_main a:hover {
  color: #012060 !important;
}

.obj_galley_link {
  font-weight: 700;
  text-transform: Capitalize !important;
  background: #dddddd !important;
  color: #fab062 !important;
  border: solid 1px #012060 !important;
}

.obj_galley_link:hover {
  background: #fab062 !important;
  color: #012060 !important;
}

/* Footer */
.pkp_structure_footer_wrapper {
 background: #dddddd;
  border-bottom: 20px solid #012060;
  border-top: 4px solid #012060;
}

.pkp_footer_content {
  float: left;
  width: 70%;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*footer bawaan
.pkp_brand_footer {
  float: right;
  width: 20%;
  padding-bottom: 10px;
  padding-top: 50px;
}*/

.pkp_structure_footer .pkp_footer_content {background: #012060; padding: 10px !important;}
.pkp_structure_footer .pkp_footer_content p {margin: 0}
.pkp_structure_footer .pkp_brand_footer {background: #012060; height: auto !important; padding: 0;} /*warna background Footer */
.pkp_structure_footer .pkp_brand_footer img {width: 48px !important; height: auto;}

.pkp_structure_footer .pkp_footer_content img {width: 88px; height:31px;}
.pkp_structure_footer .pkp_footer_content div.logo img{width: 65px; height:65px;}
.pkp_structure_footer .pkp_footer_content div.logo2 img{width: 88px; height:31px;}


/*Body and Abstrack*/
.main_entry .item.abstract {
  text-align: justify;
}

body {
  font-family: Lora, geneva, sans-serif !important;
}

/* Struktur Header */
.pkp_site_name_wrapper {
  width: 100% !important;
}

.pkp_screen_reader {
  margin: 0px !important;
}

.pkp_navigation_primary_row {
  background-image: linear-gradient(to top right, #012060 ,#152954  );
  font-weight: bold;
  /* border-top: 1px solid #ededed; */
  padding-left: 30px;
  padding-right: 30px;
}

.pkp_site_name {
  margin: 0 !important;
  padding: 0px;
}

.pkp_site_name > a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pkp_site_name_wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Ukuran Header */

.pkp_site_name .is_img img {
  max-height: 100% !important;
  max-width: 100% !important;
}

.pkp_site_name a {
  margin: auto !important;
}

/* Settingan Header */

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  margin: 0 !important;
  padding: 0 15px !important;
  line-height: 40px !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  font-family: robot, geneva, sans-serif;
  color: #ffffff !important;
  font-weight: bold !important;
  transition: 0.2s;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
  background: #ffffff;
  color: #012060 !important;
  border-radius: 20px !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background-image: linear-gradient(to bottom right, #012060, #012060) !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
  border-bottom: solid 1px white !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child {
  border-bottom: none !important;
}

.pkp_site_name_wrapper {
  background: #ffffff;
  margi-bottom: 0px !important;
}

html,
body {
  background: url(https://jejakdosen.com/wp-content/uploads/2024/12/motif.jpg);
}

.pkp_site_nav_toggle {
  background: #012060 !important;
}

.pkp_navigation_search_wrapper {
  background: #012060;
  border-radius: 20px;
  transition: 0.5s;
}

.pkp_navigation_search_wrapper a {
  color: #ffffff;
}

.pkp_navigation_search_wrapper a:hover {
  color: #fab062;
}

.pkp_navigation_search_wrapper:hover {
  border-radius: 0px;
  background: #012060;
}

.homepage_about {
  text-align: justify;
}

.obj_article_details .page_title {
  background: #fab062;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px;
}

.meta .authors {
  background: url(https://jejakdosen.com/wp-content/uploads/2023/05/group.png) 1px 2px no-repeat rgba(0, 0, 0, 0);
  font-weight: bold;
  margin-top: 4px;
  padding-bottom: 5px;
  padding-left: 30px;
}

.description {
  text-align: justify;
}

.profile a {
  background: #012060;
  color: #fff !important;
}

.pkp_navigation_user_wrapper {
  padding-left: 0;
  padding-right: 30px;
  padding-top: 10px;
}

.pkp_navigation_user.pkp_nav_list .profile a {
  border-radius: 15px !important;
  padding-left: 10px;
  padding-right: 10px;
}

.dropdown-menu {
  background: #012060 !important;
}

.dropdown-menu li a:hover {
  color: #000 !important;
}

.obj_issue_toc .heading .cover img {
  box-shadow: 4px 2px 5px gray;
}

.homepage_image {
  display: inline-block;
  width: 28%;
  margin-left: 0px;
  float: right;
  margin-top: 0px !important;
}

.homepage_image img {
  margin: 60px 0px 0px -20px;
  width: 300px;
  display: inline-block;
  float: left;
  box-shadow: 4px 2px 5px gray;
  margin-right: 15px;
}

.homepage_about {
  display: inline-block;
  width: 70%;
  text-align: justify;
}

.pkp_structure_content.has_sidebar {
  padding-top: 0px;
}

.pkp_structure_main .page {
  padding-top: 20px;
}

@media (max-width: 600px) {
  /* For mobile phones: */
  .homepage_about {
    width: 100%;
  }

  .pkp_structure_main {
    padding-top: 20px !important;
  }
}

@media (max-width: 991px) {
  .homepage_about {
    margin-top: 30px;
  }

  .pkp_structure_main {
    margin-top: 0px !important;
  }

  .pkp_site_name_wrapper {
    padding-bottom: 0px;
  }

  .pkp_site_name_wrapper {
    padding-top: 0;
  }

  .pkp_navigation_search_wrapper {
    margin: center !important;
    padding: 10px !important;
  }

  .pkp_structure_main {
    padding-top: 100px;
  }
}

@media (max-width: 360px) {
  /* For mobile phones: */
  .homepage_image {
    width: 90%;
    margin: 0;
  }

  .homepage_about {
    margin-top: 0px;
  }

  .pkp_structure_main {
    padding-top: 0px !important;
  }
}

.deskripsi {
  border: 2px #012060 solid;
  padding: 10px;
  background-color: #dddddd;
  text-align: left;
}

.pkp_block.block_custom {
  padding-left: 15px;
  padding-right: 15px;
}

.cmp_announcements.highlight_first {
  background-color: #dddddd;
}

.pkp_structure_footer {
    clear: both !important;
    display: block !important;
    background-color: #012060; /* Sesuaikan dengan kode warna hijau Anda */
    width: 100%;
}

/* Menghilangkan sisa sidebar yang bocor */
.pkp_structure_sidebar.left, .pkp_structure_sidebar.right {
    background: none !important;
}

/* Container Utama */
.jasbap-header-blocks {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Gaya Kartu */
.jasbap-card {
    flex: 1;
    min-width: 300px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* Menambahkan aksen lengkung biru di bawah seperti di gambar */
.jasbap-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 40px;
    background: linear-gradient(to top left, #3498db, transparent);
    opacity: 0.2;
    border-radius: 100% 0 0 0;
}

.jasbap-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.jasbap-icon h3 {
    margin: 0;
    color: #003366; /* Warna biru gelap */
    font-size: 1.25rem;
}

.jasbap-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Gaya Tombol */
.jasbap-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    transition: 0.3s;
}

.jasbap-btn.btn-orange {
    background-color: #f39c12;
    color: white;
    border: none;
}

.jasbap-btn:hover {
    background-color: #eee;
    color: #000;
}

.jasbap-btn.btn-orange:hover {
    background-color: #e67e22;
}


/* =========================================================
   PROFESSIONAL CONTRASTING COLOR FLOW FOR ALL TEXT
   Hanya warna teks yang berubah. Background, shadow, border,
   layout, gambar dan permukaan 5D tetap menggunakan CSS asal.
   ========================================================= */

@keyframes proTextColorFlow {
  0%   { color: #d00036; }
  12%  { color: #b93800; }
  24%  { color: #785000; }
  36%  { color: #087a42; }
  48%  { color: #006b91; }
  60%  { color: #4530b5; }
  72%  { color: #8c168c; }
  84%  { color: #a51d62; }
  100% { color: #d00036; }
}

/* Teks utama, isi artikel, judul, menu, tautan, metadata dan footer */
.pkp_structure_page :is(
  h1, h2, h3, h4, h5, h6,
  p, a, span, li, label, button,
  strong, em, small, blockquote,
  time, dt, dd, th, td, legend,
  .page_title, .authors, .title, .subtitle,
  .item, .value, .name, .description,
  .homepage_about, .deskripsi,
  .pkp_footer_content, .jasbap-card,
  .obj_article_summary, .obj_galley_link
),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
.badan a,
.pkp_structure_main a,
.profile a,
.dropdown-menu li a,
.pkp_navigation_search_wrapper a {
  animation: proTextColorFlow 8s linear infinite !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none;
}

/* Fase berbeda untuk elemen berurutan agar warna tampak mengalir,
   bukan berganti serentak pada seluruh halaman. */
.pkp_structure_page p:nth-of-type(4n + 1),
.pkp_structure_page li:nth-child(4n + 1),
.pkp_structure_page a:nth-child(4n + 1),
.pkp_structure_page span:nth-child(4n + 1),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(4n + 1) > a,
.badan a:nth-child(4n + 1) {
  animation-delay: 0s !important;
}

.pkp_structure_page p:nth-of-type(4n + 2),
.pkp_structure_page li:nth-child(4n + 2),
.pkp_structure_page a:nth-child(4n + 2),
.pkp_structure_page span:nth-child(4n + 2),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(4n + 2) > a,
.badan a:nth-child(4n + 2) {
  animation-delay: -2s !important;
}

.pkp_structure_page p:nth-of-type(4n + 3),
.pkp_structure_page li:nth-child(4n + 3),
.pkp_structure_page a:nth-child(4n + 3),
.pkp_structure_page span:nth-child(4n + 3),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(4n + 3) > a,
.badan a:nth-child(4n + 3) {
  animation-delay: -4s !important;
}

.pkp_structure_page p:nth-of-type(4n),
.pkp_structure_page li:nth-child(4n),
.pkp_structure_page a:nth-child(4n),
.pkp_structure_page span:nth-child(4n),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(4n) > a,
.badan a:nth-child(4n) {
  animation-delay: -6s !important;
}

/* Teks di atas background pastel menu dibuat lebih gelap dan terbaca.
   Background menu sendiri tidak disentuh oleh aturan ini. */
.badan a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
.dropdown-menu li a {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Pertahankan isi field/form agar tetap mudah dibaca dan dapat diedit */
input,
textarea,
select,
option {
  animation: none !important;
  -webkit-text-fill-color: initial !important;
}

input::placeholder,
textarea::placeholder {
  animation: proTextColorFlow 8s linear infinite !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Jangan mengubah logo, ikon berbasis font, atau konten visual */
img,
svg,
video,
canvas,
iframe {
  animation: none !important;
}

/* Preferensi aksesibilitas */
@media (prefers-reduced-motion: reduce) {
  .pkp_structure_page :is(
    h1, h2, h3, h4, h5, h6,
    p, a, span, li, label, button,
    strong, em, small, blockquote,
    time, dt, dd, th, td, legend,
    .page_title, .authors, .title, .subtitle,
    .item, .value, .name, .description,
    .homepage_about, .deskripsi,
    .pkp_footer_content, .jasbap-card,
    .obj_article_summary, .obj_galley_link
  ),
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
  .badan a,
  .pkp_structure_main a,
  .profile a,
  .dropdown-menu li a,
  .pkp_navigation_search_wrapper a {
    animation: none !important;
  }
}


/* =========================================================
   SOFT 5D ANIMATED MENU BACKGROUNDS
   Menu background colors move continuously, while text remains
   dark and readable. Other page backgrounds are not modified.
   ========================================================= */

@keyframes menuPastel5D {
  0% {
    background-color: #e6f2ff;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
  20% {
    background-color: #e5f5ed;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
  40% {
    background-color: #fff1df;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
  60% {
    background-color: #f7e8f4;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
  80% {
    background-color: #eeeaff;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
  100% {
    background-color: #e6f2ff;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(32,65,95,.05) inset,
                0 3px 0 rgba(32,65,95,.06),
                0 6px 12px rgba(32,65,95,.08);
  }
}

/* Menu sidebar */
.badan a {
  color: #17324d !important;
  background-color: #e6f2ff !important;
  background-image: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(23,50,77,.08);
  animation: menuPastel5D 14s ease-in-out infinite !important;
  animation-delay: 0s;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 3px 0 rgba(23,50,77,.05),
              0 5px 10px rgba(23,50,77,.06);
}

/* Beri setiap menu sidebar fase warna berbeda */
.badan a:nth-child(5n + 1) { animation-delay: 0s !important; }
.badan a:nth-child(5n + 2) { animation-delay: -2.8s !important; }
.badan a:nth-child(5n + 3) { animation-delay: -5.6s !important; }
.badan a:nth-child(5n + 4) { animation-delay: -8.4s !important; }
.badan a:nth-child(5n)     { animation-delay: -11.2s !important; }

/* Navigasi utama: warna pastel lembut dan teks navy */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
  color: #17324d !important;
  background-color: #e6f2ff !important;
  background-image: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 7px !important;
  animation: menuPastel5D 16s ease-in-out infinite !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset,
              0 3px 0 rgba(23,50,77,.07),
              0 5px 12px rgba(23,50,77,.08);
}

/* Setiap item navigasi berubah dengan waktu berbeda */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 1) > a {
  animation-delay: 0s !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 2) > a {
  animation-delay: -3.2s !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 3) > a {
  animation-delay: -6.4s !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 4) > a {
  animation-delay: -9.6s !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n) > a {
  animation-delay: -12.8s !important;
}

/* Dropdown/submenu juga menggunakan latar pastel 5D */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul,
.dropdown-menu {
  background: #e6f2ff !important;
  border: 1px solid rgba(23,50,77,.10);
  border-radius: 8px !important;
  box-shadow: 0 8px 22px rgba(23,50,77,.16);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
.dropdown-menu li a {
  color: #17324d !important;
  background-color: #e6f2ff !important;
  background-image: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  animation: menuPastel5D 14s ease-in-out infinite !important;
  border-bottom: 1px solid rgba(23,50,77,.08);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 1) a,
.dropdown-menu li:nth-child(5n + 1) a { animation-delay: 0s !important; }
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 2) a,
.dropdown-menu li:nth-child(5n + 2) a { animation-delay: -2.8s !important; }
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 3) a,
.dropdown-menu li:nth-child(5n + 3) a { animation-delay: -5.6s !important; }
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 4) a,
.dropdown-menu li:nth-child(5n + 4) a { animation-delay: -8.4s !important; }
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n) a,
.dropdown-menu li:nth-child(5n) a { animation-delay: -11.2s !important; }

/* Hover: hentikan animasi sebentar, pertegas elevasi dan kontras */
.badan a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
.dropdown-menu li a:hover {
  animation-play-state: paused !important;
  color: #102a43 !important;
  background-color: #d6e9f8 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
              0 2px 0 rgba(23,50,77,.08),
              0 8px 16px rgba(23,50,77,.14);
  transform: translateY(-1px);
}

/* Reduce motion preference: keep a static soft surface */
@media (prefers-reduced-motion: reduce) {
  .badan a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
  .dropdown-menu li a {
    animation: none !important;
    background-color: #e6f2ff !important;
    transform: none !important;
  }
}


/* =========================================================
   CONTINUOUS MOVING PASTEL MENU BACKGROUND — HIGH CONTRAST
   Latar menu bergeser halus terus-menerus; teks tetap navy gelap.
   ========================================================= */

@keyframes menuBackgroundFlowContinuous {
  0% {
    background-position: 0% 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(20,45,70,.05) inset,
                0 3px 0 rgba(20,45,70,.07),
                0 7px 14px rgba(20,45,70,.09);
  }
  50% {
    background-position: 100% 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,.98) inset,
                0 -1px 0 rgba(20,45,70,.04) inset,
                0 4px 0 rgba(20,45,70,.08),
                0 9px 18px rgba(20,45,70,.11);
  }
  100% {
    background-position: 0% 50%;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
                0 -1px 0 rgba(20,45,70,.05) inset,
                0 3px 0 rgba(20,45,70,.07),
                0 7px 14px rgba(20,45,70,.09);
  }
}

/* Gradasi pastel bergerak memberi kesan warna terus berjalan.
   Warna teks dikunci pada navy gelap agar kontras tetap tinggi. */
.badan a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
.dropdown-menu li a {
  color: #142b45 !important;
  -webkit-text-fill-color: #142b45 !important;
  background-color: #e8f1fb !important;
  background-image: linear-gradient(
    110deg,
    #e4efff 0%,
    #e2f5ed 20%,
    #fff0dc 40%,
    #f8e8f4 60%,
    #e9e6ff 80%,
    #e4efff 100%
  ) !important;
  background-size: 300% 300% !important;
  background-repeat: no-repeat !important;
  animation: menuBackgroundFlowContinuous 12s ease-in-out infinite !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(20,43,69,.09);
  transition: transform .25s ease, box-shadow .25s ease !important;
}

/* Setiap item memulai gradasi pada posisi berbeda agar terlihat mengalir */
.badan a:nth-child(5n + 1),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 1) > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 1) a,
.dropdown-menu li:nth-child(5n + 1) a { animation-delay: 0s !important; }

.badan a:nth-child(5n + 2),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 2) > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 2) a,
.dropdown-menu li:nth-child(5n + 2) a { animation-delay: -2.4s !important; }

.badan a:nth-child(5n + 3),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 3) > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 3) a,
.dropdown-menu li:nth-child(5n + 3) a { animation-delay: -4.8s !important; }

.badan a:nth-child(5n + 4),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n + 4) > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n + 4) a,
.dropdown-menu li:nth-child(5n + 4) a { animation-delay: -7.2s !important; }

.badan a:nth-child(5n),
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li:nth-child(5n) > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:nth-child(5n) a,
.dropdown-menu li:nth-child(5n) a { animation-delay: -9.6s !important; }

/* Hover tetap kontras, dengan efek terangkat 5D */
.badan a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
.dropdown-menu li a:hover {
  color: #10243a !important;
  -webkit-text-fill-color: #10243a !important;
  background-image: linear-gradient(110deg, #dceaff, #d8f0e5, #ffe8cb, #f1dff0) !important;
  background-size: 300% 300% !important;
  animation-play-state: running !important;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,.98) inset,
              0 3px 0 rgba(20,43,69,.09),
              0 10px 18px rgba(20,43,69,.16) !important;
}

/* Hormati pengaturan aksesibilitas pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .badan a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
  .dropdown-menu li a {
    animation: none !important;
    background-position: 50% 50% !important;
    background-size: 100% 100% !important;
  }
}



/* ==========================================================
   OJS MODERN 5D DESIGN SYSTEM — FINAL OVERRIDE LAYER
   Tempelkan di akhir stylesheet agar aturan ini diprioritaskan.
   ========================================================== */

:root {
  --ojs-ink: #172b4d;
  --ojs-navy: #102b58;
  --ojs-blue: #1769aa;
  --ojs-teal: #11a8a0;
  --ojs-gold: #f3b544;
  --ojs-surface: #ffffff;
  --ojs-radius: 14px;
  --ojs-shadow-soft: 0 8px 24px rgba(17, 39, 73, .10);
  --ojs-shadow-3d: 0 2px 0 rgba(255,255,255,.9) inset,
                   0 4px 0 rgba(16,43,88,.08),
                   0 10px 22px rgba(16,43,88,.13);
}

/* Font modern dan keterbacaan yang konsisten */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--ojs-ink);
  line-height: 1.7;
  background-color: #eef3fa;
}
.pkp_structure_page {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 55px rgba(16,43,88,.16);
}

/* Lima fase warna yang bergerak terus menerus */
@keyframes ojs5DGradient {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}
@keyframes ojs5DGlow {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.18); }
}
@keyframes ojs5DText {
  0%, 100% { text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(16,43,88,.16), 0 5px 12px rgba(16,43,88,.12); }
  50% { text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(16,43,88,.20), 0 7px 16px rgba(16,43,88,.18); }
}
@keyframes ojsAccentText {
  0% { color: #124a8a; }
  25% { color: #087f8c; }
  50% { color: #6841a5; }
  75% { color: #9a4b08; }
  100% { color: #124a8a; }
}

/* Header / masthead */
.pkp_site_name_wrapper {
  position: relative;
  isolation: isolate;
  background: linear-gradient(125deg,#ffffff,#eaf4ff,#e8fff8,#fff4df,#f2eaff) !important;
  background-size: 300% 300% !important;
  animation: ojs5DGradient 20s ease infinite;
  box-shadow: 0 5px 20px rgba(16,43,88,.10);
}
.pkp_site_name_wrapper::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg,#1769aa,#11a8a0,#f3b544,#8c62d9,#1769aa);
  background-size: 250% 100%;
  animation: ojs5DGradient 9s linear infinite;
}
.pkp_site_name .is_img img {
  filter: drop-shadow(0 5px 7px rgba(16,43,88,.14));
}

/* Navigasi utama: latar gradasi 5D dan teks navy berkontras */
.pkp_navigation_primary_row {
  background: linear-gradient(110deg,#102b58,#1769aa,#087f8c,#5b459b,#102b58) !important;
  background-size: 350% 350% !important;
  animation: ojs5DGradient 18s ease infinite;
  padding: 8px 20px !important;
  box-shadow: 0 7px 18px rgba(16,43,88,.20);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
  display: block;
  margin: 3px 4px !important;
  padding: 0 14px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 9px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 3px 0 rgba(0,0,0,.10);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  animation: none !important;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:focus {
  color: #102b58 !important;
  -webkit-text-fill-color: #102b58 !important;
  background: linear-gradient(120deg,#ffffff,#e4f5ff,#e2fff3,#fff0d7,#f0e8ff) !important;
  background-size: 250% 250% !important;
  animation: ojs5DGradient 7s ease infinite !important;
  transform: translateY(-2px);
  box-shadow: 0 1px 0 #fff inset, 0 4px 0 rgba(0,0,0,.08), 0 9px 16px rgba(0,0,0,.16);
}

/* Menu dropdown */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul,
.dropdown-menu {
  background: linear-gradient(135deg,#fff,#edf6ff,#eafff6,#fff5e5,#f5edff) !important;
  background-size: 300% 300% !important;
  animation: ojs5DGradient 22s ease infinite;
  border: 1px solid rgba(16,43,88,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(16,43,88,.20) !important;
  overflow: hidden;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
.dropdown-menu li a {
  color: #172b4d !important;
  -webkit-text-fill-color: #172b4d !important;
  background: transparent !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  animation: none !important;
  border-bottom: 1px solid rgba(16,43,88,.08);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
.dropdown-menu li a:hover {
  color: #0b5e83 !important;
  -webkit-text-fill-color: #0b5e83 !important;
  background: rgba(255,255,255,.78) !important;
}

/* Sidebar menu: pastel 5D bergerak dengan teks tetap jelas */
.badan a {
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
  background: linear-gradient(115deg,#e4efff,#e2f5ed,#fff0dc,#f8e8f4,#e9e6ff) !important;
  background-size: 350% 350% !important;
  animation: ojs5DGradient 16s ease infinite !important;
  border: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(23,50,77,.10);
  border-radius: 8px;
  margin: 4px 0;
  box-shadow: var(--ojs-shadow-3d);
  text-shadow: 0 1px 0 rgba(255,255,255,.85) !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.badan a:nth-child(5n + 2) { animation-delay: -3.2s !important; }
.badan a:nth-child(5n + 3) { animation-delay: -6.4s !important; }
.badan a:nth-child(5n + 4) { animation-delay: -9.6s !important; }
.badan a:nth-child(5n)     { animation-delay: -12.8s !important; }
.badan a:hover {
  color: #102b58 !important;
  -webkit-text-fill-color: #102b58 !important;
  transform: translateY(-2px) translateX(2px);
  box-shadow: 0 1px 0 #fff inset, 0 4px 0 rgba(16,43,88,.08), 0 12px 20px rgba(16,43,88,.16);
}

/* Kartu artikel dan daftar terbitan */
.obj_article_summary,
.obj_issue_summary,
.obj_issue_toc .heading .cover img {
  border-radius: var(--ojs-radius);
  box-shadow: var(--ojs-shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.obj_article_summary {
  background: linear-gradient(145deg,#fff,#f7faff) !important;
  border: 1px solid #e4ebf5;
  border-bottom: 4px solid #1769aa !important;
  padding: 22px !important;
  font-size: 14px;
}
.obj_article_summary:hover {
  background: linear-gradient(120deg,#fff,#edf7ff,#effff8) !important;
  transform: translateY(-3px);
  box-shadow: 0 3px 0 rgba(23,105,170,.08), 0 14px 30px rgba(16,43,88,.13);
}
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.obj_article_details .page_title {
  color: #123b70;
  font-weight: 750;
  letter-spacing: -.025em;
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(16,43,88,.10), 0 5px 14px rgba(16,43,88,.10);
}
.pkp_structure_main h1 { font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.25; }
.pkp_structure_main h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.obj_article_details .page_title {
  background: linear-gradient(120deg,#e4efff,#e2f5ed,#fff0dc,#f8e8f4,#e9e6ff) !important;
  background-size: 300% 300% !important;
  animation: ojs5DGradient 20s ease infinite;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  box-shadow: var(--ojs-shadow-3d);
  padding: 18px;
}

/* Teks isi: hentikan animasi warna global agar paragraf akademik stabil */
.pkp_structure_page p,
.pkp_structure_page li,
.pkp_structure_page td,
.pkp_structure_page th,
.pkp_structure_page .abstract,
.pkp_structure_page .description,
.pkp_structure_page .homepage_about,
.pkp_structure_page .item,
.pkp_structure_page .value,
.pkp_structure_page .name,
.pkp_footer_content,
.pkp_structure_footer p {
  color: #26364b !important;
  -webkit-text-fill-color: #26364b !important;
  animation: none !important;
  line-height: 1.75;
}
.pkp_structure_main a,
.pkp_structure_main a:visited {
  color: #145da0 !important;
  -webkit-text-fill-color: #145da0 !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease;
  animation: none !important;
}
.pkp_structure_main a:hover {
  color: #087f8c !important;
  -webkit-text-fill-color: #087f8c !important;
}
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
  animation: ojs5DText 5s ease-in-out infinite;
}

/* Tombol PDF / galley */
.obj_galley_link,
a.obj_galley_link {
  display: inline-block;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(120deg,#102b58,#1769aa,#087f8c,#5b459b) !important;
  background-size: 300% 300% !important;
  animation: ojs5DGradient 12s ease infinite !important;
  border: 0 !important;
  border-radius: 9px !important;
  padding: 8px 14px !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.22) inset, 0 4px 0 rgba(16,43,88,.12), 0 8px 15px rgba(16,43,88,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.obj_galley_link:hover,
a.obj_galley_link:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(255,255,255,.25) inset, 0 5px 0 rgba(16,43,88,.10), 0 12px 20px rgba(16,43,88,.2);
}

/* Search, profil, form controls */
.pkp_navigation_search_wrapper,
.profile a,
.pkp_site_nav_toggle {
  border-radius: 9px !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.15) inset, 0 4px 10px rgba(16,43,88,.14);
}
input, textarea, select, button {
  font: inherit;
}
input, textarea, select {
  max-width: 100%;
  border: 1px solid #cbd7e6 !important;
  border-radius: 8px !important;
  background-color: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: 3px solid rgba(23,105,170,.18);
  border-color: #1769aa !important;
}

/* Footer 5D */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  color: #fff;
  background: linear-gradient(115deg,#102b58,#1769aa,#087f8c,#5b459b,#102b58) !important;
  background-size: 350% 350% !important;
  animation: ojs5DGradient 24s ease infinite;
  border-top: 4px solid #f3b544 !important;
  border-bottom: 8px solid #0b1f40 !important;
}
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer {
  background: transparent !important;
}
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_brand_footer a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pkp_structure_footer .pkp_footer_content a:hover {
  color: #ffe3a3 !important;
  -webkit-text-fill-color: #ffe3a3 !important;
}

/* Layout beranda dan perangkat kecil */
.homepage_about { line-height: 1.8; }
.homepage_image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(16,43,88,.16);
}
@media (max-width: 768px) {
  .pkp_structure_page { margin: 0; border-radius: 0; }
  .pkp_navigation_primary_row { padding: 6px 10px !important; }
  .pkp_site_name_wrapper { padding-left: 10px !important; padding-right: 10px !important; }
  .homepage_about, .homepage_image {
    display: block;
    float: none;
    width: 100% !important;
    margin: 12px 0 !important;
  }
  .homepage_image img { margin: 10px auto !important; display: block; }
  .obj_article_summary { padding: 16px !important; }
  .pkp_structure_main { padding: 18px 14px !important; }
  .pkp_footer_content { float: none; width: 100%; }
}
@media (max-width: 420px) {
  .pkp_structure_main h1 { font-size: 1.45rem; }
  .obj_galley_link { max-width: 100%; white-space: normal; }
}

/* Aksesibilitas: nonaktifkan gerakan bila diminta oleh sistem pengguna */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}



/* ==========================================================
   OJS 7D COLOR MOTION — FULL PAGE BACKGROUND + LAYERED DEPTH
   Seven color stops flow continuously across the site.
   Academic text surfaces remain light for readability.
   ========================================================== */

:root {
  --ojs7-ink: #152642;
  --ojs7-blue: #1769aa;
  --ojs7-teal: #00a896;
  --ojs7-violet: #7857c5;
  --ojs7-pink: #d94f9d;
  --ojs7-orange: #f28c28;
  --ojs7-lime: #84b82f;
  --ojs7-cyan: #20a8c7;
}

@keyframes ojs7ColorJourney {
  0%   { background-position: 0% 50%; }
  14%  { background-position: 16% 0%; }
  28%  { background-position: 35% 100%; }
  42%  { background-position: 52% 0%; }
  57%  { background-position: 70% 100%; }
  71%  { background-position: 84% 0%; }
  85%  { background-position: 100% 55%; }
  100% { background-position: 0% 50%; }
}

@keyframes ojs7AmbientGlow {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.18) brightness(1.025); }
}

@keyframes ojs7BorderFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Overall browser canvas: colorful seven-stop animated gradient */
html {
  min-height: 100%;
  background: #1769aa !important;
}

body {
  min-height: 100vh;
  background-color: #1769aa !important;
  background-image: linear-gradient(
    125deg,
    #1769aa 0%,
    #00a896 14%,
    #84b82f 28%,
    #f28c28 42%,
    #d94f9d 57%,
    #7857c5 71%,
    #20a8c7 85%,
    #1769aa 100%
  ) !important;
  background-size: 400% 400% !important;
  background-attachment: fixed !important;
  animation: ojs7ColorJourney 32s ease-in-out infinite,
             ojs7AmbientGlow 12s ease-in-out infinite !important;
}

/* Main journal sheet: a calm, readable paper surface above the color field */
.pkp_structure_page {
  position: relative;
  z-index: 0;
  background: rgba(255, 255, 255, .97) !important;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow:
    0 2px 0 rgba(255,255,255,.85) inset,
    0 8px 0 rgba(14,38,75,.06),
    0 20px 60px rgba(14,38,75,.22) !important;
}

/* Header / journal identity: seven-color moving background */
.pkp_site_name_wrapper {
  background-image: linear-gradient(
    115deg,
    #e7f2ff 0%,
    #dcfff5 14%,
    #efffdc 28%,
    #fff0d9 42%,
    #ffe3f2 57%,
    #eee6ff 71%,
    #dff9ff 85%,
    #e7f2ff 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojs7ColorJourney 24s ease-in-out infinite !important;
}

/* Primary navigation: rich moving color, bright readable labels */
.pkp_navigation_primary_row,
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background-image: linear-gradient(
    115deg,
    #102b58 0%,
    #1769aa 14%,
    #008f87 28%,
    #638d20 42%,
    #c86b16 57%,
    #a83278 71%,
    #6244ad 85%,
    #102b58 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojs7ColorJourney 28s ease-in-out infinite !important;
}

/* Seven-dimensional highlight strip under the masthead */
.pkp_site_name_wrapper::after {
  background-image: linear-gradient(
    90deg,
    #1769aa, #00a896, #84b82f, #f28c28,
    #d94f9d, #7857c5, #20a8c7, #1769aa
  ) !important;
  background-size: 300% 100% !important;
  animation: ojs7BorderFlow 9s linear infinite !important;
}

/* Sidebar links: seven-color pastel flow and layered 3D depth */
.badan a {
  background-image: linear-gradient(
    115deg,
    #e4efff 0%,
    #ddfff4 14%,
    #efffdc 28%,
    #fff0dc 42%,
    #ffe5f2 57%,
    #eee6ff 71%,
    #defaff 85%,
    #e4efff 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojs7ColorJourney 22s ease-in-out infinite !important;
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 -1px 0 rgba(23,50,77,.035) inset,
    0 3px 0 rgba(23,50,77,.07),
    0 8px 16px rgba(23,50,77,.10) !important;
}

/* Main navigation buttons retain white labels against the deep gradient */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background-color: rgba(255,255,255,.09) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 3px 0 rgba(0,0,0,.12),
    0 7px 15px rgba(0,0,0,.12) !important;
}

/* Article cards: subtle animated pastel surface, not distracting text */
.obj_article_summary {
  background-image: linear-gradient(
    125deg,
    #ffffff 0%,
    #f1f7ff 14%,
    #edfff8 28%,
    #f7ffeb 42%,
    #fff5e8 57%,
    #fff0f8 71%,
    #f2efff 85%,
    #ffffff 100%
  ) !important;
  background-size: 350% 350% !important;
  animation: ojs7ColorJourney 34s ease-in-out infinite !important;
  border-top: 1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 0 rgba(23,50,77,.045),
    0 10px 24px rgba(23,50,77,.09) !important;
}

/* Article title plaque: seven pastel shades with embossed typography */
.obj_article_details .page_title {
  background-image: linear-gradient(
    115deg,
    #e4efff 0%,
    #ddfff4 14%,
    #efffdc 28%,
    #fff0dc 42%,
    #ffe5f2 57%,
    #eee6ff 71%,
    #defaff 85%,
    #e4efff 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojs7ColorJourney 26s ease-in-out infinite !important;
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 2px 0 rgba(23,50,77,.10),
    0 5px 12px rgba(23,50,77,.12) !important;
}

/* Animated seven-color edge on custom cards */
.jasbap-card {
  border-top: 3px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg,
      #1769aa, #00a896, #84b82f, #f28c28,
      #d94f9d, #7857c5, #20a8c7, #1769aa
    ) border-box !important;
  background-size: auto, 300% 100% !important;
  animation: ojs7BorderFlow 14s linear infinite !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 0 rgba(23,50,77,.05),
    0 12px 28px rgba(23,50,77,.10) !important;
}

/* Galley/PDF buttons: colorful flowing gradient with stable white text */
.obj_galley_link,
a.obj_galley_link {
  background-image: linear-gradient(
    110deg,
    #102b58 0%,
    #1769aa 14%,
    #008f87 28%,
    #638d20 42%,
    #c86b16 57%,
    #a83278 71%,
    #6244ad 85%,
    #102b58 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojs7ColorJourney 18s ease-in-out infinite !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Footer text stays white on the moving dark seven-color background */
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer {
  background: transparent !important;
}
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_brand_footer a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Keep article content, abstract, metadata and form values readable */
.pkp_structure_page .abstract,
.pkp_structure_page .description,
.pkp_structure_page .homepage_about,
.pkp_structure_page .item,
.pkp_structure_page .value,
.pkp_structure_page .name,
.pkp_structure_page p,
.pkp_structure_page li,
.pkp_structure_page td,
.pkp_structure_page th {
  color: #26364b;
}

/* Keyboard focus is clearly visible */
.pkp_structure_page a:focus-visible,
.pkp_structure_page button:focus-visible,
.pkp_structure_page input:focus-visible,
.pkp_structure_page select:focus-visible,
.pkp_structure_page textarea:focus-visible {
  outline: 3px solid #f28c28 !important;
  outline-offset: 3px !important;
}

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html, body,
  .pkp_site_name_wrapper,
  .pkp_navigation_primary_row,
  .pkp_structure_footer_wrapper,
  .pkp_structure_footer,
  .pkp_site_name_wrapper::after,
  .badan a,
  .obj_article_summary,
  .obj_article_details .page_title,
  .jasbap-card,
  .obj_galley_link,
  a.obj_galley_link {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}


/* ==========================================================
   OJS SOFT 7D COLORFLOW + JOURNAL BANNER WATERMARK
   Tempelkan di akhir stylesheet. Ganti URL watermark setelah
   banner diunggah ke server OJS (URL publik gambar banner).
   ========================================================== */
:root {
  --jtl-ink: #24344b;
  --jtl-navy: #163b68;
  --jtl-soft-shadow: 0 8px 24px rgba(39, 69, 105, .10);
}

@keyframes jtlSoftSevenFlow {
  0%   { background-position: 0% 50%; }
  16%  { background-position: 25% 0%; }
  33%  { background-position: 75% 25%; }
  50%  { background-position: 100% 50%; }
  66%  { background-position: 75% 100%; }
  83%  { background-position: 25% 75%; }
  100% { background-position: 0% 50%; }
}
@keyframes jtlWatermarkDrift {
  0%, 100% { background-position: center 48%; }
  50% { background-position: center 52%; }
}

/* Latar halaman: tujuh warna pastel, lembut dan bergerak perlahan */
html, body {
  background-color: #f5f8fc !important;
  background-image: linear-gradient(125deg,
    #edf5ff 0%, #eaf8f5 16%, #f4f7e9 32%, #fff5e9 48%,
    #f9edf5 64%, #f0edff 80%, #e8f5fb 100%) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 42s ease-in-out infinite !important;
  color: var(--jtl-ink);
}

/* Panel utama tetap putih-transparan agar artikel nyaman dibaca */
.pkp_structure_page {
  position: relative;
  isolation: isolate;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 18px 55px rgba(39,69,105,.12) !important;
}

/* Watermark banner jurnal pada area konten, bukan menutupi teks.
   GANTI URL-BANNER-JURNAL-ANDA dengan URL gambar yang sudah diunggah. */
.pkp_structure_page::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 180px;
  right: 2%;
  width: min(62%, 760px);
  height: 340px;
  background-image: url("URL-BANNER-JURNAL-ANDA");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .075;
  filter: saturate(.72);
  animation: jtlWatermarkDrift 30s ease-in-out infinite;
}

/* Header: gradasi pastel tujuh warna yang sangat lembut */
.pkp_site_name_wrapper {
  position: relative;
  background: linear-gradient(120deg,
    #e8f2ff, #e5f6f1, #f2f7e8, #fff1df, #f8eaf4, #eeebff, #e5f4fb) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 32s ease-in-out infinite !important;
  box-shadow: 0 5px 20px rgba(39,69,105,.08);
}
.pkp_site_name_wrapper::after {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    #8eb9e8, #8ed8ca, #c5d99b, #f1cb8d, #e5a9cb, #b8aceb, #8eb9e8);
  background-size: 300% 100%;
  animation: jtlSoftSevenFlow 18s linear infinite;
}

/* Navigasi: biru profesional dengan aksen warna lembut */
.pkp_navigation_primary_row {
  background: linear-gradient(115deg,
    #244b79, #387da0, #4b9b91, #718e72, #b58a63, #9276a8, #244b79) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 34s ease-in-out infinite !important;
  box-shadow: 0 7px 18px rgba(39,69,105,.14);
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 8px !important;
  text-shadow: 0 1px 2px rgba(18,39,64,.20);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a:focus {
  color: #183b60 !important;
  -webkit-text-fill-color: #183b60 !important;
  background: linear-gradient(120deg,#fff,#eaf6ff,#e7f8f1,#fff3e5,#f4edff) !important;
  background-size: 300% 300% !important;
  animation: jtlSoftSevenFlow 12s ease-in-out infinite !important;
  transform: translateY(-1px);
}

/* Sidebar dan dropdown: warna bergerak lebih pelan, teks tetap gelap */
.badan a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
.dropdown-menu li a {
  color: #263f5a !important;
  -webkit-text-fill-color: #263f5a !important;
  background: linear-gradient(120deg,
    #eaf3ff, #e8f7f2, #f2f7e9, #fff3e5, #f9edf5, #f0edff, #eaf3ff) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 38s ease-in-out infinite !important;
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 4px 12px rgba(39,69,105,.07);
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
.badan a:hover,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover,
.dropdown-menu li a:hover {
  color: #163b68 !important;
  -webkit-text-fill-color: #163b68 !important;
  transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(39,69,105,.12);
}

/* Artikel dan judul: permukaan putih, aksen pastel tipis */
.obj_article_summary,
.obj_issue_summary,
.cmp_announcements.highlight_first {
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,255,.96)) !important;
  border: 1px solid #e5edf6 !important;
  border-bottom: 3px solid #9dbfe0 !important;
  border-radius: 13px !important;
  box-shadow: var(--jtl-soft-shadow) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.obj_article_summary:hover,
.obj_issue_summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 13px 28px rgba(39,69,105,.13) !important;
}
.obj_article_details .page_title {
  background: linear-gradient(120deg,#eaf3ff,#e8f7f2,#f2f7e9,#fff3e5,#f9edf5,#f0edff) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 38s ease-in-out infinite !important;
  color: #203e60 !important;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 12px;
  box-shadow: 0 5px 16px rgba(39,69,105,.09);
}

/* Tombol PDF / Galley */
.obj_galley_link, a.obj_galley_link {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(115deg,#315d88,#478ca0,#4c9a8c,#7f8f77,#ad8767,#8b78a8,#315d88) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 30s ease-in-out infinite !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 0 rgba(28,58,89,.12), 0 7px 14px rgba(39,69,105,.12);
}

/* Footer gradasi lembut */
.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  color: #fff !important;
  background: linear-gradient(115deg,#244b79,#387da0,#4b9b91,#718e72,#b58a63,#9276a8,#244b79) !important;
  background-size: 350% 350% !important;
  animation: jtlSoftSevenFlow 38s ease-in-out infinite !important;
  border-top: 3px solid #d9c78e !important;
  border-bottom: 6px solid #203b5c !important;
}
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer { background: transparent !important; }
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_brand_footer a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Pastikan paragraf artikel tetap stabil dan mudah dibaca */
.pkp_structure_page .abstract,
.pkp_structure_page .description,
.pkp_structure_page .homepage_about,
.pkp_structure_page .obj_article_summary p,
.pkp_structure_page .obj_article_summary li {
  color: #34445a !important;
  -webkit-text-fill-color: #34445a !important;
  animation: none !important;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .pkp_structure_page::before {
    top: 120px;
    right: 3%;
    width: 94%;
    height: 220px;
    opacity: .045;
  }
}
@media (prefers-reduced-motion: reduce) {
  html, body, .pkp_site_name_wrapper, .pkp_site_name_wrapper::after,
  .pkp_navigation_primary_row, .badan a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a,
  .dropdown-menu li a, .obj_article_details .page_title,
  .obj_galley_link, .pkp_structure_footer_wrapper, .pkp_structure_footer {
    animation: none !important;
  }
}



/* ==========================================================
   JMPI / OJS 3.3 — FULL-WIDTH HEADER MEDIA ENHANCEMENT
   Dikembangkan dari stylesheet Soft 7D Watermark yang diberikan.
   Fokus: gambar header penuh, video responsif, watermark tetap halus,
   dan isi akademik tetap terbaca.
   ========================================================== */

/* Token khusus header */
:root {
  --jmpi-header-shadow: 0 8px 24px rgba(22, 48, 82, .14);
  --jmpi-header-accent: linear-gradient(
    90deg,
    #d9c78e 0%,
    #7298b9 18%,
    #8ebbb5 36%,
    #b5a5c9 54%,
    #d9c78e 72%,
    #7298b9 100%
  );
}

/* Lepaskan header dari batas lebar container tema OJS */
.pkp_structure_head,
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name > a,
.pkp_structure_head .pkp_site_name .is_img {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.pkp_structure_head {
  overflow: visible;
  padding: 0 !important;
}

.pkp_structure_head .pkp_head_wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Gambar header tampil penuh tanpa dipotong.
   Tinggi mengikuti rasio asli file gambar. */
.pkp_structure_head .pkp_site_name .is_img,
.pkp_structure_head .pkp_site_name a.is_img {
  display: block !important;
  line-height: 0 !important;
  text-align: center !important;
  overflow: hidden;
}

.pkp_structure_head .pkp_site_name .is_img img,
.pkp_structure_head .pkp_site_name img,
.pkp_structure_head .pkp_site_name_wrapper img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Garis aksen lembut di bawah masthead */
.pkp_structure_head .pkp_site_name_wrapper {
  position: relative;
  isolation: isolate;
  background: #f7f9fc !important;
  box-shadow: var(--jmpi-header-shadow);
  animation: none !important;
}

.pkp_structure_head .pkp_site_name_wrapper::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--jmpi-header-accent);
  background-size: 250% 100%;
  animation: jmpiHeaderAccentFlow 16s linear infinite;
  pointer-events: none;
}

@keyframes jmpiHeaderAccentFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Dukungan video jika video ditambahkan pada blok HTML/header khusus.
   Video mengikuti rasio aslinya dan tidak terpotong. */
.pkp_structure_head video,
.pkp_site_name video,
.jmpi-header-video,
.jmpi-full-header video {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #f7f9fc;
}

/* Wrapper video opsional:
   letakkan elemen video di dalam .jmpi-header-video-wrapper.
   Rasio 2048:576 cocok untuk banner ultra-wide; sesuaikan bila berbeda. */
.jmpi-header-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 576;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #f7f9fc;
}

.jmpi-header-video-wrapper video,
.jmpi-header-video-wrapper .jmpi-header-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Bila ingin video memenuhi seluruh kotak tanpa ruang kosong,
   tambahkan class .jmpi-video-cover pada elemen video.
   Perhatikan: sisi video dapat terpotong. */
.jmpi-header-video-wrapper video.jmpi-video-cover {
  object-fit: cover !important;
}

/* Latar watermark dekoratif: tidak menghalangi klik atau teks.
   Mempertahankan watermark CSS yang sudah ada pada stylesheet dasar. */
.pkp_structure_page::before {
  pointer-events: none !important;
}

/* Pastikan masthead tidak ikut dibatasi efek kartu halaman */
.pkp_structure_page {
  overflow: visible;
}

/* Responsif untuk tablet dan ponsel */
@media (max-width: 768px) {
  .pkp_structure_head,
  .pkp_structure_head .pkp_head_wrapper,
  .pkp_structure_head .pkp_site_name_wrapper,
  .pkp_structure_head .pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pkp_structure_head .pkp_site_name .is_img img,
  .pkp_structure_head .pkp_site_name img,
  .pkp_structure_head .pkp_site_name_wrapper img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .jmpi-header-video-wrapper {
    aspect-ratio: 16 / 5;
  }
}

/* Hormati pengaturan aksesibilitas pengguna */
@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head .pkp_site_name_wrapper::after {
    animation: none !important;
  }
}

/* ==========================================================
   END — FULL-WIDTH HEADER MEDIA ENHANCEMENT
   ========================================================== */


/* ================= MODERN STYLE LAYER FROM PREVIOUS FILE ================= */



.pkp_structure_page {
  margin: 0 auto;
  max-width: 1160px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 1200px) {
  .pkp_structure_page {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  position: relative;
  padding-top: 0;
}

/* Struktur Sidebar */
.kepala {
  background-image: linear-gradient(to bottom right, #012060, #152954);
  color: #fff;
  padding: 1rem;
  border-bottom: 0.3rem solid #012060;
  font-weight: bold;

}


.badan {
  /* background-color: rgb(83, 248, 111); */
  margin-top: -12px;
}

.badan a {
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  background-color: #dddddd;
  color: #012060;
  border-bottom: rgb(255 255 255) 0.2rem solid;
  transition: 0.4s;
  /* margin: 0.5rem 0rem 0.5rem 0rem; */
  position: relative;
  z-index: 1;
}

.badan .fa {
  padding-right: 10px;
}

.badan a:hover {
  /* background-color: #fab062;*/
  background-color: #fab062;
  box-shadow: gray 0px 0px 1px 0px;
  color: #012060;
}

.badan a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2rem;
  background-color: #012060;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: 800ms;
}

.badan a:hover::after {
  transform: scaleX(1);
}

/* Table of content */

.obj_article_summary {
  box-shadow: 3px 3px 5px;
  padding: 20px;
  border-radius: 10px;
  background: #dddddd;
}

.obj_article_summary:hover {
  background: #fab062;
}

.obj_article_summary {
  padding-bottom: 15px !important;
  border-bottom: solid 4px #012060 !important;
  font-size: 12px;
  padding-top: 12px;
}

.pkp_structure_main h1 {
  font-weight: 600;
  font-size: 20px;
}

.pkp_structure_main a {
  color: #012060 !important;
}

.pkp_structure_main a:hover {
  color: #012060 !important;
}

.obj_galley_link {
  font-weight: 700;
  text-transform: Capitalize !important;
  background: #dddddd !important;
  color: #fab062 !important;
  border: solid 1px #012060 !important;
}

.obj_galley_link:hover {
  background: #fab062 !important;
  color: #012060 !important;
}

/* Footer */
.pkp_structure_footer_wrapper {
 background: #dddddd;
  border-bottom: 20px solid #012060;
  border-top: 4px solid #012060;
}

.pkp_footer_content {
  float: left;
  width: 70%;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*footer bawaan
.pkp_brand_footer {
  float: right;
  width: 20%;
  padding-bottom: 10px;
  padding-top: 50px;
}*/

.pkp_structure_footer .pkp_footer_content {background: #012060; padding: 10px !important;}
.pkp_structure_footer .pkp_footer_content p {margin: 0}
.pkp_structure_footer .pkp_brand_footer {background: #012060; height: auto !important; padding: 0;} /*warna background Footer */
.pkp_structure_footer .pkp_brand_footer img {width: 48px !important; height: auto;}

.pkp_structure_footer .pkp_footer_content img {width: 88px; height:31px;}
.pkp_structure_footer .pkp_footer_content div.logo img{width: 65px; height:65px;}
.pkp_structure_footer .pkp_footer_content div.logo2 img{width: 88px; height:31px;}


/*Body and Abstrack*/
.main_entry .item.abstract {
  text-align: justify;
}

body {
  font-family: Lora, geneva, sans-serif !important;
}

/* Struktur Header */
.pkp_site_name_wrapper {
  width: 100% !important;
}

.pkp_screen_reader {
  margin: 0px !important;
}

.pkp_navigation_primary_row {
  background-image: linear-gradient(to top right, #012060 ,#152954  );
  font-weight: bold;
  /* border-top: 1px solid #ededed; */
  padding-left: 30px;
  padding-right: 30px;
}

.pkp_site_name {
  margin: 0 !important;
  padding: 0px;
}

.pkp_site_name > a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pkp_site_name_wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Ukuran Header */

.pkp_site_name .is_img img {
  max-height: 100% !important;
  max-width: 100% !important;
}

.pkp_site_name a {
  margin: auto !important;
}

/* Settingan Header */

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  margin: 0 !important;
  padding: 0 15px !important;
  line-height: 40px !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  font-family: robot, geneva, sans-serif;
  color: #ffffff !important;
  font-weight: bold !important;
  transition: 0.2s;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
  background: #ffffff;
  color: #012060 !important;
  border-radius: 20px !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li a:hover {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background-image: linear-gradient(to bottom right, #012060, #012060) !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
  border-bottom: solid 1px white !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li:last-child {
  border-bottom: none !important;
}

.pkp_site_name_wrapper {
  background: #ffffff;
  margi-bottom: 0px !important;
}

html,
body {
  background: url(https://jejakdosen.com/wp-content/uploads/2024/12/motif.jpg);
}

.pkp_site_nav_toggle {
  background: #012060 !important;
}

.pkp_navigation_search_wrapper {
  background: #012060;
  border-radius: 20px;
  transition: 0.5s;
}

.pkp_navigation_search_wrapper a {
  color: #ffffff;
}

.pkp_navigation_search_wrapper a:hover {
  color: #fab062;
}

.pkp_navigation_search_wrapper:hover {
  border-radius: 0px;
  background: #012060;
}

.homepage_about {
  text-align: justify;
}

.obj_article_details .page_title {
  background: #fab062;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px;
}

.meta .authors {
  background: url(https://jejakdosen.com/wp-content/uploads/2023/05/group.png) 1px 2px no-repeat rgba(0, 0, 0, 0);
  font-weight: bold;
  margin-top: 4px;
  padding-bottom: 5px;
  padding-left: 30px;
}

.description {
  text-align: justify;
}

.profile a {
  background: #012060;
  color: #fff !important;
}

.pkp_navigation_user_wrapper {
  padding-left: 0;
  padding-right: 30px;
  padding-top: 10px;
}

.pkp_navigation_user.pkp_nav_list .profile a {
  border-radius: 15px !important;
  padding-left: 10px;
  padding-right: 10px;
}

.dropdown-menu {
  background: #012060 !important;
}

.dropdown-menu li a:hover {
  color: #000 !important;
}

.obj_issue_toc .heading .cover img {
  box-shadow: 4px 2px 5px gray;
}

.homepage_image {
  display: inline-block;
  width: 28%;
  margin-left: 0px;
  float: right;
  margin-top: 0px !important;
}

.homepage_image img {
  margin: 60px 0px 0px -20px;
  width: 300px;
  display: inline-block;
  float: left;
  box-shadow: 4px 2px 5px gray;
  margin-right: 15px;
}

.homepage_about {
  display: inline-block;
  width: 70%;
  text-align: justify;
}

.pkp_structure_content.has_sidebar {
  padding-top: 0px;
}

.pkp_structure_main .page {
  padding-top: 20px;
}

@media (max-width: 600px) {
  /* For mobile phones: */
  .homepage_about {
    width: 100%;
  }

  .pkp_structure_main {
    padding-top: 20px !important;
  }
}

@media (max-width: 991px) {
  .homepage_about {
    margin-top: 30px;
  }

  .pkp_structure_main {
    margin-top: 0px !important;
  }

  .pkp_site_name_wrapper {
    padding-bottom: 0px;
  }

  .pkp_site_name_wrapper {
    padding-top: ;
  }

  .pkp_navigation_search_wrapper {
    margin: center !important;
    padding: 10px !important;
  }

  .pkp_structure_main {
    padding-top: 100px;
  }
}

@media (max-width: 360px) {
  /* For mobile phones: */
  .homepage_image {
    width: 90%;
    margin: 0;
  }

  .homepage_about {
    margin-top: 0px;
  }

  .pkp_structure_main {
    padding-top: 0px !important;
  }
}

.deskripsi {
  border: 2px #012060 solid;
  padding: 10px;
  background-color: #dddddd;
  text-align: left;
}

.pkp_block.block_custom {
  padding-left: 15px;
  padding-right: 15px;
}

.cmp_announcements.highlight_first {
  background-color: #dddddd;
}

.pkp_structure_footer {
    clear: both !important;
    display: block !important;
    background-color: #012060; /* Sesuaikan dengan kode warna hijau Anda */
    width: 100%;
}

/* Menghilangkan sisa sidebar yang bocor */
.pkp_structure_sidebar.left, .pkp_structure_sidebar.right {
    background: none !important;
}

/* Container Utama */
.jasbap-header-blocks {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* Gaya Kartu */
.jasbap-card {
    flex: 1;
    min-width: 300px;
    background: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* Menambahkan aksen lengkung biru di bawah seperti di gambar */
.jasbap-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 40px;
    background: linear-gradient(to top left, #3498db, transparent);
    opacity: 0.2;
    border-radius: 100% 0 0 0;
}

.jasbap-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.jasbap-icon h3 {
    margin: 0;
    color: #003366; /* Warna biru gelap */
    font-size: 1.25rem;
}

.jasbap-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Gaya Tombol */
.jasbap-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    transition: 0.3s;
}

.jasbap-btn.btn-orange {
    background-color: #f39c12;
    color: white;
    border: none;
}

.jasbap-btn:hover {
    background-color: #eee;
    color: #000;
}

.jasbap-btn.btn-orange:hover {
    background-color: #e67e22;
}



/* ==========================================================
   ANIMASI TAMBAHAN — THE ELEMENTARY JOURNAL / OJS
   Tambahan ini mempertahankan gaya biru tua dan oranye
   dari stylesheet asli. Tempel di bagian paling bawah.
   ========================================================== */

/* Header dan navigasi: kilau gradasi halus */
.pkp_navigation_primary_row {
  background: linear-gradient(115deg, #012060, #152954, #203b70, #012060);
  background-size: 260% 260%;
  animation: tej-blue-flow 18s ease infinite;
}
@keyframes tej-blue-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Menu bergerak halus ketika disentuh kursor */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a {
  position: relative;
  overflow: hidden;
  transition: color .25s ease, background .25s ease, transform .25s ease,
              border-radius .25s ease;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover {
  transform: translateY(-2px);
  background: #fff;
  color: #012060 !important;
  border-radius: 20px !important;
}

/* Garis oranye animatif di bawah menu */
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  background: #fab062;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover::after {
  transform: scaleX(1);
}

/* Kartu artikel naik sedikit ketika diarahkan */
.obj_article_summary {
  transition: transform .3s ease, box-shadow .3s ease,
              background-color .3s ease, border-color .3s ease;
  border: 1px solid rgba(1, 32, 96, .12);
}
.obj_article_summary:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(1, 32, 96, .18);
  background: #fab062;
}

/* Sampul edisi dan gambar: zoom lembut */
.obj_issue_toc .heading .cover img,
.obj_issue_summary .cover img,
.homepage_image img,
.pkp_site_name .is_img img {
  transition: transform .4s ease, box-shadow .4s ease, filter .4s ease;
}
.obj_issue_toc .heading .cover img:hover,
.obj_issue_summary .cover img:hover,
.homepage_image img:hover {
  transform: scale(1.035);
  box-shadow: 0 12px 24px rgba(1, 32, 96, .2);
}

/* Tombol PDF/galley terasa responsif */
.obj_galley_link,
.jasbap-btn,
.cmp_button {
  transition: transform .22s ease, box-shadow .22s ease,
              background-color .22s ease, color .22s ease !important;
}
.obj_galley_link:hover,
.jasbap-btn:hover,
.cmp_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(1, 32, 96, .16);
}

/* Kartu layanan custom yang sudah ada */
.jasbap-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.jasbap-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(1, 32, 96, .12);
}
.jasbap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 70%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  pointer-events: none;
}
.jasbap-card:hover::before { left: 150%; }

/* Judul halaman masuk dengan gerakan lembut */
.pkp_structure_main .page,
.pkp_structure_sidebar {
  animation: tej-content-appear .65s ease both;
}
@keyframes tej-content-appear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer dengan gradasi bergerak sangat pelan */
.pkp_structure_footer {
  background: linear-gradient(115deg, #012060, #152954, #203b70, #012060);
  background-size: 240% 240%;
  animation: tej-blue-flow 22s ease infinite;
}

/* Aksesibilitas: kurangi animasi jika pengunjung memilih reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   THE ELEMENTARY JOURNAL — MODERN UI OVERRIDES
   Dikembangkan dari stylesheet sebelumnya. Tempelkan setelah CSS lama.
   Palet utama: navy, biru editorial, dan aksen oranye.
   ========================================================== */
:root {
  --tej-navy: #08265f;
  --tej-navy-deep: #061a43;
  --tej-blue: #164a91;
  --tej-blue-soft: #edf4ff;
  --tej-orange: #f5a64a;
  --tej-ink: #1d2939;
  --tej-muted: #667085;
  --tej-line: #e5eaf2;
  --tej-surface: #ffffff;
  --tej-page: #f4f7fb;
  --tej-radius: 16px;
  --tej-shadow: 0 8px 28px rgba(8, 38, 95, .08);
  --tej-shadow-hover: 0 16px 38px rgba(8, 38, 95, .15);
}

html { scroll-behavior: smooth; }
body {
  color: var(--tej-ink);
  background: var(--tej-page);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.pkp_structure_page {
  width: min(100% - 32px, 1280px);
  max-width: 1280px;
  margin: 24px auto;
  overflow: clip;
  background: var(--tej-surface);
  border: 1px solid rgba(8, 38, 95, .06);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(16, 37, 75, .09);
}

/* Header and journal identity */
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  padding-top: 0;
  background: linear-gradient(125deg, var(--tej-navy-deep), var(--tej-navy) 60%, #174887);
}
.pkp_site_name {
  padding: 26px 28px 22px;
}
.pkp_site_name a,
.pkp_site_name .is_img img {
  transition: transform .25s ease, opacity .25s ease;
}
.pkp_site_name a:hover { opacity: .94; }
.pkp_site_name .is_img img {
  display: inline-block;
  max-height: 112px;
  max-width: 100%;
  object-fit: contain;
}
.pkp_navigation_primary_row {
  background: rgba(4, 20, 53, .36);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 3px solid var(--tej-orange);
}
.pkp_navigation_primary > li > a {
  position: relative;
  padding: 14px 17px;
  color: #fff !important;
  font-weight: 650;
  font-size: .94rem;
  transition: color .2s ease, background .2s ease;
}
.pkp_navigation_primary > li > a::after {
  position: absolute;
  right: 16px;
  bottom: 5px;
  left: 16px;
  height: 2px;
  content: "";
  background: var(--tej-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,.08);
}
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after { transform: scaleX(1); }
.pkp_navigation_primary > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* Main content and typography */
.pkp_structure_content,
.pkp_structure_main { min-width: 0; }
.pkp_structure_content { padding-top: 28px; padding-bottom: 34px; }
.pkp_structure_main { color: var(--tej-ink); }
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.page_title {
  color: var(--tej-navy);
  line-height: 1.3;
  letter-spacing: -.025em;
  font-weight: 750;
}
.pkp_structure_main h1, .page_title { font-size: clamp(1.65rem, 2.5vw, 2.25rem); }
.pkp_structure_main a { color: var(--tej-blue); text-underline-offset: 3px; }
.pkp_structure_main a:hover { color: #b96510; }
.pkp_structure_main p { margin-bottom: 1rem; }

/* Homepage blocks */
.homepage_about,
.homepage_image,
.pkp_block,
.pkp_block .content,
.jasbap-card,
.jasbap-service-card {
  border-radius: var(--tej-radius);
}
.homepage_about {
  padding: clamp(22px, 3vw, 36px);
  margin-bottom: 24px;
  background: linear-gradient(135deg, #f5f8ff, #fff 72%);
  border: 1px solid #e4ebf7;
  box-shadow: var(--tej-shadow);
}
.homepage_image { overflow: hidden; margin-bottom: 24px; }
.homepage_image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tej-radius);
}

/* Article and issue cards */
.obj_article_summary,
.obj_issue_summary,
.obj_issue_toc .section,
.pkp_block {
  background: var(--tej-surface);
  border: 1px solid var(--tej-line);
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(16, 37, 75, .035);
}
.obj_article_summary {
  padding: 22px 24px;
  margin: 0 0 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.obj_article_summary:hover {
  transform: translateY(-3px);
  border-color: #c8d7ef;
  box-shadow: var(--tej-shadow-hover);
}
.obj_article_summary .title,
.obj_article_summary h3 a,
.obj_issue_summary .title a {
  color: var(--tej-navy);
  font-weight: 750;
  text-decoration: none;
}
.obj_article_summary .title a:hover,
.obj_article_summary h3 a:hover { color: #b96510; }
.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .published {
  color: var(--tej-muted);
  font-size: .9rem;
}
.obj_article_summary .cover img,
.obj_issue_summary .cover img {
  border-radius: 10px;
  transition: transform .35s ease;
}
.obj_article_summary:hover .cover img,
.obj_issue_summary:hover .cover img { transform: scale(1.025); }
.obj_issue_summary { padding: 20px; transition: box-shadow .2s ease, transform .2s ease; }
.obj_issue_summary:hover { transform: translateY(-3px); box-shadow: var(--tej-shadow-hover); }

/* Sidebar widgets */
.pkp_block { padding: 18px; margin-bottom: 20px; }
.pkp_block .title,
.pkp_block h2 { color: var(--tej-navy); font-weight: 750; }
.pkp_block ul { padding-left: 1.2rem; }
.pkp_block li { margin: .4rem 0; }
.pkp_block a { text-decoration: none; }
.pkp_block a:hover { text-decoration: underline; }

/* Search, forms and buttons */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], select, textarea {
  max-width: 100%;
  border: 1px solid #d6deeb;
  border-radius: 10px;
  background: #fff;
  color: var(--tej-ink);
  padding: 10px 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #6a91cb;
  box-shadow: 0 0 0 3px rgba(22, 74, 145, .12);
}
button, .pkp_button, .cmp_button, input[type="submit"] {
  border-radius: 9px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pkp_button, .cmp_button, input[type="submit"] {
  border-color: var(--tej-navy);
  background: var(--tej-navy);
  color: #fff;
}
.pkp_button:hover, .cmp_button:hover, input[type="submit"]:hover {
  background: var(--tej-blue);
  box-shadow: 0 6px 16px rgba(8, 38, 95, .18);
  transform: translateY(-1px);
}

/* Custom components already used in the earlier stylesheet */
.kepala {
  color: #fff;
  padding: 1.1rem 1.25rem;
  border: 0;
  border-left: 4px solid var(--tej-orange);
  border-radius: 12px;
  background: linear-gradient(120deg, var(--tej-navy-deep), var(--tej-navy), #174887);
  box-shadow: var(--tej-shadow);
}
.badan { margin-top: 0; padding: 1rem 0; }
.badan a { display: block; text-decoration: none; }
.jasbap-card, .jasbap-service-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tej-line);
  box-shadow: var(--tej-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.jasbap-card:hover, .jasbap-service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tej-shadow-hover);
}

/* Footer */
.pkp_structure_footer {
  color: rgba(255,255,255,.88);
  background: linear-gradient(125deg, var(--tej-navy-deep), var(--tej-navy) 62%, #174887);
  border-top: 4px solid var(--tej-orange);
  padding-top: 30px;
  padding-bottom: 26px;
}
.pkp_structure_footer a { color: #fff; text-underline-offset: 3px; }
.pkp_structure_footer a:hover { color: #ffd29a; }
.pkp_footer_content { line-height: 1.8; }

/* Keyboard accessibility */
a:focus-visible, button:focus-visible, .pkp_button:focus-visible {
  outline: 3px solid var(--tej-orange);
  outline-offset: 3px;
}

/* Responsive layout */
@media (max-width: 767px) {
  .pkp_structure_page {
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .pkp_site_name { padding: 18px 16px; }
  .pkp_site_name .is_img img { max-height: 78px; }
  .pkp_structure_content { padding: 20px 14px 26px; }
  .obj_article_summary { padding: 17px; }
  .homepage_about { padding: 20px; }
  .pkp_block { padding: 15px; }
  .pkp_navigation_primary > li > a { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   OJS — REFINED EDITORIAL UI
   Tambahkan sebagai lapisan penyempurnaan di atas stylesheet lama.
   Palet dipertahankan: navy, putih, dan aksen oranye.
   ========================================================== */

:root {
  --tej-navy: #08265f;
  --tej-navy-deep: #061735;
  --tej-blue: #174a8b;
  --tej-orange: #f5a623;
  --tej-ink: #202b3c;
  --tej-muted: #667085;
  --tej-line: #e4e9f1;
  --tej-surface: #ffffff;
  --tej-page: #f2f5fa;
  --tej-radius: 10px;
  --tej-shadow: 0 3px 12px rgba(8, 30, 70, .055);
  --tej-shadow-hover: 0 9px 24px rgba(8, 30, 70, .12);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--tej-ink);
  background: var(--tej-page);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pkp_structure_page {
  width: min(100% - 28px, 1280px);
  max-width: 1280px;
  margin: 18px auto;
  overflow: hidden;
  background: var(--tej-surface);
  border: 1px solid rgba(8, 38, 95, .07);
  border-radius: 12px;
  box-shadow: 0 12px 38px rgba(15, 35, 70, .075);
}

.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  padding-top: 0;
  background: linear-gradient(120deg, var(--tej-navy-deep), var(--tej-navy) 68%, #17447c);
}

.pkp_site_name_wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}

.pkp_site_name {
  margin: 0 !important;
  padding: 18px 22px 16px !important;
}

.pkp_site_name > a {
  display: inline-block;
  padding: 0 !important;
  margin: 0 auto !important;
}

.pkp_site_name .is_img img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 104px;
  object-fit: contain;
  transition: opacity .2s ease;
}

.pkp_site_name a:hover { opacity: .94; }

.pkp_navigation_primary_row {
  padding: 0 18px;
  background: var(--tej-navy);
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 3px solid var(--tej-orange);
  animation: none !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li {
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
.pkp_navigation_primary > li > a {
  position: relative;
  display: block;
  margin: 0 !important;
  padding: 0 13px !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650 !important;
  line-height: 43px !important;
  text-decoration: none;
  border-radius: 0 !important;
  transition: background-color .18s ease, color .18s ease;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover,
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a::after,
.pkp_navigation_primary > li > a::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 4px;
  left: 13px;
  width: auto;
  height: 2px;
  background: var(--tej-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a:hover::after,
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  min-width: 190px;
  background: var(--tej-navy-deep) !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul li {
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

.pkp_navigation_user_wrapper {
  padding: 6px 16px;
}

.pkp_navigation_user.pkp_nav_list .profile a {
  padding: 5px 10px;
  color: #fff !important;
  background: rgba(255,255,255,.10);
  border-radius: 6px !important;
}

.pkp_navigation_search_wrapper {
  margin: 5px 0;
  padding: 0 10px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  transition: background-color .18s ease;
}

.pkp_navigation_search_wrapper a { color: #fff !important; }
.pkp_navigation_search_wrapper:hover { background: rgba(255,255,255,.18); }

.pkp_site_nav_toggle {
  color: #fff !important;
  background: var(--tej-navy) !important;
}

.pkp_structure_content {
  padding-top: 22px;
  padding-bottom: 28px;
}

.pkp_structure_content.has_sidebar { padding-top: 18px; }

.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_structure_content { min-width: 0; }

.pkp_structure_main .page { padding-top: 8px; }

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main .page_title,
.obj_article_details .page_title {
  color: var(--tej-navy);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.018em;
}

.pkp_structure_main h1,
.pkp_structure_main .page_title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.pkp_structure_main h2 { font-size: 1.35rem; }
.pkp_structure_main h3 { font-size: 1.12rem; }

.pkp_structure_main p { margin: 0 0 .85rem; }

.pkp_structure_main a {
  color: var(--tej-blue) !important;
  text-underline-offset: 3px;
  transition: color .18s ease;
}

.pkp_structure_main a:hover { color: #a65c08 !important; }

.homepage_about {
  display: block;
  width: auto;
  margin: 0 0 18px;
  padding: 22px;
  color: var(--tej-ink);
  text-align: left;
  background: #fff;
  border: 1px solid var(--tej-line);
  border-left: 3px solid var(--tej-orange);
  border-radius: var(--tej-radius);
  box-shadow: var(--tej-shadow);
}

.homepage_image {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
}

.homepage_image img {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--tej-line);
  border-radius: var(--tej-radius);
  box-shadow: var(--tej-shadow);
}

.obj_article_summary,
.obj_issue_summary,
.obj_issue_toc .section,
.pkp_block,
.cmp_announcements.highlight_first {
  background: var(--tej-surface);
  border: 1px solid var(--tej-line);
  border-radius: var(--tej-radius);
  box-shadow: var(--tej-shadow);
}

.obj_article_summary {
  margin: 0 0 13px;
  padding: 17px 19px !important;
  border-bottom: 1px solid var(--tej-line) !important;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.obj_article_summary:hover {
  background: #fff;
  border-color: #cbd7e8 !important;
  box-shadow: var(--tej-shadow-hover);
  transform: translateY(-2px);
}

.obj_article_summary .title,
.obj_article_summary h3,
.obj_article_summary h3 a,
.obj_article_summary .title a,
.obj_issue_summary .title a {
  color: var(--tej-navy) !important;
  font-size: 1.02rem;
  font-weight: 750;
  line-height: 1.45;
  text-decoration: none;
}

.obj_article_summary .title a:hover,
.obj_article_summary h3 a:hover,
.obj_issue_summary .title a:hover {
  color: #a65c08 !important;
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .published,
.obj_article_summary .doi {
  color: var(--tej-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.obj_article_summary .authors { margin-top: 5px; padding: 0; background: none; }
.obj_article_summary .galleys { margin-top: 10px; }

.obj_issue_summary {
  padding: 16px;
  transition: box-shadow .18s ease, transform .18s ease;
}

.obj_issue_summary:hover {
  box-shadow: var(--tej-shadow-hover);
  transform: translateY(-2px);
}

.obj_issue_toc .heading .cover img,
.obj_issue_summary .cover img,
.obj_article_summary .cover img {
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(15,35,70,.12);
  transition: transform .2s ease;
}

.obj_issue_toc .heading .cover img:hover,
.obj_issue_summary .cover img:hover {
  transform: translateY(-2px);
}

.obj_article_details .page_title {
  margin-bottom: 18px;
  padding: 14px 17px;
  background: #f5f8fd;
  border: 1px solid var(--tej-line);
  border-left: 4px solid var(--tej-orange);
  border-radius: 8px;
  box-shadow: none;
}

.obj_galley_link,
.cmp_button,
.pkp_button,
button,
input[type="submit"],
.jasbap-btn {
  border-radius: 6px;
  font-weight: 700;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.obj_galley_link {
  padding: 6px 11px !important;
  color: var(--tej-navy) !important;
  background: #f3f6fb !important;
  border: 1px solid #d6dfed !important;
}

.obj_galley_link:hover {
  color: #fff !important;
  background: var(--tej-navy) !important;
  border-color: var(--tej-navy) !important;
}

.pkp_button,
.cmp_button,
input[type="submit"] {
  color: #fff;
  background: var(--tej-navy);
  border: 1px solid var(--tej-navy);
}

.pkp_button:hover,
.cmp_button:hover,
input[type="submit"]:hover {
  color: #fff;
  background: var(--tej-blue);
  border-color: var(--tej-blue);
  box-shadow: 0 4px 12px rgba(8,38,95,.16);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  max-width: 100%;
  padding: 9px 11px;
  color: var(--tej-ink);
  background: #fff;
  border: 1px solid #d6deea;
  border-radius: 6px;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #7195c8;
  box-shadow: 0 0 0 3px rgba(23,74,139,.11);
}

.pkp_block {
  margin-bottom: 15px;
  padding: 15px;
}

.pkp_block .title,
.pkp_block h2 {
  margin-top: 0;
  padding-bottom: 8px;
  color: var(--tej-navy);
  font-size: 1rem;
  font-weight: 750;
  border-bottom: 1px solid var(--tej-line);
}

.pkp_block ul { padding-left: 1.1rem; }
.pkp_block li { margin: .25rem 0; }
.pkp_block a { text-decoration: none; }
.pkp_block a:hover { text-decoration: underline; }

.kepala {
  padding: 13px 15px;
  color: #fff;
  font-weight: 750;
  background: linear-gradient(115deg, var(--tej-navy-deep), var(--tej-navy));
  border: 0;
  border-left: 4px solid var(--tej-orange);
  border-radius: 7px 7px 0 0;
  box-shadow: none;
}

.badan {
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tej-line);
  border-top: 0;
  border-radius: 0 0 7px 7px;
}

.badan a {
  display: block;
  position: relative;
  z-index: 1;
  padding: 10px 13px;
  color: var(--tej-navy) !important;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf0f5;
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}

.badan a:last-child { border-bottom: 0; }
.badan a:hover {
  padding-left: 17px;
  color: var(--tej-navy) !important;
  background: #fff7e9;
  box-shadow: none;
}

.badan a::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  height: auto;
  background: var(--tej-orange);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.badan a:hover::after { transform: scaleY(1); }
.badan .fa { padding-right: 8px; }

.deskripsi {
  padding: 13px;
  color: var(--tej-ink);
  text-align: left;
  background: #f7f9fc;
  border: 1px solid var(--tej-line);
  border-left: 3px solid var(--tej-orange);
  border-radius: 7px;
}

.jasbap-header-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
}

.jasbap-card,
.jasbap-service-card {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  overflow: hidden;
  padding: 17px;
  background: #fff;
  border: 1px solid var(--tej-line);
  border-radius: 9px;
  box-shadow: var(--tej-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.jasbap-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tej-navy), var(--tej-orange));
}

.jasbap-card::after { content: none; }
.jasbap-card:hover,
.jasbap-service-card:hover {
  transform: translateY(-2px);
  border-color: #ccd8e8;
  box-shadow: var(--tej-shadow-hover);
}

.jasbap-icon {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.jasbap-icon h3 {
  margin: 0;
  color: var(--tej-navy);
  font-size: 1.05rem;
}

.jasbap-card p {
  margin-bottom: 13px;
  color: #536176;
  font-size: .9rem;
  line-height: 1.6;
}

.jasbap-btn {
  display: inline-block;
  padding: 7px 12px;
  color: var(--tej-navy) !important;
  background: #f4f7fb;
  border: 1px solid #d8e1ee;
  text-decoration: none;
  font-size: .85rem;
}

.jasbap-btn.btn-orange {
  color: #1c2a40 !important;
  background: var(--tej-orange);
  border-color: var(--tej-orange);
}

.jasbap-btn:hover,
.jasbap-btn.btn-orange:hover {
  color: #fff !important;
  background: var(--tej-navy);
  border-color: var(--tej-navy);
}

.meta .authors {
  margin-top: 4px;
  padding: 0 0 4px 25px;
  font-weight: 650;
  background: none;
}

.main_entry .item.abstract,
.description { text-align: justify; }

.cmp_announcements.highlight_first {
  padding: 15px;
  border-left: 3px solid var(--tej-orange);
}

.dropdown-menu {
  background: var(--tej-navy-deep) !important;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
}

.dropdown-menu li a { color: #fff !important; }
.dropdown-menu li a:hover {
  color: var(--tej-navy) !important;
  background: #fff7e9;
}

.pkp_structure_footer_wrapper {
  background: var(--tej-navy-deep);
  border-top: 3px solid var(--tej-orange);
  border-bottom: 0;
}

.pkp_structure_footer {
  clear: both !important;
  display: block !important;
  width: 100%;
  padding: 22px 20px 18px;
  color: rgba(255,255,255,.88);
  background: linear-gradient(120deg, #061735, #08265f 70%, #123c73);
  border-top: 0;
  animation: none !important;
}

.pkp_structure_footer a {
  color: #fff !important;
  text-underline-offset: 3px;
}

.pkp_structure_footer a:hover { color: #ffd28a !important; }
.pkp_structure_footer .pkp_footer_content {
  width: 70%;
  padding: 8px 10px !important;
  line-height: 1.65;
  background: transparent;
}

.pkp_structure_footer .pkp_footer_content p { margin: 0 0 5px; }
.pkp_structure_footer .pkp_brand_footer {
  height: auto !important;
  padding: 0;
  background: transparent;
}

.pkp_structure_footer .pkp_brand_footer img {
  width: 48px !important;
  height: auto;
}

.pkp_structure_footer .pkp_footer_content img {
  width: 88px;
  height: auto;
}

.pkp_structure_footer .pkp_footer_content div.logo img {
  width: 58px;
  height: 58px;
}

.pkp_structure_footer .pkp_footer_content div.logo2 img {
  width: 88px;
  height: auto;
}

.pkp_structure_sidebar.left,
.pkp_structure_sidebar.right { background: transparent !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.pkp_button:focus-visible {
  outline: 3px solid var(--tej-orange);
  outline-offset: 2px;
}

@media (min-width: 1200px) {
  .pkp_structure_page { margin-top: 22px; margin-bottom: 22px; }
}

@media (max-width: 991px) {
  .pkp_structure_page {
    width: min(100% - 20px, 1280px);
    margin: 10px auto;
  }

  .pkp_structure_content { padding: 18px 16px 24px; }
  .pkp_navigation_primary_row { padding: 0 8px; }
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
  .pkp_navigation_primary > li > a {
    padding-right: 10px !important;
    padding-left: 10px !important;
    font-size: 12.5px;
  }

  .homepage_about { padding: 18px; }
  .pkp_structure_footer .pkp_footer_content { width: 100%; }
}

@media (max-width: 767px) {
  .pkp_structure_page {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .pkp_site_name { padding: 13px 12px !important; }
  .pkp_site_name .is_img img { max-height: 76px; }
  .pkp_structure_content { padding: 16px 12px 22px; }
  .pkp_structure_main .page { padding-top: 0; }
  .obj_article_summary { padding: 14px !important; }
  .obj_article_summary .title,
  .obj_article_summary h3,
  .obj_article_summary h3 a,
  .obj_article_summary .title a { font-size: .98rem; }
  .homepage_about { margin-bottom: 14px; padding: 15px; }
  .homepage_image { margin-bottom: 14px; }
  .pkp_block { margin-bottom: 12px; padding: 13px; }
  .jasbap-header-blocks { gap: 10px; }
  .jasbap-card,
  .jasbap-service-card { flex-basis: 100%; padding: 15px; }
  .pkp_structure_footer { padding: 18px 12px; }
  .pkp_structure_footer .pkp_footer_content { padding: 5px !important; }
  .obj_article_details .page_title { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   OJS COLOR SPECTRUM EDITION — MODERN, COMPACT & VIBRANT
   Lapisan visual tambahan: navy, royal blue, violet, teal,
   cyan, coral, amber, dan magenta. Tempel paling akhir.
   ========================================================== */

:root {
  --ojs-ink: #17233b;
  --ojs-navy: #101f55;
  --ojs-blue: #2457d6;
  --ojs-cyan: #13b8c8;
  --ojs-teal: #0f9f91;
  --ojs-violet: #7257e8;
  --ojs-magenta: #d9468f;
  --ojs-coral: #ff795d;
  --ojs-amber: #ffbd45;
  --ojs-line: #e2e8f4;
  --ojs-glass: rgba(255,255,255,.84);
  --ojs-shadow: 0 8px 24px rgba(24, 45, 105, .09);
  --ojs-shadow-hover: 0 14px 32px rgba(24, 45, 105, .16);
}

/* Background halaman dengan warna lembut berlapis */
html,
body {
  background:
    radial-gradient(ellipse at 4% 8%, rgba(19,184,200,.13), transparent 28%),
    radial-gradient(ellipse at 94% 14%, rgba(114,87,232,.12), transparent 27%),
    radial-gradient(ellipse at 85% 88%, rgba(255,121,93,.10), transparent 25%),
    linear-gradient(135deg, #f3f7ff 0%, #f8f5ff 42%, #effbfa 100%) !important;
  background-attachment: fixed;
  color: var(--ojs-ink);
}

/* Bingkai situs lebih bersih dengan aksen spektrum */
.pkp_structure_page {
  position: relative;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 15px;
  box-shadow: 0 18px 55px rgba(26, 43, 95, .13);
}

.pkp_structure_page::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    #13b8c8 0%, #2457d6 20%, #7257e8 40%,
    #d9468f 60%, #ff795d 80%, #ffbd45 100%);
}

/* Header: gradasi berlapis yang kuat namun tetap profesional */
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(19,184,200,.22), transparent 34%),
    radial-gradient(ellipse at 88% 10%, rgba(217,70,143,.20), transparent 31%),
    linear-gradient(118deg, #091638 0%, #102c70 42%, #3b3190 72%, #174b7c 100%) !important;
}

.pkp_site_name {
  padding: 15px 20px 13px !important;
}

/* Navigasi multiwarna dengan garis aksen spektrum */
.pkp_navigation_primary_row {
  background: linear-gradient(100deg, #101f55, #2457d6 38%, #5b43c6 72%, #087f91) !important;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #13b8c8, #7257e8, #d9468f, #ffbd45) 1;
  animation: none !important;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a,
.pkp_navigation_primary > li > a {
  line-height: 41px !important;
  font-size: 12.5px;
  letter-spacing: .01em;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li a::after,
.pkp_navigation_primary > li > a::after {
  height: 3px;
  background: linear-gradient(90deg, #13e0d0, #ffce5b, #ff8a75);
  border-radius: 10px;
}

.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  background: linear-gradient(145deg, #101f55, #3b3190) !important;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

/* Konten utama: rapat dan mudah dipindai */
.pkp_structure_content {
  padding-top: 19px;
  padding-bottom: 24px;
}

.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.pkp_structure_main .page_title {
  color: #16285d;
  letter-spacing: -.025em;
}

.pkp_structure_main h1,
.pkp_structure_main .page_title {
  position: relative;
  padding-bottom: 9px;
}

.pkp_structure_main h1::after,
.pkp_structure_main .page_title::after {
  content: "";
  display: block;
  width: 68px;
  height: 3px;
  margin-top: 9px;
  background: linear-gradient(90deg, #13b8c8, #7257e8, #ffbd45);
  border-radius: 10px;
}

/* Kartu pengantar beranda dengan warna lembut */
.homepage_about {
  background:
    linear-gradient(120deg, rgba(19,184,200,.075), transparent 42%),
    linear-gradient(300deg, rgba(114,87,232,.065), transparent 48%),
    #fff;
  border: 1px solid #e1e8f5;
  border-left: 4px solid #2457d6;
  box-shadow: var(--ojs-shadow);
}

/* Kartu artikel dengan garis spektrum tipis */
.obj_article_summary,
.obj_issue_summary,
.obj_issue_toc .section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #fff 0%, #fcfdff 100%);
  border: 1px solid var(--ojs-line) !important;
  border-radius: 9px;
  box-shadow: 0 3px 13px rgba(28, 48, 104, .055);
}

.obj_article_summary::before,
.obj_issue_summary::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #13b8c8, #2457d6, #7257e8, #d9468f);
  opacity: .82;
  transition: width .2s ease, opacity .2s ease;
}

.obj_article_summary {
  margin-bottom: 11px;
  padding: 15px 17px 15px 19px !important;
}

.obj_article_summary:hover,
.obj_issue_summary:hover {
  background: #fff;
  border-color: #c8d7f2 !important;
  box-shadow: var(--ojs-shadow-hover);
  transform: translateY(-2px);
}

.obj_article_summary:hover::before,
.obj_issue_summary:hover::before {
  width: 5px;
  opacity: 1;
}

.obj_article_summary .title,
.obj_article_summary h3,
.obj_article_summary h3 a,
.obj_article_summary .title a,
.obj_issue_summary .title a {
  color: #142b65 !important;
  font-size: 1rem;
  line-height: 1.43;
}

.obj_article_summary .meta,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .published {
  color: #68758d;
  font-size: 12px;
}

/* Label unduhan dan tombol dengan warna berkarakter */
.obj_galley_link {
  color: #174a8b !important;
  background: linear-gradient(110deg, #eaf8ff, #f1efff) !important;
  border: 1px solid #cddcf5 !important;
  border-radius: 5px;
}

.obj_galley_link:hover {
  color: #fff !important;
  background: linear-gradient(110deg, #2457d6, #7257e8) !important;
  border-color: transparent !important;
}

.pkp_button,
.cmp_button,
input[type="submit"] {
  color: #fff;
  background: linear-gradient(110deg, #174a8b, #2457d6 55%, #7257e8);
  border: 0;
  box-shadow: 0 4px 12px rgba(36,87,214,.16);
}

.pkp_button:hover,
.cmp_button:hover,
input[type="submit"]:hover {
  color: #fff;
  background: linear-gradient(110deg, #10285f, #5b43c6 65%, #d9468f);
  box-shadow: 0 7px 17px rgba(36,87,214,.23);
}

/* Sidebar: judul berwarna, isi ringkas */
.pkp_block {
  padding: 13px;
  border: 1px solid #e1e7f2;
  border-radius: 9px;
  box-shadow: 0 4px 15px rgba(27,47,102,.055);
}

.pkp_block .title,
.pkp_block h2 {
  margin-bottom: 10px;
  padding-bottom: 8px;
  background: linear-gradient(90deg, #f0f8ff, #f5f1ff 60%, #fff8eb);
  border: 0;
  border-left: 3px solid #7257e8;
  padding: 8px 9px;
  border-radius: 4px;
  color: #172c68;
  font-size: .96rem;
}

.pkp_block a {
  color: #2457d6 !important;
}

.pkp_block a:hover {
  color: #d9468f !important;
}

/* Panel custom/sidebar dengan aksen yang lebih hidup */
.kepala {
  background: linear-gradient(110deg, #101f55, #2457d6 48%, #7257e8 78%, #087f91);
  border-left-color: #ffbd45;
  border-radius: 8px 8px 0 0;
}

.badan {
  border-color: #e0e7f3;
  border-radius: 0 0 8px 8px;
}

.badan a:nth-child(4n+1) { border-left: 3px solid #13b8c8; }
.badan a:nth-child(4n+2) { border-left: 3px solid #2457d6; }
.badan a:nth-child(4n+3) { border-left: 3px solid #7257e8; }
.badan a:nth-child(4n+4) { border-left: 3px solid #ff795d; }

.badan a:hover {
  padding-left: 16px;
  background: linear-gradient(90deg, #f0fbff, #f7f4ff);
}

.deskripsi {
  background: linear-gradient(120deg, #f0fbff, #f6f3ff 65%, #fff8ed);
  border: 1px solid #dfe8f5;
  border-left: 3px solid #13b8c8;
}

/* Kartu layanan: aksen warna berbeda tetapi tetap terkontrol */
.jasbap-card,
.jasbap-service-card {
  border: 1px solid #e0e7f3;
  border-radius: 9px;
  background:
    radial-gradient(circle at 100% 0%, rgba(114,87,232,.06), transparent 40%),
    #fff;
  box-shadow: var(--ojs-shadow);
}

.jasbap-card::before {
  height: 4px;
  background: linear-gradient(90deg, #13b8c8, #2457d6, #7257e8, #d9468f, #ffbd45);
}

.jasbap-icon h3 { color: #172c68; }

.jasbap-btn {
  color: #174a8b !important;
  background: linear-gradient(110deg, #effaff, #f3f0ff);
  border: 1px solid #d6def2;
}

.jasbap-btn.btn-orange {
  color: #26304a !important;
  background: linear-gradient(110deg, #ffcf68, #ff9b6a);
  border: 0;
}

.jasbap-btn:hover,
.jasbap-btn.btn-orange:hover {
  color: #fff !important;
  background: linear-gradient(110deg, #2457d6, #7257e8);
  border-color: transparent;
}

/* Pengumuman dan detail artikel */
.cmp_announcements.highlight_first {
  background: linear-gradient(115deg, #f0fbff, #f5f2ff 60%, #fff8ed);
  border: 1px solid #e0e7f3;
  border-left: 4px solid #d9468f;
}

.obj_article_details .page_title {
  background:
    linear-gradient(100deg, rgba(19,184,200,.09), rgba(114,87,232,.08) 55%, rgba(255,189,69,.10)),
    #fff;
  border: 1px solid #e0e7f3;
  border-left: 4px solid #7257e8;
  box-shadow: none;
}

/* Footer berlapis warna dengan kontras yang baik */
.pkp_structure_footer_wrapper {
  background: #101f55;
  border-top: 0;
}

.pkp_structure_footer {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(19,184,200,.18), transparent 35%),
    radial-gradient(ellipse at 100% 0%, rgba(217,70,143,.18), transparent 32%),
    linear-gradient(115deg, #091638 0%, #102c70 45%, #3b3190 75%, #124c68 100%);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, #13b8c8, #2457d6, #7257e8, #d9468f, #ffbd45) 1;
  animation: none !important;
}

.pkp_structure_footer a:hover { color: #ffcf68 !important; }

/* Fokus aksesibel dan gerakan tidak berlebihan */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #ffbd45;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  html, body { background: #f4f7fc !important; }
  .pkp_structure_page { border-radius: 0; }
  .pkp_structure_page::before { height: 3px; }
  .pkp_site_name { padding: 12px !important; }
  .pkp_site_name .is_img img { max-height: 70px; }
  .pkp_navigation_primary_row { padding: 0 5px; }
  .pkp_structure_content { padding: 14px 11px 20px; }
  .obj_article_summary { padding: 13px 12px 13px 15px !important; }
  .pkp_block { padding: 11px; }
  .jasbap-header-blocks { gap: 9px; }
  .jasbap-card, .jasbap-service-card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   J-SLR / OJS — MERGED MODERN FULL-WIDTH HEADER
   Integrates the full-width masthead behavior with the modern
   navy, cyan, violet and gold visual system from both stylesheets.
   ========================================================== */

:root {
  --jslr-header-shadow: 0 8px 26px rgba(8, 30, 75, .13);
  --jslr-header-accent: linear-gradient(
    90deg,
    #13b8c8 0%,
    #2457d6 24%,
    #7257e8 48%,
    #d9468f 72%,
    #ffbd45 88%,
    #13b8c8 100%
  );
}

/* Let the journal masthead span the full available width */
.pkp_structure_head,
.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper,
.pkp_structure_head .pkp_site_name,
.pkp_structure_head .pkp_site_name > a,
.pkp_structure_head .pkp_site_name .is_img {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.pkp_structure_head {
  overflow: hidden;
  padding: 0 !important;
  background: linear-gradient(120deg, #071a43, #102f72 54%, #14516b) !important;
}

.pkp_structure_head .pkp_head_wrapper,
.pkp_structure_head .pkp_site_name_wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_structure_head .pkp_site_name {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}

.pkp_structure_head .pkp_site_name .is_img,
.pkp_structure_head .pkp_site_name a.is_img {
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
  text-align: center !important;
  overflow: hidden;
}

/* Keep banner images/GIFs crisp and proportional */
.pkp_structure_head .pkp_site_name .is_img img,
.pkp_structure_head .pkp_site_name img,
.pkp_structure_head .pkp_site_name_wrapper img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Animated premium accent line under the banner */
.pkp_structure_head .pkp_site_name_wrapper {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  box-shadow: var(--jslr-header-shadow);
}

.pkp_structure_head .pkp_site_name_wrapper::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--jslr-header-accent);
  background-size: 250% 100%;
  animation: jslrHeaderAccentFlow 12s linear infinite;
  pointer-events: none;
}

@keyframes jslrHeaderAccentFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Optional HTML video support for a future animated masthead */
.pkp_structure_head video,
.pkp_site_name video,
.jslr-header-video,
.jslr-full-header video {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #071a43;
}

.jslr-header-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 670 / 128;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: #071a43;
}

.jslr-header-video-wrapper video,
.jslr-header-video-wrapper .jslr-header-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Responsive header layout */
@media (max-width: 768px) {
  .pkp_structure_head,
  .pkp_structure_head .pkp_head_wrapper,
  .pkp_structure_head .pkp_site_name_wrapper,
  .pkp_structure_head .pkp_site_name {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pkp_structure_head .pkp_site_name .is_img img,
  .pkp_structure_head .pkp_site_name img,
  .pkp_structure_head .pkp_site_name_wrapper img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .jslr-header-video-wrapper {
    aspect-ratio: 16 / 5;
  }
}

/* Accessibility: respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  .pkp_structure_head .pkp_site_name_wrapper::after {
    animation: none !important;
  }
}

/* End merged J-SLR header enhancement */

/* ==========================================================
   FIX — SHOW ALL PRIMARY NAVIGATION ITEMS
   Prevents menu links from being clipped, collapsed, or hidden.
   Menu items wrap onto additional rows on smaller screens.
   ========================================================== */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  overflow: visible !important;
  max-width: 100% !important;
}

.pkp_navigation_primary_row {
  height: auto !important;
  min-height: 43px;
  padding: 0 14px !important;
}

.pkp_navigation_primary_wrapper {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
}

.pkp_navigation_primary,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  list-style: none !important;
}

.pkp_navigation_primary > li,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li {
  display: block !important;
  flex: 0 0 auto !important;
  float: none !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.pkp_navigation_primary > li > a,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 43px;
  height: auto !important;
  padding: 0 12px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.35 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Dropdowns remain accessible and appear above surrounding content. */
.pkp_navigation_primary > li > ul,
.pkp_navigation_primary_row .pkp_navigation_primary_wrapper ul li ul {
  z-index: 9999 !important;
  overflow: visible !important;
}

@media (max-width: 991px) {
  .pkp_navigation_primary_row {
    padding: 4px 8px !important;
  }

  .pkp_navigation_primary,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul {
    justify-content: flex-start !important;
    gap: 2px !important;
  }

  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
    min-height: 38px;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 767px) {
  /* Keep every primary link visible on phones instead of hiding it
     behind a collapsed navigation panel. */
  .pkp_site_nav_toggle {
    display: none !important;
  }

  .pkp_navigation_primary_row,
  .pkp_navigation_primary_wrapper,
  .pkp_navigation_primary,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_navigation_primary > li,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li {
    display: inline-block !important;
    vertical-align: top;
    max-width: 100%;
  }

  .pkp_navigation_primary > li > a,
  .pkp_navigation_primary_row .pkp_navigation_primary_wrapper > ul > li > a {
    min-height: 36px;
    padding: 8px 9px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
}


/* ==========================================================
   FINAL COMBINATION OVERRIDE — NAVIGATION VISIBILITY
   Keeps the combined original + modern styling while ensuring
   primary menu items are not clipped on desktop/tablet.
   ========================================================== */

.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  overflow: visible !important;
}

.pkp_navigation_primary_row {
  position: relative !important;
  z-index: 1000 !important;
  height: auto !important;
  max-height: none !important;
}

.pkp_navigation_primary_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 769px) {
  .pkp_navigation_primary_wrapper > ul,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    gap: 3px !important;
  }

  .pkp_navigation_primary_wrapper > ul > li,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li {
    display: list-item !important;
    position: relative !important;
    flex: 0 0 auto !important;
    float: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_navigation_primary_wrapper > ul > li > a,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a {
    display: block !important;
    min-height: 40px !important;
    height: auto !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_navigation_primary_wrapper ul li ul {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 210px !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
  }

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

/* Keep OJS mobile navigation toggle functional on small screens. */
@media (max-width: 768px) {
  .pkp_navigation_primary_row {
    overflow: visible !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pkp_site_nav_toggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2001 !important;
  }

  .pkp_navigation_primary_wrapper {
    max-width: 100% !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary_wrapper ul li a {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}




/* ==========================================================
   FINAL COMBINATION OVERRIDE — NAVIGATION VISIBILITY
   Ensures primary navigation is visible and wraps on desktop,
   while retaining the OJS mobile navigation toggle.
   ========================================================== */
.pkp_head_wrapper,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  overflow: visible !important;
}

.pkp_navigation_primary_row {
  position: relative !important;
  z-index: 1000 !important;
  height: auto !important;
  max-height: none !important;
}

.pkp_navigation_primary_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 769px) {
  .pkp_navigation_primary_wrapper > ul,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    gap: 3px !important;
  }

  .pkp_navigation_primary_wrapper > ul > li,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li {
    display: list-item !important;
    position: relative !important;
    flex: 0 0 auto !important;
    float: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_navigation_primary_wrapper > ul > li > a,
  .pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a {
    display: block !important;
    min-height: 40px !important;
    height: auto !important;
    line-height: 1.35 !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .pkp_navigation_primary_wrapper ul li ul {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 210px !important;
    max-width: 320px !important;
    height: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
  }

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

@media (max-width: 768px) {
  .pkp_navigation_primary_row {
    overflow: visible !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pkp_site_nav_toggle {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2001 !important;
  }

  .pkp_navigation_primary_wrapper {
    max-width: 100% !important;
    overflow: visible !important;
  }

  .pkp_navigation_primary_wrapper ul li a {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}



/* ==========================================================
   HASANAH OJS — PREMIUM 5D CONTINUOUS COLOR SYSTEM
   Final override layer. Preserves existing OJS layout and
   navigation visibility rules while enhancing depth, menus,
   controls, links, cards and headings.
   ========================================================== */

:root {
  --h5d-ink: #172b4d;
  --h5d-blue: #1769aa;
  --h5d-teal: #00a896;
  --h5d-violet: #7857c5;
  --h5d-rose: #d94f9d;
  --h5d-gold: #e5a52e;
  --h5d-shadow: 0 2px 0 rgba(255,255,255,.88) inset,
                0 4px 0 rgba(18,48,84,.08),
                0 10px 22px rgba(18,48,84,.14);
}

/* Smooth animated multi-colour surface */
@keyframes hasanah5DFlow {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  25%  { background-position: 50% 0%; filter: saturate(1.08); }
  50%  { background-position: 100% 50%; filter: saturate(1.14); }
  75%  { background-position: 50% 100%; filter: saturate(1.08); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* High-contrast text colour cycle for headings and interactive labels */
@keyframes hasanahTextFlow {
  0%, 100% { color: #174b8b; }
  20%      { color: #087b78; }
  40%      { color: #6841a5; }
  60%      { color: #a34a16; }
  80%      { color: #a52e69; }
}

@keyframes hasanahGlow {
  0%, 100% {
    box-shadow: 0 2px 0 rgba(255,255,255,.9) inset,
                0 4px 0 rgba(18,48,84,.08),
                0 9px 18px rgba(18,48,84,.12);
  }
  50% {
    box-shadow: 0 2px 0 rgba(255,255,255,.98) inset,
                0 5px 0 rgba(18,48,84,.10),
                0 14px 26px rgba(18,48,84,.19);
  }
}

/* Primary navigation bar */
.pkp_navigation_primary_row {
  background: linear-gradient(115deg,
    #102b58, #1769aa, #087f8c, #6841a5, #a34a68, #102b58) !important;
  background-size: 400% 400% !important;
  animation: hasanah5DFlow 22s ease infinite !important;
  box-shadow: 0 7px 20px rgba(16,43,88,.22);
}

.pkp_navigation_primary_wrapper > ul > li > a,
.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 10px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
              0 3px 0 rgba(0,0,0,.13),
              0 7px 14px rgba(0,0,0,.12);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  animation: none !important;
}

.pkp_navigation_primary_wrapper > ul > li > a:hover,
.pkp_navigation_primary_wrapper > ul > li > a:focus,
.pkp_navigation_primary_wrapper ul.pkp_navigation_primary > li > a:hover {
  color: #17345b !important;
  -webkit-text-fill-color: #17345b !important;
  background: linear-gradient(120deg,#fff,#dff5ff,#dff9ed,#fff0d4,#f0e5ff) !important;
  box-shadow: 0 2px 0 #fff inset, 0 4px 0 rgba(16,43,88,.10),
              0 12px 22px rgba(16,43,88,.22) !important;
  transform: translateY(-3px);
}

/* Dropdown and user menus */
.pkp_navigation_primary_wrapper ul li ul,
.dropdown-menu {
  background: linear-gradient(135deg,#fff,#eaf4ff,#e6fff5,#fff1dc,#f3eaff) !important;
  background-size: 350% 350% !important;
  animation: hasanah5DFlow 24s ease infinite !important;
  border: 1px solid rgba(23,67,112,.16) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(13,38,74,.24),
              0 2px 0 rgba(255,255,255,.95) inset !important;
  overflow: hidden;
}

.pkp_navigation_primary_wrapper ul li ul li a,
.dropdown-menu li a {
  color: #183451 !important;
  -webkit-text-fill-color: #183451 !important;
  background: rgba(255,255,255,.55) !important;
  border-bottom: 1px solid rgba(23,67,112,.09) !important;
  text-shadow: 0 1px 0 #fff;
  transition: all .22s ease !important;
  animation: hasanahTextFlow 12s linear infinite !important;
}

.pkp_navigation_primary_wrapper ul li ul li a:hover,
.dropdown-menu li a:hover {
  color: #102b58 !important;
  -webkit-text-fill-color: #102b58 !important;
  background: linear-gradient(110deg,#fff,#dff4ff,#e4fff2,#fff0d8) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(16,43,88,.12);
}

/* Sidebar and custom menu links */
.badan a {
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
  background: linear-gradient(115deg,#e4efff,#e2f5ed,#fff0dc,#f8e8f4,#e9e6ff) !important;
  background-size: 350% 350% !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 10px !important;
  margin: 5px 0 !important;
  box-shadow: var(--h5d-shadow);
  text-shadow: 0 1px 0 rgba(255,255,255,.9) !important;
  animation: hasanah5DFlow 17s ease infinite, hasanahGlow 5s ease-in-out infinite !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.badan a:nth-child(5n + 2) { animation-delay: -3.4s, -1s !important; }
.badan a:nth-child(5n + 3) { animation-delay: -6.8s, -2s !important; }
.badan a:nth-child(5n + 4) { animation-delay: -10.2s, -3s !important; }
.badan a:nth-child(5n)     { animation-delay: -13.6s, -4s !important; }

.badan a:hover {
  color: #102b58 !important;
  -webkit-text-fill-color: #102b58 !important;
  transform: translateY(-3px) translateX(3px) !important;
  box-shadow: 0 2px 0 #fff inset, 0 5px 0 rgba(16,43,88,.10),
              0 14px 24px rgba(16,43,88,.20) !important;
}

/* 5D buttons, tabs, pagination, action controls and galley links */
button,
.button,
a.button,
.pkp_button,
.cmp_button,
.obj_galley_link,
a.obj_galley_link,
.pkp_page_links a,
.pkp_pagination a,
.pkp_pagination button,
.cmp_manuscript_button,
.cmp_form .buttons button,
.cmp_form .submit button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(115deg,#102b58,#1769aa,#087f8c,#6841a5,#a34a68) !important;
  background-size: 350% 350% !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.22) inset,
              0 4px 0 rgba(16,43,88,.12),
              0 9px 17px rgba(16,43,88,.17) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
  animation: hasanah5DFlow 18s ease infinite !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

button:hover,
.button:hover,
a.button:hover,
.pkp_button:hover,
.cmp_button:hover,
.obj_galley_link:hover,
a.obj_galley_link:hover,
.pkp_page_links a:hover,
.pkp_pagination a:hover,
.pkp_pagination button:hover {
  color: #17324d !important;
  -webkit-text-fill-color: #17324d !important;
  background: linear-gradient(120deg,#fff,#dff4ff,#e3fff1,#fff0d6,#f1e7ff) !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 0 #fff inset, 0 5px 0 rgba(16,43,88,.10),
              0 13px 22px rgba(16,43,88,.20) !important;
}

/* Article cards, issue cards, announcement panels and custom cards */
.obj_article_summary,
.obj_issue_summary,
.cmp_announcements,
.jasbap-card,
.deskripsi,
.obj_issue_toc .heading {
  border: 1px solid rgba(35,82,130,.13) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg,#fff,#f1f7ff,#effcf7) !important;
  box-shadow: 0 2px 0 rgba(255,255,255,.95) inset,
              0 4px 0 rgba(19,55,94,.06),
              0 12px 26px rgba(19,55,94,.11) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}
.obj_article_summary:hover,
.obj_issue_summary:hover,
.cmp_announcements:hover,
.jasbap-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 0 #fff inset, 0 6px 0 rgba(19,55,94,.08),
              0 18px 34px rgba(19,55,94,.17) !important;
}

/* Headings and prominent labels: subtle shifting colour, not body paragraphs */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4,
.obj_article_details .page_title,
.jasbap-icon h3,
.pkp_page_title {
  animation: hasanahTextFlow 16s linear infinite !important;
  text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(16,43,88,.12),
               0 6px 14px rgba(16,43,88,.13) !important;
}

/* Links and selectable items */
.pkp_structure_main a,
.pkp_structure_main a:visited,
.pkp_structure_sidebar a,
.pkp_block a {
  transition: color .2s ease, text-shadow .2s ease !important;
}
.pkp_structure_main a:hover,
.pkp_structure_sidebar a:hover,
.pkp_block a:hover {
  color: #087f8c !important;
  text-shadow: 0 2px 10px rgba(8,127,140,.20);
}

/* Form fields, dropdown selectors and search controls */
input,
textarea,
select,
.cmp_form select,
.cmp_form input,
.cmp_form textarea {
  color: #183451 !important;
  background: linear-gradient(145deg,#fff,#f5f9ff) !important;
  border: 1px solid #b9cce0 !important;
  border-radius: 9px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset,
              0 3px 8px rgba(16,43,88,.07) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
input:focus,
textarea:focus,
select:focus,
.cmp_form select:focus,
.cmp_form input:focus,
.cmp_form textarea:focus {
  border-color: #168b9a !important;
  outline: 3px solid rgba(22,139,154,.15) !important;
  box-shadow: 0 1px 0 #fff inset, 0 0 0 4px rgba(22,139,154,.08),
              0 7px 16px rgba(16,43,88,.12) !important;
}
option {
  color: #183451 !important;
  background: #fff !important;
}

/* Keep academic reading comfortable and stable */
.pkp_structure_page p,
.pkp_structure_page .abstract,
.pkp_structure_page .description,
.pkp_structure_page .homepage_about,
.pkp_structure_page td,
.pkp_structure_page blockquote {
  color: #26364b !important;
  -webkit-text-fill-color: #26364b !important;
  animation: none !important;
  line-height: 1.75;
}

/* Respect accessibility settings */
@media (prefers-reduced-motion: reduce) {
  .pkp_navigation_primary_row,
  .pkp_navigation_primary_wrapper ul li ul,
  .dropdown-menu,
  .pkp_navigation_primary_wrapper ul li ul li a,
  .dropdown-menu li a,
  .badan a,
  button,
  .button,
  a.button,
  .pkp_button,
  .cmp_button,
  .obj_galley_link,
  a.obj_galley_link,
  .pkp_page_links a,
  .pkp_pagination a,
  .pkp_pagination button,
  .pkp_structure_main h1,
  .pkp_structure_main h2,
  .pkp_structure_main h3,
  .pkp_structure_main h4,
  .obj_article_details .page_title,
  .jasbap-icon h3 {
    animation: none !important;
    transition: none !important;
  }
}