/* =========================================================
   Everyday Bromo — Layout Blog "Jurnal Lapangan" v1
   Dipakai: artikel/index.html + artikel/<slug>/index.html
   Identitas: editorial tenang — kolom baca sempit, Fraunces,
   aksen amber minimal. Indeks = baris bernomor, bukan grid kartu.
   ========================================================= */

/* ---------- Progress bar baca ---------- */
.progress-baca{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--c-primary),var(--c-amber));z-index:900}

/* ---------- Indeks blog ---------- */
.silo-label{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c-primary)}
.silo-label::after{content:"";flex:1;height:1px;background:var(--c-line)}
.silo-item{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--c-line);transition:background var(--t-fast) var(--e-out)}
.silo-item:last-child{border-bottom:0}
.silo-nomor{flex:0 0 auto;width:44px;font:italic 600 30px/1 "Fraunces",Georgia,serif;color:var(--c-line);transition:color var(--t-fast) var(--e-out)}
.silo-item:hover .silo-nomor{color:var(--c-amber)}
.silo-judul{font:600 clamp(19px,3.4vw,25px)/1.28 "Fraunces",Georgia,serif;color:var(--c-ink);text-decoration:none;display:block;margin-bottom:6px}
.silo-judul:hover{color:var(--c-primary)}
.silo-ringkas{font:400 15px/1.65 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2);max-width:62ch}
.silo-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font:600 12px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2)}
.silo-meta .chip{display:inline-block;padding:5px 11px;border-radius:var(--r-full);background:var(--c-amber-soft);color:#8a5a13}

/* ---------- Halaman artikel ---------- */
.artikel-head{max-width:760px;margin:0 auto;padding:var(--s-2xl) var(--s-md) 0}
.artikel-breadcrumb{font:600 12.5px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2);margin-bottom:var(--s-md)}
.artikel-breadcrumb a{color:var(--c-ink-2);text-decoration:none}
.artikel-breadcrumb a:hover{color:var(--c-primary)}
.artikel-breadcrumb span[aria-current]{color:var(--c-primary)}
.artikel-kategori{display:inline-block;padding:6px 13px;border-radius:var(--r-full);background:var(--c-primary-soft);color:var(--c-primary);font:700 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.artikel-judul{font:600 clamp(28px,5vw,40px)/1.18 "Fraunces",Georgia,serif;color:var(--c-ink);margin:14px 0 12px;letter-spacing:0}
.artikel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:600 13px/1.4 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2)}
.artikel-meta .penulis{color:var(--c-ink)}
.artikel-cover{max-width:920px;margin:var(--s-lg) auto 0;padding:0 var(--s-md)}
.artikel-cover figure{margin:0}
.artikel-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.artikel-cover figcaption{margin-top:10px;font:400 13px/1.5 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2);text-align:center}

/* ---------- Body artikel: kolom baca nyaman ---------- */
.artikel-body{max-width:70ch;margin:0 auto;padding:var(--s-xl) var(--s-md) 0;font:400 17px/1.78 "Plus Jakarta Sans",sans-serif;color:var(--c-ink)}
.artikel-body p{margin:0 0 1.35em}
.artikel-body > p:first-of-type{font-size:18.5px;line-height:1.72;color:var(--c-ink)}
.artikel-body > p:first-of-type::first-letter{font:italic 600 52px/.82 "Fraunces",Georgia,serif;color:var(--c-primary);float:left;margin:6px 10px 0 0}
.artikel-body h2{font:600 clamp(23px,3.5vw,29px)/1.24 "Fraunces",Georgia,serif;color:var(--c-ink);margin:2em 0 .6em;letter-spacing:0}
.artikel-body h3{font:700 18px/1.35 "Plus Jakarta Sans",sans-serif;color:var(--c-ink);margin:1.8em 0 .55em}
.artikel-body a{color:var(--c-primary);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.artikel-body a:hover{color:var(--c-primary-hover)}
.artikel-body ul,.artikel-body ol{margin:0 0 1.35em;padding-left:1.3em}
.artikel-body li{margin-bottom:.55em}
.artikel-body strong{font-weight:700}

/* Tabel harga & perbandingan */
.tabel-artikel{width:100%;border-collapse:collapse;margin:1.6em 0;font:600 14.5px/1.5 "Plus Jakarta Sans",sans-serif}
.tabel-artikel th{text-align:left;padding:11px 13px;background:var(--c-navy);color:#F5F1EA;font:700 12.5px/1.3 "Plus Jakarta Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.tabel-artikel td{padding:12px 13px;border-bottom:1px solid var(--c-line);vertical-align:top}
.tabel-artikel tr:nth-child(even) td{background:rgba(250,237,230,.5)}
.tabel-artikel .angka{text-align:right;white-space:nowrap}

/* Blockquote testimoni/kutipan */
.kutipan{margin:1.8em 0;padding:4px 0 4px 22px;border-left:3px solid var(--c-amber);font:italic 500 18.5px/1.6 "Fraunces",Georgia,serif;color:var(--c-ink)}
.kutipan cite{display:block;margin-top:8px;font:600 13px/1.4 "Plus Jakarta Sans",sans-serif;font-style:normal;color:var(--c-ink-2)}

/* Kotak catatan */
.catatan{margin:1.8em 0;padding:16px 18px;border-radius:var(--r-md);background:var(--c-amber-soft);border:1px solid #f0dcba}
.catatan strong{color:#8a5a13}

/* ---------- Share + CTA + terkait ---------- */
.artikel-share{max-width:70ch;margin:var(--s-xl) auto 0;padding:0 var(--s-md);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.artikel-share .label{font:700 12px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-2);margin-right:4px}
.tombol-share{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-full);border:1px solid var(--c-line);background:var(--c-surface);font:600 13.5px/1 "Plus Jakarta Sans",sans-serif;color:var(--c-ink);text-decoration:none;cursor:pointer;transition:border-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out)}
.tombol-share:hover{border-color:var(--c-primary);color:var(--c-primary)}
.artikel-cta{max-width:760px;margin:var(--s-xl) auto 0;padding:0 var(--s-md)}
.artikel-cta .isi{background:var(--c-navy);border-radius:var(--r-lg);padding:var(--s-lg);color:#F5F1EA;display:flex;flex-direction:column;gap:6px}
.artikel-cta .isi h2{font:600 clamp(21px,3.6vw,27px)/1.25 "Fraunces",Georgia,serif;margin:0;color:#F5F1EA}
.artikel-cta .isi p{font:400 14.5px/1.6 "Plus Jakarta Sans",sans-serif;color:rgba(245,241,234,.78);margin:0 0 10px}
.artikel-terkait{max-width:760px;margin:var(--s-2xl) auto 0;padding:0 var(--s-md) var(--s-2xl)}
.artikel-terkait h2{font:600 20px/1.3 "Fraunces",Georgia,serif;color:var(--c-ink);margin:0 0 6px}
.terkait-list{list-style:none;margin:0;padding:0}
.terkait-list li{border-bottom:1px solid var(--c-line)}
.terkait-list a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 2px;text-decoration:none}
.terkait-list .t{font:600 15.5px/1.45 "Plus Jakarta Sans",sans-serif;color:var(--c-ink)}
.terkait-list .m{flex:0 0 auto;font:600 12px/1.3 "Plus Jakarta Sans",sans-serif;color:var(--c-ink-2)}
.terkait-list a:hover .t{color:var(--c-primary)}

/* Responsif */
@media (max-width:640px){
  .silo-item{gap:14px;padding:18px 0}
  .silo-nomor{width:34px;font-size:24px}
  .artikel-body{font-size:16.5px;line-height:1.76}
  /* Tabel lebar jadi geser-horizontal di dalam elemennya sendiri */
  .tabel-artikel{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:13.5px;min-width:0}
  .tabel-artikel thead,.tabel-artikel tbody,.tabel-artikel tr{width:max-content}
  .tabel-artikel th,.tabel-artikel td{padding:9px 10px}
  .artikel-cta .isi{padding:var(--s-md)}
}