/* =========================================
   GLOBAL PAGE LOAD ANIMATION (DEEP VERSION)
========================================= */

@media (prefers-reduced-motion: no-preference){

  body{
    animation: exjBodyFade 1s ease both;
  }

  .pkp_structure_main{
    animation: exjPageIn 0.9s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .15s;
    background: #ffffff;

    /* Shadow tipis kanan kiri bawah (lebih natural) */
    box-shadow:
      0 18px 35px rgba(17,24,39,.06),
      -10px 12px 22px rgba(17,24,39,.04),
      10px 12px 22px rgba(17,24,39,.04);

    border-radius: 14px;
  }

  .pkp_structure_sidebar{
    animation: exjPageIn 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .25s;
  }

  .exj-card,
  .exj-footer-card{
    animation: exjCardIn 1.05s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .3s;
  }

  .pkp_navigation_user > li > a{
    animation: exjPopIn 1s cubic-bezier(.22,1,.36,1) both;
    animation-delay: .35s;
  }
}


/* Body Fade */
@keyframes exjBodyFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Slide + Fade  (DIUBAH: masuk dari samping) */
@keyframes exjPageIn{
  from{
    opacity: 0;
    transform: translateX(30px); /* sebelumnya translateY */
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Card Zoom + Fade */
@keyframes exjCardIn{
  from{
    opacity: 0;
    transform: translateY(35px) scale(.95);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Login/Register */
@keyframes exjPopIn{
  from{
    opacity: 0;
    transform: translateY(-10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   COLOR SYSTEM (BLUE THEME)
========================================= */

:root{

  /* MAIN COLOR */
  --exj-orange-900:#001f4d;
  --exj-orange-800:#002657;
  --exj-orange-700:#002d6a;   /* PRIMARY */
  --exj-orange-600:#014bad;   /* SECONDARY */
  --exj-orange-500:#3b7ad6;

  --exj-orange-50:#eaf2ff;

  /* DARK BLUE */
  --exj-brown-900:#001634;
  --exj-brown-800:#001d42;
  --exj-brown-700:#002656;
  --exj-brown-600:#00306e;

  /* Neutral */
  --exj-text:#111827;
  --exj-muted:#6b7280;
  --exj-border:#e5e7eb;
  --exj-shadow: 0 12px 30px rgba(17,24,39,.12);
}


/* =========================================
   BACKGROUND (SUBTLE PATTERN - SAFE & VISIBLE)
========================================= */

/* Tambahan aman agar background tidak “putus” saat scroll */
html{
  background-color: #f6fbfd;
  min-height: 100%;
}

/* INI YANG MENENTUKAN FINAL BACKGROUND (karena body ini menimpa body di atas) */
body{
  /* base color soft */
  background-color: #f6fbfd;

  /* gabung: pattern + glow + gambar */
  background-image:
    radial-gradient(rgba(1,75,173,.07) 1px, transparent 1px),
    radial-gradient(rgba(0,45,106,.05) 1px, transparent 1px),
    radial-gradient(900px 420px at 18% 10%, rgba(1,75,173,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 30%, rgba(59,122,214,.08), transparent 60%),
    url("https://jees.umsida.ac.id/public/bg_jees.png");

  background-size:
    46px 46px,
    46px 46px,
    auto,
    auto,
    100% 100%;

  background-position:
    0 0,
    23px 23px,
    center,
    center,
    center;

  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;

  /* penting: supaya saat scroll tetap ada gradasi/pattern + gambar */
  background-attachment: fixed, fixed, fixed, fixed, fixed;

  /* penting: pastikan body selalu punya tinggi viewport agar tidak putih */
  min-height: 100vh;
}


/* =========================================
   COVER IMAGE
========================================= */

.exj-cover img{
  width: 100% !important;
  height: auto !important;
  border-radius: 18px;
  border: 1px solid var(--exj-border);
  box-shadow: 0 16px 38px rgba(17,24,39,.14);
  display:block;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.exj-cover img:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(17,24,39,.18);
  filter: saturate(1.03);
}


/* =========================================
   CARD CONTAINER
========================================= */

.content.exj-card{
  background: #fff !important;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(17,24,39,.12);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.content.exj-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 55px rgba(17,24,39,.16);
  border-color: rgba(1,75,173,.22);
}


/* =========================================
   CARD TITLE (BLUE GRADIENT)
========================================= */

.exj-title{
  padding: 12px 12px !important;
  background: linear-gradient(
    135deg,
    #002d6a 0%,
    #014bad 100%
  ) !important;
  border-bottom: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
}

.exj-title::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-35%;
  width:70%;
  height:220%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.20),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  opacity: .75;
  pointer-events:none;
}

.exj-title strong,
.exj-title span{
  color:#fff !important;
}


/* =========================================
   BUTTONS
========================================= */

.exj-btn{
  display:block;
  border-radius: 18px !important;
  border: 1px solid rgba(1,75,173,.35) !important;
  background: #fff !important;
  color: var(--exj-text) !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(1,75,173,.15);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}

.exj-btn-primary{
  background: linear-gradient(
    135deg,
    #002d6a,
    #014bad
  ) !important;
  color:#fff !important;
  border: 1px solid rgba(1,75,173,.40) !important;
}

.exj-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(1,75,173,.22);
}

.exj-btn-primary:hover{
  filter: brightness(1.05);
}

.exj-btn:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,122,214,.35),
    0 16px 32px rgba(1,75,173,.22);
}


/* =========================================
   BUTTON ROW RESPONSIVE
========================================= */

.exj-btn-row{
  display:flex !important;
  gap: 12px !important;
}

@media (max-width: 420px){
  .exj-btn-row{ flex-direction: column !important; }
}


/* =========================================
   MENU ITEMS
========================================= */

.exj-item{
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(17,24,39,.08) !important;
}

.exj-link{
  display:block;
  padding: 12px 12px !important;
  color: #002d6a !important;
  font-weight: 800;
  text-decoration: none !important;
  position: relative;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

.exj-link:hover{
  background: var(--exj-orange-50) !important;
  transform: translateX(2px);
  color: #014bad !important;
}

.exj-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 4px;
  background: linear-gradient(
    180deg,
    #002d6a,
    #014bad
  );
  opacity: 0;
  transition: opacity .15s ease;
}

.exj-link:hover::before{
  opacity: 1;
}

.exj-link::after{
  content:"›";
  position:absolute;
  right:12px;
  top:50%;
  transform: translateY(-50%);
  opacity:.35;
  font-weight: 900;
  transition: transform .15s ease, opacity .15s ease;
}
.exj-link:hover::after{
  opacity:.70;
  transform: translateY(-50%) translateX(2px);
}


/* =========================================
   DOWNLOAD SECTION
========================================= */

.exj-download{
  text-align: center;
  background: #fff !important;
  border-bottom: none !important;
  padding: 18px !important;
}

.exj-download-link{
  display: inline-block;
  text-decoration: none !important;
  color: #002d6a !important;
  font-weight: 800;
  transition: transform .2s ease;
}

.exj-download-link:hover{
  transform: translateY(-2px);
}

.exj-download-link img{
  width: 100% !important;
  max-width: 220px;
  border-radius: 16px;
  border: 1px solid var(--exj-border);
  box-shadow: 0 14px 32px rgba(1,75,173,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}

.exj-download-link:hover img{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(1,75,173,.28);
}


/* =========================================
   VISITOR STATISTIC
========================================= */

.exj-visitor{
  text-align: center;
  padding: 18px !important;
}

.exj-visitor-wrap img{
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(1,75,173,.16);
  transition: transform .2s ease, box-shadow .2s ease;
}

.exj-visitor-wrap img:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(1,75,173,.22);
}

.exj-stat-link{
  display:inline-block;
  margin-top:8px;
  font-weight:800;
  color:#002d6a !important;
  text-decoration:none !important;
  border-bottom:2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.exj-stat-link:hover{
  border-bottom:2px solid #014bad;
  color:#014bad !important;
}


/* =========================================
   EDITORIAL OFFICE FOOTER
========================================= */

.exj-footer-card{
  margin-top: 20px;
  padding: 22px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    #002d6a,
    #014bad
  );
  color: #ffffff;
  box-shadow: 0 18px 45px rgba(1,75,173,.30);
  position: relative;
  overflow: hidden;
}

.exj-footer-card::before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,.14), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

.exj-footer-title{
  font-size: 20px;
  margin-bottom: 12px;
  color: #ffffff;
  position: relative;
}

.exj-footer-text{
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
  position: relative;
}

.exj-footer-link{
  color: #dff9ff !important;
  text-decoration: none;
  font-weight: 800;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.exj-footer-link:hover{
  border-bottom: 2px solid #fff;
  color:#ffffff !important;
}


/* =========================================
   TOP USER MENU
========================================= */

@media (min-width: 992px){
  .pkp_navigation_user{
    padding-top: .35rem;
    padding-bottom: .35rem;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
  }
}

.pkp_navigation_primary_row{
  background: linear-gradient(135deg, #002d6a 0%, #014bad 100%) !important;
  padding-left: 2.143rem;
  padding-right: 2.143rem;
}

.pkp_navigation_user > li > a{

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

  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(1,75,173,.30);
  background: rgba(255,255,255,.92);
  color: #002d6a !important;

  font-weight: 800;
  text-decoration: none !important;

  box-shadow: 0 10px 22px rgba(1,75,173,.16);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.pkp_navigation_user > li > a:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(1,75,173,.22);
  background: #ffffff;
  border-color: rgba(1,75,173,.42);
}

.pkp_navigation_user > li:last-child > a{
  background: linear-gradient(
    135deg,
    #002d6a,
    #014bad
  );
  color: #fff !important;
}

@media (prefers-reduced-motion: no-preference){
  .pkp_navigation_user > li > a{
    animation: exjPopIn .35s ease both;
    margin-top: 5px;
  }
}

.pkp_block.block_author_countries .content h4{
    font-size: 1.1rem;
    font-weight: bold;
    padding: 8px 12px;

    /* warna mengikuti sidebar */
    background: linear-gradient(135deg,#002d6a,#014bad);

    color: #ffffff;
    text-align: center;

    border-radius: 6px 6px 0 0;
    margin-bottom: 0;

    /* shadow agar konsisten dengan sidebar */
    box-shadow: 0 10px 22px rgba(1,75,173,.18);

    letter-spacing: .2px;
}

.pkp_block.block_author_countries .country-list{
    list-style: none;
    padding: 10px 14px;
    margin: 0;

    /* menutup sisi kanan kiri bawah */
    background: #ffffff;
    border: 1px solid rgba(17,24,39,.08);
    border-top: none;

    border-radius: 0 0 12px 12px;

    /* shadow agar menyatu dengan header */
    box-shadow: 0 14px 30px rgba(17,24,39,.08);
}

/* RESET style bawaan OJS */
.obj_issue_toc .articles > li{
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* STYLE BARU */
.obj_issue_toc .articles > li{
    margin-bottom: 20px;
    padding: 1rem;

    background: #ffffff !important;

    /* border semua sisi */
    border: 1px solid rgba(1,75,173,.25) !important;

    /* border kiri tebal */
    border-left: 6px solid #002d6a !important;

    border-radius: 12px;

    /* shadow tenggara */
    box-shadow: 8px 8px 18px rgba(17,24,39,.15) !important;

    transition: all .2s ease;
}

.obj_issue_toc .articles > li:hover{
    transform: translateY(-2px);
    box-shadow: 10px 10px 22px rgba(17,24,39,.18) !important;
}

.pkp_block {
    padding: 0.60rem 1.5rem;
    font-size: 1rem;
    line-height: 1.3rem;
}

.pkp_navigation_user>li:last-child>a {
  margin-right: -0.714rem;
}