/* ═══════════════════════════════════════════════════════════════════════════
   Central Kaca Film — Gaya halaman Artikel

   Berkas terpisah, dimuat HANYA di halaman blog. style.css situs tidak
   disentuh sama sekali, jadi tidak ada risiko merusak halaman yang sudah jalan.

   Semua warna mengambil variabel dari style.css lewat var(), dengan nilai
   cadangan di belakangnya — kalau nama variabelnya berubah, halaman ini tetap
   tampil wajar, tidak jadi hitam-putih.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --b-radius: 14px;
  --b-line: rgba(255, 255, 255, .09);
  --b-surface: rgba(255, 255, 255, .035);
}

.bwrap { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.bmain { padding-bottom: 4.5rem; }

/* ── Kepala halaman ──────────────────────────────────────────────────────── */
.bhero {
  background:
    radial-gradient(1000px 340px at 12% -10%, rgba(216, 19, 36, .16), transparent 62%),
    linear-gradient(180deg, var(--navy, #0B2154), transparent 88%);
  border-bottom: 1px solid var(--b-line);
  padding: 3.2rem 0 2.4rem;
  margin-bottom: 2.6rem;
}
.bhero h1 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--white, #fff);
  margin: .45rem 0 .5rem;
  max-width: 24ch;
}
.bhero > .bwrap > p { color: var(--gray-light, #ccc); font-size: .97rem; max-width: 62ch; }
.bmeta-hero { color: var(--gray, #999); font-size: .86rem; display: flex; gap: .45rem; flex-wrap: wrap; }
.bmeta-hero span { opacity: .55; }

.bcrumb { font-size: .8rem; color: var(--gray, #999); display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.bcrumb a { color: var(--gold, #f1c40f); text-decoration: none; }
.bcrumb a:hover { text-decoration: underline; }
.bcrumb strong { color: var(--gray-light, #ccc); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.bcrumb span { opacity: .45; }

.bkategori {
  display: inline-block;
  background: rgba(216, 19, 36, .14);
  border: 1px solid rgba(216, 19, 36, .38);
  color: #ff8a93;
  font-size: .68rem; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  padding: .22rem .62rem; border-radius: 999px;
}

/* ── Daftar artikel ──────────────────────────────────────────────────────── */
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; }

.bkartu {
  background: var(--dark2, #181818);
  border: 1px solid var(--b-line);
  border-radius: var(--b-radius);
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.bkartu:hover { transform: translateY(-3px); border-color: rgba(216, 19, 36, .45); }
.bkartu-tautan { display: block; color: inherit; text-decoration: none; height: 100%; }
.bkartu-gambar { aspect-ratio: 16 / 9; background: var(--dark3, #1e1e1e); overflow: hidden; }
.bkartu-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkartu-isi { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.bkartu-isi h2, .bkartu-isi h3 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 1.03rem; font-weight: 700; line-height: 1.35; color: var(--white, #fff); margin: 0;
}
.bkartu-isi p { font-size: .87rem; color: var(--gray-light, #ccc); line-height: 1.6; margin: 0; }
.bmeta { font-size: .78rem; color: var(--gray-mid, #666); display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── Halaman baca ────────────────────────────────────────────────────────── */
.bartikel { max-width: 760px; margin: 0 auto; }
.bartikel-gambar { margin: 0 0 2rem; border-radius: var(--b-radius); overflow: hidden; border: 1px solid var(--b-line); }
.bartikel-gambar img { width: 100%; height: auto; display: block; }

.bisi { font-size: 1.03rem; line-height: 1.85; color: var(--gray-light, #ccc); }
.bisi > *:first-child { margin-top: 0; }
.bisi h2 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 1.42rem; font-weight: 700; color: var(--white, #fff);
  margin: 2.3rem 0 .75rem; padding-left: .8rem;
  border-left: 3px solid var(--red, #D81324);
  scroll-margin-top: 90px;
}
.bisi h3 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 1.13rem; font-weight: 700; color: var(--white, #fff);
  margin: 1.7rem 0 .55rem; scroll-margin-top: 90px;
}
.bisi p { margin: 0 0 1.15rem; }
.bisi ul, .bisi ol { margin: 0 0 1.3rem 1.3rem; }
.bisi li { margin-bottom: .55rem; }
.bisi a { color: var(--gold, #f1c40f); text-decoration: underline; text-underline-offset: 3px; }
.bisi strong { color: var(--white, #fff); font-weight: 700; }
.bisi img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.2rem 0; }
.bisi hr { border: none; border-top: 1px solid var(--b-line); margin: 2.2rem 0; }
.bisi blockquote {
  margin: 0 0 1.3rem; padding: .85rem 1.15rem;
  border-left: 3px solid var(--gold, #f1c40f);
  background: var(--b-surface); border-radius: 0 10px 10px 0; color: var(--gray-light, #ccc);
}
/* Tabel harga bisa lebih lebar dari kolom teks — digulir sendiri, badan
   halaman tidak boleh ikut bergeser ke samping. */
.bisi .btabel-bungkus { overflow-x: auto; margin: 0 0 1.4rem; }
.bisi table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 430px; }
.bisi th, .bisi td { border: 1px solid var(--b-line); padding: .6rem .8rem; text-align: left; }
.bisi th { background: rgba(255, 255, 255, .05); color: var(--white, #fff); font-weight: 700; }

/* ── Daftar isi ──────────────────────────────────────────────────────────── */
.btoc {
  background: var(--b-surface); border: 1px solid var(--b-line);
  border-radius: var(--b-radius); padding: 1.1rem 1.3rem; margin: 0 0 2.2rem;
}
.btoc-judul {
  font-size: .72rem; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold, #f1c40f); margin-bottom: .6rem;
}
.btoc ol { margin: 0; padding-left: 1.2rem; }
.btoc li { margin-bottom: .34rem; font-size: .9rem; }
.btoc li.sub { margin-left: 1rem; font-size: .85rem; opacity: .85; }
.btoc a { color: var(--gray-light, #ccc); text-decoration: none; }
.btoc a:hover { color: var(--gold, #f1c40f); text-decoration: underline; }

/* ── Kotak umum ──────────────────────────────────────────────────────────── */
.bbox {
  background: var(--b-surface); border: 1px solid var(--b-line);
  border-radius: var(--b-radius); padding: 1.1rem 1.25rem; margin-top: 2rem;
}
.bbox-label {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: .8rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--gray-light, #ccc);
}
.bbagikan { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.bbagikan-tautan { display: flex; gap: .5rem; flex-wrap: wrap; }

.bbtn {
  display: inline-block; background: var(--red, #D81324); color: #fff;
  font-weight: 700; font-size: .87rem; text-decoration: none;
  padding: .6rem 1.25rem; border-radius: 9px; border: 1px solid transparent;
  transition: background .15s ease;
}
.bbtn:hover { background: var(--red-bright, #f01525); }
.bbtn-garis { background: transparent; border-color: var(--b-line); color: var(--gray-light, #ccc); }
.bbtn-garis:hover { background: rgba(255, 255, 255, .06); border-color: var(--gold, #f1c40f); color: var(--white, #fff); }

/* ── Navigasi antar artikel ──────────────────────────────────────────────── */
.bnavart { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.bnavart a {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--b-surface); border: 1px solid var(--b-line);
  border-radius: var(--b-radius); padding: .9rem 1.05rem;
  text-decoration: none; color: inherit; transition: border-color .15s ease;
}
.bnavart a:hover { border-color: rgba(216, 19, 36, .45); }
.bnavart a.kanan { text-align: right; }
.bnavart .ket { font-size: .72rem; color: var(--gold, #f1c40f); font-weight: 700; letter-spacing: .5px; }
.bnavart .jdl { font-size: .9rem; color: var(--white, #fff); font-weight: 600; line-height: 1.4; }

/* ── Kotak penulis ───────────────────────────────────────────────────────── */
.bpenulis { display: flex; gap: 1rem; align-items: flex-start; }
.bpenulis-foto {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--navy, #0B2154), var(--red, #D81324));
  color: var(--gold, #f1c40f);
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-weight: 800; font-size: .95rem; letter-spacing: .5px;
}
.bpenulis-nama { font-weight: 700; color: var(--white, #fff); font-size: .98rem; }
.bpenulis-peran { font-size: .78rem; color: var(--gold, #f1c40f); margin-bottom: .35rem; }
.bpenulis-bio { font-size: .87rem; color: var(--gray-light, #ccc); line-height: 1.65; margin: 0; }

/* ── Ajakan ──────────────────────────────────────────────────────────────── */
.bajakan {
  margin-top: 2.2rem; padding: 1.8rem 1.5rem; text-align: center;
  background: linear-gradient(135deg, rgba(11, 33, 84, .75), rgba(216, 19, 36, .16));
  border: 1px solid rgba(216, 19, 36, .32); border-radius: var(--b-radius);
}
.bajakan h2 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 1.28rem; font-weight: 800; color: var(--white, #fff); margin: 0 0 .5rem;
}
.bajakan p { color: var(--gray-light, #ccc); font-size: .92rem; margin: 0 0 1.15rem; max-width: 52ch; margin-inline: auto; }

/* ── Terkait ─────────────────────────────────────────────────────────────── */
.bterkait { margin-top: 3.4rem; }
.bterkait h2 {
  font-family: var(--font-head, 'Sora', system-ui, sans-serif);
  font-size: 1.45rem; font-weight: 800; color: var(--white, #fff); margin: 0 0 1.2rem;
}

/* ── Kosong & halaman ────────────────────────────────────────────────────── */
.bkosong { text-align: center; padding: 3.5rem 1rem; color: var(--gray, #999); }
.bkosong-judul { font-size: 1.1rem; font-weight: 700; color: var(--white, #fff); margin-bottom: .5rem; }
.bkosong .bbtn { margin-top: 1.3rem; }

.bpaging { display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; font-size: .88rem; color: var(--gray, #999); }
.bpaging a { color: var(--gold, #f1c40f); text-decoration: none; font-weight: 700; }
.bpaging a:hover { text-decoration: underline; }

/* ── Layar kecil ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bwrap { padding: 0 1.1rem; }
  .bhero { padding: 2.3rem 0 1.8rem; margin-bottom: 2rem; }
  .bgrid { grid-template-columns: 1fr; }
  .bnavart { grid-template-columns: 1fr; }
  .bnavart a.kanan { text-align: left; }
  .bisi { font-size: .99rem; }
  .bbagikan { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .bwrap { padding: 0 .9rem; }
  .bpenulis { flex-direction: column; }
}