:root{
  --bg: #fcfcfb;          /* pastel terang */
  --paper: #ffffff;       /* kartu */
  --ink: #2d2a26;         /* teks */
  --muted: #000000;       /* teks sekunder */
  --primary: #8ec5b3;     /* hijau pastel */
  --primary-ink: #0f3a2f;
  --accent: #f7c6d9;      /* pink pastel */
  --accent-2: #c7d8ff;    /* biru pastel */
  --ring: rgba(17,17,17,.08);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink); background:linear-gradient(180deg, #fff, var(--bg));
}
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.2px }
.logo { display:inline-grid; place-items:center; }
nav a{ text-decoration:none; color:var(--ink); font-weight:600; padding:10px 12px; border-radius:12px; }
nav a.active, nav a:hover{ background:var(--bg); box-shadow:inset 0 0 0 1px var(--ring); }
.hero{ padding:72px 0 28px; }
.hero-card{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; background:var(--paper); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow); padding:28px; }
.hero h2{ margin:.2rem 0 .6rem; font-size:clamp(1.6rem, 2.4vw, 2rem); }
.hero p{ color:var(--muted); line-height:1.6; }
.hero .badge{ display:inline-block; padding:6px 10px; border-radius:999px; background: linear-gradient(90deg, var(--accent), var(--primary)); color:#0b2a22; font-weight:700; font-size:.8rem; letter-spacing:.2px; }
section{ padding:56px 0; }
.section-title{ font-size:1.4rem; margin:0 0 16px; }
.lead{ color:var(--muted); margin-top:0; }
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:20px; }
.card{ grid-column: span 12; background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; }
@media (min-width: 800px){
  .card.span-6{ grid-column: span 6; }
  .card.span-4{ grid-column: span 4; }
}
.card h3{ margin-top:.2rem; }
.muted{ color:var(--muted); }
.kudos{ display:flex; gap:12px; align-items:center; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--ring); text-decoration:none; font-weight:700; }
.btn.primary{ background:var(--primary); color:#083026; border-color:transparent; }
.btn.primary:hover{ filter:brightness(.96); }
.benefits{ display:grid; grid-template-columns: repeat(12, 1fr); gap:18px; }
.benefit{ grid-column: span 12; background:var(--paper); padding:16px; border-radius:14px; box-shadow:var(--shadow); }
@media (min-width: 900px){ .benefit{ grid-column: span 4; } }
.benefit .icon{ font-size:1.4rem; }
.article-card{ display:flex; flex-direction:column; gap:10px; }
.article-meta{ font-size:.9rem; color:var(--muted); }
article{ background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; margin:18px 0; }
article h3{ margin-top:0; }
article p{ line-height:1.7; }
.toc{ display:flex; flex-wrap:wrap; gap:10px; }
footer{ padding:40px 0; color:var(--muted); }
a:focus-visible, button:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius:12px; }