/* ================================
   INKARA THEME (Optimized v2)
   – konsolidasi tokens
   – aksesibilitas & performa
   – kompatibel OJS (.pkp_*)
==================================*/

/* ---- Google Fonts (minimal) ----
   Tips performa: lebih baik pindah ke <link rel="preconnect"> + <link href=...> di header.
   Untuk sekarang tetap @import agar bisa langsung tempel.
*/
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,300..900;1,300..900&display=swap");

/* ---------- Design Tokens ---------- */
:root{
  /* Palette */
  --inkara-navy: #0f2747;
  --inkara-navy-2:#0b214a;
  --inkara-gold: #f0b429;       /* gold baru (kontras bagus) */
  --inkara-gold-2:#cfa64c;      /* gold alternatif */
  --inkara-sky:  #f5f7fb;
  --inkara-ink:  #14202b;
  --inkara-muted:#798391;
  --inkara-white:#ffffff;

  /* Surfaces & Lines */
  --inkara-line: rgba(14,42,71,.08);
  --inkara-card:#ffffff;

  /* Shadows */
  --inkara-shadow: 0 8px 24px rgba(15,39,71,.08);
  --inkara-shadow-sm: 0 4px 12px rgba(15,39,71,.06);

  /* Sizing */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Indexing logo height */
  --logo-h: 28px; /* ubah 26–30 sesuai kebutuhan */
}

/* ---------- Reset ringkas & aksesibilitas ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ background-color: var(--inkara-sky); }
body{
  margin:0;
  color:var(--inkara-ink);
  font-family:'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  background:transparent;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--inkara-gold) 70%, #fff);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation: none !important; transition: none !important; }
}

/* ---------- Texture Background (SVG inline, dipadatkan) ---------- */
html{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none'><defs><pattern id='hex' width='80' height='69.282' patternUnits='userSpaceOnUse'><path d='M20 0 L60 0 L80 34.641 L60 69.282 L20 69.282 L0 34.641 Z' stroke='%23d9dee7' stroke-width='1.2' fill='none'/></pattern></defs><rect width='160' height='160' fill='url(%23hex)'/></svg>");
  background-repeat: repeat;
  background-attachment: fixed;
}

/* ---------- Header / Branding ---------- */
.pkp_site_nav_toggle{ width:3.857rem; height:3.4rem; }
.pkp_site_name_wrapper{ padding:0; height:auto; }
.pkp_site_name .is_img{ margin:0; padding:0; }
.pkp_site_name .is_img img{ max-height:100%; max-width:100%; }

.has_site_logo .pkp_head_wrapper{ padding-right:0; }
.has_site_logo .pkp_structure_page .pkp_head_wrapper{ padding-left:0; padding-right:0; }

@media (min-width:992px){
  .pkp_navigation_user_wrapper{ top:10px; width:initial; transform:none; }
  .pkp_site_name_wrapper .pkp_site_name{ left:0; padding:.071rem 0; }
}
@media (max-width:992px){
  .pkp_site_name_wrapper{ height:3.4rem; }
  .pkp_site_name_wrapper .pkp_site_name{ left:3.2rem; height:54px; padding:0; }
  .pkp_site_nav_menu{ background:#fff; box-shadow: var(--inkara-shadow); }
}

/* ---------- Primary Navigation ---------- */
#navigationPrimary ul{ background:#fff; color:var(--inkara-ink); }
#navigationPrimary a{
  color:rgba(0,0,0,.68);
  font-weight:600;
  letter-spacing:.2px;
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
#navigationPrimary a:hover,
#navigationPrimary a:focus{
  color:var(--inkara-navy);
  border-bottom-color: var(--inkara-gold);
}

/* ---------- Home / Announcements border fix ---------- */
@media (min-width:768px){
  .pkp_page_index .cmp_announcements>.obj_announcement_summary:before,
  .pkp_page_index .cmp_announcements .more:before{ border-left:none; }
}

/* ---------- Layout Cards / Blocks ---------- */
.pkp_block{
  box-shadow: var(--inkara-shadow);
  margin:10px 0 0 0;
  padding:0;
  background:#fff;
  border-top:6px solid var(--inkara-gold);
  border-radius: var(--radius-sm);
}
@media (min-width:992px){ .pkp_block{ margin:15px 0 0 15px; } }

.pkp_block .title{
  display:inline-block;
  padding-bottom:.6em;
  border-bottom:3px solid var(--inkara-gold);
  font-weight:800;
  text-transform:uppercase;
  width:100%;
  color:var(--inkara-navy-2);
}

/* Konten utama */
.page, .obj_article_summary, article .main_entry{ text-align:justify; }

body .pkp_structure_page{ background:transparent; box-shadow:none; }
.pkp_structure_content .pkp_structure_main{
  box-shadow: var(--inkara-shadow);
  background:#fff;
  margin-top:15px;
  border-top:7px solid var(--inkara-gold);
  border-radius: var(--radius-sm);
}

/* Keyword cloud & block khusus */
.block_Keywordcloud{
  background:#fff; border-top:7px solid var(--inkara-gold);
  padding:20px; border-radius: var(--radius-sm);
}
.block_Keywordcloud .content{ border-top:none; }
.pkp_structure_sidebar .block_Keywordcloud .title{
  border-bottom:1px solid rgba(156,156,156,.2);
  padding-bottom:14px; font-size:20px; font-weight:800; color:#797979;
}

/* ---------- Sidebar Menu (Cards) ---------- */
.container-block{ width:100%; padding:0; margin:0; }
.container-block .sidebar-block{ position:relative; width:100%; }
.container-block .sidebar-block ul{ display:flex; flex-direction:column; justify-content:center; width:100%; }
.container-block .sidebar-block ul .menus{
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  position:relative; background:#eef2f6; padding:10px; margin:2px; border-radius: var(--radius-sm);
  list-style:none; font-size:20px; z-index:1;
}
.container-block .sidebar-block ul .menus:before{
  transition:.25s; content:""; position:absolute; left:0; top:0; bottom:0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  width:10px; background:var(--inkara-gold); z-index:-1;
}
.container-block .sidebar-block ul .menus p{
  transition:.2s; font-size:14px; padding-left:6px; color:var(--inkara-ink); margin:0;
}
.container-block .sidebar-block ul .menus:hover:before{ width:80%; }
.container-block .sidebar-block ul .menus:hover p{ color:#fff; transform:translateX(5px); }

.container-block .sidebar-block .credits{
  position:absolute; bottom:0; width:100%; height:10vh;
  display:flex; justify-content:center; align-items:center;
}
.container-block .sidebar-block .credits p{
  cursor:pointer; font-family:'Afacad', sans-serif; font-size:18px; opacity:.7; transition:.2s; margin:0;
}
.container-block .sidebar-block .credits p a{
  text-decoration:none; background:var(--inkara-navy); padding:6px 10px; color:#fff; border-radius:6px;
}
.container-block .sidebar-block .credits p:hover{ opacity:1; }

/* Sidebar list menu (gradient hover) */
.sidebar-title{
  font-size:20px; font-weight:800; margin-bottom:20px;
  border-bottom:1px solid rgba(156,156,156,.2); padding-bottom:14px;
}
.sidebar-menu{ list-style:none; padding:0; margin:0; }
.pkp_block .content .sidebar-menu li{
  margin-bottom:5px; padding:0; border:1px solid #ececec; border-radius:3px;
}
.sidebar-menu a{
  display:flex; align-items:center; gap:12px; text-decoration:none; padding:12px 16px; border-radius:3px;
  font-size:13px; font-weight:700; position:relative; overflow:hidden; color:#616e7c;
  transition: transform .2s ease, color .2s ease;
}
.sidebar-menu a::before{
  content:""; position:absolute; inset:0; left:-100%; background:linear-gradient(135deg, var(--inkara-navy), var(--inkara-gold));
  transition: left .35s ease; z-index:-1;
}
.sidebar-menu a:hover{ color:#fff; transform: translateX(3px); }
.sidebar-menu a:hover::before{ left:0; }
.sidebar-menu a i{ min-width:22px; font-size:16px; opacity:.85; transition:.3s; }
.sidebar-menu a:hover i{ opacity:1; transform:scale(1.12); }

/* ---------- Buttons / Links ---------- */
.cmp_manuscript_button, .block_make_submission a, .obj_galley_link{
  background:var(--inkara-navy);
  color:#fff !important;
  border:1px solid var(--inkara-navy);
  border-radius:6px;
  padding:.55rem .9rem;
  font-weight:700;
  transition:.25s;
}
.cmp_manuscript_button:hover,
.block_make_submission a:hover,
.obj_galley_link:hover{
  background:var(--inkara-gold);
  border-color:var(--inkara-gold);
  color:#0b214a !important;
  text-decoration:none;
}

/* ---------- Footer wrapper ---------- */
.pkp_structure_page .pkp_structure_footer_wrapper{
  background:#fff; margin-top:15px; border-radius:6px; border-bottom:none;
  box-shadow: var(--inkara-shadow);
  border-top:4px solid var(--inkara-gold);
}

/* ---------- Minor fixes ---------- */
.menus em{ color:var(--inkara-navy); }
.pkp_brand_footer{ display:none; }
.pkp_structure_sidebar:before{ border-left:none; }
.pkp_page_index .homepage_about{ padding-top:0; padding-bottom:0; }
@media (max-width:992px){
  .pkp_page_index .homepage_about{ padding-top:2.143rem; padding-bottom:2.143rem; }
}
.pkp_structure_sidebar .pkp_block .title{ color:var(--inkara-navy-2); }

/* ---------- Editorial Team Card ---------- */
.sec-title{
  font-size:22px; font-weight:900; letter-spacing:.3px;
  color:var(--inkara-navy-2); margin:4px 0 8px;
}
.role-title{
  font-size:16px; font-weight:900; color:var(--inkara-navy-2);
  border-bottom:3px solid var(--inkara-gold); padding-bottom:6px; margin:22px 0 14px;
}
.editor-card{
  display:flex; gap:16px; background:#f8f9fc; border:1px solid #e6e8ef;
  border-radius: var(--radius); padding:16px; margin-bottom:18px; box-shadow: var(--inkara-shadow-sm);
}
.editor-photo{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:2px solid var(--inkara-gold); background:#fff;
}
.editor-body{ display:flex; flex-direction:column; justify-content:center; }
.editor-name{ font-size:15px; font-weight:900; color:var(--inkara-navy-2); margin-bottom:6px; }
.editor-affil{ font-size:13px; color:#5c677d; font-style:italic; margin-bottom:6px; }
.editor-links a{ font-size:12px; color:#0a58ca; text-decoration:none; }
.editor-links a:hover{ text-decoration:underline; }
@media (max-width:600px){
  .editor-card{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---------- Additional Menu (navy card) ---------- */
.block_additionalMenu .title{
  background:var(--inkara-navy-2); color:#fff; padding:10px 14px;
  font-weight:900; font-size:14px; border-left:4px solid var(--inkara-gold); margin-bottom:0;
}
.block_additionalMenu .content{ background:#061431; padding:0; }
.inkara-side-menu{ list-style:none; margin:0; padding:8px 0; }
.inkara-side-menu li a{
  display:block; padding:10px 14px; color:#fff; text-decoration:none; font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.06); transition: all .2s ease;
}
.inkara-side-menu li a:hover{ background:#102047; padding-left:18px; }

/* ---------- Gambar umum dalam block ---------- */
.pkp_block img{ max-width:100%; height:auto; display:block; }
.pkp_block a.image-button{ display:block; padding:6px; background:#fff; border:1px solid #e6e8ef; border-radius:6px; }

/* ---------- Konsistensi border top panel konten utama ---------- */
.pkp_structure_content .pkp_structure_main{ border-top:6px solid var(--inkara-navy-2); background:#fff; }

/* ---------- Journal Menu (INKARA) ---------- */
:root{
  --inkara-primary: #0e2a47;   /* navy */
  --inkara-accent:  var(--inkara-gold);
  --inkara-text:    #344255;
  --inkara-muted-2: #7d8aa2;
  --inkara-border: 1px solid var(--inkara-line);
}
.jm-card{
  background:var(--inkara-card); border:var(--inkara-border);
  border-radius:12px; box-shadow: var(--inkara-shadow); overflow:hidden;
}
.jm-title{
  font-weight:900; letter-spacing:.3px; text-transform:uppercase; font-size:.95rem;
  color:#fff; background:linear-gradient(135deg,var(--inkara-primary),#173a63);
  padding:.9rem 1rem; position:relative;
}
.jm-title::after{ content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--inkara-accent); }
.jm-list{ list-style:none; margin:0; padding:.35rem; }
.jm-list li{ margin:.25rem 0; }
.jm-list a{
  --pad:.85rem;
  position:relative; display:flex; align-items:center; gap:.65rem;
  padding:var(--pad) calc(var(--pad)+.25rem); border-radius:10px; text-decoration:none;
  color:var(--inkara-text); background:#fff; border:1px solid rgba(14,42,71,.07);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
  overflow:hidden;
}
.jm-list a::before{
  content:""; position:absolute; inset:0 auto 0 0; width:6px; border-radius:10px 0 0 10px;
  background:var(--inkara-accent); transform:scaleY(.12); transform-origin:top; transition:transform .22s ease; opacity:.85;
}
.jm-ico{
  display:grid; place-items:center; width:26px; height:26px; border-radius:6px;
  font-size:14px; line-height:1; color:var(--inkara-primary); background:rgba(14,42,71,.06);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.jm-list a:hover, .jm-list a:focus-visible{
  background:linear-gradient(180deg,#ffffff, #fbfdff); transform:translateX(4px);
  box-shadow:0 10px 20px rgba(14,42,71,.08); color:#10233d; outline:none;
}
.jm-list a:hover::before, .jm-list a:focus-visible::before{ transform:scaleY(1); }
.jm-list a:hover .jm-ico, .jm-list a:focus-visible .jm-ico{
  background:var(--inkara-primary); color:#fff; transform:scale(1.05);
}
.jm-list a.is-active{
  background:linear-gradient(135deg,#10406f 0%, #0e2a47 100%); color:#fff; border-color:transparent;
  box-shadow:0 12px 22px rgba(14,42,71,.16);
}
.jm-list a.is-active .jm-ico{ background:rgba(255,255,255,.18); color:#fff; }
.jm-list a.is-active::before{ transform:scaleY(1); }
@media (max-width:768px){
  .jm-title{ font-size:.9rem; }
  .jm-list a{ gap:.55rem; padding:.75rem .9rem; }
  .jm-ico{ width:24px; height:24px; font-size:13px; }
}

/* ---------- Indexing Badges (sejajar & proporsional) ---------- */
.idx-widget{
  background:#fff; border:1px solid #e4e4e4; border-radius: var(--radius);
  padding:12px; box-shadow: var(--inkara-shadow);
}
.idx-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px 14px;
}
.idx-badge{
  display:flex; align-items:center; justify-content:center;
  height:46px; padding:6px 10px; background:#fff;
  border:1px solid #dcdcdc; border-radius: var(--radius-sm);
  line-height:0; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.idx-badge:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.08); border-color:#cfcfcf; }
.idx-logo{
  max-height: var(--logo-h);  /* kunci tinggi visual logo => sejajar */
  width: auto; height: auto; object-fit: contain; object-position:center; display:block;
}
.idx-badge--text{
  font: 800 .95rem/1 'Montserrat', system-ui, sans-serif; color:#7a7a7a; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center; width:100%;
}
.idx-readmore{
  display:flex; align-items:center; gap:.45rem; margin:12px 2px 0;
  font-weight:800; font-size:.92rem; color:#6f6f6f; text-decoration:none;
}
.idx-readmore:hover{ color:#000; }
.idx-readmore svg{ width:16px; height:16px; flex:0 0 16px; }

@media (max-width:420px){
  .idx-grid{ gap:10px 12px; }
  .idx-badge{ height:44px; padding:6px 8px; }
  :root{ --logo-h: 26px; }
}

/* ==== FIX: Spasi judul & konten utama supaya tidak nabrak top border ==== */

/* Tambah ruang dalam panel konten utama */
.pkp_structure_content .pkp_structure_main{
  padding: 18px 22px 24px;    /* dulu 0 → jadi ada breathing room */
}

/* Atur margin & line-height heading di area konten utama */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main .page h1,
.pkp_structure_main .page h2{
  margin: 6px 0 14px;         /* beri jarak dari border atas & paragraf berikutnya */
  line-height: 1.25;
  word-break: break-word;     /* antisipasi judul panjang */
  overflow-wrap: anywhere;    /* cegah overflow di layar sempit */
}

/* Jarak antar paragraf lebih nyaman */
.pkp_structure_main p{ margin: 0 0 12px; }

/* Kalau ada paragraf langsung setelah h1/h2, beri sedikit jeda ekstra */
.pkp_structure_main h1 + p,
.pkp_structure_main h2 + p{ margin-top: 6px; }

/* Breadcrumb / judul bagian atas (jika ada) jangan mepet */
.cmp_breadcrumbs{ margin: 4px 0 10px; }

/* Responsif: di layar sempit, tambah sedikit padding samping */
@media (max-width: 768px){
  .pkp_structure_content .pkp_structure_main{
    padding: 16px 16px 20px;
  }
}

/* (Opsional) Haluskan tepi judul About section spesifik */
.pkp_structure_main .page h2.sec-title,
.pkp_structure_main .sec-title{
  margin-top: 8px;
}
/* =========================
   INKARA – Sidebar Polish Pack
   (tempel di akhir CSS Anda)
=========================*/

/* 0) matikan overflow horizontal tak sengaja */
html, body { overflow-x: hidden; }
.pkp_structure_page, .pkp_structure_content { max-width: 100%; }

/* 1) blok sidebar: spasi judul & isi dibikin konsisten + clipping radius */
.pkp_structure_sidebar .pkp_block{
  overflow: hidden;                 /* sudut rounded rapi */
  margin: 14px 0;                   /* jarak antar blok */
}
.pkp_structure_sidebar .pkp_block .title{
  padding: 8px 12px;                /* biar teks judul tak mepet tepi */
}
.pkp_structure_sidebar .pkp_block .content{
  padding: 10px 12px 12px;          /* ruang dalam isi blok */
}
.pkp_structure_sidebar .pkp_block .content > * + *{
  margin-top: 10px;                 /* jarak vertikal antar elemen dalam konten */
}

/* 2) tombol "Make a Submission" full width & tidak melebar keluar */
.block_make_submission a{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* 3) INDEXING: pastikan grid tak mepet tepi & tidak bikin scroll */
.idx-widget{ padding: 12px; }
.idx-grid{ gap: 12px 14px; }
.idx-badge{ height: 46px; padding: 6px 10px; }
.idx-logo{
  max-height: var(--logo-h);        /* semua logo sama tinggi → sejajar */
  width: auto; height: auto;
}

/* 4) ISSN (blok bawaan OJS) – rapi & center tanpa card baru */
#customblock-ISSN .content{
  text-align: center !important;    /* beberapa tema memaksa left */
  padding: 10px 12px 12px !important;
}
#customblock-ISSN .content p{
  margin: 6px 0;
  font-weight: 600;
  color: #666;
}
#customblock-ISSN .content img{
  display: block;
  margin: 6px auto 12px;
  max-width: 220px;                 /* skala proporsional barcode */
  width: 100%;
  height: auto;
}

/* 5) general images di sidebar: jangan lebih lebar dari kontainer */
.pkp_structure_sidebar img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* 6) konten utama: tambah napas atas-bawah biar tidak “cium” border */
.pkp_structure_content .pkp_structure_main{
  padding: 20px 22px 24px;
}
.pkp_structure_main h1,
.pkp_structure_main h2{
  margin: 8px 0 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* 7) responsif kecil: rapikan jarak */
@media (max-width: 768px){
  .pkp_structure_content .pkp_structure_main{ padding: 16px; }
  .idx-badge{ height: 44px; padding: 6px 8px; }
  #customblock-ISSN .content img{ max-width: 200px; }
}
 /* ---- Local tokens (khusus untuk blok ini) ---- */
    .jm-card{
      --navy: #0e2a47;         /* warna utama */
      --navy-2:#173a63;
      --gold: #f0b429;         /* aksen */
      --text: #344255;
      --muted:#7d8aa2;
      --line:  rgba(14,42,71,.08);
      --shadow:0 10px 24px rgba(14,42,71,.08);
      --radius:12px;
      --radius-sm:10px;
    }

    /* ---- Kartu/panel ---- */
    .jm-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    }

    /* opsional: kalau mau ada judul internal, tinggal tambah <div class="jm-title">JOURNAL MENU</div> */
    .jm-card .jm-title{
      font-weight:900; letter-spacing:.3px; text-transform:uppercase;
      font-size:.94rem; color:#fff;
      background:linear-gradient(135deg,var(--navy),var(--navy-2));
      padding:.85rem 1rem; position:relative;
    }
    .jm-card .jm-title::after{
      content:""; position:absolute; inset:auto 0 0 0; height:4px; background:var(--gold);
    }

    /* ---- List ---- */
    .jm-card .jm-list{
      list-style:none; margin:0; padding:.5rem;
      display:block;
    }
    .jm-card .jm-list li{ margin:.28rem 0; padding:0; }

    .jm-card .jm-list a{
      /* box */
      display:flex; align-items:center; gap:.65rem;
      width:100%; box-sizing:border-box;
      padding:.85rem 1rem;
      border:1px solid #e6e6e6;
      border-radius:var(--radius-sm);
      background:#fff;
      /* text */
      color:var(--text); font-weight:700; font-size:.92rem; text-decoration:none;
      /* effects */
      position:relative; overflow:hidden;
      transition: transform .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
    }

    /* left accent bar (halus) */
    .jm-card .jm-list a::after{
      content:""; position:absolute; left:0; top:0; bottom:0; width:6px;
      background:var(--gold); border-radius:var(--radius-sm) 0 0 var(--radius-sm);
      opacity:.85; transform:scaleY(.12); transform-origin:top; transition:transform .22s ease;
      z-index:0;
    }

    /* hover layer (menutup penuh) */
    .jm-card .jm-list a::before{
      content:""; position:absolute; inset:0; border-radius:inherit;
      background:linear-gradient(135deg, var(--navy), var(--navy-2));
      transform:translateX(-100%);
      transition:transform .35s ease;
      z-index:0;
    }

    /* isi selalu di atas layer */
    .jm-card .jm-list a > *{ position:relative; z-index:1; }

    /* teks ikut cerah saat hover */
    .jm-card .jm-list a:hover,
    .jm-card .jm-list a:focus-visible{
      color:#f0b429;
      transform:translateX(3px);
      border-color:transparent;
      box-shadow:0 10px 20px rgba(14,42,71,.08);
      outline:none;
    }
    .jm-card .jm-list a:hover::before,
    .jm-card .jm-list a:focus-visible::before{ transform:translateX(0); }
    .jm-card .jm-list a:hover::after,
    .jm-card .jm-list a:focus-visible::after{ transform:scaleY(1); }

    /* state aktif (halaman saat ini) */
    .jm-card .jm-list a.is-active,
    .jm-card .jm-list a[aria-current="page"]{
      color:#fff; border-color:transparent;
      background:linear-gradient(135deg,#10406f 0%, var(--navy) 100%);
      box-shadow:0 12px 22px rgba(14,42,71,.16);
    }
    .jm-card .jm-list a.is-active::before,
    .jm-card .jm-list a[aria-current="page"]::before{ transform:none; }
    .jm-card .jm-list a.is-active::after,
    .jm-card .jm-list a[aria-current="page"]::after{ transform:scaleY(1); }

    /* aksesibilitas */
    .jm-card .jm-list a:focus-visible{
      outline:3px solid color-mix(in srgb, var(--gold) 70%, #fff);
      outline-offset:2px;
    }

    /* responsif */
    @media (max-width: 768px){
      .jm-card .jm-list{ padding:.4rem; }
      .jm-card .jm-list a{ padding:.78rem .9rem; }
    }
    .inkara-footer{
      --navy:#0e2a47; --gold:#f0b429; --line:rgba(14,42,71,.14);
      --ink:#2b3544; --muted:#6f7a8c; --bg:#ffffff;
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
      background: var(--bg);
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow:0 10px 24px rgba(14,42,71,.08);
      margin:20px 0;
      overflow:hidden;
    }
    .inkara-footer .bar{height:6px;background:linear-gradient(90deg,var(--navy),#173a63);position:relative;}
    .inkara-footer .bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:80px;background:var(--gold);}

    /* grid 3 kolom: info ID | info EN | logo kanan */
    .inkara-footer .wrap{
      display:grid; grid-template-columns:1.25fr .85fr 180px; gap:22px;
      padding:18px 22px 16px; align-items:start;
    }
    .inkara-footer h3{margin:0 0 10px;font-weight:900;color:var(--navy);letter-spacing:.25px;font-size:1rem;}
    .inkara-footer p{margin:4px 0;color:var(--ink);line-height:1.55;font-size:.94rem}
    .inkara-footer ul{list-style:none;padding:0;margin:0;}
    .inkara-footer li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);margin:5px 0;font-size:.94rem;}
    .inkara-footer .ico{width:18px;height:18px;flex:0 0 18px;opacity:.9}
    .inkara-footer a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(14,42,71,.25);}
    .inkara-footer a:hover{color:var(--navy);border-bottom-color:var(--gold);}
    .inkara-footer .badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
    .inkara-footer .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:#fbfdff;font-weight:700;font-size:.82rem;}
    .inkara-footer .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}

    /* brand logo kanan */
    .inkara-footer .brand{
      display:flex; align-items:center; justify-content:flex-end;
    }
    .inkara-footer .brand .brandbox{
      border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#fff;
      display:grid; place-items:center; min-height:100%; box-shadow:0 6px 16px rgba(14,42,71,.06);
    }
    .inkara-footer .brand img{
      max-width:150px; width:100%; height:auto; object-fit:contain; display:block;
    }
    .inkara-footer .brand .caption{
      margin-top:6px; font-size:.8rem; color:#586377; text-align:center; font-weight:700; letter-spacing:.3px;
    }

    .inkara-footer .sep{height:1px;background:var(--line);margin:10px 0 6px;}
    .inkara-footer .copy{
      display:flex;justify-content:space-between;align-items:center;gap:10px;
      padding:10px 22px;background:#f7f9fc;border-top:1px solid var(--line);
      color:#536072;font-size:.92rem;
    }

    /* responsive → mode C (kompak) */
    @media (max-width: 920px){
      .inkara-footer .wrap{grid-template-columns:1fr 180px; gap:16px;}
      .inkara-footer section:nth-child(2){order:2}
      .inkara-footer .brand{order:3}
    }
    @media (max-width: 640px){
      .inkara-footer .wrap{grid-template-columns:1fr; padding:16px;}
      .inkara-footer .brand{justify-content:center;}
      .inkara-footer .brand img{max-width:130px;}
      .inkara-footer .copy{flex-direction:column;text-align:center;padding:12px;}
    }
    /* ===== scoped only for this block ===== */
.pkp_block.block_template{ 
  border-top:6px solid #b21f2d; background:#fff; border-radius:8px; 
  box-shadow:0 8px 22px rgba(0,0,0,.06); padding:12px 12px 14px; 
}
.pkp_block.block_template .title{
  font-weight:800; color:#1c2a39; text-transform:uppercase;
  padding-bottom:.5rem; border-bottom:2px solid rgba(0,0,0,.06); margin:0 0 .6rem;
}

/* kartu tombol besar */
.pkp_block.block_template .tpl-card{
  display:flex; align-items:center; gap:12px; position:relative;
  padding:14px; border:1px solid #e7e7e7; border-radius:12px; 
  background:#fff; text-decoration:none;
  box-shadow:0 6px 14px rgba(178,31,45,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pkp_block.block_template .tpl-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(178,31,45,.18);
  border-color:#d9cfd0;
}
.pkp_block.block_template .tpl-ico{ width:68px; height:68px; flex:0 0 68px; }
.pkp_block.block_template .tpl-text{ display:flex; flex-direction:column; line-height:1.2; }
.pkp_block.block_template .tpl-heading{ font-weight:900; color:#2e3a47; font-size:1.05rem; }
.pkp_block.block_template .tpl-mini{ color:#6c7581; font-size:.84rem; }

/* badge DOCX */
.pkp_block.block_template .tpl-badge{
  position:absolute; right:12px; top:12px;
  background:#b21f2d; color:#fff; font-weight:800; font-size:.75rem;
  padding:4px 8px; border-radius:999px; letter-spacing:.2px;
}

/* tombol kecil di bawah */
.pkp_block.block_template .tpl-actions{
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.pkp_block.block_template .btn-tpl{
  display:inline-block; padding:8px 12px; border-radius:8px;
  background:#b21f2d; color:#fff; font-weight:700; font-size:.85rem;
  text-decoration:none; border:1px solid #b21f2d; transition:.15s;
}
.pkp_block.block_template .btn-tpl:hover{ filter:brightness(1.05); }
.pkp_block.block_template .btn-tpl.outline{
  background:#fff; color:#b21f2d; border:1px solid #b21f2d;
}
@media (max-width:420px){
  .pkp_block.block_template .tpl-ico{ width:58px; height:58px; flex-basis:58px; }
}