body {
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50.41' height='87' patternTransform='scale(2) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0,0%,100%,1)'/><path d='M25.3 87L12.74 65.25m0 14.5h-25.12m75.18 0H37.68M33.5 87l25.28-43.5m-50.23 29l4.19 7.25L16.92 87h-33.48m33.48 0h16.75-8.37zM8.55 72.5L16.92 58m50.06 29h-83.54m79.53-50.75L50.4 14.5M37.85 65.24L50.41 43.5m0 29l12.56-21.75m-50.24-14.5h25.12zM33.66 29l4.2 7.25 4.18 7.25M33.67 58H16.92l-4.18-7.25M-8.2 72.5l20.92-36.25L33.66 0m25.12 72.5H42.04l-4.19-7.26L33.67 58l4.18-7.24 4.19-7.25M33.67 29l8.37-14.5h16.74m0 29H8.38m29.47 7.25H12.74M50.4 43.5L37.85 21.75m-.17 58L25.12 58M12.73 36.25L.18 14.5M0 43.5l-12.55-21.75M24.95 29l12.9-21.75M12.4 21.75L25.2 0M12.56 7.25h-25.12m75.53 0H37.85M58.78 43.5L33.66 0h33.5m-83.9 0h83.89M33.32 29H16.57l-4.18-7.25-4.2-7.25m.18 29H-8.37M-16.74 0h33.48l-4.18 7.25-4.18 7.25H-8.37m8.38 58l12.73-21.75m-25.3 14.5L0 43.5m-8.37-29l21.1 36.25 20.94 36.24M8.37 72.5H-8.36'  stroke-width='1' stroke='hsla(49, 70%, 51%, 0.76)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>")
}

.pkp_site_name .is_img img {
	display: inline-block;
	max-height: 200px;
	max-width: 100%;
	width: auto;
	height: auto
}

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

.pkp_brand_footer {
	display: none;
}

.pkp_navigation_primary {
	position: relative;
	left: 20px;
	font-weight: bold;
}

.pkp_navigation_primary_row {
	background-color: #D9B829;
}

.pkp_structure_content.has_sidebar {
	margin-left: auto;
	margin-right: auto;
	width: 1190px;
	background: white;
	position: relative;
	overflow: visible !important;
	box-shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%)
}

.pkp_structure_head {
	margin-right: auto;
	margin-left: auto;
	width: 1190px;
	box-shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.pkp_structure_footer_wrapper {
	width: 1190px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

@media (min-width: 992px){
.pkp_navigation_user>li:last-child>a {
	margin-right:  0.28600000000000136rem;;
	}
.pkp_structure_sidebar {
	float: left;
	width: 300px;
	}
}

.obj_article_details .abstract{
	text-align: justify;
}

/* IMPORTANT: auto-fit prevents forced 2-column on narrow OJS content area */
.ojsFeatureGrid{
  max-width: 1280px;
  margin: 0 auto;
  justify-items: center;
  

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: clamp(22px, 3vw, 70px);
  align-items: center;
}

/* One tile */
.ojsFeature{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0; /* overlap handled by negative margin */

  min-height: var(--imgH);
  position: relative;
  overflow: visible;
}

/* Text card = normal flow (NOT absolute) */
.ojsTextCard{
  width: var(--textW);
  max-width: 92%;
  background: white;
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  z-index: 1;
}

.ojsTextCard h3{
  margin: 0 0 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: #111;
}

.ojsTextCard p{
  margin: 0;
  text-align: justify;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #222;
  max-width: 35ch;
}

/* ========= OJS Feature Cards (stable in narrow OJS columns) ========= */

.ojsFeatureSection{
  --imgW: 360px;
  --imgH: 500px;
  

  --textW: 500px;     /* FIXED text card width (prevents skinny vertical card) */
  --overlap: 130px;   /* how much image overlaps text */

  background: none;
  padding: 42px 24px;
  overflow: visible;
}

/* IMPORTANT: auto-fit prevents forced 2-column on narrow OJS content area */
.ojsFeatureGrid{
  max-width: 1280px;
  margin: 0 auto;
  justify-items: center;
  

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
  gap: clamp(22px, 3vw, 70px);
  align-items: center;
}

/* One tile */
.ojsFeature{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0; /* overlap handled by negative margin */

  min-height: var(--imgH);
  position: relative;
  overflow: visible;
}

/* Text card = normal flow (NOT absolute) */
.ojsTextCard{
  width: var(--textW);
  max-width: 92%;
  background: white;
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  z-index: 1;
}

.ojsTextCard h3{
  margin: 0 0 14px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: #111;
}

.ojsTextCard p{
  margin: 0;
  text-align: justify;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #222;
  max-width: 35ch;
}

/* Image card overlaps the text using negative margin */
.ojsImageCard{
  width: var(--imgW);
  height: var(--imgH);
  margin-left: calc(var(--overlap) * -1);

  border-radius: 28px;
  overflow: hidden;
  background: #478b8c;
  box-shadow: 0 18px 40px rgba(65, 60, 130, 0.28);

  z-index: 2;
}

.ojsImageCard img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OPTIONAL reverse layout */
.ojsFeature.ojsFeature--reverse{
  flex-direction: row-reverse;
}

.ojsFeature.ojsFeature--reverse .ojsImageCard{
  margin-left: 0;
  margin-right: calc(var(--overlap) * -1);
}

/* Responsive tuning for OJS */
@media (max-width: 1200px){
  .ojsFeatureGrid{
    grid-template-columns: 1fr; /* force 1 column earlier (OJS sidebar layout) */
  }
}

@media (max-width: 640px){
  .ojsFeatureSection{
    --imgW: 100%;
    --imgH: 520px;
    --textW: 100%;
    padding: 26px 16px;
  }

  .ojsFeature{
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .ojsImageCard{
    margin-left: 0;
    margin-right: 0;
    height: var(--imgH);
    border-radius: 24px;
  }
}

/* === Zoom-out hover effect (starts slightly zoomed, zooms OUT on hover) === */
.ojsImageCard{
  cursor: pointer;
}

.ojsImageCard img{
  transform: scale(1.08);                 /* initial zoom-in */
  transition: transform .55s ease;        /* smooth */
  will-change: transform;
}

.ojsImageCard:hover img{
  transform: scale(1);                    /* zoom out to normal */
}

/* Optional: slightly lift the card for a nicer feel */
.ojsImageCard{
  transition: transform .55s ease, box-shadow .55s ease;
}

.ojsImageCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(0,0,0,.34);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .ojsImageCard img,
  .ojsImageCard{
    transition: none !important;
  }
}


/* ===== Indexation Sidebar Block (for your exact HTML) ===== */
/* ===== Indexation Sidebar Block (fixed) ===== */
.idx-card{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.10) !important;
  box-shadow: 0 12px 34px rgba(11,18,32,.06) !important;
}

/* header bar (jangan pakai ::after untuk container) */
.idx-head{
  padding: 12px 14px !important;
  text-align: left !important;

  background: #478b8c !important;
  border-bottom: 1px solid rgba(255,255,255,.22) !important;
}

/* title text */
.idx-title{
  font-family: "Poppins","Inter",system-ui,sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ===== Make underline same as ISSN block ===== */
.idx-underline{
  /* kill the &nbsp; effect */
  font-size: 0 !important;
  line-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0;

  display: block !important;
  width: 64px !important;        /* panjang garis */
  height: 3px !important;        /* tebal garis */
  margin-top: 10px !important;
  background: rgba(255,255,255,.85) !important; /* warna garis */
  border-radius: 999px !important;
  padding: 0 !important;
}

/* if OJS theme injects ::after lines, disable */
.idx-underline::before,
.idx-underline::after{
  content: none !important;
}


/* Body */
.idx-body{ padding: 14px; }

/* ===== GRID: default 2 columns ===== */
.idx-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ===== ITEM: no bg, dashed border (like your screenshot) ===== */
.idx-item{
  text-decoration: none !important;
  border-radius: 16px;
  border: 1px dashed rgba(11,18,32,.22);
  background: transparent;
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.idx-item:hover{
  transform: translateY(-1px);
  border-color: rgba(11,18,32,.35);
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
}

/* ===== LOGO: force readable size regardless of original image ratio ===== */
.idx-logo{
  width: 100% !important;
  max-width: 170px;     /* bigger */
  height: 74px;         /* bigger */
  object-fit: contain;
  display: block;

  /* white pill behind logo */
  background:#fff;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(11,18,32,.10);
}

/* Remove forced width/height attributes from HTML images (important) */
.idx-logo[width], .idx-logo[height]{
  width: 100% !important;
  height: 74px !important;
}

/* ===== Mobile: switch to 1 column automatically + bigger ===== */
@media (max-width: 520px){
  .idx-grid{ grid-template-columns: 1fr; }
  .idx-logo{ max-width: 220px; height: 82px; }
  .idx-logo[width], .idx-logo[height]{ height: 82px !important; }
}

/* ===== Indexation: 2 columns + no logo bg (moderate size) ===== */

/* 2 kolom */
.idx-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* item box */
.idx-item{
  padding: 16px 12px !important;
}

/* no bg behind logo + size reasonable */
.idx-logo{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  width: 100% !important;
  max-width: 150px !important;  /* ukuran logo */
  height: 64px !important;      /* tinggi logo */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* override width/height attributes in HTML img */
.idx-logo[width],
.idx-logo[height]{
  width: 100% !important;
  height: 64px !important;
}

/* mobile: 1 kolom biar nggak sempit */
@media (max-width: 520px){
  .idx-grid{ grid-template-columns: 1fr !important; }
  .idx-logo{ max-width: 190px !important; height: 78px !important; }
  .idx-logo[width], .idx-logo[height]{ height: 78px !important; }
}

/* Generic card wrapper for table blocks */
.jp-sideCard{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 18px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(11,18,32,.10) !important;
  box-shadow: 0 12px 34px rgba(11,18,32,.06) !important;
}

/* Header cell: match your sidebar header style */
.jp-sideCard tr:first-child td{
  height: auto !important;
  padding: 12px 14px !important;
  text-align: left !important;

  font-family: "Poppins","Inter",system-ui,sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .22px !important;
  text-transform: uppercase !important;

  color: white;
  background: #478b8c !important;
  border-bottom: white;
  position: relative !important;
}

/* ===== Indexation Marquee (CSS-only infinite) ===== */
.idxMarquee{
  margin: 26px auto;
  margin-top: 5px !important;
  padding: 10px 0 0;
  max-width: 1180px;
}

.idxMarquee__title{
  font-family: "Poppins","Inter",system-ui,sans-serif !important;
  letter-spacing: .2px;
  color: #111;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 10px 15px;  /* top right bottom left */
}

/* viewport */
.idxMarquee__wrap{
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #FFFFFF 0%, #ffffff 100%);
  padding: 14px 0;
}

/* soft fade edges like your screenshot */
.idxMarquee__wrap::before,
.idxMarquee__wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  pointer-events:none;
  z-index:2;
}
.idxMarquee__wrap::before{
  left:0;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(247,247,247,0) 100%);
}
.idxMarquee__wrap::after{
  right:0;
  background: linear-gradient(270deg, #FFFFFF 0%, rgba(247,247,247,0) 100%);
}

/* track that moves */
.idxMarquee__track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  will-change: transform;
  animation: idxMarqueeMove 22s linear infinite;
  padding: 0 22px;
}

/* logo item */
.idxMarquee__item{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  opacity: .95;
  transition: transform .15s ease, opacity .15s ease;
}
.idxMarquee__item:hover{
  transform: translateY(-1px) scale(1.03);
  opacity: 1;
}

/* logo sizing */
.idxMarquee__item img{
  height: 34px;            /* adjust size here */
  width: auto;
  object-fit: contain;
  display:block;
  filter: none;
}

/* Make the thumbnail look clickable */
.ojsLightboxThumb img{
  width: 100%;
  height: auto;
  display: block;
  cursor: zoom-in;
  border-radius: 16px;
}

/* LIGHTBOX overlay (hidden by default) */
.ojsLightbox{
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

/* Show overlay when targeted (#jospaPoster) */
.ojsLightbox:target{
  opacity: 1;
  pointer-events: auto;
}

/* Dark backdrop */
.ojsLightboxBackdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
}

/* Panel holds the image; allows scroll for tall posters */
.ojsLightboxPanel{
  position: relative;
  margin: 0;
  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  background: rgba(0,0,0,.08);
  padding: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Full image inside overlay */
.ojsLightboxPanel img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.ojsLightboxClose{
  position: sticky;         /* stays visible when you scroll inside panel */
  top: 8px;
  margin-left: auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 28px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Small-screen tweak */
@media (max-width: 520px){
  .ojsLightboxPanel{
    width: 94vw;
    max-height: 94vh;
    padding: 10px;
    border-radius: 14px;
  }
}

/* ====== FORCE FULLSCREEN OVERLAY (OJS-safe) ====== */
.ojsLightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important; /* super high to beat theme */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;

  /* IMPORTANT: dark overlay lives here too */
  background: rgba(0,0,0,.90) !important;
}

.ojsLightbox:target{
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop link: keep it, but force darkness too */
.ojsLightboxBackdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.90) !important;
  z-index: 1 !important;
}

/* Panel (the image container) */
.ojsLightboxPanel{
  position: fixed !important;
  z-index: 2 !important;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;

  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
  background: rgba(0,0,0,.08);
  padding: 14px;
}

.ojsLightboxPanel img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.ojsLightboxClose{
  position: sticky;
  top: 8px;
  margin-left: auto;

  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 28px;
  line-height: 1;

  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* ===== Posters grid (optional nice hover) ===== */
.jp-postersGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 820px){
  .jp-postersGrid{ grid-template-columns: 1fr; }
}

.jp-posterCard img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  cursor: zoom-in;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.jp-posterLink:hover img{
  transform: scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

/* ===== CSS-only Lightbox (OJS-safe + forced dark overlay) ===== */
.jp-lightbox{
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;

  /* Force dark overlay even if theme overrides backdrop */
  background: rgba(0,0,0,.90) !important;
}

.jp-lightbox:target{
  opacity: 1;
  pointer-events: auto;
}

/* Clickable dark area to close */
.jp-lightboxBackdrop{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.90) !important;
  z-index: 1 !important;
}

/* Panel */
.jp-lightboxPanel{
  position: fixed !important;
  z-index: 2 !important;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: min(980px, 92vw);
  max-height: 92vh;
  overflow: auto;

  margin: 0;
  padding: 14px;
  border-radius: 18px;

  background: rgba(0,0,0,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.65);
}

/* Full image */
.jp-lightboxPanel img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  cursor: zoom-out;
}

/* Close button */
.jp-lightboxClose{
  position: sticky;
  top: 8px;
  margin-left: auto;

  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;

  text-decoration: none;
  font-size: 28px;
  line-height: 1;

  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(6px);
}

/* Mobile tweak */
@media (max-width: 520px){
  .jp-lightboxPanel{
    width: 94vw;
    max-height: 94vh;
    padding: 10px;
    border-radius: 14px;
  }
}

/* ===== Hide scrollbar but keep scroll ===== */
.jp-lightboxPanel{
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none;/* old Edge/IE */
}

.jp-lightboxPanel::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.jp-lightboxPanel{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}


/* ===== Hide scrollbar but keep scroll ===== */
.ojsLightboxPanel{
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none;/* old Edge/IE */
}

.ojsLightboxPanel::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.ojsLightboxPanel{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
}