/* ============================================================
   Halaman artikel jurnal.
   Dimuat HANYA di /blog/<slug>, tidak di halaman lain.

   Batasnya sengaja berhenti di .lembar: kepala situs dan seluruh
   bagian "Baca berikutnya" ke bawah tetap memakai botmoni-redesign.css
   apa adanya. Karena itu warna kertas dan garis buku dipasang di
   .lembar, bukan di body - kalau di body, footer ikut berubah.
   ============================================================ */

.lembar{
  /* Sama persis dengan latar body situs (--paper). Kalau berbeda sedikit pun,
     batas bawah .lembar terlihat sebagai garis horizontal yang memotong
     halaman tepat di atas bagian "Baca berikutnya". */
  --kertas:#EFEDE4;
  --kertas-tua:#EDE8D9;
  --kartu:#FFFEFA;
  --tinta:#16211B;
  --tinta-2:#4A554E;
  --tinta-3:#78827B;
  --hutan:#1B4332;
  --lumut:#2D6A4F;
  --kunyit:#E9BE3C;
  --kunyit-muda:#FBF2CE;
  --bata:#A33B2C;
  --garis-kertas:#DFD8C4;

  --rd:14px;
  --rd-kecil:8px;

  position:relative;
  background:var(--kertas);
  color:var(--tinta);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:1.0625rem;
  line-height:1.7;
  padding-bottom:3.5rem;
}

/* Garis buku. Digambar dengan gradien, tanpa gambar dan tanpa elemen DOM. */
.lembar::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0, transparent 31px,
    rgba(27,67,50,.07) 31px, rgba(27,67,50,.07) 32px);
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
}
.lembar > *{position:relative; z-index:1}

/* Lebar container sengaja TIDAK ditimpa: .wrap milik situs sudah
   min(1140px, 92vw), dan menimpanya membuat tepi kiri artikel meleset
   dari logo serta menu di kepala halaman. */
.lembar a{color:var(--hutan); text-underline-offset:3px}
.lembar a:hover{color:var(--lumut)}

/* ---------- Remah roti ----------
   Nama kelas .crumb dan .crumb__now dipertahankan: susunannya diuji
   agar selalu sama dengan BreadcrumbList di JSON-LD. */
.lembar .crumb{
  padding:2rem 0 0; font-size:.8125rem; color:var(--tinta-3);
  font-family:inherit; letter-spacing:normal; text-transform:none; margin:0;
}
.lembar .crumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:baseline}
.lembar .crumb li:not(:last-child)::after{content:"/"; margin-inline-start:.4rem; color:var(--garis-kertas)}
.lembar .crumb a{color:var(--tinta-3); text-decoration:none}
.lembar .crumb a:hover{color:var(--hutan); text-decoration:underline}
.lembar .crumb__now{
  color:var(--tinta-2); font-size:.8125rem; text-transform:none; letter-spacing:normal;
  display:inline-block; max-width:min(42ch,58%);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
}

/* ---------- Blok atas ----------
   Memakai grid yang sama persis dengan .tata-letak, lalu isinya ditaruh di
   kolom kedua. Dengan begitu remah roti, judul, baris penulis, dan kotak
   ringkasan punya tepi kiri yang sama dengan badan artikel di bawahnya -
   bukan rata tengah sendiri, yang membuat halaman terlihat bertingkat. */
.atas{display:grid; gap:3rem; grid-template-columns:220px minmax(0,1fr); align-items:start}
.kolom-atas{grid-column:2; min-width:0}

/* ---------- Kepala artikel ---------- */
.artikel-kepala{margin:0; padding:.5rem 0 2.25rem}
.label-kategori{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--bata); border:1px solid rgba(163,59,44,.28); background:rgba(163,59,44,.06);
  padding:.2rem .6rem; border-radius:999px; text-decoration:none;
}
.artikel-kepala h1{
  font-family:inherit;
  font-size:clamp(2rem, 1.35rem + 2.6vw, 2.9rem);
  line-height:1.16; letter-spacing:-.03em; font-weight:700;
  margin:1rem 0 .85rem; text-wrap:balance; color:var(--tinta);
}
.dek{font-size:1.1875rem; line-height:2rem; color:var(--tinta-2); margin:0 0 1.75rem; max-width:56ch}
.baris-penulis{display:flex; align-items:center; gap:.8rem; padding-top:1.25rem; border-top:1px solid var(--garis-kertas)}
.avatar-tulis{width:42px; height:42px; border-radius:50%; background:var(--hutan); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:none}
.baris-penulis b{display:block; font-size:.9375rem; font-weight:600}
.meta-tulis{font-size:.8125rem; color:var(--tinta-3); margin:.1rem 0 0}

/* ---------- Kotak jawaban singkat ---------- */
.jawaban-cepat{
  margin:0 0 3rem;
  background:var(--kunyit-muda); border:1px solid #E7D89A;
  border-radius:var(--rd); padding:1.5rem 1.6rem;
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:start;
}
.buku-kas{display:grid; grid-template-columns:repeat(6,14px); gap:4px; flex:none}
.buku-kas i{display:block; width:14px; height:14px; border-radius:2px; background:#fff; border:1px solid #E0D3A4}
.buku-kas i.isi{background:var(--hutan); border-color:var(--hutan)}
.jawaban-cepat h2{font-family:inherit; font-size:1rem; margin:0 0 .4rem; letter-spacing:-.01em; color:var(--tinta)}
.jawaban-cepat p{margin:0; font-size:.9375rem; line-height:1.65; color:#4A4326}

/* ---------- Tata letak tiga kolom ---------- */
.tata-letak{
  display:grid; gap:3rem;
  grid-template-columns:220px minmax(0,1fr);
  align-items:start;
}
.rel-kiri{position:sticky; top:32px}

/* ---------- Daftar isi ----------
   Struktur .toc > nav > a dipertahankan: botmoni-blog-post.js
   menandai tautan yang sedang dibaca dengan kelas .is-on. */
.lembar .toc{font-size:.8125rem; background:none; border:0; padding:0}
.lembar .toc__t{font-family:inherit; font-size:.75rem; font-weight:600; color:var(--tinta-3); margin:0 0 .9rem; letter-spacing:normal; text-transform:none}
.lembar .toc nav{border-left:1px solid var(--garis-kertas)}
.lembar .toc nav a{
  display:block; padding:.4rem 0 .4rem .9rem; margin-left:-1px;
  color:var(--tinta-2); text-decoration:none; line-height:1.4;
  border-left:2px solid transparent; font-size:.8125rem;
}
.lembar .toc nav a:hover{color:var(--hutan)}
.lembar .toc nav a.is-on{color:var(--hutan); font-weight:600; border-left-color:var(--kunyit)}
.lembar .toc nav a.toc__sub{padding-left:1.6rem; color:var(--tinta-3); font-size:.78rem}

/* ---------- Tombol bagikan mengambang ----------
   Dulu kolom ketiga di dalam grid, yang memakan lebar tanpa memberi banyak.
   Sekarang mengambang di pojok kanan bawah: ruangnya kembali ke badan artikel,
   dan tombolnya justru selalu terjangkau tanpa perlu menggulir balik ke atas. */
.rel-kanan{
  position:fixed; right:20px; bottom:20px; top:auto; z-index:50;
}
.rel-kanan ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.rel-kanan .ikon{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--garis-kertas); border-radius:50%; background:var(--kartu);
  color:var(--tinta-2); cursor:pointer; padding:0;
  box-shadow:0 2px 10px rgba(18,33,28,.13);
}
.rel-kanan .ikon svg{width:17px; height:17px}
.rel-kanan .ikon:hover{border-color:var(--hutan); color:var(--hutan)}

/* ---------- Badan artikel ----------
   Lembar opak, supaya baris teks tidak pernah dipotong garis alas.
   Menggantikan seluruh gaya .body dari botmoni-redesign.css. */
.badan{
  /* Mengisi penuh kolomnya. Karena barisnya jadi lebih panjang, ukuran huruf
     dinaikkan sedikit: jumlah huruf per baris yang menentukan nyaman atau
     tidak, bukan lebar dalam piksel. */
  font-size:1.1875rem; line-height:2.05;
  background:var(--kartu);
  border:1px solid var(--garis-kertas);
  border-left:3px solid var(--kunyit);
  border-radius:2px var(--rd) var(--rd) 2px;
  padding:3rem;
  box-shadow:0 1px 0 rgba(27,67,50,.06);
}
.badan p{margin:0 0 2rem}
.badan > p:first-child::first-letter{
  float:left; font-size:3.6rem; line-height:.86; font-weight:700;
  color:var(--hutan); padding:.35rem .55rem 0 0;
}
.badan h2{
  font-family:inherit; color:var(--tinta);
  font-size:1.6rem; line-height:2rem; letter-spacing:-.02em; font-weight:700;
  margin:3rem 0 1rem; scroll-margin-top:32px;
}
.badan h2:first-child{margin-top:0}
.badan h3{
  font-family:inherit; color:var(--tinta);
  font-size:1.1875rem; line-height:2rem; font-weight:600;
  margin:2rem 0 .5rem; scroll-margin-top:32px;
}
.badan ul,.badan ol{margin:0 0 2rem; padding-left:1.35rem}
.badan li{margin-bottom:.5rem}
.badan ul{list-style:none; padding-left:0}
.badan ul li{position:relative; padding-left:1.4rem}
.badan ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--kunyit);
}
.badan ol{counter-reset:poin; list-style:none; padding-left:0}
.badan ol li{counter-increment:poin; position:relative; padding-left:2.4rem}
.badan ol li::before{
  content:counter(poin); position:absolute; left:0; top:.28em;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--hutan); color:#fff; font-size:.78rem; font-weight:700;
  display:grid; place-items:center; line-height:1;
}
.badan strong{font-weight:600}
.badan a{color:var(--hutan); text-decoration:underline; text-decoration-thickness:1px}
.badan a:hover{color:var(--lumut)}

/* ---------- Kartu penulis & ajakan ---------- */
.kartu-penulis{
  margin:3.5rem 0 0;
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--kartu); border:1px solid var(--garis-kertas);
  border-radius:var(--rd); padding:1.35rem;
}
.kartu-penulis b{font-size:.9375rem}
.kartu-penulis p{margin:.25rem 0 0; font-size:.9375rem; color:var(--tinta-2); line-height:1.6}
.cta-sisip{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.cta-sisip .tombol{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font:inherit; font-weight:600; font-size:.9375rem;
  padding:.6rem 1.15rem; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
}
.cta-sisip .tombol-utama{background:var(--hutan); color:#fff}
.cta-sisip .tombol-utama:hover{background:var(--lumut); color:#fff}
.cta-sisip .tombol-garis{border-color:var(--garis-kertas); color:var(--tinta); background:transparent}
.cta-sisip .tombol-garis:hover{border-color:var(--hutan); color:var(--hutan)}

/* ---------- Responsif ---------- */
@media (max-width:1080px){
  .atas,.tata-letak{grid-template-columns:200px minmax(0,1fr); gap:2.5rem}
}
@media (max-width:860px){
  .lembar{font-size:1rem}
  .atas{grid-template-columns:1fr; gap:0}
  .kolom-atas{grid-column:1}
  .tata-letak{grid-template-columns:1fr; gap:0}
  .rel-kiri{position:static; margin-bottom:2.5rem}
  .lembar .toc{background:var(--kartu); border:1px solid var(--garis-kertas); border-radius:var(--rd); padding:1rem 1.15rem}
  .lembar .toc nav{border-left:0}
  .lembar .toc nav a{padding-left:0; border-left:0}
  .lembar .toc nav a.is-on{border-left:0}
  .lembar .toc nav a.toc__sub{display:none}
  .badan{font-size:1.0625rem; line-height:1.85; padding:1.5rem 1.25rem; border-radius:2px 10px 10px 2px}
  .rel-kanan{right:12px; bottom:12px}
  .rel-kanan .ikon{width:38px; height:38px}
  .jawaban-cepat{grid-template-columns:1fr}
  .buku-kas{grid-template-columns:repeat(12,14px)}
}
@media (max-width:520px){
  .badan > p:first-child::first-letter{font-size:3rem}
}

/* ---------- Cetak ---------- */
@media print{
  .rel-kiri,.rel-kanan,.cta-sisip{display:none}
  .badan{padding:0}
  .lembar{background:#fff; font-size:11pt}
  .lembar::before{display:none}
  .atas,.tata-letak{display:block}
  .badan{max-width:none; border:0; padding:0; box-shadow:none; background:none}
}