/* Layout dasar halaman artikel (selaras dengan landing page) */
:root{
  --paper:#F3EEE2; --paper-dark:#E7DFCC; --ink:#183955; --ink-soft:#4B5A6E; --carbon:#9A9483;
  --stamp:#FCC900; --stamp-dark:#6B4E00; --ledger:#2F6F52; --wa:#25A25A;
  --line:rgba(28,35,51,0.16); --shadow:0 10px 30px -12px rgba(28,35,51,0.35);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans',sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.01em; margin:0; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--stamp-dark); outline-offset:3px; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.mono{ font-family:'IBM Plex Mono',monospace; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } html{ scroll-behavior:auto; } }

/* NAV */
header.nav{ position:sticky; top:0; z-index:50; background:rgba(243,238,226,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1180px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .brand-logo{ width:26px; height:26px; object-fit:contain; flex-shrink:0; }
.brand .mark{ font-family:'Space Grotesk'; font-weight:700; font-size:1.3rem; letter-spacing:-0.02em; }
.brand .mark::after{ content:"."; color:var(--stamp); }
.nav-right{ display:flex; align-items:center; gap:22px; }
.nav-art{ font-family:'IBM Plex Mono',monospace; font-size:.85rem; text-decoration:none; color:var(--ink-soft); padding:6px 2px; border-bottom:2px solid transparent; }
.nav-art:hover, .nav-art.is-active{ color:var(--ink); border-bottom-color:var(--stamp); }
.btn-wa{
  display:inline-flex; align-items:center; gap:8px; background:var(--wa); color:#fff; text-decoration:none;
  font-family:'IBM Plex Mono'; font-weight:500; font-size:.85rem; padding:10px 16px; border-radius:3px;
  box-shadow:0 4px 0 #187a41; transition:transform .12s ease, box-shadow .12s ease; white-space:nowrap;
}
.btn-wa:hover{ transform:translateY(2px); box-shadow:0 2px 0 #187a41; }
.btn-wa:active{ transform:translateY(4px); box-shadow:none; }
.btn-primary{ background:var(--ink); color:var(--paper); text-decoration:none; font-family:'IBM Plex Mono'; font-weight:500; font-size:.88rem; padding:14px 22px; border-radius:3px; display:inline-flex; align-items:center; gap:10px; transition:transform .12s ease; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); text-decoration:none; border:1px solid var(--line); font-family:'IBM Plex Mono'; font-size:.88rem; padding:14px 22px; border-radius:3px; display:inline-flex; align-items:center; }
.btn-ghost:hover{ border-color:var(--ink-soft); }
.eyebrow{ font-family:'IBM Plex Mono'; font-size:.78rem; color:var(--stamp-dark); letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--stamp-dark); }

/* FOOTER */
footer{ padding:56px 0 40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; border-top:1px solid var(--line); padding-top:32px; }
footer .brand .mark{ font-size:1.1rem; }
footer .foot-note{ font-size:.78rem; color:var(--ink-soft); margin-top:8px; max-width:38ch; }
.foot-links{ display:flex; gap:18px; margin-top:12px; font-family:'IBM Plex Mono'; font-size:.78rem; }
.foot-links a{ color:var(--ink-soft); }
.footer-cta{ text-align:right; }
.footer-cta .label{ font-family:'IBM Plex Mono'; font-size:.72rem; color:var(--ink-soft); margin-bottom:8px; }

/* HALAMAN DAFTAR */
.list-hero{ padding:64px 0 28px; }
.list-hero h1{ font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.1; }
.list-hero p{ margin:14px 0 0; color:var(--ink-soft); line-height:1.6; max-width:56ch; }
.list-tools{ display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:8px 0 28px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ font-family:'IBM Plex Mono'; font-size:.78rem; text-decoration:none; color:var(--ink); border:1px solid var(--line); background:#fff; padding:7px 14px; border-radius:20px; }
.chip:hover{ border-color:var(--ink-soft); }
.chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip small{ color:var(--carbon); margin-left:4px; }
.chip.on small{ color:#9fb3c6; }
.search{ display:flex; gap:8px; }
.search input{ font:inherit; font-size:.9rem; padding:9px 14px; border:1px solid var(--line); border-radius:3px; background:#fff; min-width:220px; color:var(--ink); }
.search button{ font-family:'IBM Plex Mono'; font-size:.82rem; padding:9px 16px; border:0; border-radius:3px; background:var(--ink); color:var(--paper); cursor:pointer; }
.empty{ text-align:center; padding:64px 0 80px; color:var(--ink-soft); }
.list-wrap{ padding-bottom:72px; }
.pager{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:44px; font-family:'IBM Plex Mono'; font-size:.82rem; }
.pager a, .pager .cur{ padding:8px 14px; border:1px solid var(--line); border-radius:3px; text-decoration:none; background:#fff; }
.pager .cur{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pager a:hover{ border-color:var(--ink-soft); }

/* HALAMAN ARTIKEL */
.post-wrap{ max-width:780px; padding-top:40px; padding-bottom:72px; }
.crumbs{ font-family:'IBM Plex Mono'; font-size:.75rem; color:var(--carbon); margin-bottom:22px; display:flex; flex-wrap:wrap; gap:6px; }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.post-head .art-cat{ margin-bottom:14px; display:inline-block; }
.post-head h1{ font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.12; }
.post-lede{ font-size:1.1rem; line-height:1.6; color:var(--ink-soft); margin:16px 0 0; }
.post-meta{ margin-top:18px; font-family:'IBM Plex Mono'; font-size:.76rem; color:var(--carbon); display:flex; gap:14px; flex-wrap:wrap; }
.post-cover{ margin:28px 0 8px; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--paper-dark); }
.post-cover img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

.prose{ font-size:1.06rem; line-height:1.78; margin-top:28px; overflow-wrap:break-word; }
.prose > *:first-child{ margin-top:0; }
.prose p{ margin:0 0 1.15em; }
.prose h2{ font-size:1.6rem; margin:2em 0 .6em; line-height:1.2; }
.prose h3{ font-size:1.25rem; margin:1.7em 0 .5em; line-height:1.25; }
.prose h4{ font-family:'Space Grotesk',sans-serif; font-size:1.05rem; margin:1.4em 0 .4em; }
.prose a{ color:var(--ink); text-decoration-color:var(--stamp); text-decoration-thickness:2px; text-underline-offset:3px; }
.prose a:hover{ background:#FFF6D8; }
.prose ul, .prose ol{ padding-left:1.4em; margin:0 0 1.15em; }
.prose li{ margin:.3em 0; }
.prose blockquote{ margin:1.6em 0; padding:.4em 0 .4em 1.2em; border-left:4px solid var(--stamp); color:var(--ink-soft); font-style:italic; }
.prose img{ margin:1.6em auto; border:1px solid var(--line); border-radius:4px; height:auto; }
.prose pre{ background:var(--ink); color:#F3EEE2; padding:16px 18px; border-radius:4px; overflow-x:auto; font-family:'IBM Plex Mono',monospace; font-size:.88rem; line-height:1.6; margin:0 0 1.3em; white-space:pre-wrap; }
.prose code{ font-family:'IBM Plex Mono',monospace; font-size:.9em; background:var(--paper-dark); padding:2px 6px; border-radius:3px; }
.prose pre code{ background:none; padding:0; }
.prose hr{ border:0; border-top:1px solid var(--line); margin:2em 0; }
.prose .ql-align-center{ text-align:center; }
.prose .ql-align-right{ text-align:right; }
.prose .ql-align-justify{ text-align:justify; }

.share{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:36px; padding-top:20px; border-top:1px dashed var(--line); font-family:'IBM Plex Mono'; font-size:.78rem; color:var(--ink-soft); }
.share a{ text-decoration:none; color:var(--ink); border:1px solid var(--line); background:#fff; padding:7px 13px; border-radius:3px; }
.share a:hover{ border-color:var(--ink-soft); }

.cta-box{ margin-top:36px; background:var(--ink); color:var(--paper); border-radius:6px; padding:28px; display:flex; gap:20px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.cta-box h2{ font-size:1.25rem; color:var(--paper); }
.cta-box p{ margin:8px 0 0; color:#B9BECB; font-size:.92rem; line-height:1.55; max-width:44ch; }
.cta-box .acts{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-box .btn-ghost{ color:var(--paper); border-color:#3A4257; }

.related{ background:var(--paper-dark); padding:56px 0 64px; }
.related h2{ font-size:1.4rem; margin-bottom:24px; }

@media (max-width: 920px){
  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-cta{ text-align:left; }
}
@media (max-width: 560px){
  .nav-inner{ padding:14px 18px; }
  .nav-right{ gap:14px; }
  .btn-wa span.long{ display:none; }
  .list-hero{ padding:44px 0 20px; }
  .search{ width:100%; }
  .search input{ flex:1; min-width:0; }
  .cta-box{ padding:22px; }
}