/* Ringkasan Metopen v2 — redesign: hero gradien, warna per fase, sidebar TOC */
:root{
  --bg:#faf9f6; --surface:#ffffff; --ink:#1b1a16; --ink2:#55534a; --muted:#8b877b;
  --line:#e7e3d9; --accent:#0f766e; --accent2:#4f46e5;
  --accent-soft:color-mix(in srgb,var(--accent) 9%,#fff);
  --key-grad:linear-gradient(135deg,#0f766e,#0d9488 55%,#2dd4bf);
  --shadow:0 1px 2px rgba(27,26,22,.05),0 8px 24px -12px rgba(27,26,22,.18);
  --radius:16px; --maxw:1120px;
}
html[data-theme="dark"]{
  --bg:#131210; --surface:#1d1c19; --ink:#edeae3; --ink2:#b8b3a6; --muted:#8b877b;
  --line:#2d2b26; --accent-soft:color-mix(in srgb,var(--accent) 16%,#1d1c19);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;
  padding:10px 20px;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brandmark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0f766e,#4f46e5);color:#fff;font-weight:800;font-size:19px}
.brandtext{font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.05}
.brandtext em{display:block;font-style:normal;font-weight:500;font-size:10.5px;color:var(--muted);
  letter-spacing:.05em;text-transform:uppercase}
.topnav{margin-left:auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);padding:5px 11px;border-radius:99px;font-size:14.5px;white-space:nowrap}
.topnav a:hover{background:var(--accent-soft);text-decoration:none}
.topnav a.on{background:var(--accent);color:#fff;font-weight:600}
#themeBtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;flex:none}
.progress{position:sticky;top:57px;z-index:29;height:3px}
#progressBar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}

main{max-width:var(--maxw);margin:0 auto;padding:26px 20px 44px}

/* hero index */
.hero{padding:8px 0 4px}
.heropanel{position:relative;overflow:hidden;border-radius:24px;color:#fff;
  padding:clamp(28px,5vw,52px);background:
  radial-gradient(620px 300px at 88% -10%,rgba(45,212,191,.45),transparent 60%),
  radial-gradient(520px 320px at -8% 110%,rgba(99,102,241,.5),transparent 60%),
  linear-gradient(120deg,#0b3f3a,#0f766e 45%,#3730a3)}
.heropanel h1{font-size:clamp(34px,6vw,54px);line-height:1.08;letter-spacing:-.03em;margin:10px 0 14px;font-weight:850}
.kicker{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0}
.kicker.light{color:#99f6e4}
.heropanel .lead{color:#e7f5f1;max-width:640px}
.heropanel .lead strong{color:#fff}
.lead{font-size:19px;color:var(--ink2);line-height:1.65;margin:0 0 16px}
.stats{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 6px}
.stats>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  border-radius:14px;padding:10px 18px;min-width:104px;backdrop-filter:blur(4px)}
.stats b{display:block;font-size:26px;line-height:1.1}
.stats span{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#c9e8e1}
.heroinfo{margin:14px 0 0;font-size:14px;color:#bfe3da}
.flowstrip{margin-top:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow)}
.flowlabel{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.flowsteps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;font-size:14.5px}
.flowsteps span{background:var(--accent-soft);border-radius:99px;padding:3px 12px;font-weight:600;color:var(--ink)}
.flowsteps i{color:var(--muted);font-style:normal}

/* grup & kartu index */
.group{margin-top:42px}
.grouphead{border-left:5px solid var(--gacc,var(--accent));padding-left:14px;margin-bottom:16px}
.grouphead h2{font-size:21px;letter-spacing:-.015em;margin:0;font-weight:800}
.grouphead p{margin:3px 0 0;color:var(--ink2);font-size:15px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.card{display:flex;gap:15px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--gacc,var(--accent));
  border-radius:var(--radius);padding:18px;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.card:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--gacc,var(--accent))}
.card .num{font-size:24px;font-weight:850;color:#fff;line-height:1;flex:none;
  width:50px;height:50px;display:grid;place-items:center;border-radius:13px;
  background:linear-gradient(135deg,var(--gacc,var(--accent)),color-mix(in srgb,var(--gacc,var(--accent)) 55%,#000))}
.cardbody{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.cardfase{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gacc,var(--accent))}
.cardbody strong{font-size:17.5px;line-height:1.35;letter-spacing:-.01em}
.cardbody small{color:var(--ink2);font-size:14px;line-height:1.55}
.keyline{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink);
  background:color-mix(in srgb,var(--gacc,var(--accent)) 8%,var(--surface));
  border-radius:9px;padding:7px 10px}
.keyline b{color:var(--gacc,var(--accent))}
.cardmeta{font-size:12px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.card .arrow{color:var(--muted);font-size:20px;align-self:center}
.howto{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.howto>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.howto .hnum{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:800;font-size:15px;margin-bottom:8px}
.howto strong{display:block;font-size:16px}
.howto p{margin:5px 0 0;font-size:14.5px;color:var(--ink2);line-height:1.6}

/* hero artikel */
.posthero{max-width:780px;padding:14px 0 4px}
.posthero h1{font-size:clamp(30px,5vw,44px);line-height:1.15;letter-spacing:-.025em;margin:8px 0 12px;font-weight:850}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.chip{font-size:13.5px;color:var(--ink2);background:var(--surface);border:1px solid var(--line);
  padding:4px 12px;border-radius:99px}
.chip.strong{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
a.chip.link{color:var(--accent);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn{display:inline-block;padding:9px 18px;border-radius:99px;font-weight:700;font-size:15px;
  border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn.primary:hover{text-decoration:none;filter:brightness(1.08)}
.btn.ghost{color:var(--accent);background:transparent}
.btn.ghost:hover{text-decoration:none;background:var(--accent-soft)}

/* layout artikel */
.layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;margin-top:26px;align-items:start}
.side{position:sticky;top:84px;display:flex;flex-direction:column;gap:12px}
.sidebox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px 10px;box-shadow:var(--shadow)}
.sidebox h3{margin:0 0 8px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sidebox ol{margin:0;padding-left:18px}
.sidebox li{margin:5px 0;font-size:14px;line-height:1.45}
.sidebox a{color:var(--ink2)}
.sidebox a:hover{color:var(--accent)}
.sidepdf{display:block;text-align:center;background:var(--accent-soft);border:1px dashed var(--accent);
  color:var(--accent);font-weight:700;font-size:14px;border-radius:var(--radius);padding:11px 12px}
.sidepdf:hover{text-decoration:none;filter:brightness(.98)}

/* prose */
.prose{max-width:760px;min-width:0}
.prose h2{font-size:23px;letter-spacing:-.02em;line-height:1.3;margin:38px 0 12px;scroll-margin-top:84px;
  display:flex;align-items:center;gap:10px}
.prose h2::before{content:"";flex:none;width:9px;height:26px;border-radius:99px;background:var(--accent)}
.prose h3{font-size:19px;margin:28px 0 8px;line-height:1.4;scroll-margin-top:84px}
.prose h4{font-size:16.5px;margin:20px 0 6px}
.prose p{margin:10px 0}
.prose ul,.prose ol{margin:10px 0;padding-left:24px}
.prose li{margin:5px 0}
.prose li::marker{color:var(--accent);font-weight:700}
.prose blockquote{margin:16px 0;padding:12px 18px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 12px 12px 0}
.prose blockquote p{margin:4px 0}
.prose code{background:var(--accent-soft);padding:1px 6px;border-radius:6px;font-size:.9em;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.prose hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;margin:16px 0;
  font-size:14.8px;line-height:1.55;width:100%;background:var(--surface);
  border-radius:12px;box-shadow:var(--shadow)}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--accent-soft);font-weight:700;position:sticky;top:0}
.prose tr:nth-child(even) td{background:color-mix(in srgb,var(--surface) 55%,var(--bg))}

/* blok penting */
section.keypoints{position:relative;border-radius:20px;padding:8px 24px 16px;margin:26px 0 8px;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--key-grad) border-box;
  border:2px solid transparent;box-shadow:var(--shadow)}
section.keypoints h2{margin-top:16px;color:#0f766e}
html[data-theme="dark"] section.keypoints h2{color:#2dd4bf}
section.keypoints h2::before{background:linear-gradient(180deg,#0f766e,#2dd4bf)}
section.keypoints::after{content:"MULAI DARI SINI · PALING PENTING";position:absolute;top:-11px;right:18px;
  background:var(--key-grad);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 10px;border-radius:99px}
section.keypoints li{margin:7px 0}
section.taskbox{background:#fdf6e9;border:1px solid #ecd9ae;border-radius:var(--radius);
  padding:6px 22px 14px;margin-top:34px}
html[data-theme="dark"] section.taskbox{background:#2a2417;border-color:#57481f}
section.taskbox h2{margin-top:20px}
section.taskbox h2::before{background:#d97706}

/* prevnext & footer */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:44px;max-width:100%}
.pn{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;color:var(--ink);display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.pn:hover{text-decoration:none;border-color:var(--accent)}
.pn small{color:var(--muted);font-size:13px}
.pn strong{font-size:15.5px;line-height:1.4}
.pn.next{text-align:right}
.sitefoot{max-width:var(--maxw);margin:0 auto;padding:26px 20px 46px;
  border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.sitefoot p{margin:4px 0}
.muted{color:var(--muted)}
#toTop{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-size:19px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s;z-index:25}
#toTop.show{opacity:1;pointer-events:auto}
#toTop:hover{text-decoration:none}

@media (max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:static;order:2}
  .prose{max-width:100%}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .brandtext em{display:none}
  main{padding:18px 14px 34px}
  .stats>div{min-width:calc(50% - 8px)}
}
@media print{
  .topbar,.progress,.side,.prevnext,#themeBtn,#toTop,.actions{display:none}
  .layout{grid-template-columns:1fr}
  body{background:#fff;color:#000;font-size:12pt}
}