/* ============================================================
   CJ-PAGES — modernisasi komponen halaman warisan
   ------------------------------------------------------------
   Halaman-halaman lama memakai kelas dari template terdahulu
   (.filter-section, .data-table, .info-box, .call-to-action, …).
   Alih-alih menulis ulang seluruh markup, kelas-kelas itu
   distel ulang di sini memakai token design system.

   Dimuat SETELAH cj-shell.css dan SEBELUM CSS per-halaman.
   ============================================================ */

/* ============================================================
   1. PEMBUNGKUS KONTEN
   ============================================================ */

body.cj .container,
body.cj .page-content-offset {
  width: 100%;
  max-width: var(--cj-container);
  margin-inline: auto;
  padding-inline: var(--cj-gutter);
}

body.cj .page-content-offset {
  margin-top: 28px;
  margin-bottom: 48px;
}

/* Section warisan yang dulu diberi offset header fixed */
body.cj .eval-section,
body.cj .taxonomy-section,
body.cj .recommendation-section,
body.cj .info-content,
body.cj .weekly-offers {
  margin-top: 0 !important;
  padding-top: 32px;
  padding-bottom: 48px;
}

@media (min-width: 768px) {
  body.cj .page-content-offset { margin-top: 40px; margin-bottom: 64px; }
  body.cj .eval-section,
  body.cj .taxonomy-section,
  body.cj .recommendation-section,
    body.cj .info-content,
  body.cj .weekly-offers { padding-top: 48px; padding-bottom: 68px; }
}

/* ============================================================
   2. KOTAK & KARTU
   ============================================================ */

body.cj .title-box,
body.cj .info-box,
body.cj .filter-section,
body.cj .table-container,
body.cj .eval-card,
body.cj .about-box,
body.cj .jg-block,
body.cj .result-card {
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-xl);
  box-shadow: var(--cj-shadow-sm);
}

body.cj .filter-section,
body.cj .table-container {
  padding: 18px;
  margin-bottom: 18px;
}

body.cj .info-box {
  padding: 20px;
  margin-bottom: 18px;
}

@media (min-width: 768px) {
  body.cj .filter-section,
  body.cj .table-container { padding: 24px; }
  body.cj .info-box { padding: 26px; }
}

/* Judul di dalam kotak */
body.cj .info-box h2,
body.cj .info-box h3,
body.cj .icon-header h3 {
  font-family: var(--cj-font-head);
  color: var(--cj-brand-text);
}

/* ============================================================
   3. FILTER WARISAN
   ============================================================ */

body.cj .filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
}

@media (min-width: 768px) {
  body.cj .filter-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; }
}

body.cj .filter-item { display: flex; flex-direction: column; }

body.cj .filter-label {
  margin-bottom: 6px;
  color: var(--cj-ink);
  font-size: 13px;
  font-weight: 600;
}

body.cj .search-input,
body.cj .filter-select,
body.cj .sort-select {
  width: 100%;
  min-height: var(--cj-tap);
  padding: 11px 14px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-md);
  background: var(--cj-surface);
  color: var(--cj-ink);
  font-family: var(--cj-font-body);
  font-size: 16px;
  line-height: 1.4;
}

body.cj .search-input:focus,
body.cj .filter-select:focus,
body.cj .sort-select:focus {
  outline: none;
  border-color: var(--cj-brand-text);
  box-shadow: 0 0 0 3px rgba(var(--cj-navy-rgb), 0.12);
}

body.cj .info-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--cj-muted);
  font-size: 13px;
}

body.cj .info-count strong { color: var(--cj-brand-text); }

/* ============================================================
   4. TABEL WARISAN (.data-table) → kartu di mobile
   ============================================================ */

body.cj .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

body.cj .data-table thead th {
  padding: 13px 14px;
  background: var(--cj-navy);
  color: #fff;
  font-family: var(--cj-font-head);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

body.cj .data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--cj-line);
  vertical-align: top;
  color: var(--cj-ink);
}

body.cj .data-table tbody tr:hover { background: var(--cj-surface-alt); }

@media (max-width: 767px) {
  body.cj .data-table,
  body.cj .data-table tbody { display: block; width: 100%; }

  body.cj .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  body.cj .data-table tbody tr {
    display: block;
    padding: 13px 15px;
    margin-bottom: 12px;
    background: var(--cj-surface);
    border: 1px solid var(--cj-line);
    border-left: 3px solid var(--cj-gold);
    border-radius: var(--cj-r-lg);
    box-shadow: var(--cj-shadow-sm);
  }

  body.cj .data-table tbody tr:hover { background: var(--cj-surface); }

  body.cj .data-table tbody td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--cj-line-soft);
    text-align: right;
    font-size: 13.5px;
  }

  body.cj .data-table tbody td:last-child { border-bottom: none; padding-bottom: 0; }

  body.cj .data-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cj-muted);
    padding-top: 2px;
  }

  /* Nomor urut tidak informatif di layar kecil */
  body.cj .data-table tbody td[data-label="No"] { display: none; }

  /* Kolom judul jadi headline kartu */
  body.cj .data-table tbody td[data-label="Nama Jurnal/Penerbit"],
  body.cj .data-table tbody td[data-label="Judul Jurnal"] {
    display: block;
    text-align: left;
    padding-top: 0;
    padding-bottom: 9px;
    font-size: 15px;
    color: var(--cj-brand-text);
  }

  body.cj .data-table tbody td[data-label="Nama Jurnal/Penerbit"]::before,
  body.cj .data-table tbody td[data-label="Judul Jurnal"]::before { display: none; }

  /* Lebar kolom desktop tidak relevan pada mode kartu */
  body.cj .data-table .col-w-50,
  body.cj .data-table .col-w-80,
  body.cj .data-table .col-w-120,
  body.cj .data-table .col-w-150,
  body.cj .data-table .col-w-180 { width: auto; }
}

/* Badge di dalam tabel */
body.cj .badge-sumber,
body.cj .badge-status,
body.cj .badge-year,
body.cj .badge-jurnal,
body.cj .badge-penerbit {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--cj-r-pill);
  font-size: 11.5px;
  font-weight: 600;
  white-space: normal;
}

body.cj .badge-jurnal   { background: rgba(var(--cj-navy-rgb), 0.09); color: var(--cj-brand-text); }
body.cj .badge-penerbit { background: rgba(var(--cj-gold-rgb), 0.20); color: #6F5518; }

/* Emas pekat tak terbaca di atas kartu gelap (rasio 2,26) */
:root[data-theme="dark"] body.cj .badge-penerbit { color: var(--cj-warning); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.cj .badge-penerbit { color: var(--cj-warning); }
}

/* Sumber data (/predator-daftar) dan status indeksasi (/discontinued-scopus).
   Versi lama memakai pil gradasi jenuh berteks putih — rasio kontrasnya
   hanya 2,2-4,0. Sekarang pil bertint; warna teksnya dipekatkan agar
   lolos AA pada ukuran 11,5px, lalu dicerahkan lagi saat mode gelap. */
body.cj .badge-sumber.predatory,
body.cj .badge-status.discontinued {
  background: rgba(220, 38, 38, 0.12);
  color: #B91C1C;
}

body.cj .badge-sumber.bealls,
body.cj .badge-status.policy {
  background: rgba(217, 119, 6, 0.14);
  color: #92400E;
}

body.cj .badge-sumber.dikti {
  background: rgba(126, 34, 206, 0.12);
  color: #6B21A8;
}

body.cj .badge-sumber.default {
  background: rgba(var(--cj-navy-rgb), 0.07);
  color: #475569;
}

body.cj .badge-year {
  background: rgba(var(--cj-navy-rgb), 0.09);
  color: var(--cj-brand-text);
}

/* Mode gelap: kartu jadi gelap, jadi warna pekat di atas dibalik terang. */
:root[data-theme="dark"] body.cj .badge-sumber.predatory,
:root[data-theme="dark"] body.cj .badge-status.discontinued { color: var(--cj-danger); }

:root[data-theme="dark"] body.cj .badge-sumber.bealls,
:root[data-theme="dark"] body.cj .badge-status.policy { color: var(--cj-warning); }

:root[data-theme="dark"] body.cj .badge-sumber.dikti   { color: #C89BF0; }
:root[data-theme="dark"] body.cj .badge-sumber.default { color: var(--cj-muted); }
:root[data-theme="dark"] body.cj .badge-penerbit       { color: var(--cj-warning); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.cj .badge-sumber.predatory,
  :root:not([data-theme="light"]) body.cj .badge-status.discontinued { color: var(--cj-danger); }

  :root:not([data-theme="light"]) body.cj .badge-sumber.bealls,
  :root:not([data-theme="light"]) body.cj .badge-status.policy { color: var(--cj-warning); }

  :root:not([data-theme="light"]) body.cj .badge-sumber.dikti   { color: #C89BF0; }
  :root:not([data-theme="light"]) body.cj .badge-sumber.default { color: var(--cj-muted); }
  :root:not([data-theme="light"]) body.cj .badge-penerbit       { color: var(--cj-warning); }
}

/* ============================================================
   5. PAGINASI WARISAN
   ============================================================ */

body.cj .pagination-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 22px;
}

body.cj .pagination-wrapper button,
body.cj .pagination-wrapper .page-btn {
  min-width: var(--cj-tap);
  min-height: var(--cj-tap);
  padding: 0 13px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-md);
  background: var(--cj-surface);
  color: var(--cj-ink);
  font-family: var(--cj-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

body.cj .pagination-wrapper button:hover:not(:disabled),
body.cj .pagination-wrapper .page-btn:hover:not(:disabled) {
  border-color: var(--cj-brand-text);
  background: var(--cj-navy);
  color: #fff;
}

body.cj .pagination-wrapper button.active,
body.cj .pagination-wrapper .page-btn.active {
  border-color: var(--cj-brand-text);
  background: var(--cj-navy);
  color: #fff;
}

body.cj .pagination-wrapper button:disabled { opacity: 0.4; cursor: not-allowed; }

/* "Halaman X dari Y" berdiri sendiri di ujung baris; di layar sempit
   pindah ke baris bawah agar deretan nomor tidak terdesak. */
body.cj .pagination-wrapper .page-info--total {
  flex: 1 0 100%;
  order: 1;
  margin-top: 4px;
  text-align: center;
}

@media (min-width: 768px) {
  body.cj .pagination-wrapper .page-info--total {
    flex: 0 0 auto;
    margin-top: 0;
    margin-left: 6px;
  }
}

/* ============================================================
   6. TOMBOL WARISAN
   ============================================================ */

body.cj .main-button a,
body.cj .border-button a,
body.cj .jg-cta,
body.cj .btn-contribute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--cj-tap);
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--cj-r-lg);
  background: linear-gradient(135deg, var(--cj-gold) 0%, var(--cj-gold-light) 100%);
  color: var(--cj-navy) !important;
  font-family: var(--cj-font-body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--cj-shadow-gold);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body.cj .main-button a:hover,
body.cj .border-button a:hover,
body.cj .jg-cta:hover,
body.cj .btn-contribute:hover { transform: translateY(-2px); }

body.cj .btn-contribute {
  background: #25D366;
  color: #fff !important;
  box-shadow: 0 8px 24px -10px rgba(37, 211, 102, 0.6);
}

/* ============================================================
   7. CALL TO ACTION WARISAN
   ============================================================ */

body.cj .call-to-action {
  padding: 34px 0;
  margin-top: 0;
  background: linear-gradient(135deg, var(--cj-navy) 0%, var(--cj-navy-deep) 100%);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

body.cj .call-to-action h2 {
  margin: 0 0 6px;
  color: #fff;
  font-size: clamp(1.2rem, 3.4vw, 1.6rem);
}

body.cj .call-to-action h4 {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--cj-font-body);
  font-size: 14.5px;
  font-weight: 400;
}

body.cj .call-to-action .border-button { display: flex; justify-content: center; }

@media (min-width: 768px) {
  body.cj .call-to-action { padding: 48px 0; }
}

/* ============================================================
   8. SECTION HEADING WARISAN
   ============================================================ */

body.cj .section-heading { margin-bottom: 26px; text-align: center; }

body.cj .section-heading h2 {
  margin: 0 0 8px;
  color: var(--cj-ink-strong);
  font-size: clamp(1.4rem, 4vw, 2rem);
}

body.cj .section-heading p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--cj-muted);
  font-size: 15px;
}

body.cj .line-dec {
  width: 52px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--cj-gold);
}

/* ============================================================
   9. TIPOGRAFI KONTEN WARISAN
   ============================================================ */

body.cj .detailed-list { padding-left: 18px; }

body.cj .detailed-list li { margin-bottom: 12px; }

body.cj .detailed-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--cj-ink-strong);
  font-size: 14.5px;
}

body.cj .detailed-list p {
  margin: 0;
  color: var(--cj-muted);
  font-size: 13.5px;
  line-height: 1.65;
}

body.cj .lead { color: var(--cj-muted); font-size: 15.5px; line-height: 1.7; }

/* Kotak peringatan */
body.cj .warning-note,
body.cj .info-box-warning,
body.cj .alert-warning {
  padding: 13px 16px;
  border: 0;
  border-left: 3px solid var(--cj-gold);
  border-radius: 0 var(--cj-r-md) var(--cj-r-md) 0;
  background: var(--cj-warning-bg);
  color: var(--cj-warning-text);
  font-size: 13.5px;
}

body.cj .warning-note p,
body.cj .warning-note span,
body.cj .info-box-warning p,
body.cj .info-box-warning span { color: var(--cj-warning-text); }

/* ============================================================
   9b. PENGGANTI IKON
   ------------------------------------------------------------
   Seluruh ikon Font Awesome dilepas dari konten. Penanda visual
   dibuat dari CSS supaya gayanya konsisten dan tidak bergantung
   pada webfont.
   ============================================================ */

/* Daftar berpenanda garis emas (menggantikan ikon di <li>) */
body.cj .item .thumb .text ul,
body.cj .eval-list,
body.cj .predator-list {
  list-style: none;
  padding-left: 0;
}

body.cj .item .thumb .text ul li {
  position: relative;
  padding-left: 16px;
}

body.cj .item .thumb .text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--cj-gold);
}

/* Panah carousel (owl) tanpa ikon font */
body.cj .owl-arrow {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

body.cj .owl-arrow--next { transform: rotate(45deg); }
body.cj .owl-arrow--prev { transform: rotate(-135deg); }

/* Kotak berikon dulu (.icon-header) kini bergaris emas */
body.cj .icon-header {
  display: block;
  padding-top: 14px;
  border-top: 3px solid var(--cj-gold);
  border-radius: 2px;
}

body.cj .icon-header h3 { margin: 0; }

/* ============================================================
   10. KONDISI KOSONG / MEMUAT
   ============================================================ */

body.cj .loading,
body.cj .no-data {
  padding: 44px 20px;
  color: var(--cj-muted);
  text-align: center;
}

body.cj .no-data i { margin-bottom: 12px; color: var(--cj-line); font-size: 44px; }

body.cj .empty-state-icon,
body.cj .empty-icon-lg { color: var(--cj-line); }

/* ============================================================
   11. TABEL LAIN (bukan .data-table) — cukup bisa digeser
   ============================================================ */

body.cj .table-responsive {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.cj .comparison-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

@media (max-width: 767px) {
  body.cj .comparison-table { min-width: 460px; }
}

body.cj .comparison-table th {
  padding: 12px 12px;
  background: var(--cj-navy);
  color: #fff !important;
  font-family: var(--cj-font-head);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
}

body.cj .comparison-table td {
  padding: 12px;
  border-bottom: 1px solid var(--cj-line);
  color: var(--cj-ink) !important;
  vertical-align: top;
  line-height: 1.6;
}

/* ============================================================
   12. KARTU JURNAL GRATIS (.jg-*)
   ============================================================ */

body.cj .jg-wrap {
  width: 100%;
  max-width: var(--cj-container);
  margin-inline: auto;
  padding: 28px var(--cj-gutter) 48px;
}

body.cj .jg-hero {
  display: grid;
  gap: 18px;
  padding: 0;
  margin-bottom: 24px;
  background: none;
  border: 0;
}

body.cj .jg-hero-content h1 { color: var(--cj-ink-strong); }

body.cj .jg-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  border-radius: var(--cj-r-pill);
  background: rgba(var(--cj-gold-rgb), 0.2);
  color: #8A6D1F;
  font-size: 12.5px;
  font-weight: 600;
}

body.cj .jg-hero-filter {
  display: block;
  padding: 18px;
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-xl);
  box-shadow: var(--cj-shadow-sm);
}

body.cj .jg-hero-filter-icon { color: var(--cj-gold); font-size: 20px; }
body.cj .jg-hero-filter-title { display: block; margin: 8px 0 4px; color: var(--cj-brand-text); font-weight: 700; }
body.cj .jg-hero-filter-desc { display: block; color: var(--cj-muted); font-size: 13.5px; }
body.cj .jg-hero-filter-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--cj-blue); font-weight: 600; font-size: 13.5px; }

body.cj .jg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 26px;
}

body.cj .jg-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-lg);
  box-shadow: var(--cj-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

body.cj .jg-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cj-navy-rgb), 0.18);
  box-shadow: var(--cj-shadow);
}

body.cj .jg-card .badge-sinta { align-self: flex-start; }

body.cj .jg-name { color: var(--cj-brand-text); font-size: 15px; font-weight: 700; line-height: 1.35; }
body.cj .jg-pen  { color: var(--cj-muted); font-size: 12.5px; }

body.cj .jg-block {
  padding: 20px;
  margin-bottom: 20px;
}

body.cj .jg-block h2 { color: var(--cj-brand-text); font-size: clamp(1.15rem, 3.2vw, 1.4rem); }
body.cj .jg-block p  { color: var(--cj-muted); font-size: 14.5px; line-height: 1.7; }

body.cj .faq-item { padding: 14px 0; border-bottom: 1px solid var(--cj-line-soft); }
body.cj .faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
body.cj .faq-q { margin: 0 0 6px; color: var(--cj-brand-text); font-weight: 700; font-size: 14.5px; }
body.cj .faq-a { margin: 0; color: var(--cj-muted); font-size: 14px; line-height: 1.7; }

@media (min-width: 768px) {
  body.cj .jg-hero { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 28px; }
  body.cj .jg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cj .jg-block { padding: 28px; }
}

@media (min-width: 1024px) {
  body.cj .jg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}