@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800&family=Source+Sans+3:wght@400;600;700&display=swap");

/* ================================================================
   JIDPP  —  FINAL CSS  ·  Gold 5D + Sidebar Menu + Citedness Cards
   ================================================================ */
:root{
  --jid-gold-deep:#966C16;
  --jid-gold:#DAAF3E;
  --jid-gold-lt:#F7E28F;
  --jid-gold-pale:#FFF6CD;
  --jid-navy-d:#08102A;
  --jid-navy:#12224E;
  --jid-navy-l:#1B3A6B;
  --jid-brown-1:#8B5E28;
  --jid-brown-2:#A67535;
  --jid-brown-3:#6B4218;
  --jid-ink:#1C2434;
  --jid-paper:#F7F5EE;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Source Sans 3','Segoe UI',Arial,sans-serif;
}

html,body{margin:0;padding:0}
body,
.pkp_structure_page,
.pkp_page_content{
  background:var(--jid-paper) !important;
  background-image:none !important;
  font-family:var(--font-body);
  color:var(--jid-ink);
}

/* ================================================================
   HEADER  —  aliran dokumen normal, tanpa float
   ================================================================ */
body .pkp_structure_head{
  display:block !important;position:relative !important;
  width:100% !important;max-width:100% !important;
  margin:0 !important;padding:0 !important;
  background:transparent !important;border:none !important;
  overflow:hidden !important;float:none !important;clear:both !important;
}
body .pkp_structure_head::after{content:"";display:table;clear:both}
body .pkp_head_wrapper{
  display:block !important;position:relative !important;
  width:100% !important;max-width:100% !important;
  margin:0 !important;padding:0 !important;
  background:transparent !important;overflow:visible !important;
  float:none !important;clear:both !important;
}
body .pkp_head_wrapper::after{content:"";display:table;clear:both}
body .pkp_site_name_wrapper,
body .pkp_site_name{
  display:block !important;position:relative !important;
  width:100% !important;max-width:100% !important;
  margin:0 !important;padding:0 !important;
  float:none !important;clear:both !important;
  text-align:center !important;line-height:0 !important;overflow:visible !important;
}
body .pkp_site_name a,
body .pkp_site_name .is_img{
  display:block !important;position:relative !important;
  width:100% !important;max-width:100% !important;
  margin:0 !important;padding:0 !important;
  float:none !important;line-height:0 !important;
}
body .pkp_site_name img,
body .pkp_site_name_logo img{
  display:block !important;position:relative !important;
  width:100% !important;max-width:100% !important;
  height:auto !important;max-height:none !important;
  margin:0 !important;padding:0 !important;border:none !important;
  float:none !important;vertical-align:top !important;
  filter:drop-shadow(0 6px 20px rgba(150,108,22,.22));
}
body .pkp_structure_main,
body .pkp_structure_content,
body .pkp_page_content,
body .page,body #main,body main{
  clear:both !important;position:relative !important;
  display:block !important;margin-top:0 !important;z-index:1;
}

/* ================================================================
   USER NAV
   ================================================================ */
body .pkp_navigation_user_wrapper{
  position:absolute !important;top:1.4vw !important;right:1.8vw !important;
  z-index:30 !important;background:transparent !important;
  padding:0 !important;margin:0 !important;border:none !important;
  width:auto !important;float:none !important;
}
body .pkp_navigation_user{
  display:flex !important;gap:14px !important;align-items:center !important;
  list-style:none !important;padding:0 !important;margin:0 !important;
}
body .pkp_navigation_user li{padding:0 !important;margin:0 !important;float:none !important}
body .pkp_navigation_user > li + li::before{
  content:"|";color:rgba(247,226,143,.55);margin-right:14px;font-weight:300;
}
body .pkp_navigation_user a,
body .pkp_navigation_user span{
  color:#FFFFFF !important;font-weight:600 !important;font-size:14px !important;
  text-shadow:0 1px 3px rgba(0,0,0,.6);text-decoration:none;
}
body .pkp_navigation_user a:hover{color:var(--jid-gold-lt) !important}
body .pkp_navigation_user .badge{
  background:var(--jid-gold) !important;color:var(--jid-navy-d) !important;
  border-radius:999px !important;padding:1px 8px !important;font-size:12px !important;
}

/* ================================================================
   MENU UTAMA (navy strip)
   ================================================================ */
body .pkp_navigation_primary_row{
  display:block !important;clear:both !important;width:100% !important;
  background:linear-gradient(90deg,var(--jid-navy-d) 0%,var(--jid-navy) 100%) !important;
  border-bottom:3px solid var(--jid-gold);
  padding:0 !important;margin:0 !important;
}
body .pkp_navigation_primary_row .pkp_navigation_primary{
  list-style:none;margin:0 !important;padding:0 !important;
  display:flex;flex-wrap:wrap;
}
body .pkp_navigation_primary_row .pkp_navigation_primary > li > a,
body .pkp_navigation_primary_row .pkp_search a{
  color:#FFFFFF !important;font-weight:700 !important;font-size:15px !important;
  padding:16px 22px !important;display:inline-block;
  transition:background .2s,color .2s;
}
body .pkp_navigation_primary_row .pkp_navigation_primary > li > a:hover{
  background:var(--jid-navy-l) !important;color:var(--jid-gold-lt) !important;
}

/* ================================================================
   SIDEBAR BLOCK GENERAL
   ================================================================ */
.pkp_block{
  background:#FFFFFF;border:1px solid #EAE1C8;
  border-top:3px solid var(--jid-gold);border-radius:10px;
  padding:18px 20px;margin-bottom:20px;
  box-shadow:0 4px 12px rgba(150,108,22,.06);
}
.pkp_block .title{
  color:var(--jid-navy-d);font-family:var(--font-display);
  font-size:19px;font-weight:700;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid var(--jid-gold-lt);
}

/* ================================================================
   ★ SIDEBAR MENU EMAS/BROWN  —  Focus and Scope, Editorial Team, dst
   ================================================================ */
.jid-sidebar-menu{
  display:flex;flex-direction:column;gap:8px;
  padding:0;margin:0 0 20px;list-style:none;
}
.jid-sidebar-title,
.jid-sidebar-download{
  display:block;padding:14px 20px;
  background:linear-gradient(180deg, #7A4E1F 0%, #563411 100%);
  color:#FFFFFF !important;text-decoration:none;
  font-weight:800;font-size:14px;letter-spacing:.03em;
  text-align:center;border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 4px 10px rgba(86,52,17,.35);
  transition:transform .18s,box-shadow .18s;
}
.jid-sidebar-title:hover,
.jid-sidebar-download:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 8px 16px rgba(86,52,17,.45);
  filter:brightness(1.08);
}
.jid-sidebar-item{
  display:block;padding:12px 20px;
  background:linear-gradient(180deg, #B4823B 0%, #8A5C21 100%);
  color:#FFFFFF !important;text-decoration:none;
  font-weight:600;font-size:13.5px;letter-spacing:.02em;
  border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 3px 8px rgba(86,52,17,.25);
  transition:transform .15s,box-shadow .15s,filter .15s;
  position:relative;
}
.jid-sidebar-item::before{
  content:"›";position:absolute;right:16px;top:50%;
  transform:translateY(-50%);opacity:.7;font-weight:700;font-size:16px;
}
.jid-sidebar-item:hover{
  transform:translateX(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 6px 14px rgba(86,52,17,.35);
  filter:brightness(1.08);
  color:#FFFFFF !important;
}

/* ================================================================
   ★ KARTU METRIK BERWARNA  —  Scopus / Sinta / Impact / Citations
   ================================================================ */
.jid-metrics{
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;margin:24px 0 12px;
}
@media (max-width:640px){
  .jid-metrics{grid-template-columns:repeat(2, minmax(0,1fr))}
}
.jid-metric{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px;border-radius:8px;color:#FFFFFF !important;
  text-decoration:none !important;position:relative;overflow:hidden;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
  transition:transform .2s,box-shadow .2s;min-height:78px;
}
.jid-metric:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
  color:#FFFFFF !important;
}
.jid-metric::before{
  content:"";position:absolute;left:-20px;top:-30px;
  width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.14);
}
.jm-scopus{background:linear-gradient(135deg, #2AA8A6 0%, #1E7E7D 100%)}
.jm-sinta {background:linear-gradient(135deg, #F0C020 0%, #C99A0F 100%)}
.jm-impact{background:linear-gradient(135deg, #D95067 0%, #A6304B 100%)}
.jm-scholar{background:linear-gradient(135deg, #3FB489 0%, #268761 100%)}
.jm-brand{
  display:flex;flex-direction:column;justify-content:center;
  font-weight:800;font-size:16px;letter-spacing:.02em;
  z-index:1;line-height:1.15;
}
.jm-brand small{
  display:block;font-size:11px;font-weight:600;
  opacity:.85;margin-top:2px;letter-spacing:.05em;text-transform:uppercase;
}
.jm-right{text-align:right;z-index:1}
.jm-num{
  font-family:var(--font-display);font-weight:800;
  font-size:30px;line-height:1;display:block;
}
.jm-label{
  font-size:11px;font-weight:600;opacity:.9;
  letter-spacing:.06em;text-transform:uppercase;margin-top:4px;display:block;
}
.jid-metrics-credit{
  text-align:right;font-size:11px;color:#8A94A8;margin-top:6px;font-style:italic;
}

/* ================================================================
   Tombol umum
   ================================================================ */
.block_make_submission_link,
.cmp_button,
.pkp_button{
  display:inline-block;
  background:linear-gradient(120deg,var(--jid-gold) 0%,var(--jid-gold-lt) 100%) !important;
  color:var(--jid-navy-d) !important;border:none !important;
  font-weight:800 !important;font-size:14px !important;
  border-radius:8px !important;padding:12px 22px !important;
  box-shadow:0 6px 14px rgba(218,175,62,.4);
  transition:transform .2s,box-shadow .2s;text-decoration:none;
}
.block_make_submission_link:hover,
.cmp_button:hover,
.pkp_button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(218,175,62,.55);
  filter:brightness(1.05);
}

/* ================================================================
   COVER ISSUE 3D
   ================================================================ */
.issue_cover img,.cover img{
  border-radius:6px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.15),
    -8px 8px 20px rgba(18,34,78,.25),
    inset 3px 0 8px rgba(0,0,0,.25);
  transform:perspective(1200px) rotateY(-6deg);
  transition:transform .5s ease;
}
.issue_cover img:hover,.cover img:hover{
  transform:perspective(1200px) rotateY(-2deg) scale(1.03);
}

/* ================================================================
   FOOTER
   ================================================================ */
.pkp_structure_footer_wrapper{
  background:linear-gradient(180deg,var(--jid-navy) 0%,var(--jid-navy-d) 100%) !important;
  color:#C9D4E6 !important;
  border-top:4px solid var(--jid-gold);
  padding:32px 0 !important;clear:both !important;
}
.pkp_structure_footer_wrapper a{color:var(--jid-gold-lt) !important}

@media (max-width:768px){
  body .pkp_navigation_user_wrapper{top:8px !important;right:8px !important}
  body .pkp_navigation_user a{font-size:11px !important}
}