@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');
/* 🎨 Warna utama Jurnal ABDIMAS */



:root {
  --primaryijebs: darkseagreen;        /* Emas/Oranye (EX, aksen sorotan buku) */
  --primary-darkijebs: #556B2F;
  --light:#ffff;
  --primaryjumder:#2C7BE5 ;
  --primary-darkjumder:#1A5BBF;
  --primarymosaic:crimson ;
  --primary-darkmosaic:#B01030;
  --primaryaira:royalblue ;
  --primary-darkaira:#1434A4;
  --primarylogis:#76C7C0 ;
  --primary-darklogis:cadetblue;
  --red:crimson;
  
}


body {
  font-family: "Saira", sans-serif !important;
  font-optical-sizing: auto !important;
  font-style: normal !important;
  color: var(--secondary) !important;
  border:none !important;
}

.pkp_brand_footer{
  display: none !important;
}

.pkp_structure_content:before,
.pkp_structure_content:after,
.pkp_structure_sidebar:before,
.pkp_structure_sidebar:after {
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}



/* pastikan header container tidak punya padding top bawaan */
.has_site_logo .pkp_head_wrapper {
  padding-top: 0 !important;
}

/* pusatkan container header agar sejajar main content */
.pkp_head_wrapper {
  width: 1200 !important;       /* sejajar main content */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background: transparent !important;
  box-shadow: 
  /* kanan */
  rgba(220, 20, 60, 0.4) 5px 0,
  rgba(220, 20, 60, 0.3) 10px 0,
  rgba(220, 20, 60, 0.2) 15px 0,
  rgba(220, 20, 60, 0.1) 20px 0,
  rgba(220, 20, 60, 0.05) 25px 0,

  /* kiri */
  rgba(220, 20, 60, 0.4) -5px 0,
  rgba(220, 20, 60, 0.3) -10px 0,
  rgba(220, 20, 60, 0.2) -15px 0,
  rgba(220, 20, 60, 0.1) -20px 0,
  rgba(220, 20, 60, 0.05) -25px 0 !important;

}

/* biarkan struktur header mengikuti alur vertikal (logo lalu nav) */
.pkp_head_wrapper > .pkp_structure_head,
.pkp_head_wrapper > .pkp_site_nav_menu,
.pkp_head_wrapper > .pkp_navigation_primary_wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* AREA LOGO — tinggi besar, logo mengisi area */
.pkp_site_name_wrapper,
.pkp_site_name {
  display: block;
  width: 100%; 
  overflow: hidden;
}

/* gambar logo mengisi area penuh (akan crop kalau rasio beda) */
.pkp_site_name img {
  display: block;
  width: 100% !important;
  height: 300px;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover; /* memastikan nutup area */
}

/* ============================
   Navigation bar — di bawah logo
   ============================ */
/* pastikan nav ikut alur dokumen (bukan absolute/overlay) */
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper {
  position: static !important;
  z-index: auto !important;
}

.dropdown-menu .show{
  background-color: var(--primary) !important;
}



/* strip hijau navigasi, tinggi tetap dan align vertikal */
.pkp_navigation_primary_wrapper {
  background-color: var(--light)!important;
  height: 54px;               /* tinggi strip nav (ubah sesuai selera) */
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 1rem;            /* padding kiri/kanan agar konten tidak nempel */
  margin-top: 0;              /* jangan tarik ke atas lagi */
  border-bottom: solid 2px var(--primarymosaic);
}

/* UL list menu (navigasi utama) */
.pkp_navigation_primary {
  display: flex;
  gap: 1.25rem;
  margin: 0 auto;              /* biar center */
  padding: 5px 1rem;  
  list-style: none;
  align-items: center;
  height: 12px;
  max-width: 1200 !important;           /* batasin sejajar header */
  width: 100%;                 /* tapi tetap responsive */
  box-sizing: border-box;
}



/* Link styling */
.pkp_navigation_primary li a,
.pkp_navigation_primary li a:link,
.pkp_navigation_primary li a:visited {
  color: var(--primarymosaic) !important;
  font-weight: 600;
  padding: .35rem .5rem;
  background-color: var(--light);
  border: solid 2px var(--primary-darkmosaic);
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: ease 2ms;
}

.pkp_navigation_primary li a:hover {
  color: var(--light) !important;
  background-color: var(--primary-darkmosaic);
  border-color: var(--primary-darkmosaic);
}

/* hide user/admin small menu wrapper if you already removed it */
.pkp_navigation_user_wrapper { display: none !important; }

/* responsive adjustments */
@media (max-width: 992px) {
  .pkp_site_name_wrapper, .pkp_site_name { height: 140px; }
  .pkp_navigation_primary_wrapper { height: 48px; }
  .pkp_navigation_primary { gap: .6rem; padding: 0 .5rem; }
  .pkp_navigation_primary li a { font-size: .95rem; }
}


/* Hilangkan background biru default OJS */
.pkp_structure_head,
.pkp_site_name_wrapper,
.pkp_site_name {
  background: transparent !important;
}

/* Pastikan wrapper utama header putih/transparan sesuai keinginan */
.pkp_head_wrapper {
  background: white !important; /* bisa ganti ke transparent kalau mau full putih doang */
}

/* Kadang OJS kasih gradient di logo wrapper */
.pkp_site_name a {
  background: none !important;
}



/* ============================
   Dropdown menu customization
   ============================ */

/* ubah background dropdown */
.pkp_navigation_primary_wrapper .dropdown-menu {
  background-color: var(--primary) !important;
  border: none !important; /* ilangin border putih tipis */
  border-radius: 0 !important; /* biar flat kaya JIPMAS */
  padding: 0.25rem 0;
}

/* ubah warna link di dropdown */
.pkp_navigation_primary_wrapper .dropdown-menu a,
.pkp_navigation_primary_wrapper .dropdown-menu a:link,
.pkp_navigation_primary_wrapper .dropdown-menu a:visited {
  color: #fff !important;      /* teks putih */
  font-weight: 500;
  padding: .5rem 1rem;
  display: block;
}

/* efek hover */
.pkp_navigation_primary_wrapper .dropdown-menu a:hover {
  background-color: #1e4721 !important; /* lebih gelap dari var(--primary) */
  color: #fff !important;
}


.pkp_structure_page{
  background-image: linear-gradient(297deg, transparent 0%, transparent 34%, rgba(178, 178, 178, 0.02) 34%, rgba(178, 178, 178, 0.02) 53%, transparent 53%, transparent 100%), linear-gradient(222deg, transparent 0%, transparent 30%, rgba(202, 216, 243, 0.24) 30%, rgba(202, 216, 243, 0.24) 58%, transparent 58%, transparent 100%), linear-gradient(352deg, transparent 0%, transparent 25%, rgba(204, 217, 247, 0.11) 25%, rgba(204, 217, 247, 0.11) 57%, transparent 57%, transparent 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
 
}


.pkp_structure_content{
  width: 1200 !important; 
  box-shadow: 
  /* kanan bawah */
  rgba(220, 20, 60, 0.4) 5px 5px,
  rgba(220, 20, 60, 0.3) 10px 10px,
  rgba(220, 20, 60, 0.2) 15px 15px,
  rgba(220, 20, 60, 0.1) 20px 20px,
  rgba(220, 20, 60, 0.05) 25px 25px,
  
  /* kiri bawah */
  rgba(220, 20, 60, 0.4) -5px 5px,
  rgba(220, 20, 60, 0.3) -10px 10px,
  rgba(220, 20, 60, 0.2) -15px 15px,
  rgba(220, 20, 60, 0.1) -20px 20px,
  rgba(220, 20, 60, 0.05) -25px 25px !important;

}




.page_index_site .about_site p[data-start="123"][data-end="320"] strong {
  font-weight: 600 !important;
  text-transform: capitalize !important;
  font-size: 2em !important; 
  color:var(--primary-darkmosaic) ;
  border-bottom: solid 2px var(--primarymosaic);
  display: inline-block;
}


/* ================================
   Default Style untuk semua button
   ================================ */
.page_index_site .journals .has_thumb .body .links a {
  display: block;
  text-decoration: none;
  border-radius: 40em;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem 1.2rem;
  margin: 5px 0;
  width: 100%;
  text-align: center;
  transition: all .2s ease;
}

.page_index_site .journals .has_thumb .body .links a:hover {
  transform: scale(1.1);
}

/* ================================
   🎨 Jurnal 1: IJEBS
   ================================ */
.page_index_site .journals .has_thumb:has(img[src*="journals/1/"]) .body .links a {
  background-color: var(--primaryijebs);
  box-shadow: var(--primary-darkijebs) 0 -6px 6px inset;
  color: var(--light);
}
.page_index_site .journals .has_thumb:has(img[src*="journals/1/"]) .body .links a:hover {
  color: var(--primaryijebs);
  background-color: var(--light);
  box-shadow: var(--primary-darkijebs) 0 -4px 6px inset;
}

.page_index_site .journals .has_thumb:has(img[src*="journals/1/"]) h3 a {

  color: var(--primaryijebs);
}

/* ================================
   🎨 Jurnal 2: Jumder
   ================================ */
.page_index_site .journals .has_thumb:has(img[src*="journals/2/"]) .body .links a {
  background-color: var(--primaryjumder);
  box-shadow: var(--primary-darkjumder) 0 -6px 6px inset;
  color: var(--light);
}
.page_index_site .journals .has_thumb:has(img[src*="journals/2/"]) .body .links a:hover {
  color: var(--primaryjumder);
  background-color: var(--light);
  box-shadow: var(--primary-darkjumder) 0 -4px 6px inset;
}

.page_index_site .journals .has_thumb:has(img[src*="journals/2/"]) h3 a {

  color: var(--primaryjumder);
}


/* ================================
   🎨 Jurnal 3: Mosaic
   ================================ */
.page_index_site .journals .has_thumb:has(img[src*="journals/3/"]) .body .links a {
  background-color: var(--primarymosaic);
  box-shadow: var(--primary-darkmosaic) 0 -6px 6px inset;
  color: var(--light);
}
.page_index_site .journals .has_thumb:has(img[src*="journals/3/"]) .body .links a:hover {
  color: var(--primarymosaic);
  background-color: var(--light);
  box-shadow: var(--primary-darkmosaic) 0 -4px 6px inset;
}

.page_index_site .journals .has_thumb:has(img[src*="journals/3/"]) h3 a {

  color: var(--primarymosaic);
}


/* ================================
   🎨 Jurnal 4: Aira
   ================================ */
.page_index_site .journals .has_thumb:has(img[src*="journals/4/"]) .body .links a {
  background-color: var(--primaryaira);
  box-shadow: var(--primary-darkaira) 0 -6px 6px inset;
  color: var(--light);
}
.page_index_site .journals .has_thumb:has(img[src*="journals/4/"]) .body .links a:hover {
  color: black;
  background-color: var(--light);
  box-shadow: var(--primary-darkaira) 0 -4px 6px inset;
}

.page_index_site .journals .has_thumb:has(img[src*="journals/4/"]) h3 a {

  color: var(--primaryaira);
}


/* ================================
   🎨 Jurnal 5: Logis
   ================================ */
.page_index_site .journals .has_thumb:has(img[src*="journals/5/"]) .body .links a {
  background-color: var(--primarylogis);
  box-shadow: var(--primary-darklogis) 0 -6px 6px inset;
  color: var(--light);
}
.page_index_site .journals .has_thumb:has(img[src*="journals/5/"]) .body .links a:hover {
  color: var(--red);
  background-color: var(--light);
  box-shadow: var(--primary-darklogis) 0 -4px 6px inset;
}

.page_index_site .journals .has_thumb:has(img[src*="journals/5/"]) h3 a {

  color: var(--primarylogis);
}