:root{
  --wrap:920px;
  --bg:#f3f4f6;
  --paper:#ffffff;
  --ink:#111827;
  --muted:#6b7280;
  --accent:#D4AF37;
  --accent-soft:#fef9c3;
  --border:#e5e7eb;
}

/* RESET RINGAN & BASE */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{
  height:100%;
}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}
a{
  color:#8C6A00;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* WRAPPER GENERIK (bisa dipakai di halaman lain) */
.page{
  max-width:var(--wrap);
  margin:0 auto;
  padding:14px 16px 32px;
}

/* ========== HEADER: logo + nav + hamburger ========== */
.site-header{
  background:#f9fafb;
  border-bottom:1px solid rgba(148,163,184,.4);
  margin-bottom:16px;
}
.site-header-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:10px 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.site-logo{
  display:inline-block;
  flex-shrink:0;
}
.site-logo img{
  max-width:230px;
  height:auto;
}

/* TOP NAV */
.top-nav{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:14px;
  font-size:.86rem;
}
.top-nav a{
  color:var(--muted);
  padding:3px 0;
}
.top-nav a:hover{
  color:#8C6A00;
}

/* HAMBURGER */
.nav-toggle{
  display:none;
  border:1px solid rgba(148,163,184,.8);
  border-radius:10px;
  padding:7px 8px;
  background:#ffffff;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background:#111827;
  border-radius:999px;
  margin:3px 0;
}

/* MOBILE NAV */
@media (max-width:720px){
  .site-header-inner{
    padding-inline:12px;
  }
  .top-nav{
    position:absolute;
    right:12px;
    top:56px;
    background:#f9fafb;
    border:1px solid rgba(148,163,184,.5);
    border-radius:12px;
    padding:8px 10px;
    flex-direction:column;
    align-items:flex-start;
    min-width:160px;
    box-shadow:0 10px 30px rgba(15,23,42,.18);
    display:none;
    z-index:30;
  }
  .top-nav.open{
    display:flex;
  }
  .nav-toggle{
    display:block;
  }
}

/* ========== INTRO STRIP (STRIP KUNING DI ATAS ARTIKEL) ========== */
.intro-strip{
  max-width:var(--wrap);
  margin:0 auto 16px;
  background:var(--accent-soft);
  border-radius:12px;
  border:1px solid rgba(234,179,8,.55);
  padding:10px 12px;
  display:flex;
  gap:10px;
  font-size:.9rem;
  color:#78350f;
}
.intro-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #fef3c7 0, #facc15 40%, #f97316 100%);
  flex-shrink:0;
  margin-top:3px;
}

/* ========== ARTIKEL/JURNAL UTAMA ========== */
.article{
  max-width:var(--wrap);
  margin:0 auto;
  background:var(--paper);
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  padding:20px 18px 24px;
  box-shadow:0 10px 28px rgba(15,23,42,.12);
}
@media (max-width:640px){
  .article{
    padding:18px 12px 22px;
    border-radius:16px;
  }
}

/* META LABEL DI ATAS JUDUL */
.meta-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  margin-bottom:6px;
}
.meta-label span{
  background:#111827;
  color:#f9fafb;
  border-radius:999px;
  padding:3px 8px;
  margin-right:6px;
  font-weight:600;
}

/* JUDUL & LEAD */
h1{
  font-size:1.65rem;
  line-height:1.3;
  margin:.2rem 0 .7rem;
}
@media (max-width:640px){
  h1{
    font-size:1.45rem;
  }
}
.lead{
  font-size:.98rem;
  color:#374151;
  margin-bottom:14px;
}

/* BANNER GAMBAR DI DALAM ARTIKEL */
.banner{
  margin:10px 0 16px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.5);
  background:radial-gradient(circle at top, #fef9c3 0, #f9fafb 40%, #e5e7eb 100%);
}

/* TOC (DAFTAR ISI) */
.toc{
  margin:6px 0 16px;
  padding:10px 12px;
  border-radius:12px;
  background:#f9fafb;
  border:1px dashed rgba(148,163,184,.9);
  font-size:.9rem;
}
.toc-title{
  font-weight:600;
  margin-bottom:4px;
  font-size:.9rem;
}
.toc ul{
  list-style:none;
  padding-left:0;
}
.toc li{
  margin:.12rem 0;
}
.toc a{
  color:#4b5563;
  font-size:.9rem;
}

/* BODY ARTIKEL & SECTION2 */
.article-body section{
  margin:1.2rem 0 0.4rem;
}
.article-body h2{
  font-size:1.12rem;
  margin-bottom:.2rem;
  padding-left:10px;
  border-left:3px solid var(--accent);
}
.article-body h3{
  font-size:1rem;
  margin:.9rem 0 .2rem;
}
.article-body p{
  font-size:.95rem;
  margin:.32rem 0;
  color:#111827;
}
.article-body ul{
  font-size:.95rem;
  padding-left:1.15rem;
  margin:.3rem 0 .6rem;
}
.article-body li{
  margin:.2rem 0;
}

/* NOTE BOX (PENTING, TAPI SANTAI) */
.note-box{
  margin:.9rem 0;
  padding:9px 11px;
  border-radius:10px;
  border:1px dashed rgba(148,163,184,.9);
  background:#f9fafb;
  font-size:.9rem;
  color:#4b5563;
}

/* TAG / PILLS */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 0;
}
.tag-pill{
  font-size:.78rem;
  padding:4px 8px;
  border-radius:999px;
  border:1px dashed rgba(148,163,184,.9);
  background:#f9fafb;
  color:#4b5563;
}

/* ========== FOOTER GLOBAL ========== */
footer{
  max-width:var(--wrap);
  margin:24px auto 0;
  padding:10px 16px 24px;
  border-top:1px solid rgba(148,163,184,.5);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  font-size:.8rem;
  color:#6b7280;
}
footer a{
  color:#6b7280;
}
footer a:hover{
  color:#8C6A00;
}

.footer-links,
.footer-rel{
  width:100%;
  margin-top:4px;
  font-size:.82rem;
}
.footer-links a,
.footer-rel a{
  color:#6b7280;
}
.footer-links a:hover,
.footer-rel a:hover{
  color:#8C6A00;
}

/* ========== TEMPLATE GENERIK UNTUK HALAMAN LAIN ========== */
/* Container konten standard (bisa dipakai di about, privacy, dll) */
.page-section{
  max-width:var(--wrap);
  margin:0 auto;
  background:var(--paper);
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  padding:20px 18px 24px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.page-section h1{
  font-size:1.5rem;
  margin-bottom:.6rem;
}
.page-section h2{
  font-size:1.1rem;
  margin:1rem 0 .3rem;
}
.page-section p{
  font-size:.95rem;
  margin:.3rem 0;
}
.page-section ul{
  font-size:.95rem;
  padding-left:1.15rem;
  margin:.2rem 0 .6rem;
}
.page-section li{
  margin:.18rem 0;
}
@media (max-width:640px){
  .page-section{
    padding:18px 12px 22px;
    border-radius:16px;
  }
}