/* =======================================================================
   AL-FIKRAH — CUSTOM CSS (OJS 3.4 Default Theme)
   Modern & Professional | by request
   Cara pakai: OJS Admin > Settings > Website > Appearance > Setup
               > "Journal Style Sheet" (upload file ini)
   ATAU paste seluruh isi ini ke kolom "Additional CSS".
   ======================================================================= */

/* -----------------------------------------------------------------------
   0. PALET WARNA (ubah di sini saja kalau mau ganti tema warna)
   ----------------------------------------------------------------------- */
:root {
  --af-primary:      #0e7a57;   /* hijau utama (khas pendidikan Islam) */
  --af-primary-dark: #0a5b41;   /* hijau gelap untuk hover/footer */
  --af-accent:       #c9a24b;   /* emas/gold sebagai aksen */
  --af-bg:           #f4f6f5;   /* background lembut */
  --af-surface:      #ffffff;   /* kartu/panel */
  --af-text:         #1f2a28;   /* teks utama */
  --af-muted:        #5d6b67;   /* teks sekunder */
  --af-border:       #e4e8e6;   /* garis tipis */
  --af-radius:       12px;
  --af-shadow:       0 4px 18px rgba(14, 122, 87, .08);
  --af-shadow-hover: 0 8px 26px rgba(14, 122, 87, .16);
}

/* -----------------------------------------------------------------------
   1. GLOBAL & TIPOGRAFI
   ----------------------------------------------------------------------- */
body.pkp_page_index,
.pkp_structure_page {
  background: var(--af-bg);
  color: var(--af-text);
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; color: var(--af-text); }

a { color: var(--af-primary); transition: color .2s ease; }
a:hover { color: var(--af-primary-dark); }

/* -----------------------------------------------------------------------
   1b. CONTAINER ~1200px (samakan dengan template asal ejournal)
   Semua bagian (header, konten, footer) dipusatkan & dibatasi lebarnya.
   ----------------------------------------------------------------------- */
.pkp_structure_page,
.pkp_head_wrapper,
.pkp_structure_content,
.pkp_navigation_primary_row > ul,
.pkp_structure_footer,
.pkp_footer_content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.pkp_structure_page{
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
    border-radius: 20px;
}
@media (min-width: 992px) {
.pkp_site_name .is_img img {
  position:relative;
  right:20px;
  bottom: 35px;
  max-width: 108%;
  width:1200px;
  min-height: 220px;
}
}
/* -----------------------------------------------------------------------
   2. HEADER & LOGO
   ----------------------------------------------------------------------- */
.pkp_structure_head {
  background: var(--af-surface);
  border-bottom: 3px solid var(--af-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.pkp_head_wrapper { padding-top: 16px; padding-bottom: 12px; }

/* Banner/logo header dibuat full selebar container + box-shadow */
.pkp_site_name_wrapper { display: block; width: 100%; }
.pkp_site_name_wrapper a,
.pkp_site_name_wrapper .is_img { display: block; width: 100%; }
.pkp_site_name_wrapper img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;          /* hapus batas tinggi lama */
  border-radius: var(--af-radius);
  box-shadow: var(--af-shadow);
}

/* -----------------------------------------------------------------------
   3. NAVIGATION MENU (top)  — dirapatkan ke banner, tidak terlalu lebar
   ----------------------------------------------------------------------- */
.pkp_navigation_primary_row {
  background: var(--af-primary);
  border-radius: var(--af-radius);
  margin-top: 4px;        /* jarak tipis ke banner di atasnya */
  margin-bottom: 6px;
  padding: 2px 6px;       /* bar lebih ramping */
}
ul.pkp_navigation_primary > li > a {
  color: #fff !important;
  font-weight: 600;
  padding: 10px 14px;     /* lebih ringkas dari sebelumnya (14px 18px) */
  border-radius: 8px;
  transition: background .2s ease;
}
ul.pkp_navigation_primary > li > a:hover {
  background: rgba(255,255,255,.15);
}
ul.pkp_navigation_user > li > a { color: #fff !important; font-weight: 600; }

/* Banner & nav lebih merapat: hapus jarak bawah header wrapper */
.pkp_head_wrapper { padding-bottom: 0; }
.pkp_site_name_wrapper img { margin-bottom: 0; }

/* Tombol Search & Register/Login */
.pkp_search input[type="search"] {
  border: 1px solid var(--af-border);
  border-radius: 30px;
  padding: 8px 16px;
}

/* -----------------------------------------------------------------------
   4. KONTEN UTAMA & CURRENT ISSUE
   ----------------------------------------------------------------------- */
.pkp_structure_main { padding-top: 24px; }

.obj_issue_toc .heading,
.cmp_announcement .title,
h2.pkp_screen_reader + *,
.page_index .additional_content h2 {
  color: var(--af-primary-dark);
}

.obj_issue_toc .series .heading,
.obj_issue_toc h2 {
  border-bottom: 2px solid var(--af-accent);
  padding-bottom: 8px;
  margin-bottom: 18px;
}

/* Cover current issue */
.obj_issue_toc .cover img,
.cmp_issue_summary .cover img {
  border-radius: var(--af-radius);
  box-shadow: var(--af-shadow);
}

/* -----------------------------------------------------------------------
   5. DAFTAR ARTIKEL (article summary)  → tampil seperti kartu
   ----------------------------------------------------------------------- */
.obj_article_summary {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-radius: var(--af-radius);
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: var(--af-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.obj_article_summary:hover {
  transform: translateY(-3px);
  box-shadow: var(--af-shadow-hover);
}
.obj_article_summary .title a {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--af-text);
  line-height: 1.4;
}
.obj_article_summary .title a:hover { color: var(--af-primary); }
.obj_article_summary .authors { color: var(--af-muted); font-size: .9rem; }

/* Tombol PDF */
.obj_article_summary .galleys_links a.obj_galley_link,
.obj_galley_link.pdf {
  display: inline-block;
  background: var(--af-primary);
  color: #fff !important;
  padding: 5px 14px;
  border-radius: 30px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.obj_galley_link.pdf:hover { background: var(--af-primary-dark); }

/* Tombol "View All Issues" */
.view_all_issues a,
a.read_more {
  display: inline-block;
  background: var(--af-accent);
  color: #2a2a2a !important;
  padding: 10px 22px;
  border-radius: 30px;
  font-weight: 700;
  margin-top: 10px;
}

/* -----------------------------------------------------------------------
   6. SIDEBAR — JUDUL BLOK
   ----------------------------------------------------------------------- */
.pkp_block { margin-bottom: 28px; }
.pkp_block .title,
.pkp_block .pkp_block_title {
  display: block;
  background: var(--af-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 16px;
  border-radius: var(--af-radius) var(--af-radius) 0 0;
  margin: 0;
}
.pkp_block .content {
  background: var(--af-surface);
  border: 1px solid var(--af-border);
  border-top: none;
  border-radius: 0 0 var(--af-radius) var(--af-radius);
  padding: 14px 16px;
}

/* =======================================================================
   ★★★  7. ADDITIONAL MENU  ★★★
   INI BAGIAN YANG ANDA MAU DISAMAKAN DENGAN GANESHA (JET)
   -----------------------------------------------------------------------
   Di Al-Fikrah, "Additional Menu" dibuat pakai <table> di dalam
   Custom Block. Class/selector yang dipakai:

        .pkp_block.block_custom            -> kotak bloknya
        .pkp_block.block_custom table      -> tabel menunya
        .pkp_block.block_custom table a    -> tiap item menu

   CSS di bawah ini "menyulap" tabel polos jadi daftar menu vertikal
   rapi bergaya Ganesha: tiap baris jadi tombol full-width, ada aksen
   garis kiri, dan efek hover (geser + ganti warna).
   ======================================================================= */

/* Hilangkan tampilan tabel bawaan */
.pkp_block.block_custom table,
.pkp_block.block_custom tbody,
.pkp_block.block_custom tr,
.pkp_block.block_custom td {
  display: block;
  width: 100%;
  border: none !important;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Tiap baris menu = tombol full-width */
.pkp_block.block_custom td {
  border-bottom: 1px solid var(--af-border) !important;
}
.pkp_block.block_custom td:last-child { border-bottom: none !important; }

.pkp_block.block_custom td a {
  display: block;
  position: relative;
  padding: 12px 16px 12px 22px;
  color: var(--af-text) !important;
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  border-left: 4px solid transparent;
  transition: all .22s ease;
}

/* Titik/panah aksen di kiri (ikon kecil) */
.pkp_block.block_custom td a::before {
  content: "›";
  position: absolute;
  left: 8px;
  color: var(--af-accent);
  font-weight: 700;
  transition: transform .22s ease;
}

/* Efek HOVER ala Ganesha */
.pkp_block.block_custom td a:hover {
  background: #eaf5f0;
  color: var(--af-primary-dark) !important;
  border-left-color: var(--af-primary);
  padding-left: 28px;
}
.pkp_block.block_custom td a:hover::before {
  transform: translateX(3px);
  color: var(--af-primary);
}

/* Kalau nanti Anda ganti <table> jadi list <ul><li>, ini juga jalan: */
.pkp_block.block_custom ul { list-style: none; margin: 0; padding: 0; }
.pkp_block.block_custom ul li { border-bottom: 1px solid var(--af-border); }
.pkp_block.block_custom ul li:last-child { border-bottom: none; }
.pkp_block.block_custom ul li a {
  display: block;
  padding: 12px 16px 12px 22px;
  border-left: 4px solid transparent;
  font-weight: 600;
  color: var(--af-text) !important;
  transition: all .22s ease;
}
.pkp_block.block_custom ul li a:hover {
  background: #eaf5f0;
  border-left-color: var(--af-primary);
  color: var(--af-primary-dark) !important;
  padding-left: 28px;
}
/* ===================  AKHIR BAGIAN ADDITIONAL MENU  =================== */

/* -----------------------------------------------------------------------
   8. INDEXED BY / LOGO MITRA
   ----------------------------------------------------------------------- */
.pkp_block.block_custom img,
.additional_content img { transition: transform .2s ease, filter .2s ease; }
.pkp_block.block_custom img:hover { transform: scale(1.05); }

/* Grid rapi untuk deretan logo "Indexed by" */
.additional_content p:has(img) {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------------------------------
   9. FOOTER
   ----------------------------------------------------------------------- */
.pkp_structure_footer_wrapper,
.pkp_footer {
  background: var(--af-primary-dark);
  color: #eaf2ef;
}
.pkp_structure_footer_wrapper *,
.pkp_footer * { color: #eaf2ef; }

/* Link footer dibuat kontras (emas) + ada underline saat hover */
.pkp_structure_footer_wrapper a,
.pkp_footer a {
  color: var(--af-accent) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pkp_structure_footer_wrapper a:hover,
.pkp_footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}
.pkp_brand_footer { opacity: .9; }

/* -----------------------------------------------------------------------
   10. RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pkp_site_name_wrapper img { max-height: 80px; }
  .obj_article_summary { padding: 14px 16px; }
  ul.pkp_navigation_primary > li > a { padding: 12px 14px; }
}
html,body {
    /*background-color: #f7f7f0 !important; /* Warna krem sangat muda */
    background-image: url(https://ejournal.ibi.ac.id/RujUxYuks/site/images/pengelola/pattern2.webp)!important;
    background-repeat: repeat !important;
    background-attachment: fixed !important; /* Pattern diam saat di-scroll */
    background-color: #e9e9e9; /* Warna cadangan jika gambar gagal dimuat */
    margin: 0;
    padding: 0;
}    
.pkp_head_wrapper{
  height:280px;
}
.pkp_navigation_primary_row{
  position:relative;
  bottom:40px;
  right:20px;
  width:1200px;
}
.pkp_site_nav_menu{
  background:none;
}
.pkp_navigation_primary_wrapper{
width:1200px;
}
.indexing-container {
    width: 100%;
    max-width: 250px; /* Sesuaikan lebar sidebar */
    border-radius: 8px;
    overflow: hidden;
    background: none;
    font-family: Arial, sans-serif;
}

/* Judul Biru Paling Atas */
.indexing-header {
    background: #fff;
    color: black;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border-bottom: 1px solid #f0eded;
}

/* Kotak per Item */
.indexing-item {
    padding: 10px 10px;
    border-bottom: 1px solid #eee;
    position: relative;
    text-align: center;
}
.pkp_block .title{
    text-align: center;
    
}