.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
   ========================================================== */



/* ==========================================================
   FOOTER COLOR FLOW — ANIMATED MULTICOLOR GRADIENT
   Tambahkan di bagian paling akhir stylesheet OJS.
   Warna bergerak halus; teks footer tetap kontras dan terbaca.
   ========================================================== */

@keyframes ojsFooterColorFlow {
  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%; }
}

.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  position: relative;
  isolation: isolate;
  width: 100% !important;
  color: #fff !important;
  background: linear-gradient(
    120deg,
    #102b58 0%,
    #1769aa 14%,
    #00a896 28%,
    #7857c5 42%,
    #d94f9d 56%,
    #f28c28 70%,
    #20a8c7 84%,
    #102b58 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: ojsFooterColorFlow 18s ease-in-out infinite !important;
  border-top: 4px solid #f3b544 !important;
  border-bottom: 6px solid #102b58 !important;
  box-shadow: 0 -8px 24px rgba(16, 43, 88, .15);
}

/* Pastikan kolom dan area branding mengikuti warna footer */
.pkp_structure_footer .pkp_footer_content,
.pkp_structure_footer .pkp_brand_footer,
.pkp_structure_footer .pkp_brand_footer a {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Teks, tautan, dan ikon footer tetap jelas */
.pkp_structure_footer .pkp_footer_content p,
.pkp_structure_footer .pkp_footer_content a,
.pkp_structure_footer .pkp_brand_footer a,
.pkp_structure_footer .pkp_footer_content span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .32);
}

.pkp_structure_footer .pkp_footer_content a:hover,
.pkp_structure_footer .pkp_brand_footer a:hover {
  color: #ffe6a8 !important;
  -webkit-text-fill-color: #ffe6a8 !important;
}

@media (max-width: 768px) {
  .pkp_structure_footer .pkp_footer_content {
    float: none !important;
    width: 100% !important;
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pkp_structure_footer_wrapper,
  .pkp_structure_footer {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}