/* =========================================================
   JPPD — PREMIUM NAVY DOMINANT + BATIK (ELEGANT + STABLE)
   OJS 3.4.0.9
   FULL CSS — COPY/PASTE READY

   Includes:
   - Navy dominant header & navigation
   - Batik watermark background (kawung + parang modern)
   - Premium cards & hero
   - Article cards + PDF CTA
   - Sidebar batik accent
   - Footer navy
   - Archives GRID 2 columns (grid list + FLEX card)
   - Archives list tidy: title hierarchy + meta badge + uniform description height
   ========================================================= */

/* =========================================================
   1) BRAND VARIABLES
   ========================================================= */
:root{
  --navy: #1f344a;
  --navy-dark: #152636;
  --navy-soft: #2a4561;

  --gold: #c28a5b;
  --peach: #f4c7c3;
  --sky: #c3e1f2;

  --text: #0f172a;
  --muted: #64748b;

  --surface: #ffffff;
  --surface-soft: rgba(255,255,255,.95);

  --border: #e5e7eb;

  --radius: 18px;
  --radius-sm: 12px;

  --shadow: 0 18px 50px rgba(15,23,42,.18);
  --shadow-sm: 0 10px 24px rgba(15,23,42,.16);

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   2) GLOBAL BASE + BATIK BACKGROUND
   ========================================================= */
html{ scroll-behavior:smooth; }

body{
  background-color:#eef2f7;

  /* Batik Kawung + Parang Modern (visible but elegant) */
  background-image:
    radial-gradient(circle at 25% 25%, rgba(31,52,74,.10) 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, rgba(31,52,74,.10) 2px, transparent 2px),
    repeating-linear-gradient(
      45deg,
      rgba(31,52,74,.08),
      rgba(31,52,74,.08) 2px,
      transparent 2px,
      transparent 26px
    ),
    repeating-radial-gradient(
      circle at center,
      rgba(244,199,195,.14) 0px,
      rgba(244,199,195,.14) 1px,
      transparent 1px,
      transparent 36px
    );

  background-size:
    56px 56px,
    56px 56px,
    220px 220px,
    260px 260px;

  background-attachment:fixed;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  line-height:1.65;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color:var(--navy); text-decoration:none; }
a:hover{ text-decoration:underline; }

.pkp_structure_page,
.pkp_structure_body,
.pkp_structure_main,
.pkp_structure_content{
  background:transparent;
}

/* =========================================================
   3) HEADER — NAVY POWER + SUBTLE STRIP
   ========================================================= */
.pkp_structure_head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,var(--navy-dark),var(--navy));
  border-bottom:4px solid var(--gold);
}

.pkp_structure_head::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.08) 2px,
      transparent 2px,
      transparent 18px
    );
  opacity:.22;
  pointer-events:none;
}

.pkp_site_name a,
.pkp_site_name .is_text{
  color:#fff !important;
  font-weight:900;
  letter-spacing:.3px;
  text-decoration:none !important;
}
.pkp_site_name img{
  max-height:58px;
  width:auto;
}

/* =========================================================
   4) NAVIGATION — NAVY PILLS
   ========================================================= */
.pkp_navigation_primary_wrapper{
  background:rgba(21,38,54,.95);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.pkp_navigation_primary > li > a{
  color:#fff !important;
  font-weight:800;
  padding:12px 15px;
  border-radius:999px;
  transition:transform .15s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  text-decoration:none !important;
}

.pkp_navigation_primary > li > a:hover{
  background:rgba(255,255,255,.15);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

.pkp_navigation_primary > li.current > a{
  background:linear-gradient(180deg,var(--gold),#b77a4a);
  color:#fff !important;
}

/* Search (if visible) */
.pkp_search .search_controls input[type="text"],
.pkp_search .search_controls input[type="search"]{
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.10) !important;
  color: #ffffff !important;
}
.pkp_search .search_controls input::placeholder{ color: rgba(255,255,255,.75); }

/* =========================================================
   5) GLOBAL CARDS / SURFACES
   ========================================================= */
.page,
.obj_issue_toc,
.obj_issue_summary,
.obj_article_summary,
.obj_article_details,
.cmp_announcements,
.cmp_notification,
.pkp_structure_sidebar .pkp_block{
  background:var(--surface-soft);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

/* Breadcrumbs chip */
.cmp_breadcrumbs{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   6) HERO — CURRENT ISSUE
   ========================================================= */
.current_issue,
.obj_issue_toc{
  position:relative;
  overflow:hidden;
}

.current_issue::before,
.obj_issue_toc::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(650px 320px at 12% 10%, rgba(194,138,91,.34), transparent 60%),
    radial-gradient(750px 320px at 92% 0%, rgba(195,225,242,.38), transparent 60%);
  pointer-events:none;
}

.current_issue > *,
.obj_issue_toc > *{
  position:relative;
  z-index:1;
}

/* Volume/Issue subtitle spacing (not too close to edge) */
.obj_issue_toc .heading,
.current_issue .heading{
  padding-left: 42px;
  padding-right: 42px;
}
.obj_issue_toc .heading .sub_title,
.current_issue .heading .sub_title{
  display:inline-block;
  margin-top:14px;
  padding:8px 18px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(31,52,74,.22);
  font-weight:850;
  color: var(--navy-dark);
}

/* =========================================================
   7) ARTICLE LIST — PREMIUM CARDS + PDF CTA
   ========================================================= */
.obj_article_summary{
  padding:18px;
  margin-bottom:14px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.obj_article_summary:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(15,23,42,.30);
}

.obj_article_summary .title a{
  font-weight:900;
  color:var(--navy-dark) !important;
  text-decoration:none !important;
}

/* PDF CTA button */
.obj_article_summary .galleys a,
.obj_article_details .galleys a{
  display:inline-block;
  background:linear-gradient(180deg,var(--navy),var(--navy-dark));
  color:#fff !important;
  padding:10px 16px;
  border-radius:999px;
  font-weight:850;
  text-decoration:none !important;
  transition:transform .15s var(--ease), box-shadow .18s var(--ease);
}
.obj_article_summary .galleys a:hover,
.obj_article_details .galleys a:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}

/* Article details readability */
.obj_article_details{
  padding:18px 20px;
}
.obj_article_details .title{
  font-weight:900;
  letter-spacing:-.2px;
}
.obj_article_details .abstract,
.obj_article_details .item.abstract{
  line-height:1.9;
  color:#334155;
}

/* =========================================================
   8) SIDEBAR — BATIK ACCENT (SOFT)
   ========================================================= */
.pkp_structure_sidebar .pkp_block{
  position:relative;
  padding:16px;
  overflow:hidden;
}
.pkp_structure_sidebar .pkp_block::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(31,52,74,.05),
      rgba(31,52,74,.05) 2px,
      transparent 2px,
      transparent 18px
    );
  opacity:.25;
  pointer-events:none;
}
.pkp_structure_sidebar .pkp_block .title{
  font-weight:900;
  color:var(--navy-dark);
  position:relative;
}

/* =========================================================
   9) ARCHIVES — GRID 2 COLUMNS (ROBUST + TIDY)
   ========================================================= */
/* Grid the list container (supports multiple theme variants) */
.page_archives ul.issues,
.page_archives ul.cmp_issue_list,
.page_archives ul.issues_archive,
.page_archives .cmp_issue_list,
.page_archives .issues_archive{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Clean list items */
.page_archives ul.issues > li,
.page_archives ul.cmp_issue_list > li,
.page_archives ul.issues_archive > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Each issue card: FLEX (stable; text always fits) */
.page_archives .obj_issue_summary{
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;

  padding: 18px !important;
  border-radius: var(--radius) !important;
  background: var(--surface-soft) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: var(--shadow) !important;

  min-width: 0 !important;
}

/* Cover fixed width (consistent) */
.page_archives .obj_issue_summary .cover{
  flex: 0 0 140px !important;
  max-width: 140px !important;
  margin: 0 !important;
}
.page_archives .obj_issue_summary .cover img{
  width: 100% !important;
  height: auto !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  display: block !important;
}

/* Text area must be shrinkable */
.page_archives .obj_issue_summary .description{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.7 !important;
  color: #334155 !important;
  position: relative !important;
}

/* Title hierarchy */
.page_archives .obj_issue_summary .title{
  margin: 2px 0 6px 0 !important;
  line-height: 1.25 !important;
}
.page_archives .obj_issue_summary .title a{
  font-weight: 950 !important;
  font-size: 16px !important;
  color: var(--navy-dark) !important;
  text-decoration: none !important;
}
.page_archives .obj_issue_summary .title a:hover{
  color: var(--navy) !important;
}

/* Meta (Vol/No/Year) as badge (applies if theme uses these classes) */
.page_archives .obj_issue_summary .meta,
.page_archives .obj_issue_summary .series,
.page_archives .obj_issue_summary .published{
  display: inline-block !important;
  margin: 0 0 10px 0 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(31,52,74,.06) !important;
  border: 1px solid rgba(31,52,74,.10) !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
}

/* Description clamp to keep cards uniform (elegant) */
.page_archives .obj_issue_summary .description p{
  margin: 0 0 10px 0 !important;

  overflow-wrap: anywhere !important;
  word-break: normal !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;   /* adjust 4/5/6 */
  overflow: hidden !important;
}

/* Soft fade at bottom of description (premium) */
.page_archives .obj_issue_summary .description::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  pointer-events:none;
}

/* =========================================================
   10) FOOTER — NAVY BATIK STRIP
   ========================================================= */
.pkp_structure_foot{
  background:
    linear-gradient(180deg,var(--navy),var(--navy-dark)),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.08) 2px,
      transparent 2px,
      transparent 18px
    );
  border-top:4px solid var(--gold);
  color:#fff;
}
.pkp_structure_foot a{ color:#e5e7eb; }

/* =========================================================
   11) RESPONSIVE
   ========================================================= */
@media (max-width: 1024px){
  .page_archives ul.issues,
  .page_archives ul.cmp_issue_list,
  .page_archives ul.issues_archive,
  .page_archives .cmp_issue_list,
  .page_archives .issues_archive{
    gap: 14px !important;
  }

  .page_archives .obj_issue_summary .cover{
    flex-basis: 130px !important;
    max-width: 130px !important;
  }
}

/* Mobile: 1 column grid + stacked card */
@media (max-width: 768px){
  body{ background-attachment: scroll; }

  .obj_issue_toc .heading,
  .current_issue .heading{
    padding-left: 18px;
    padding-right: 18px;
  }

  .page_archives ul.issues,
  .page_archives ul.cmp_issue_list,
  .page_archives ul.issues_archive,
  .page_archives .cmp_issue_list,
  .page_archives .issues_archive{
    grid-template-columns: 1fr !important;
  }

  .page_archives .obj_issue_summary{
    flex-direction: column !important;
  }

  .page_archives .obj_issue_summary .cover{
    flex: 0 0 auto !important;
    max-width: 240px !important;
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   JPPD – RIGHT SIDEBAR (FULL CSS – FINAL)
   Compatible: OJS 3.4.x
   ========================================================= */

/* ---------- BASE CARD ---------- */
.jppd-menu-right{
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
  margin-bottom: 16px;
  overflow: hidden;
}

/* ---------- HEADER ---------- */
.jppd-menu-head{
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(31,52,74,.10),
    rgba(194,138,91,.08)
  );
  border: 1px solid rgba(31,52,74,.12);
  margin-bottom: 12px;
}

.jppd-menu-title{
  font-weight: 950;
  font-size: 15px;
  color: #152636;
  letter-spacing: .2px;
}

.jppd-menu-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

/* ---------- MENU ITEM (TEXT) ---------- */
.jppd-menu-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.95);
  text-decoration: none !important;
  margin-bottom: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.jppd-menu-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.16);
  border-color: rgba(31,52,74,.28);
}

/* ---------- ICON ---------- */
.jppd-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(31,52,74,.08);
  border: 1px solid rgba(31,52,74,.12);
  color: #1f344a;
  flex: 0 0 auto;
  font-size: 16px;
}

.jppd-menu-text{ min-width: 0; }

.jppd-menu-label{
  display: block;
  font-weight: 900;
  font-size: 13px;
  color: #152636;
  line-height: 1.2;
}

.jppd-menu-desc{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- ARROW ---------- */
.jppd-menu-arrow{
  margin-left: auto;
  font-size: 20px;
  color: rgba(21,38,54,.55);
}

/* ---------- CTA BUTTON ---------- */
.jppd-menu-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg,#1f344a,#152636);
  color: #fff !important;
  font-weight: 900;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.jppd-menu-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(15,23,42,.20);
}

/* ---------- MINI LINKS ---------- */
.jppd-menu-mini{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.jppd-menu-mini a{
  color: #1f344a !important;
  text-decoration: none !important;
}

.jppd-menu-mini a:hover{
  text-decoration: underline !important;
}

/* =========================================================
   LOGO GRID (INDEXING, TEMPLATE, TOOLS, TURNITIN)
   ========================================================= */

.jppd-logo-grid{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.jppd-template-grid{ grid-template-columns: repeat(2,1fr); }
.jppd-similarity-grid{ grid-template-columns: repeat(2,1fr); }
.jppd-tools-grid{ grid-template-columns: repeat(2,1fr); }

/* Logo card */
.jppd-logo-grid a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Logo image */
.jppd-logo-grid img{
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(0%);
  opacity: .85;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

/* Hover */
.jppd-logo-grid a:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15,23,42,.18);
  border-color: rgba(31,52,74,.35);
}

.jppd-logo-grid a:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* =========================================================
   FOOTER – INDEXED BY (FULL COLOR + UNIFORM SIZE)
   ========================================================= */

.jppd-indexed-footer{
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;

  /* NAVY PREMIUM BACKGROUND */
  background:
    linear-gradient(180deg, rgba(31,52,74,.92), rgba(21,38,54,.96)),
    repeating-linear-gradient(
      -45deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.08) 2px,
      transparent 2px,
      transparent 18px
    );

  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* Title */
.jppd-indexed-title{
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .4px;
  color: #ffffff;
  margin-bottom: 12px;
}

/* Logo container */
.jppd-logo-strip{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Logo card */
.jppd-logo-strip a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 120px;        /* 🔑 semua kartu sama */
  height: 56px;

  padding: 8px;
  border-radius: 14px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.35);

  transition: transform .18s ease, box-shadow .18s ease;
}

/* Logo image — FULL COLOR */
.jppd-logo-strip img{
  width: 100%;
  height: 100%;
  object-fit: contain;

  filter: none !important;   /* ❌ hapus grayscale */
  opacity: 1 !important;

  transition: transform .18s ease;
}

/* Hover effect */
.jppd-logo-strip a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}

.jppd-logo-strip a:hover img{
  transform: scale(1.05);
}

/* =========================================================
   JPPD PATCH — FOOTER INDEXED BY RAPiH (ONLY FOOTER)
   Paste at the VERY END of your CSS
   ========================================================= */

/* 1) Rapikan footer OJS agar tidak “nabrak” komponen indexed */
.pkp_structure_foot{
  padding: 26px 14px !important;
}
.pkp_structure_foot .pkp_footer_content,
.pkp_structure_foot .pkp_footer_content *{
  box-sizing: border-box !important;
}

/* 2) Kartu indexed footer tetap proporsional & center */
.jppd-indexed-footer{
  max-width: 1200px !important;
  margin: 18px auto 0 auto !important;
  padding: 18px !important;
}

/* 3) Judul selalu center dan tidak mepet */
.jppd-indexed-title{
  text-align: center !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.3 !important;
}

/* 4) Strip logo: center, wrap rapi, jarak konsisten */
.jppd-logo-strip{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 12px !important;      /* rapi di 2 dimensi */
  margin: 0 !important;
  padding: 0 !important;
}

/* 5) Kartu logo: ukuran seragam, tidak melebar karena theme */
.jppd-logo-strip a{
  width: 120px !important;
  height: 56px !important;
  padding: 8px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  text-decoration: none !important;

  overflow: hidden !important;
}

/* 6) Gambar: selalu fit & tidak “loncat” */
.jppd-logo-strip img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* 7) Jika ada <p> / <br> / list bawaan footer yang bikin renggang */
.jppd-indexed-footer p,
.jppd-indexed-footer ul,
.jppd-indexed-footer li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 8) Responsif: biar tidak kepotong di HP */
@media (max-width: 768px){
  .pkp_structure_foot{ padding: 22px 12px !important; }

  .jppd-indexed-footer{
    padding: 16px !important;
    margin-top: 14px !important;
  }

  .jppd-logo-strip a{
    width: 108px !important;
    height: 52px !important;
  }
}

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

@media (max-width: 768px){
  .jppd-logo-grid{
    grid-template-columns: repeat(2,1fr);
  }
}


/* =========================================================
   TOOLTIP ICON + TEXT (PREMIUM)
   ========================================================= */

.jppd-logo-tooltip{ position: relative; }

/* Tooltip container */
.jppd-tooltip{
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
}

/* Tooltip box */
.jppd-tooltip-icon{
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg,#1f344a,#152636);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  white-space: nowrap;
}

/* Icon circle */
.jppd-tooltip-icon .tt-icon{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Text */
.jppd-tooltip-icon .tt-text strong{
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.jppd-tooltip-icon .tt-text small{
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: .9;
  margin-top: 2px;
}

/* Arrow */
.jppd-tooltip-icon::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:6px;
  border-style:solid;
  border-color:#152636 transparent transparent transparent;
}

/* Hover show */
.jppd-logo-tooltip:hover .jppd-tooltip{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================================
   PDF PREVIEW (HOVER)
   ========================================================= */

.jppd-has-preview{
  position: relative;
}

/* Preview container */
.jppd-pdf-preview{
  position: absolute;
  top: 50%;
  left: 110%;
  width: 320px;
  height: 420px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,.30);
  border: 1px solid rgba(15,23,42,.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) scale(.96);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 50;
}

/* Iframe */
.jppd-pdf-preview iframe{
  width: 100%;
  height: 100%;
  border: none;
}

/* Show on hover */
.jppd-has-preview:hover .jppd-pdf-preview{
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

/* Mobile safety: disable preview */
@media (max-width: 768px){
  .jppd-pdf-preview{
    display: none;
  }
}


/* =========================================================
   PATCH: READABILITY FIX (TEXT LOOKS TOO LIGHT/NOISY)
   Paste at the VERY END of your CSS
   ========================================================= */

/* 1) Stabilkan ukuran teks dasar */
html { font-size: 16px; }
body { line-height: 1.75; }

/* 2) Buat area konten utama SOLID putih (motif batik tidak tembus) */
.pkp_structure_main .page,
.pkp_structure_main .obj_article_details,
.pkp_structure_main .cmp_announcements,
.pkp_structure_main .cmp_notification,
.pkp_structure_main .obj_issue_toc,
.pkp_structure_main .obj_issue_summary{
  background: #ffffff !important;              /* <-- penting */
  box-shadow: 0 16px 40px rgba(15,23,42,.12) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

/* 3) Tipografi khusus isi halaman (About / Ethics / Policies / dll) */
.pkp_structure_main .page .page_content,
.pkp_structure_main .page .content,
.pkp_structure_main .page .pkp_page_content{
  color: #111827 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  letter-spacing: .1px;
}

/* Paragraf dan list agar rapi (tidak “tipis” dan tidak rapat) */
.pkp_structure_main .page p,
.pkp_structure_main .page li{
  color: #111827 !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.95 !important;
}

/* Heading lebih tegas & tidak terlalu berat */
.pkp_structure_main .page h1{
  font-size: 26px !important;
  line-height: 1.2 !important;
  color: #0f172a !important;
  font-weight: 900 !important;
  letter-spacing: -.2px;
}
.pkp_structure_main .page h2{
  font-size: 20px !important;
  line-height: 1.25 !important;
  color: #0f172a !important;
  font-weight: 850 !important;
  margin-top: 18px !important;
}
.pkp_structure_main .page h3{
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 4) Lebarkan area baca + padding nyaman */
.pkp_structure_main .page{
  padding: 28px 32px !important;
}
@media (max-width: 768px){
  .pkp_structure_main .page{ padding: 18px 16px !important; }
}

/* 5) Rapikan teks yang sering “abu” di OJS */
.pkp_structure_main .page .pkp_helpers_text,
.pkp_structure_main .page .description,
.pkp_structure_main .page .sub_title{
  color: #334155 !important;
}

/* 6) Hindari huruf terlihat “pucat” karena opacity global */
.pkp_structure_main *{
  text-shadow: none !important;
  filter: none !important;
}

/* =========================================================
   JPPD PATCH — ARCHIVES RAPiH (sesuai HTML Anda)
   Page: .page_issue_archive (OJS 3.4.x)
   Paste at the VERY END of your CSS
   ========================================================= */

/* 0) Pastikan kontainer archives bersih */
.page_issue_archive .issues_archive{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 16px !important;
}

/* 1) Kartu issue: grid cover + konten */
.page_issue_archive .issues_archive .obj_issue_summary{
  display: grid !important;
  grid-template-columns: 150px 1fr !important;
  gap: 16px !important;
  align-items: start !important;

  padding: 18px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;

  min-width: 0 !important;
}

/* 2) Cover seragam */
.page_issue_archive .issues_archive .obj_issue_summary > a.cover{
  width: 150px !important;
  max-width: 150px !important;
  margin: 0 !important;
}
.page_issue_archive .issues_archive .obj_issue_summary > a.cover img{
  width: 150px !important;
  height: 190px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.14) !important;
}

/* 3) Header (h2) dibikin rapi */
.page_issue_archive .issues_archive .obj_issue_summary > h2{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
}

/* Judul volume (link) */
.page_issue_archive .issues_archive .obj_issue_summary > h2 > a.title{
  display: block !important;
  margin: 2px 0 8px 0 !important;

  font-weight: 950 !important;
  font-size: 18px !important;
  color: #152636 !important;
  text-decoration: none !important;

  overflow-wrap: anywhere !important;
}
.page_issue_archive .issues_archive .obj_issue_summary > h2 > a.title:hover{
  color: #1f344a !important;
  text-decoration: underline !important;
}

/* Badge series (Vol/No/Year) */
.page_issue_archive .issues_archive .obj_issue_summary > h2 > .series{
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 0 12px 0 !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;

  background: rgba(31,52,74,.06) !important;
  border: 1px solid rgba(31,52,74,.12) !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  color: #334155 !important;
}

/* 4) Deskripsi: tampil rapi dan seragam */
.page_issue_archive .issues_archive .obj_issue_summary > .description{
  position: relative !important;
  min-width: 0 !important;
}

/* Hanya tampilkan paragraf pertama (opsi paling rapi) */
.page_issue_archive .issues_archive .obj_issue_summary > .description p{
  margin: 0 0 10px 0 !important;
  font-size: 14.8px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
}
.page_issue_archive .issues_archive .obj_issue_summary > .description p + p{
  display: none !important;   /* <-- bikin kartu seragam */
}

/* Kalau Anda ingin tetap 2-3 paragraf tapi dibatasi, pakai clamp ini (aktifkan, dan hapus rule p+p di atas)
.page_issue_archive .issues_archive .obj_issue_summary > .description{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5 !important;
  overflow: hidden !important;
}
*/

/* 5) Responsif */
@media (max-width: 768px){
  .page_issue_archive .issues_archive .obj_issue_summary{
    grid-template-columns: 1fr !important;
  }
  .page_issue_archive .issues_archive .obj_issue_summary > a.cover{
    width: 100% !important;
    max-width: 240px !important;
  }
  .page_issue_archive .issues_archive .obj_issue_summary > a.cover img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* FIX: ICON ALWAYS VISIBLE + SWITCH ON HOVER (NO JS) */
.jppd-ico.tt-icon{
  position: relative;
  overflow: hidden;
}

/* default icon */
.jppd-ico.tt-icon .icon-default{
  display: inline-block;
  transition: opacity .25s ease, transform .25s ease;
}

/* hover icon */
.jppd-ico.tt-icon .icon-hover{
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .25s ease;
}

/* switch */
.jppd-menu-item:hover .jppd-ico.tt-icon .icon-default{
  opacity: 0;
  transform: scale(1.25);
}
.jppd-menu-item:hover .jppd-ico.tt-icon .icon-hover{
  opacity: 1;
  transform: scale(1);
}