/* ============================================================
   Berita bergaya portal (parts/_berita_*.php)
   Halaman Berita: sidebar cari & kategori + 1 berita utama + 4 kartu (2 x 2).
   Memakai token warna tema (sitaka-base.css / sitaka-dark.css).
   ============================================================ */
.bk { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.bk--baca { grid-template-columns: minmax(0, 1fr) 300px; }

/* ---------- sidebar ---------- */
.bk-side { display: grid; gap: 16px; position: sticky; top: 90px; }
.bk-panel { background: var(--cj-surface); border: 1px solid var(--cj-line); border-radius: var(--cj-r-lg); padding: 16px; box-shadow: var(--cj-shadow-sm); }
.bk-panel__judul { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--cj-ink-strong); }
.bk-cari { display: flex; border: 1px solid var(--cj-line); border-radius: 10px; overflow: hidden; background: var(--cj-surface-alt); }
.bk-cari input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 12px; font-size: 13.5px; color: var(--cj-ink); }
.bk-cari input:focus { outline: none; }
.bk-cari:focus-within { border-color: var(--cj-gold); box-shadow: 0 0 0 3px rgba(var(--cj-gold-rgb), .25); }
.bk-cari button { border: 0; background: none; padding: 0 12px; color: var(--cj-muted); cursor: pointer; }
.bk-kat { display: grid; gap: 2px; }
.bk-kat a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--cj-ink) !important; text-decoration: none !important;
}
.bk-kat a span { font-size: 12px; color: var(--cj-muted); }
.bk-kat a:hover { background: var(--cj-surface-alt); }
.bk-kat a.is-aktif { background: var(--cj-navy); color: #fff !important; font-weight: 600; }
.bk-kat a.is-aktif span { color: rgba(255, 255, 255, .75); }

/* ---------- kartu ---------- */
.bk-main { display: grid; gap: 20px; }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.bk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bk-kartu {
  display: flex; flex-direction: column; background: var(--cj-surface); border: 1px solid var(--cj-line); border-radius: var(--cj-r-lg);
  overflow: hidden; box-shadow: var(--cj-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.bk-kartu:hover { transform: translateY(-3px); box-shadow: var(--cj-shadow); }
.bk-kartu__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--cj-line-soft); overflow: hidden; }
.bk-kartu__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.bk-kartu:hover .bk-kartu__media img { transform: scale(1.03); }
.bk-kartu__ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 40px; color: var(--cj-muted); }
.bk-label {
  position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 6px;
  background: var(--cj-gold); color: var(--cj-navy) !important; font-size: 11.5px; font-weight: 700; line-height: 1.5; text-decoration: none !important;
}
.bk-label--kepala { position: static; display: inline-block; margin-bottom: 10px; }
.bk-kartu__isi { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; padding: 14px 16px 16px; }
.bk-kartu--utama .bk-kartu__isi { padding: 18px 22px 22px; gap: 10px; }
.bk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--cj-muted); }
.bk-meta--kepala { font-size: 13.5px; margin-top: 10px; }
.bk-kartu__judul { margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 700; }
.bk-kartu--utama .bk-kartu__judul { font-size: clamp(1.2rem, 2.4vw, 1.55rem); line-height: 1.3; }
.bk-kartu__judul a { color: var(--cj-ink-strong) !important; text-decoration: none !important; }
.bk-kartu__judul a:hover { color: var(--cj-brand-text) !important; }
.bk-kartu__ringkas {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--cj-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-kartu--utama .bk-kartu__ringkas { font-size: 14px; -webkit-line-clamp: 3; }
.bk-kartu__baca { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--cj-brand-text) !important; text-decoration: none !important; }
.bk-kartu__baca:hover { text-decoration: underline !important; }

.bk-info { margin: 0; font-size: 13.5px; color: var(--cj-muted); }
.bk-kosong { text-align: center; padding: 48px 16px; color: var(--cj-muted); background: var(--cj-surface); border: 1px dashed var(--cj-line); border-radius: var(--cj-r-lg); }
.bk-kosong i { font-size: 36px; }

/* ---------- penomoran halaman ---------- */
.bk-hal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 6px; }
.bk-hal a, .bk-hal span {
  min-width: 36px; height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 13.5px; text-decoration: none !important;
}
.bk-hal a { border: 1px solid var(--cj-line); background: var(--cj-surface); color: var(--cj-ink) !important; }
.bk-hal a:hover { border-color: var(--cj-navy); }
.bk-hal .is-aktif { background: var(--cj-navy); color: #fff; font-weight: 700; }
.bk-hal__titik { color: var(--cj-muted); }

/* ---------- halaman baca ---------- */
.bk-baca { background: var(--cj-surface); border: 1px solid var(--cj-line); border-radius: var(--cj-r-lg); overflow: hidden; box-shadow: var(--cj-shadow-sm); }
/* sampul 16:9 (1600 x 900) tampil utuh di semua tempat: kartu, berita utama, halaman baca */
.bk-baca__sampul { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bk-baca__isi .ck-content { padding: 24px 28px !important; font-size: 15.5px; line-height: 1.75; color: var(--cj-ink); }
.bk-baca__isi .ck-content img { max-width: 100%; height: auto; border-radius: 10px; }
.bk-baca__kaki { padding: 0 28px 24px; }
.bk-mini-daftar { display: grid; gap: 12px; }
.bk-mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; text-decoration: none !important; }
.bk-mini__media { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--cj-line-soft); }
.bk-mini__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-mini__media .bk-kartu__ph { font-size: 22px; }
.bk-mini__teks { display: grid; gap: 4px; }
.bk-mini__judul {
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--cj-ink-strong);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-mini:hover .bk-mini__judul { color: var(--cj-brand-text); }

/* ---------- beranda ---------- */
.bk-beranda__kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.bk-beranda__kepala .cj-head { margin-bottom: 0; }

/* ---------- layar kecil ---------- */
@media (max-width: 1100px) {
  .bk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
  .bk, .bk--baca { grid-template-columns: 1fr; }
  .bk-side { position: static; }
  /* kategori jadi deretan tombol agar berita tidak terdorong jauh ke bawah */
  .bk-kat { display: flex; flex-wrap: wrap; gap: 6px; }
  .bk-kat a { border: 1px solid var(--cj-line); padding: 6px 12px; }
  .bk > .bk-side:first-child { order: 0; }
  .bk--baca .bk-side { order: 2; }
}
@media (max-width: 575.98px) {
  .bk-grid, .bk-grid--4 { grid-template-columns: 1fr; }
  .bk-baca__isi .ck-content { padding: 18px 16px !important; }
  .bk-baca__kaki { padding: 0 16px 18px; }
  .bk-hal__arah { flex-basis: 100%; }
}

/* mode gelap */
:root[data-theme="dark"] .bk-kat a.is-aktif, :root[data-theme="dark"] .bk-hal .is-aktif { background: #1D4E89; }
:root[data-theme="dark"] .bk-label { color: #0F172A !important; }