/* ==========================================================================
   HUNAFA EDU — Tema kustom untuk halaman depan OJS 3.4
   Senada dengan portal hunafaedu.com (motif kisi geometris, relung emas-teal)
   Warna dominan: #cba35b
   ==========================================================================
   CARA PASANG:
   Website Settings → Appearance → tab "Custom CSS" → tempel seluruh isi
   file ini ke kotak yang tersedia → Save.
   Berlaku untuk tema bawaan OJS (Default Theme / Bootstrap3). Jika Anda
   memakai tema pihak ketiga, sebagian nama class mungkin berbeda —
   kirim nama tema Anda dan saya sesuaikan.
   ========================================================================== */

/* ==========================================================================
   HUNAFA EDU — Tema kustom untuk halaman depan OJS 3.4
   Versi 2: palet hangat modern-Islami (terracotta + emas), gantikan teal
   Warna dominan: #cba35b
   ==========================================================================
   CARA PASANG:
   Website Settings → Appearance → tab "Custom CSS" → tempel seluruh isi
   file ini ke kotak yang tersedia → Save.
   Berlaku untuk tema bawaan OJS (Default Theme / Bootstrap3). Jika Anda
   memakai tema pihak ketiga, sebagian nama class mungkin berbeda —
   kirim nama tema Anda dan saya sesuaikan.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --gold:#cba35b;
  --gold-deep:#a97e3c;
  --gold-soft:#e7cd98;
  --teal:#8a3f22;        /* terracotta hangat — dipakai untuk teks/aksen utama */
  --teal-deep:#5c2814;   /* cokelat tanah liat tua — untuk footer & judul besar */
  --ivory:#fdf6ec;
  --ivory-deep:#f6e6cf;
  --ink:#3b2b21;
  --muted:#8a7561;
  --line:rgba(90,45,20,0.12);
}

/* ---------- Dasar & tipografi ---------- */
body{
  background:var(--ivory) !important;
  color:var(--ink) !important;
  font-family:'Inter', sans-serif !important;
}
h1, h2, h3, .page_index .journal_description h2{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--teal-deep) !important;
}
a{ color:var(--teal); }
a:hover{ color:var(--gold-deep); }

/* tekstur kisi geometris halus + pendaran hangat di sudut halaman */
body{
  background-image:
    repeating-linear-gradient(45deg, rgba(203,163,91,0.07) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(-45deg, rgba(203,163,91,0.07) 0 1px, transparent 1px 36px),
    radial-gradient(ellipse 55% 40% at 90% 0%, rgba(203,163,91,0.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(138,63,34,0.06), transparent 60%) !important;
  background-attachment:fixed !important;
}

/* ---------- Satukan seluruh konten jadi sistem "kartu" yang konsisten ---------- */
.pkp_structure_main,
.pkp_page_content,
.page_issue_archive,
.page_index{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  padding:34px 36px !important;
  margin-top:28px !important;
  margin-bottom:28px !important;
  box-shadow:0 10px 30px rgba(90,45,20,0.06) !important;
}
.pkp_structure_main h1,
.pkp_page_content h1{
  font-size:28px !important;
  margin-top:0 !important;
}

/* remah roti (breadcrumb) */
.breadcrumb, .pkp_breadcrumb, nav[aria-label] ol{
  color:var(--muted) !important;
  font-size:13px !important;
}
.breadcrumb a{ color:var(--teal) !important; }

/* kotak notifikasi/peringatan ("belum ada terbitan", dsb) — samakan dgn tema, jangan biarkan abu-abu default */
.pkp_notification,
.pkp_page_content .alert,
.pkp_page_content .callout,
.pkp_page_content blockquote,
.pkp_page_content .well,
.pkp_page_content [class*="alert-"]{
  background:var(--ivory-deep) !important;
  border:none !important;
  border-left:4px solid var(--gold) !important;
  color:var(--ink) !important;
  border-radius:8px !important;
  box-shadow:none !important;
  padding:16px 20px !important;
}

/* ---------- HEADER / MASTHEAD (dinamis — menempel saat scroll) ---------- */
.pkp_structure_head{
  background:#ffffff !important;
  border-bottom:1px solid var(--line) !important;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 0 var(--gold), 0 10px 24px rgba(34,48,44,0.06);
  transition:box-shadow .25s ease, padding .25s ease;
}
.pkp_structure_head.is_stuck{
  box-shadow:0 2px 0 var(--gold), 0 14px 30px rgba(34,48,44,0.12);
}

.pkp_site_name_wrapper .pkp_site_name,
.pkp_site_name_wrapper .is_text{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:700 !important;
  color:var(--teal-deep) !important;
  letter-spacing:-0.01em;
}
.pkp_site_name_wrapper .pkp_site_name_journal{
  color:var(--gold-deep) !important;
  font-style:italic;
}

/* navigasi utama — selector ganda untuk menjangkau variasi nama class antar tema/versi */
#headerNavigationBlock,
.pkp_navigation_primary_row,
.pkp_navigation_primary,
nav.pkp_navigation_primary,
.pkp_structure_head nav{
  background:var(--ivory-deep) !important;
  background-image:none !important;
  border:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
}
.pkp_navigation_primary_row .menu > li > a,
.pkp_navigation_primary_row .menu > .primary_menu_item > a,
.pkp_navigation_primary .menu > li > a,
.pkp_navigation_primary .menu > .primary_menu_item > a,
.pkp_structure_head nav .menu > li > a{
  font-family:'Inter', sans-serif !important;
  font-weight:600 !important;
  font-size:12.5px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:var(--teal-deep) !important;
  background:transparent !important;
  padding:14px 16px !important;
  position:relative;
}
.pkp_navigation_primary_row .menu > li > a::after,
.pkp_navigation_primary .menu > li > a::after,
.pkp_structure_head nav .menu > li > a::after{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:8px;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.pkp_navigation_primary_row .menu > li > a:hover,
.pkp_navigation_primary .menu > li > a:hover,
.pkp_structure_head nav .menu > li > a:hover{ color:var(--gold-deep) !important; }
.pkp_navigation_primary_row .menu > li > a:hover::after,
.pkp_navigation_primary .menu > li > a:hover::after,
.pkp_structure_head nav .menu > li > a:hover::after{ transform:scaleX(1); }
.pkp_navigation_primary_row .menu > li.active > a,
.pkp_navigation_primary .menu > li.active > a{ color:var(--gold-deep) !important; }

/* pencarian di ujung nav — samakan dengan warna teks nav, bukan putih kontras */
.pkp_search a, .pkp_search button, .pkp_navigation_primary .pkp_search{
  color:var(--teal-deep) !important;
}

/* pencarian & navigasi user */
.pkp_search input[type="text"],
.pkp_search input[type="search"]{
  border:1px solid var(--line) !important;
  border-radius:999px !important;
  background:var(--ivory-deep) !important;
}
.pkp_search button,
.pkp_navigation_user a{
  color:var(--teal) !important;
}

/* pita geometris tipis pemisah header/hero */
.pkp_structure_head::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-3px;
  height:3px;
  background:var(--gold);
  opacity:.85;
}
.pkp_structure_head{ position:sticky; }

/* ---------- HERO / deskripsi jurnal di halaman depan ---------- */
.page_index .journal_description,
.pkp_page_content > .description{
  background:linear-gradient(180deg, var(--ivory-deep), var(--ivory)) !important;
  border-radius:14px;
  padding:44px 36px !important;
  margin-bottom:32px !important;
  border:1px solid var(--line);
}
.page_index .journal_description h2{
  font-size:34px !important;
  margin-bottom:14px !important;
}
.page_index .journal_description p{
  color:var(--muted) !important;
  font-size:16px;
  line-height:1.7;
}

/* ---------- Daftar artikel / issue terbaru ---------- */
.obj_article_summary{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:22px !important;
  margin-bottom:16px !important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.obj_article_summary:hover{
  transform:translateY(-3px);
  border-color:var(--gold) !important;
  box-shadow:0 14px 28px rgba(34,48,44,0.08);
}
.obj_article_summary .title,
.obj_article_summary .title a{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:700 !important;
  font-size:21px !important;
  color:var(--teal-deep) !important;
}
.obj_article_summary .authors{
  color:var(--muted) !important;
  font-size:13.5px;
}
.obj_article_summary .cover img{
  border-radius:8px !important;
  border:1px solid var(--line);
}

/* judul bagian (mis. "Artikel Terbaru", "Vol. X No. Y") */
.page_index h2,
.pkp_page_content .section h2{
  font-family:'Cormorant Garamond', serif !important;
  font-size:24px !important;
  color:var(--teal-deep) !important;
  border-bottom:2px solid var(--gold) !important;
  display:inline-block;
  padding-bottom:6px;
  margin-bottom:22px !important;
}

/* ---------- Sidebar / blok ---------- */
.pkp_block{
  background:#ffffff !important;
  border:1px solid var(--line) !important;
  border-radius:12px !important;
  padding:18px !important;
  margin-bottom:18px !important;
}
.pkp_block h2, .pkp_block h3, .pkp_block .title{
  font-family:'Cormorant Garamond', serif !important;
  color:var(--teal-deep) !important;
  font-size:17px !important;
}

/* ---------- Tombol ---------- */
.pkp_button,
.cmp_button{
  background:var(--gold) !important;
  border:1px solid var(--gold-deep) !important;
  color:var(--teal-deep) !important;
  font-weight:600 !important;
  border-radius:8px !important;
}
.pkp_button:hover,
.cmp_button:hover{
  background:var(--gold-deep) !important;
  color:#ffffff !important;
}
.pkp_button_primary{
  background:var(--teal) !important;
  border-color:var(--teal-deep) !important;
  color:#ffffff !important;
}
.pkp_button_primary:hover{
  background:var(--teal-deep) !important;
}

/* ---------- Footer ---------- */
.pkp_structure_footer{
  background:var(--ivory-deep) !important;
  color:var(--ink) !important;
  position:relative;
  border-top:none !important;
  padding-top:40px !important;
}
.pkp_structure_footer::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background:var(--gold);
}
.pkp_structure_footer a{ color:var(--teal) !important; }
.pkp_structure_footer a:hover{ color:var(--gold-deep) !important; }
.pkp_structure_footer h2, .pkp_structure_footer h3{
  color:var(--teal-deep) !important;
  font-family:'Cormorant Garamond', serif !important;
}
.pkp_structure_footer,
.pkp_structure_footer p, .pkp_structure_footer span{
  color:var(--muted) !important;
}

/* ==========================================================================
   OPSIONAL — efek header menyusut saat discroll
   Tempel blok <script> ini lewat:
   Website Settings → Setup → "Konten Tambahan" (Additional Content),
   dibungkus tag <script>...</script>
   ========================================================================== */