/*
 * Halaman artikel tunggal (single.php).
 *
 * Port dari templat artikel Pusat Konveksi Jogja, ditulis ulang dengan token
 * desain Lava Tour Merapi (assets/ltm.css): aksen oranye, latar putih. Daftar
 * isi menempel di KIRI kolom artikel di desktop, jadi kotak biasa di atas
 * artikel di bawah ~900px (K-4, tanpa !important).
 */

/* ---------- Bilah kemajuan baca ---------- */
.readbar{
  position:fixed;top:0;left:0;height:3px;z-index:60;
  background:linear-gradient(90deg,var(--brand-600),var(--brand-500));
  transition:width .15s ease-out;
}

/* ---------- Kepala artikel ---------- */
.artikel__head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:56px 0 40px}
.artikel__col{max-width:860px}

.artikel__kategori{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-600);background:var(--brand-50);border-radius:999px;padding:5px 13px;margin-bottom:16px;
}
.artikel__judul{font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.14}
.artikel__ringkas{margin-top:18px;font-size:17.5px;line-height:1.65;color:var(--ink-2)}

.artikel__meta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
}
.byline{display:flex;align-items:center;gap:12px}
.avatar{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff;font-family:var(--ff-head);font-weight:800;font-size:15px;letter-spacing:.02em;
}
.avatar--besar{width:60px;height:60px;font-size:19px}
.byline__nama{font-size:14.5px;font-weight:700;line-height:1.3}
.byline__waktu{font-size:13px;color:var(--ink-3);margin-top:2px}

.share{display:flex;align-items:center;gap:8px}
.share__label{font-size:12.5px;color:var(--ink-3);margin-right:2px}
.share__btn{
  width:38px;height:38px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;text-decoration:none;
  transition:color .16s ease-out,border-color .16s ease-out,background-color .16s ease-out;
}
.share__btn:hover{color:var(--brand-600);border-color:var(--brand-600)}
.share__btn--wa:hover{color:var(--wa);border-color:var(--wa)}
.share__btn.is-done{color:var(--wa);border-color:var(--wa);background:#F0FDF4}

/* ---------- Sampul ---------- */
.artikel__cover{max-width:1040px;margin-top:-28px;position:relative;z-index:1}
.artikel__cover img{
  width:100%;height:clamp(220px,32vw,420px);object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}

/* ---------- Badan: daftar isi (kiri) + isi (kanan) ---------- */
.artikel__grid{padding:56px 0 24px}
.artikel__grid--toc{
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;
  max-width:1120px;
}
.artikel__grid .prose{max-width:72ch}

.toc-box{position:sticky;top:104px}
.toc-box__judul{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
.toc{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.toc a{
  display:block;padding:7px 0 7px 14px;margin-left:-1px;
  border-left:2px solid transparent;
  font-size:13.5px;line-height:1.45;color:var(--ink-2);text-decoration:none;
  transition:color .16s ease-out,border-color .16s ease-out;
}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--brand-600);border-left-color:var(--brand-500);font-weight:600}

/* ---------- Tipografi isi artikel ---------- */
.prose h2{font-size:27px;font-weight:800;letter-spacing:-.015em;margin:44px 0 16px;scroll-margin-top:120px}
.prose h3{font-size:20px;font-weight:700;margin:32px 0 12px;scroll-margin-top:120px}
.prose p{color:var(--ink-2);line-height:1.8;font-size:17px;margin-bottom:20px}
.prose ul,.prose ol{margin:0 0 20px 22px;color:var(--ink-2);line-height:1.8;font-size:17px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--brand-500)}
.prose a{color:var(--brand-600);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink);font-weight:700}
.prose img{border-radius:var(--radius-sm);margin:28px 0}
.prose figure{margin:28px 0}
.prose figcaption{text-align:center;font-size:13.5px;color:var(--ink-3);margin-top:10px}
.prose blockquote{
  margin:28px 0;padding:20px 24px;
  border-left:4px solid var(--brand-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--brand-50);color:var(--ink-2);font-style:italic;font-size:17px;line-height:1.7;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose > *:first-child{margin-top:0}

/* Tombol di dalam badan artikel: gaya prosa mewarnai semua tautan oranye dan
   menggarisbawahinya, termasuk tombol. Warnanya dikembalikan di sini. */
.prose .btn{text-decoration:none;font-weight:700}
.prose .btn-primary,.prose .btn-wa{color:#fff}
.prose .btn-ghost{color:var(--ink)}

/* ---------- Tag ----------
   Dikunci dengan .prose di depannya: daftar tag hidup di dalam .prose, dan
   `.prose ul{list-style:disc}` lebih khusus daripada `.tags` saja — tanpa ini
   setiap tag dapat titik bulat di kirinya. */
.prose .tags,.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:36px 0 0;padding:0}
.prose .tags li,.tags li{margin:0}
.tags a{
  display:inline-block;font-size:12.5px;font-weight:600;text-decoration:none;
  color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;
  transition:color .16s ease-out,border-color .16s ease-out;
}
.tags a:hover{color:var(--brand-600);border-color:var(--brand-600)}

/* ---------- Ajakan di dalam artikel ---------- */
.artikel-cta{
  margin-top:36px;padding:32px 28px;text-align:center;
  background:linear-gradient(160deg,var(--brand-50),var(--paper));
  border:1px solid var(--line);border-radius:var(--radius);
}
.artikel-cta__judul{font-family:var(--ff-head);font-size:19px;font-weight:800;margin-bottom:6px}
.artikel-cta__teks{font-size:14.5px;color:var(--ink-2);margin-bottom:20px}
.artikel-cta__aksi{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- Profil penulis ---------- */
.penulis{
  display:flex;gap:20px;align-items:flex-start;
  margin-top:40px;padding:26px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.penulis__label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-600);margin-bottom:4px}
.penulis__nama{font-family:var(--ff-head);font-size:17px;font-weight:700}
.penulis__bio{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin-top:6px}

.artikel__balik{padding:32px 0 72px;display:flex;justify-content:center}

/* Daftar isi menjadi kotak biasa di atas artikel di bawah ~900px, bukan
   kolom sempit yang membuat judul bagian terpotong. */
@media (max-width:900px){
  .artikel__grid--toc{grid-template-columns:1fr;gap:32px}
  .toc-box{
    position:static;
    background:var(--paper-2);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px 22px;
  }
  .toc{border-left:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
  .toc a{padding-left:0;border-left:0;margin-left:0}
  .toc a.is-active{border-left:0}
  .artikel__grid .prose{max-width:none}
}
@media (max-width:640px){
  .artikel__head{padding:36px 0 28px}
  .artikel__meta{flex-direction:column;align-items:flex-start;gap:16px}
  .artikel__cover{margin-top:-18px}
  .artikel__grid{padding:36px 0 16px}
  .toc{grid-template-columns:1fr}
  .prose h2{font-size:23px;margin:34px 0 14px}
  .prose p,.prose ul,.prose ol{font-size:16px}
  .penulis{flex-direction:column;gap:14px}
  .artikel-cta{padding:26px 20px}
  .artikel-cta__aksi{flex-direction:column}
}