/* ============================================================
   WARAQAT : Jurnal Ilmu-Ilmu Keislaman
   Custom Journal Stylesheet for OJS 3.4
   ============================================================
   Versi     : 2.0
   Dibuat    : Juni 2026
   Platform  : Open Journal Systems 3.4.x (Default Theme)
   Penerbit  : STAI As-Sunnah Deli Serdang
   
   PETUNJUK PEMASANGAN:
   1. Login sebagai Journal Manager / Admin
   2. Buka: Settings → Website → Appearance
   3. Scroll ke bagian "Journal Style Sheet"
   4. Upload file CSS ini
   5. Klik "Save"
   
   CATATAN:
   - File ini men-override default theme OJS 3.4
   - Backup CSS lama sebelum upload
   - Pastikan clear browser cache setelah upload
   ============================================================ */


/* ============================================================
   0. CSS CUSTOM PROPERTIES (VARIABEL WARNA & TIPOGRAFI)
   ============================================================ */
:root {
  /* — Palet Hijau-Emas (Islamic Academic) — */
  --wrq-primary:        #1B6B3A;     /* Hijau utama (header, link) */
  --wrq-primary-dark:   #0F4D28;     /* Hijau gelap (hover, aksen) */
  --wrq-primary-light:  #E8F5EC;     /* Hijau sangat muda (latar) */
  --wrq-accent:         #C8943E;     /* Emas (aksen, badge, border) */
  --wrq-accent-light:   #F5EDD6;     /* Krem emas muda */
  --wrq-text:           #1A1A1A;     /* Teks utama */
  --wrq-text-secondary: #555555;     /* Teks sekunder */
  --wrq-text-light:     #777777;     /* Teks ringan / caption */
  --wrq-bg:             #FFFFFF;     /* Latar utama */
  --wrq-bg-alt:         #F8F9FA;     /* Latar alternatif */
  --wrq-border:         #DEE2E6;     /* Border standar */
  --wrq-border-light:   #ECECEC;     /* Border ringan */
  --wrq-white:          #FFFFFF;
  --wrq-danger:         #C0392B;     /* Warna peringatan */
  
  /* — Tipografi — */
  --wrq-font-display:  'Merriweather', 'Georgia', 'Noto Naskh Arabic', serif;
  --wrq-font-body:     'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wrq-font-mono:     'Source Code Pro', 'Consolas', monospace;
  
  /* — Ukuran — */
  --wrq-font-xs:   0.75rem;
  --wrq-font-sm:   0.875rem;
  --wrq-font-base: 1rem;
  --wrq-font-md:   1.125rem;
  --wrq-font-lg:   1.25rem;
  --wrq-font-xl:   1.5rem;
  --wrq-font-2xl:  1.875rem;
  --wrq-font-3xl:  2.25rem;
  
  /* — Spacing — */
  --wrq-radius:    6px;
  --wrq-radius-lg: 10px;
  --wrq-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --wrq-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --wrq-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --wrq-transition: 0.25s ease;
}


/* ============================================================
   1. GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;0,900;1,400&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');


/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-base);
  line-height: 1.7;
  color: var(--wrq-text);
  background-color: var(--wrq-bg-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--wrq-primary);
  text-decoration: none;
  transition: color var(--wrq-transition);
}

a:hover,
a:focus {
  color: var(--wrq-primary-dark);
  text-decoration: underline;
}


/* ============================================================
   3. HEADER & SITE BRANDING
   ============================================================
   Header dan footer menggunakan visual language identik:
   • Gradient 135deg: primary-dark → primary
   • Border emas 4px (header = bawah, footer = atas)
   • Font putih dengan text-shadow
   Ini menciptakan "bingkai" visual yang konsisten.
   ============================================================ */

/* — Header bar utama — */
.pkp_structure_head {
  background: linear-gradient(135deg, var(--wrq-primary-dark) 0%, var(--wrq-primary) 100%);
  border-bottom: 4px solid var(--wrq-accent);
  box-shadow: var(--wrq-shadow-md);
  padding: 1rem 0;
}

/* — Judul jurnal — */
.pkp_site_name a,
.pkp_site_name span,
.pkp_head_wrapper .pkp_site_name a {
  color: var(--wrq-white) !important;
  font-family: var(--wrq-font-display);
  font-weight: 900;
  font-size: var(--wrq-font-2xl);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* — Logo image — */
.pkp_site_name img {
  max-height: 90px;
  width: auto;
  /* Beri sedikit padding putih agar logo yg ber-bg transparan tetap jelas */
  background-color: var(--wrq-white);
  padding: 6px 10px;
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform var(--wrq-transition), box-shadow var(--wrq-transition);
}

.pkp_site_name a:hover img {
  transform: scale(1.03);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

/* — Header context (tagline) — */
.pkp_head_wrapper .pkp_context_name {
  font-family: var(--wrq-font-display);
  color: var(--wrq-white);
}


/* ============================================================
   4. NAVIGASI UTAMA
   ============================================================ */

/* — Nav bar — */
.pkp_navigation_primary,
.pkp_navigation_primary_wrapper {
  background-color: var(--wrq-primary-dark);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.pkp_navigation_primary > li > a,
.pkp_nav_list li a {
  color: rgba(255,255,255,0.9) !important;
  font-family: var(--wrq-font-body);
  font-weight: 600;
  font-size: var(--wrq-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 18px !important;
  transition: all var(--wrq-transition);
  border-bottom: 3px solid transparent;
}

.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_nav_list li a:hover {
  color: var(--wrq-white) !important;
  background-color: rgba(255,255,255,0.08);
  border-bottom-color: var(--wrq-accent);
  text-decoration: none;
}

/* — Active nav item — */
.pkp_navigation_primary > li.current > a,
.pkp_nav_list li.current a {
  color: var(--wrq-white) !important;
  border-bottom-color: var(--wrq-accent);
  background-color: rgba(255,255,255,0.05);
}

/* — Dropdown submenu — */
.pkp_navigation_primary ul ul,
.pkp_nav_list ul {
  background-color: var(--wrq-white);
  border: 1px solid var(--wrq-border);
  border-top: 3px solid var(--wrq-accent);
  border-radius: 0 0 var(--wrq-radius) var(--wrq-radius);
  box-shadow: var(--wrq-shadow-md);
}

.pkp_navigation_primary ul ul a,
.pkp_nav_list ul a {
  color: var(--wrq-text) !important;
  font-size: var(--wrq-font-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--wrq-border-light) !important;
}

.pkp_navigation_primary ul ul a:hover,
.pkp_nav_list ul a:hover {
  background-color: var(--wrq-primary-light) !important;
  color: var(--wrq-primary-dark) !important;
}

/* — User nav (Login/Register) — */
.pkp_navigation_user li a {
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--wrq-font-sm);
}

.pkp_navigation_user li a:hover {
  color: var(--wrq-accent) !important;
}

/* — Search toggle — */
.pkp_search_toggle {
  color: var(--wrq-white) !important;
}

/* — Mobile hamburger — */
.pkp_site_nav_toggle {
  color: var(--wrq-white);
}


/* ============================================================
   5. LAYOUT UTAMA (CONTAINER)
   ============================================================ */
.pkp_structure_main {
  background-color: var(--wrq-bg);
  border-radius: var(--wrq-radius-lg);
  box-shadow: var(--wrq-shadow-sm);
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 2rem 2.5rem;
}

/* — Breadcrumb — */
.pkp_breadcrumb,
.cmp_breadcrumbs {
  font-size: var(--wrq-font-sm);
  color: var(--wrq-text-light);
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--wrq-border-light);
}

.pkp_breadcrumb a,
.cmp_breadcrumbs a {
  color: var(--wrq-primary);
  font-weight: 600;
}


/* ============================================================
   6. HALAMAN BERANDA (HOMEPAGE)
   ============================================================ */

/* — Current issue heading — */
.homepage_about h2,
.current_issue_title,
h2.current_issue_title {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-xl);
  color: var(--wrq-primary-dark);
  border-bottom: 3px solid var(--wrq-accent);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}

/* — Issue cover image — */
.current_issue .cover img,
.obj_issue_summary .cover img {
  border: 1px solid var(--wrq-border);
  border-radius: var(--wrq-radius);
  box-shadow: var(--wrq-shadow-sm);
  transition: box-shadow var(--wrq-transition);
}

.current_issue .cover img:hover {
  box-shadow: var(--wrq-shadow-md);
}

/* — Journal description di beranda — */
.additional_content .description,
.homepage_about .description {
  font-size: var(--wrq-font-base);
  line-height: 1.8;
  color: var(--wrq-text-secondary);
}

/* — ISSN display — */
.additional_content p strong,
.homepage_about p strong {
  color: var(--wrq-primary-dark);
}


/* ============================================================
   7. DAFTAR ARTIKEL (TOC / ISSUE)
   ============================================================ */

/* — Section heading (Articles, Book Reviews, dll) — */
.issue_toc .section > h2,
.obj_article_summary h2,
.pkp_page_issue .section h2 {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-lg);
  color: var(--wrq-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-left: 4px solid var(--wrq-accent);
  padding-left: 1rem;
  margin: 2rem 0 1.2rem;
}

/* — Setiap item artikel — */
.obj_article_summary,
.article_summary {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--wrq-border-light);
  border-left: 4px solid var(--wrq-primary);
  border-radius: var(--wrq-radius);
  background-color: var(--wrq-bg);
  transition: all var(--wrq-transition);
}

.obj_article_summary:hover {
  border-left-color: var(--wrq-accent);
  box-shadow: var(--wrq-shadow-sm);
  background-color: var(--wrq-primary-light);
}

/* — Judul artikel dalam daftar — */
.obj_article_summary .title a,
.article_summary .title a {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-md);
  font-weight: 700;
  color: var(--wrq-text);
  line-height: 1.5;
}

.obj_article_summary .title a:hover {
  color: var(--wrq-primary);
  text-decoration: none;
}

/* — Nama penulis — */
.obj_article_summary .authors,
.article_summary .authors {
  font-size: var(--wrq-font-sm);
  color: var(--wrq-text-secondary);
  font-weight: 400;
  margin-top: 0.35rem;
}

.obj_article_summary .authors strong,
.article_summary .authors strong {
  font-weight: 600;
  color: var(--wrq-text);
}

/* — Nomor halaman — */
.obj_article_summary .pages,
.article_summary .pages {
  font-size: var(--wrq-font-sm);
  color: var(--wrq-text-light);
}

/* — Tombol PDF / Galley — */
.obj_article_summary .galleys_links a,
.obj_galley_link,
.article_summary .galleys_links a {
  display: inline-block;
  background-color: var(--wrq-primary);
  color: var(--wrq-white) !important;
  padding: 5px 16px;
  border-radius: 4px;
  font-size: var(--wrq-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all var(--wrq-transition);
  margin-top: 0.5rem;
}

.obj_article_summary .galleys_links a:hover,
.obj_galley_link:hover {
  background-color: var(--wrq-primary-dark);
  text-decoration: none;
  box-shadow: var(--wrq-shadow-sm);
}

/* — DOI link — */
.obj_article_summary .doi,
.article_summary .doi {
  font-size: var(--wrq-font-xs);
  color: var(--wrq-text-light);
  margin-top: 0.3rem;
}

.obj_article_summary .doi a {
  color: var(--wrq-accent);
}

.obj_article_summary .doi a:hover {
  color: var(--wrq-primary);
}

/* — View All Issues link — */
.cmp_back_link a,
a[href*="issue/archive"] {
  display: inline-block;
  color: var(--wrq-primary);
  font-weight: 600;
  border: 2px solid var(--wrq-primary);
  padding: 8px 24px;
  border-radius: var(--wrq-radius);
  transition: all var(--wrq-transition);
  margin-top: 1rem;
}

.cmp_back_link a:hover {
  background-color: var(--wrq-primary);
  color: var(--wrq-white);
  text-decoration: none;
}


/* ============================================================
   8. HALAMAN DETAIL ARTIKEL
   ============================================================ */

/* — Judul artikel — */
.pkp_page_article h1.page_title,
.article_full_title,
h1.page_title {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-2xl);
  font-weight: 900;
  color: var(--wrq-text);
  line-height: 1.35;
  margin-bottom: 1rem;
  border-bottom: 3px solid var(--wrq-accent);
  padding-bottom: 0.75rem;
}

/* — Authors section — */
.pkp_page_article .authors h2,
.article_authors h2 {
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-base);
  font-weight: 700;
  color: var(--wrq-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pkp_page_article .authors .name,
.article_authors .name {
  font-weight: 700;
  color: var(--wrq-text);
}

.pkp_page_article .authors .affiliation,
.article_authors .affiliation {
  font-size: var(--wrq-font-sm);
  color: var(--wrq-text-secondary);
  font-style: italic;
}

/* — DOI badge — */
.pkp_page_article .doi,
.item.doi {
  background-color: var(--wrq-accent-light);
  border: 1px solid var(--wrq-accent);
  border-radius: var(--wrq-radius);
  padding: 0.5rem 1rem;
  display: inline-block;
  margin: 0.75rem 0;
}

.pkp_page_article .doi .label {
  font-weight: 700;
  color: var(--wrq-primary-dark);
  font-size: var(--wrq-font-sm);
}

.pkp_page_article .doi .value a {
  color: var(--wrq-accent);
  word-break: break-all;
}

/* — Keywords — */
.pkp_page_article .keywords,
.item.keywords {
  margin: 1rem 0;
}

.pkp_page_article .keywords .label,
.item.keywords .label {
  font-weight: 700;
  color: var(--wrq-primary-dark);
  font-size: var(--wrq-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pkp_page_article .keywords .value span,
.item.keywords .value span {
  display: inline-block;
  background-color: var(--wrq-primary-light);
  color: var(--wrq-primary-dark);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: var(--wrq-font-xs);
  font-weight: 600;
  margin: 3px 4px 3px 0;
  border: 1px solid rgba(27,107,58,0.15);
}

/* — Abstract — */
.pkp_page_article .abstract,
.item.abstract {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background-color: var(--wrq-bg-alt);
  border-left: 4px solid var(--wrq-accent);
  border-radius: 0 var(--wrq-radius) var(--wrq-radius) 0;
}

.pkp_page_article .abstract h2,
.item.abstract h2,
.pkp_page_article .abstract .label {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-lg);
  font-weight: 700;
  color: var(--wrq-primary-dark);
  margin-bottom: 0.75rem;
}

.pkp_page_article .abstract p,
.item.abstract .value p {
  font-size: var(--wrq-font-base);
  line-height: 1.8;
  color: var(--wrq-text-secondary);
  text-align: justify;
}

/* — References — */
.pkp_page_article .references,
.item.references {
  margin: 2rem 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--wrq-border);
}

.pkp_page_article .references h2,
.item.references h2,
.item.references .label {
  font-family: var(--wrq-font-display);
  font-size: var(--wrq-font-lg);
  font-weight: 700;
  color: var(--wrq-primary-dark);
  margin-bottom: 1rem;
}

.pkp_page_article .references .value p,
.item.references .value p,
.pkp_page_article .references .value div {
  font-size: var(--wrq-font-sm);
  line-height: 1.7;
  color: var(--wrq-text-secondary);
  padding-left: 2rem;
  text-indent: -2rem;
  margin-bottom: 0.5rem;
}

/* — Citation download area — */
.pkp_page_article .citation_display,
.item.citation_display {
  background-color: var(--wrq-bg-alt);
  border: 1px solid var(--wrq-border);
  border-radius: var(--wrq-radius);
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.pkp_page_article .citation_display h3,
.item.citation_display h3 {
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-base);
  font-weight: 700;
  color: var(--wrq-primary-dark);
}


/* ============================================================
   9. SIDEBAR
   ============================================================ */
.pkp_structure_sidebar {
  font-size: var(--wrq-font-sm);
}

/* — Blok sidebar — */
.pkp_block {
  background-color: var(--wrq-bg);
  border: 1px solid var(--wrq-border-light);
  border-radius: var(--wrq-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--wrq-shadow-sm);
}

/* — Judul sidebar block — */
.pkp_block h2,
.pkp_block .title {
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-sm);
  font-weight: 700;
  color: var(--wrq-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--wrq-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* — Sidebar links — */
.pkp_block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pkp_block ul li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--wrq-border-light);
}

.pkp_block ul li:last-child {
  border-bottom: none;
}

.pkp_block ul li a {
  color: var(--wrq-text-secondary);
  font-weight: 500;
  transition: all var(--wrq-transition);
}

.pkp_block ul li a:hover {
  color: var(--wrq-primary);
  padding-left: 4px;
  text-decoration: none;
}

/* — Custom sidebar widget (tabel menu) — */
.pkp_block table {
  width: 100%;
  border-collapse: collapse;
}

.pkp_block table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--wrq-border-light);
  font-size: var(--wrq-font-sm);
}

.pkp_block table td a {
  font-weight: 600;
}

/* — Sidebar images (indexing logos, tools) — */
.pkp_block img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}


/* ============================================================
   10. TOMBOL & FORM
   ============================================================ */
.pkp_button,
.cmp_button,
button.pkp_button,
input[type="submit"],
.pkp_search .search_button {
  background-color: var(--wrq-primary);
  color: var(--wrq-white) !important;
  border: 2px solid var(--wrq-primary);
  padding: 10px 24px;
  border-radius: var(--wrq-radius);
  font-family: var(--wrq-font-body);
  font-weight: 700;
  font-size: var(--wrq-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--wrq-transition);
}

.pkp_button:hover,
.cmp_button:hover,
button.pkp_button:hover,
input[type="submit"]:hover {
  background-color: var(--wrq-primary-dark);
  border-color: var(--wrq-primary-dark);
  box-shadow: var(--wrq-shadow-sm);
  text-decoration: none;
}

/* — Form inputs — */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="url"],
.pkp_form textarea,
.pkp_form select,
.pkp_search input[type="text"] {
  border: 1px solid var(--wrq-border);
  border-radius: var(--wrq-radius);
  padding: 10px 14px;
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-base);
  transition: border-color var(--wrq-transition), box-shadow var(--wrq-transition);
}

.pkp_form input:focus,
.pkp_form textarea:focus,
.pkp_form select:focus,
.pkp_search input[type="text"]:focus {
  border-color: var(--wrq-primary);
  box-shadow: 0 0 0 3px rgba(27,107,58,0.15);
  outline: none;
}


/* ============================================================
   11. FOOTER
   ============================================================
   Desain footer meng-echo header:
   • Gradient hijau identik (135deg, primary-dark → primary)
   • Border emas 4px (header = border-bottom, footer = border-top)
   • Tipografi putih konsisten
   • Semua logo/gambar diberi "kartu putih" agar kontras jelas
   ============================================================ */

/* — Wrapper footer utama — */
.pkp_structure_footer_wrapper,
.pkp_footer,
#pkp_content_footer {
  background: linear-gradient(135deg, var(--wrq-primary-dark) 0%, var(--wrq-primary) 100%);
  color: rgba(255,255,255,0.95);
  padding: 2.5rem 0 2rem;
  border-top: 4px solid var(--wrq-accent);
  margin-top: 3rem;
  font-family: var(--wrq-font-body);
}

/* — Teks & link — */
.pkp_structure_footer_wrapper a,
.pkp_footer a,
#pkp_content_footer a {
  color: var(--wrq-accent-light) !important;
  transition: color var(--wrq-transition);
}

.pkp_structure_footer_wrapper a:hover,
.pkp_footer a:hover,
#pkp_content_footer a:hover {
  color: var(--wrq-white) !important;
  text-decoration: underline;
}

/* — Alamat Redaksi — */
.pkp_structure_footer_wrapper h4,
.pkp_footer h4,
#pkp_content_footer h4 {
  color: var(--wrq-white);
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-sm);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 0.25rem;
}


/* ——————————————————————————————————————————
   11-A.  INDEXED-BY & SUPPORTED-BY TABLES
   Setiap logo dibungkus kartu putih rounded
   agar kontras sempurna di background gelap.
   —————————————————————————————————————————— */

/* Tabel container */
.pkp_structure_footer_wrapper table,
.pkp_footer table,
#pkp_content_footer table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px 10px;
  margin: 1rem 0;
}

/* Label "INDEXED BY:" / "SUPPORTED BY:" */
.pkp_structure_footer_wrapper table td strong,
.pkp_footer table td strong,
#pkp_content_footer table td strong {
  color: var(--wrq-accent);
  font-family: var(--wrq-font-body);
  font-size: var(--wrq-font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Setiap cell */
.pkp_structure_footer_wrapper table td,
.pkp_footer table td,
#pkp_content_footer table td {
  padding: 0.5rem;
  text-align: center;
  vertical-align: middle;
}

/* Link wrapper di dalam cell */
.pkp_structure_footer_wrapper table td a,
.pkp_footer table td a,
#pkp_content_footer table td a {
  display: inline-block;
  text-decoration: none !important;
}

/*
 * KARTU PUTIH UNTUK SETIAP LOGO
 * — Background putih + padding cukup lebar
 * — Border radius & shadow agar terlihat "mengapung"
 * — filter: none memastikan warna asli tidak berubah
 * — min-height memastikan logo kecil tetap terbaca
 */
.pkp_structure_footer_wrapper table td a img,
.pkp_footer table td a img,
#pkp_content_footer table td a img,
.pkp_structure_footer_wrapper table td > img,
.pkp_footer table td > img,
#pkp_content_footer table td > img {
  max-height: 56px;
  min-height: 36px;
  width: auto;
  max-width: 180px;

  background-color: var(--wrq-white);
  padding: 10px 18px;
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);

  object-fit: contain;
  filter: none !important;

  transition: transform var(--wrq-transition),
              box-shadow var(--wrq-transition),
              border-color var(--wrq-transition);
}

/* Hover → scale up + emas border + deeper shadow */
.pkp_structure_footer_wrapper table td a img:hover,
.pkp_footer table td a img:hover,
#pkp_content_footer table td a img:hover,
.pkp_structure_footer_wrapper table td > img:hover,
.pkp_footer table td > img:hover,
#pkp_content_footer table td > img:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  border-color: var(--wrq-accent);
}


/* ——————————————————————————————————————————
   11-B.  LOGO SPESIFIK — UKURAN OPTIMAL
   Masing-masing logo punya ukuran ideal
   agar proporsional & terbaca jelas.
   —————————————————————————————————————————— */

/* SINTA (logo biasanya besar/landscape) */
.pkp_structure_footer_wrapper img[src*="sinta"],
.pkp_structure_footer_wrapper img[src*="SINTA"],
.pkp_footer img[src*="sinta"],
.pkp_footer img[src*="SINTA"],
#pkp_content_footer img[src*="sinta"],
#pkp_content_footer img[src*="SINTA"] {
  max-height: 60px !important;
  padding: 10px 20px !important;
}

/* DOAJ */
.pkp_structure_footer_wrapper img[src*="doaj"],
.pkp_structure_footer_wrapper img[src*="DOAJ"],
.pkp_footer img[src*="doaj"],
.pkp_footer img[src*="DOAJ"],
#pkp_content_footer img[src*="doaj"],
#pkp_content_footer img[src*="DOAJ"],
.pkp_structure_footer_wrapper img[src*="20220611"],
.pkp_footer img[src*="20220611"],
#pkp_content_footer img[src*="20220611"] {
  max-height: 56px !important;
  padding: 8px 16px !important;
}

/* Google Scholar */
.pkp_structure_footer_wrapper img[src*="google_scholar"],
.pkp_footer img[src*="google_scholar"],
#pkp_content_footer img[src*="google_scholar"] {
  max-height: 50px !important;
  padding: 8px 14px !important;
}

/* Crossref */
.pkp_structure_footer_wrapper img[src*="crossref"],
.pkp_structure_footer_wrapper img[src*="crosssref"],
.pkp_footer img[src*="crossref"],
.pkp_footer img[src*="crosssref"],
#pkp_content_footer img[src*="crossref"],
#pkp_content_footer img[src*="crosssref"] {
  max-height: 50px !important;
  padding: 8px 16px !important;
}

/* Garuda */
.pkp_structure_footer_wrapper img[src*="garuda"],
.pkp_footer img[src*="garuda"],
#pkp_content_footer img[src*="garuda"] {
  max-height: 52px !important;
  padding: 8px 14px !important;
}

/* Moraref */
.pkp_structure_footer_wrapper img[src*="moraref"],
.pkp_footer img[src*="moraref"],
#pkp_content_footer img[src*="moraref"] {
  max-height: 50px !important;
  padding: 8px 14px !important;
}

/* OneSearch */
.pkp_structure_footer_wrapper img[src*="one_search"],
.pkp_footer img[src*="one_search"],
#pkp_content_footer img[src*="one_search"] {
  max-height: 50px !important;
  padding: 8px 14px !important;
}

/* BASE */
.pkp_structure_footer_wrapper img[src*="bs2"],
.pkp_footer img[src*="bs2"],
#pkp_content_footer img[src*="bs2"] {
  max-height: 48px !important;
  padding: 8px 14px !important;
}

/* Dimensions */
.pkp_structure_footer_wrapper img[src*="dimensions"],
.pkp_footer img[src*="dimensions"],
#pkp_content_footer img[src*="dimensions"] {
  max-height: 48px !important;
  padding: 8px 14px !important;
}

/* STAI As-Sunnah & RJI (supported-by) */
.pkp_structure_footer_wrapper img[src*="stai_assunnah"],
.pkp_structure_footer_wrapper img[src*="index_stai"],
.pkp_footer img[src*="stai_assunnah"],
.pkp_footer img[src*="index_stai"],
#pkp_content_footer img[src*="stai_assunnah"],
#pkp_content_footer img[src*="index_stai"] {
  max-height: 58px !important;
  padding: 10px 16px !important;
}

.pkp_structure_footer_wrapper img[src*="rji"],
.pkp_footer img[src*="rji"],
#pkp_content_footer img[src*="rji"] {
  max-height: 54px !important;
  padding: 10px 16px !important;
}


/* ——————————————————————————————————————————
   11-C.  CREATIVE COMMONS LICENSE BADGE
   —————————————————————————————————————————— */
.pkp_structure_footer_wrapper img[src*="creativecommons"],
.pkp_footer img[src*="creativecommons"],
#pkp_content_footer img[src*="creativecommons"] {
  background-color: var(--wrq-white);
  padding: 8px 14px;
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  max-height: 44px;
  filter: none !important;
  transition: transform var(--wrq-transition), box-shadow var(--wrq-transition);
}

.pkp_structure_footer_wrapper img[src*="creativecommons"]:hover,
.pkp_footer img[src*="creativecommons"]:hover,
#pkp_content_footer img[src*="creativecommons"]:hover {
  transform: scale(1.06);
  box-shadow: 0 5px 16px rgba(0,0,0,0.28);
}


/* ——————————————————————————————————————————
   11-D.  STATCOUNTER & FLAG COUNTER
   —————————————————————————————————————————— */
.pkp_structure_footer_wrapper img[src*="statcounter"],
.pkp_footer img[src*="statcounter"],
#pkp_content_footer img[src*="statcounter"],
.pkp_structure_footer_wrapper img[src*="logo-statcounter"],
.pkp_footer img[src*="logo-statcounter"],
#pkp_content_footer img[src*="logo-statcounter"] {
  background-color: var(--wrq-white);
  padding: 8px 14px;
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  max-height: 48px;
  width: auto;
  filter: none !important;
}

.pkp_structure_footer_wrapper img[src*="flagcounter"],
.pkp_footer img[src*="flagcounter"],
#pkp_content_footer img[src*="flagcounter"] {
  background-color: var(--wrq-white);
  padding: 10px 14px;
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  max-width: 280px;
  width: auto;
  filter: none !important;
}

/* SINTA 3 certificate logo (sidebar & footer) */
.pkp_structure_footer_wrapper img[src*="logo_sinta_3"],
.pkp_footer img[src*="logo_sinta_3"],
#pkp_content_footer img[src*="logo_sinta_3"] {
  max-height: 64px !important;
  padding: 10px 18px !important;
  background-color: var(--wrq-white);
  border-radius: var(--wrq-radius);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  filter: none !important;
}


/* ——————————————————————————————————————————
   11-E.  OJS BRAND FOOTER BADGE
   —————————————————————————————————————————— */
.pkp_brand_footer img,
img[src*="ojs_brand"] {
  max-height: 32px;
  opacity: 0.85;
  background-color: rgba(255,255,255,0.15);
  padding: 5px 10px;
  border-radius: 4px;
  transition: opacity var(--wrq-transition);
}

.pkp_brand_footer img:hover,
img[src*="ojs_brand"]:hover {
  opacity: 1;
}


/* ——————————————————————————————————————————
   11-F.  FALLBACK: SEMUA GAMBAR DI FOOTER
   Gambar yang belum ter-handle rule spesifik
   di atas tetap mendapat kartu putih dasar.
   —————————————————————————————————————————— */
.pkp_structure_footer_wrapper img,
.pkp_footer img,
#pkp_content_footer img {
  max-width: 100%;
  height: auto;
  /* Pastikan warna asli tidak berubah */
  filter: none;
}

/*
 * Semua <img> di dalam <a> di footer
 * yang BELUM ditangani rule tabel di atas
 * tetap diberi latar putih tipis agar terbaca.
 */
.pkp_structure_footer_wrapper a > img,
.pkp_footer a > img,
#pkp_content_footer a > img {
  background-color: var(--wrq-white);
  padding: 6px 10px;
  border-radius: var(--wrq-radius);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  filter: none !important;
  transition: transform var(--wrq-transition),
              box-shadow var(--wrq-transition);
}

.pkp_structure_footer_wrapper a > img:hover,
.pkp_footer a > img:hover,
#pkp_content_footer a > img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}


/* ——————————————————————————————————————————
   11-G.  TEKS "..::MENU::.." / "..::TOOLS::.."
          / "..::STATCOUNTER::.." DI FOOTER
   Label dekoratif ini dibuat lebih halus.
   —————————————————————————————————————————— */
.pkp_structure_footer_wrapper strong,
.pkp_footer strong,
#pkp_content_footer strong {
  color: rgba(255,255,255,0.9);
  font-size: var(--wrq-font-sm);
}


/* ——————————————————————————————————————————
   11-H.  SEMBUNYIKAN LINK SPAM FOOTER
   (Owner: SONIC / Owner: NONE)
   —————————————————————————————————————————— */
.pkp_structure_footer_wrapper a[href*="bakmigm.org"],
.pkp_structure_footer_wrapper a[href*="hh-publisher.com"],
.pkp_structure_footer_wrapper a[href*="sjpublisher.org"],
.pkp_structure_footer_wrapper a[href*="deltapublicschool.com"],
.pkp_structure_footer_wrapper a[href*="unirazak.edu.my"],
.pkp_structure_footer_wrapper a[href*="umppress.com"],
.pkp_structure_footer_wrapper a[href*="redicinaysa.ugto.mx"],
.pkp_structure_footer_wrapper a[href*="yogpathwellness.com"],
.pkp_structure_footer_wrapper a[href*="hpaoht.ca"],
.pkp_footer a[href*="bakmigm.org"],
.pkp_footer a[href*="hh-publisher.com"],
.pkp_footer a[href*="sjpublisher.org"],
.pkp_footer a[href*="deltapublicschool.com"],
.pkp_footer a[href*="unirazak.edu.my"],
.pkp_footer a[href*="umppress.com"],
.pkp_footer a[href*="redicinaysa.ugto.mx"],
.pkp_footer a[href*="yogpathwellness.com"],
.pkp_footer a[href*="hpaoht.ca"],
#pkp_content_footer a[href*="bakmigm.org"],
#pkp_content_footer a[href*="hh-publisher.com"],
#pkp_content_footer a[href*="sjpublisher.org"],
#pkp_content_footer a[href*="deltapublicschool.com"],
#pkp_content_footer a[href*="unirazak.edu.my"],
#pkp_content_footer a[href*="umppress.com"],
#pkp_content_footer a[href*="redicinaysa.ugto.mx"],
#pkp_content_footer a[href*="yogpathwellness.com"],
#pkp_content_footer a[href*="hpaoht.ca"] {
  display: none !important;
}


/* ============================================================
   12. ISSUE ARCHIVE
   ============================================================ */
.obj_issue_summary {
  background-color: var(--wrq-bg);
  border: 1px solid var(--wrq-border-light);
  border-radius: var(--wrq-radius);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  transition: all var(--wrq-transition);
}

.obj_issue_summary:hover {
  box-shadow: var(--wrq-shadow-sm);
  border-color: var(--wrq-primary);
}

.obj_issue_summary h2 a {
  font-family: var(--wrq-font-display);
  font-weight: 700;
  color: var(--wrq-primary-dark);
}

.obj_issue_summary h2 a:hover {
  color: var(--wrq-primary);
}


/* ============================================================
   13. ANNOUNCEMENT
   ============================================================ */
.obj_announcement_summary,
.obj_announcement_full {
  background-color: var(--wrq-accent-light);
  border: 1px solid var(--wrq-accent);
  border-left: 4px solid var(--wrq-accent);
  border-radius: var(--wrq-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.obj_announcement_summary h2 a,
.obj_announcement_full h1 {
  font-family: var(--wrq-font-display);
  color: var(--wrq-primary-dark);
  font-weight: 700;
}

.obj_announcement_summary .date,
.obj_announcement_full .date {
  font-size: var(--wrq-font-xs);
  color: var(--wrq-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ============================================================
   14. HALAMAN REGISTRASI & LOGIN
   ============================================================ */
.pkp_page_login .pkp_form,
.pkp_page_register .pkp_form {
  max-width: 520px;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--wrq-bg);
  border: 1px solid var(--wrq-border);
  border-radius: var(--wrq-radius-lg);
  box-shadow: var(--wrq-shadow-sm);
}

.pkp_page_login h1,
.pkp_page_register h1 {
  font-family: var(--wrq-font-display);
  text-align: center;
  color: var(--wrq-primary-dark);
  margin-bottom: 1.5rem;
}


/* ============================================================
   15. SEARCH PAGE
   ============================================================ */
.pkp_search_form {
  background-color: var(--wrq-bg-alt);
  border: 1px solid var(--wrq-border);
  border-radius: var(--wrq-radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
}


/* ============================================================
   16. HEADING GLOBAL (h1 – h6)
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wrq-font-display);
  color: var(--wrq-text);
  line-height: 1.35;
}

h1 { font-size: var(--wrq-font-2xl); font-weight: 900; }
h2 { font-size: var(--wrq-font-xl);  font-weight: 700; }
h3 { font-size: var(--wrq-font-lg);  font-weight: 700; }
h4 { font-size: var(--wrq-font-md);  font-weight: 700; }
h5 { font-size: var(--wrq-font-base); font-weight: 700; }
h6 { font-size: var(--wrq-font-sm);  font-weight: 700; }


/* ============================================================
   17. TABEL
   ============================================================ */
.pkp_structure_main table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.pkp_structure_main table th {
  background-color: var(--wrq-primary);
  color: var(--wrq-white);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: var(--wrq-font-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pkp_structure_main table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--wrq-border-light);
  font-size: var(--wrq-font-sm);
}

.pkp_structure_main table tr:hover td {
  background-color: var(--wrq-primary-light);
}

/* — Indexed-by table di body/sidebar — */
.pkp_structure_main table td img {
  max-height: 42px;
  width: auto;
}


/* ============================================================
   18. NOTIFICATION / ALERT
   ============================================================ */
.pkp_notification {
  border-radius: var(--wrq-radius);
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  font-size: var(--wrq-font-sm);
  border-left: 4px solid var(--wrq-primary);
  background-color: var(--wrq-primary-light);
}


/* ============================================================
   19. PRINT STYLES
   ============================================================ */
@media print {
  .pkp_structure_head,
  .pkp_navigation_primary,
  .pkp_structure_sidebar,
  .pkp_structure_footer_wrapper,
  .pkp_search_toggle,
  .pkp_navigation_user {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
  }

  .pkp_structure_main {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}


/* ============================================================
   20. RESPONSIVE (MOBILE & TABLET)
   ============================================================ */

/* — Tablet — */
@media (max-width: 992px) {
  .pkp_site_name a,
  .pkp_site_name span {
    font-size: var(--wrq-font-xl) !important;
  }

  .pkp_structure_main {
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: var(--wrq-radius);
  }

  h1.page_title,
  .pkp_page_article h1.page_title {
    font-size: var(--wrq-font-xl) !important;
  }

  /* Footer logos di tablet */
  .pkp_structure_footer_wrapper table td a img,
  .pkp_footer table td a img,
  #pkp_content_footer table td a img {
    max-height: 48px;
    max-width: 140px;
  }
}

/* — Mobile — */
@media (max-width: 767px) {
  :root {
    --wrq-font-base: 0.9375rem;
  }

  .pkp_site_name a,
  .pkp_site_name span {
    font-size: var(--wrq-font-lg) !important;
  }

  .pkp_site_name img {
    max-height: 60px;
  }

  .pkp_structure_main {
    padding: 1rem;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0;
  }

  h1.page_title,
  .pkp_page_article h1.page_title {
    font-size: var(--wrq-font-lg) !important;
  }

  .obj_article_summary {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .obj_article_summary .title a {
    font-size: var(--wrq-font-base);
  }

  .pkp_page_article .abstract,
  .item.abstract {
    padding: 1rem;
  }

  .pkp_block {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  /* Galley / PDF button full-width on mobile */
  .obj_article_summary .galleys_links a,
  .obj_galley_link {
    display: block;
    text-align: center;
    padding: 10px 16px;
  }

  /* Footer logos di mobile: padding tetap cukup */
  .pkp_structure_footer_wrapper table {
    border-spacing: 8px 8px;
  }

  .pkp_structure_footer_wrapper table td a img,
  .pkp_footer table td a img,
  #pkp_content_footer table td a img {
    max-height: 44px;
    min-height: 28px;
    max-width: 140px;
    padding: 8px 12px;
  }

  /* Flag counter lebih kecil di mobile */
  .pkp_structure_footer_wrapper img[src*="flagcounter"],
  .pkp_footer img[src*="flagcounter"],
  #pkp_content_footer img[src*="flagcounter"] {
    max-width: 240px;
  }

  /* Footer padding diperkecil */
  .pkp_structure_footer_wrapper,
  .pkp_footer,
  #pkp_content_footer {
    padding: 1.5rem 1rem;
  }
}

/* — Small Mobile — */
@media (max-width: 480px) {
  .pkp_structure_footer_wrapper h4 {
    font-size: var(--wrq-font-xs);
  }

  .pkp_page_article .keywords .value span {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  /* Footer logos: 2-kolom grid di layar kecil */
  .pkp_structure_footer_wrapper table,
  .pkp_footer table,
  #pkp_content_footer table {
    border-spacing: 6px 6px;
  }

  .pkp_structure_footer_wrapper table td a img,
  .pkp_footer table td a img,
  #pkp_content_footer table td a img,
  .pkp_structure_footer_wrapper table td > img,
  .pkp_footer table td > img,
  #pkp_content_footer table td > img {
    max-height: 40px;
    min-height: 24px;
    max-width: 120px;
    padding: 6px 10px;
  }

  .pkp_structure_footer_wrapper img[src*="flagcounter"],
  .pkp_footer img[src*="flagcounter"],
  #pkp_content_footer img[src*="flagcounter"] {
    max-width: 200px;
  }
}


/* ============================================================
   21. ACCESSIBILITY ENHANCEMENT
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--wrq-accent);
  outline-offset: 2px;
}

.skip-nav:focus {
  background-color: var(--wrq-accent);
  color: var(--wrq-text);
  padding: 0.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   22. UTILITAS
   ============================================================ */
.wrq-badge {
  display: inline-block;
  background-color: var(--wrq-accent);
  color: var(--wrq-white);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--wrq-font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wrq-divider {
  border: none;
  border-top: 2px solid var(--wrq-accent);
  margin: 2rem 0;
}

/* ============================================================
   END OF STYLESHEET
   ============================================================ */