/* =========================================================
   Blog — Veronica Wijayanti
   Palet & tipografi mengikuti vwijayanti.com (hijau/cream)
   ========================================================= */
:root{
  --paper:#EAEEE6;
  --surface:#F5F7F1;
  --surface-2:#DFE5D8;
  --ink:#141A16;
  --muted:#5C6759;
  --rule:#C6D0BD;
  --rule-soft:#D7DECE;
  --pine:#2C4A3A;
  --redink:#A8301F;
  --redink-soft:#C97A6C;
  --shadow:rgba(20,26,22,.09);
  --logo-v:#3F7D5B;

  --wrap:1120px;
  --col:660px;

  --f-display:"Zilla Slab", Georgia, "Times New Roman", serif;
  --f-body:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --s1:.5rem; --s2:.85rem; --s3:1.35rem; --s4:2.1rem; --s5:3.4rem; --s6:5.5rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#151812; --surface:#1D2119; --surface-2:#252A1F;
    --ink:#E8ECE2; --muted:#9AA490; --rule:#343B2C; --rule-soft:#2A3023;
    --pine:#84BA9C; --redink:#E8735A; --redink-soft:#8F4A3C;
    --shadow:rgba(0,0,0,.4); --logo-v:#84BA9C;
  }
}
:root[data-theme="dark"]{
  --paper:#151812; --surface:#1D2119; --surface-2:#252A1F;
  --ink:#E8ECE2; --muted:#9AA490; --rule:#343B2C; --rule-soft:#2A3023;
  --pine:#84BA9C; --redink:#E8735A; --redink-soft:#8F4A3C;
  --shadow:rgba(0,0,0,.4); --logo-v:#84BA9C;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.col{max-width:var(--col);margin:0 auto}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:60px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  text-decoration:none;display:flex;align-items:center;gap:.5rem}
.brand-mark{height:1.15rem;width:auto;flex:none;display:block}
.brand .bn{white-space:nowrap}
.brand small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
@media (max-width:560px){.brand small{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-weight:600;font-size:.98rem;padding:.72em 1.35em;border-radius:2px;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .14s ease, background-color .14s ease, color .14s ease, border-color .14s ease}
.btn:focus-visible{outline:2px solid var(--redink);outline-offset:3px}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{transform:translateY(-1px);background:var(--pine);border-color:var(--pine)}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn-sm{font-size:.86rem;padding:.5em 1em}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* ---------- tipografi ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;text-wrap:balance;margin:0;
  line-height:1.14;letter-spacing:-.012em}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(1.5rem,3vw,1.95rem);margin:var(--s5) 0 var(--s2);padding-top:var(--s3);
  border-top:1px solid var(--rule)}
h3{font-size:1.22rem;margin:var(--s4) 0 .4rem}
h4{font-size:1.02rem;font-family:var(--f-mono);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--redink);margin:var(--s3) 0 .3rem}
p{margin:0 0 var(--s2)}
.lead{font-size:clamp(1.1rem,2vw,1.28rem);color:var(--muted);line-height:1.6}
strong{font-weight:600}
em{font-style:italic}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--redink);display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule);min-width:2rem}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);
  padding:var(--s3) 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--redink);text-decoration:underline}

/* ---------- kepala artikel ---------- */
.art-head{padding:var(--s3) 0 var(--s4)}
.art-head h1{margin:var(--s3) 0 var(--s3)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;color:var(--muted);
  padding-top:var(--s3);border-top:1px solid var(--rule)}
.byline b{color:var(--ink);font-weight:600}
.tag{border:1px solid var(--rule);border-radius:2px;padding:.15em .5em;color:var(--pine)}

/* ---------- daftar isi ---------- */
.toc{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:var(--s3);margin:var(--s4) 0}
.toc p{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .6rem}
.toc ol{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.3rem;font-size:.97rem}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--pine);border-bottom-color:var(--pine)}

/* ---------- isi ---------- */
.body > *{max-width:var(--col);margin-left:auto;margin-right:auto}
.body ul,.body ol{margin:0 auto var(--s2);padding-left:1.15rem;max-width:var(--col)}
.body li{margin-bottom:.4rem}
.body li > ul,.body li > ol{margin-bottom:.3rem;margin-top:.3rem}
.note{color:var(--muted)}

/* kalimat "Artinya:" — kesimpulan tiap blok */
.artinya{border-left:2px solid var(--pine);padding-left:var(--s2);color:var(--ink);
  background:color-mix(in srgb, var(--pine) 5%, transparent);
  padding-top:.6rem;padding-bottom:.6rem;padding-right:.7rem}
.artinya b:first-child{color:var(--pine)}

/* ---------- tabel buku besar ---------- */
.tbl-wrap{overflow-x:auto;margin:var(--s3) auto;max-width:var(--col)}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:min(100%,420px)}
thead th{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);text-align:left;font-weight:500;padding:.5rem .6rem;
  border-bottom:1px solid var(--rule);background:var(--surface-2)}
td{padding:.55rem .6rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
tbody tr:hover{background:var(--surface)}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-family:var(--f-mono);font-size:.68rem;
  color:var(--muted);padding-top:.6rem;letter-spacing:.04em}

/* ---------- kartu emiten ---------- */
.ticker{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:var(--s5) auto var(--s2);max-width:var(--col);padding-top:var(--s3);
  border-top:2px solid var(--ink)}
.ticker .code{font-family:var(--f-mono);font-size:1.7rem;font-weight:600;letter-spacing:.03em;color:var(--pine)}
.ticker .name{font-family:var(--f-display);font-size:1.15rem;font-weight:600}
.ticker .sector{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--redink);border:1px solid var(--redink-soft);border-radius:2px;padding:.12em .45em}

/* ---------- kotak disclaimer ---------- */
.disclaimer{max-width:var(--col);margin:var(--s4) auto;border:1.5px solid var(--redink-soft);
  border-left-width:4px;border-radius:3px;background:color-mix(in srgb, var(--redink) 6%, transparent);
  padding:var(--s3)}
.disclaimer p{font-size:.92rem;color:var(--ink);margin-bottom:.5rem}
.disclaimer p:last-child{margin-bottom:0}
.disclaimer .lbl{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--redink);font-weight:500;display:block;margin-bottom:.5rem}

/* ---------- kotak CTA ---------- */
.cta{max-width:var(--col);margin:var(--s5) auto var(--s4);border:1.5px solid var(--ink);
  border-radius:3px;background:var(--surface);padding:var(--s4)}
.cta h3{font-size:1.4rem;margin:0 0 var(--s2)}
.cta p{color:var(--muted);font-size:.98rem}
.cta .cta-row{margin-top:var(--s3)}
.cta-note{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em;
  line-height:1.6;margin-top:var(--s2)}

/* ---------- index blog ---------- */
.hero{padding:clamp(2.4rem,6vw,4rem) 0 var(--s4)}
.hero h1{margin:var(--s3) 0 var(--s3)}
.posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.posts li{border-top:1px solid var(--rule)}
.posts li:last-child{border-bottom:1px solid var(--rule)}
.post{display:grid;grid-template-columns:9rem 1fr;gap:var(--s3);padding:var(--s4) 0;
  text-decoration:none;align-items:start;transition:background-color .14s ease}
.post:hover{background:var(--surface)}
.post:hover h2{color:var(--pine)}
.post .meta{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);padding-top:.35rem;line-height:1.7}
.post .meta b{display:block;color:var(--redink);font-weight:500}
.post h2{font-size:1.4rem;margin:0 0 .4rem;border:none;padding:0;line-height:1.2;
  transition:color .14s ease}
.post p{color:var(--muted);font-size:.97rem;margin:0}
.post .codes{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}
.post .codes span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--pine);
  border:1px solid var(--rule);border-radius:2px;padding:.1em .45em}
@media (max-width:640px){
  .post{grid-template-columns:1fr;gap:.6rem;padding:var(--s3) 0}
  .post .meta{padding-top:0}
  .post .meta b{display:inline}
}
.empty{color:var(--muted);font-size:.97rem;border:1.5px dashed var(--rule);border-radius:3px;
  padding:var(--s3);margin-top:var(--s4)}

/* ---------- penutup & footer ---------- */
.closing{background:var(--surface-2);border-top:1px solid var(--rule);margin-top:var(--s6);
  padding:var(--s5) 0}
footer{border-top:1px solid var(--rule);padding:var(--s3) 0;font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--redink);text-decoration:underline}

@media (max-width:480px){
  .topbar .navlink{font-size:.83rem}
  .topbar .btn-sm{font-size:.82rem;padding:.48em .85em}
  .brand{font-size:.94rem;gap:.4rem}
}
@media (max-width:400px){
  .brand .bn{display:none}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}