/* Blog Nampi — gaya bersama untuk halaman daftar dan halaman artikel. */
:root{
  --primary:rgb(0 49 55);--primary-2:rgb(24 72 79);--hijau:rgb(0 109 64);--hijau-muda:rgb(236 248 242);
  --latar:rgb(249 249 255);--latar-2:rgb(241 243 255);--teks:rgb(20 27 43);--teks-2:rgb(64 72 74);--garis:rgb(192 200 201/.55)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--latar);color:var(--teks);font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--hijau)}
img{max-width:100%}
.lewati{position:absolute;left:-9999px}
.lewati:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.5rem 1rem;border-radius:.5rem}

/* Kepala & kaki */
.kepala{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--garis)}
.bar{max-width:72rem;margin:0 auto;padding:.8rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.merek{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--primary);font-size:1.2rem;letter-spacing:-.01em}
.merek img{height:30px;width:auto}
.merek b{font-weight:800}
.merek span{color:var(--hijau)}
.kepala nav{display:flex;align-items:center;gap:1rem}
.kepala nav a{text-decoration:none;font-weight:700;font-size:.92rem;color:var(--primary)}
.tombol{display:inline-flex;align-items:center;justify-content:center;padding:.6rem 1.1rem;border-radius:9999px;background:var(--hijau);
  color:#fff!important;font-weight:700;text-decoration:none;transition:background .2s}
.tombol:hover{background:rgb(0 130 77)}
.kaki{border-top:1px solid var(--garis);padding:2rem 1rem;text-align:center;font-size:.85rem;color:var(--teks-2)}
.kaki p{margin:.3rem 0}

/* Umum */
.label{margin:0;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--hijau)}
.meta{margin:0;font-size:.85rem;color:var(--teks-2)}
.pembuka{font-size:1.15rem;line-height:1.7;color:var(--teks-2)}

/* Halaman daftar */
.indeks{max-width:72rem;margin:0 auto;padding:3rem 1rem 4rem}
.indeks h1{margin:.5rem 0 .75rem;color:var(--primary);font-size:clamp(1.9rem,5vw,2.8rem);line-height:1.15;letter-spacing:-.02em;max-width:44rem}
.indeks .pembuka{max-width:44rem;margin:0}
.saring{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 1.5rem}
.saring button{font:inherit;font-size:.9rem;font-weight:700;padding:.5rem 1rem;border-radius:9999px;border:1px solid var(--garis);background:#fff;color:var(--primary);cursor:pointer}
.saring button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.saring button:focus-visible{outline:2px solid var(--hijau);outline-offset:2px}
.kisi{display:grid;gap:1rem}
@media (min-width:700px){.kisi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.indeks .kisi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kartu{background:#fff;border:1px solid var(--garis);border-radius:1.25rem;padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;
  transition:box-shadow .2s,transform .2s}
.kartu:hover{box-shadow:0 12px 30px rgba(24,72,79,.1);transform:translateY(-2px)}
.kartu[hidden]{display:none}
.kartu h2,.kartu h3{margin:0;font-size:1.15rem;line-height:1.35}
.kartu h2 a,.kartu h3 a{color:var(--primary);text-decoration:none}
.kartu h2 a:hover,.kartu h3 a:hover{text-decoration:underline}
.kartu p{margin:0;font-size:.95rem;line-height:1.6;color:var(--teks-2)}
.kartu .meta{margin-top:auto;padding-top:.5rem}

/* Halaman artikel */
.artikel{max-width:46rem;margin:0 auto;padding:2rem 1rem 4rem}
.remah{font-size:.85rem;color:var(--teks-2);margin-bottom:1.5rem}
.remah a{color:var(--teks-2)}
.artikel h1{margin:.5rem 0 .75rem;color:var(--primary);font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.2;letter-spacing:-.02em}
.artikel .pembuka{margin:1.25rem 0 0;padding-bottom:1.5rem;border-bottom:1px solid var(--garis)}
.daftar-isi{margin:1.75rem 0;padding:1.1rem 1.3rem;background:var(--latar-2);border-radius:1rem}
.daftar-isi p{margin:0 0 .4rem;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.daftar-isi ol{margin:0;padding-left:1.2rem;font-size:.95rem;line-height:1.8}
.daftar-isi a{color:var(--primary);text-decoration:none}
.daftar-isi a:hover{text-decoration:underline}
.isi h2{margin:2.5rem 0 .75rem;color:var(--primary);font-size:1.5rem;line-height:1.3;scroll-margin-top:5rem}
.isi h3{margin:1.75rem 0 .5rem;color:var(--primary);font-size:1.15rem}
.isi p{margin:0 0 1.1rem}
.isi ul,.isi ol{margin:0 0 1.2rem;padding-left:1.4rem}
.isi li{margin:.35rem 0}
.isi strong{color:var(--primary)}
.isi blockquote{margin:1.5rem 0;padding:.25rem 0 .25rem 1.2rem;border-left:4px solid var(--hijau);color:var(--teks-2);font-style:italic}
.catatan{margin:1.5rem 0;padding:1rem 1.2rem;border-radius:1rem;background:var(--hijau-muda);border:1px solid rgb(0 109 64/.2)}
.catatan p:last-child{margin-bottom:0}
.templat{margin:1rem 0 1.5rem;padding:1.1rem 1.25rem;border-radius:1rem;background:#fff;border:1px dashed rgb(0 49 55/.35);
  font-size:.95rem;line-height:1.7;white-space:pre-line}
.templat{position:relative;padding-top:2.6rem}
.salin{position:absolute;top:.6rem;right:.6rem;font:inherit;font-size:.8rem;font-weight:700;padding:.3rem .8rem;border-radius:9999px;
  border:1px solid rgb(0 109 64/.35);background:var(--hijau-muda);color:var(--hijau);cursor:pointer;white-space:normal}
.salin:hover{background:rgb(214 242 228)}
.templat-judul{margin:1.5rem 0 0;font-weight:800;color:var(--primary);font-size:.95rem}
.periksa{list-style:none;padding-left:0!important}
.periksa li{padding-left:1.8rem;position:relative}
.periksa li::before{content:"✓";position:absolute;left:0;top:.05rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--hijau);
  color:#fff;font-size:.75rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.tabel{overflow-x:auto;margin:0 0 1.5rem}
.tabel table{width:100%;border-collapse:collapse;font-size:.95rem}
.tabel th,.tabel td{text-align:left;vertical-align:top;padding:.65rem .6rem;border-bottom:1px solid var(--garis)}
.tabel th{color:var(--primary)}
.ajak{margin:3rem 0 0;padding:1.75rem;border-radius:1.5rem;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff}
.ajak p{margin:0 0 1rem;color:rgb(188 235 243);line-height:1.65}
.ajak .ajak-judul{margin-bottom:.4rem;color:#fff;font-weight:800;font-size:1.25rem}
.terkait{margin-top:3rem}
.terkait h2{margin:0 0 1rem;color:var(--primary);font-size:1.3rem}

/* ── Ilustrasi ── */
.ilustrasi{margin:2rem 0;padding:1.25rem;border-radius:1.25rem;background:#fff;border:1px solid var(--garis)}
.ilustrasi svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto}
.ilustrasi figcaption{margin-top:.9rem;text-align:center;font-size:.85rem;color:var(--teks-2)}

/* ── Progres baca ── */
.progres{position:fixed;left:0;right:0;top:0;height:3px;z-index:20;pointer-events:none}
.progres span{display:block;height:100%;background:var(--hijau);transform:scaleX(0);transform-origin:left}

/* ── Checklist interaktif ── */
.periksa.interaktif li{cursor:pointer;border-radius:.5rem;padding-top:.1rem;padding-bottom:.1rem;user-select:none}
.periksa.interaktif li:focus-visible{outline:2px solid var(--hijau);outline-offset:2px}
.periksa.interaktif li::before{content:"";background:#fff;border:2px solid rgb(0 109 64/.45)}
.periksa.interaktif li[aria-checked="true"]::before{content:"✓";background:var(--hijau);border-color:var(--hijau)}
.periksa.interaktif li[aria-checked="true"]{color:var(--teks-2)}
.periksa-info{margin:-.6rem 0 1.2rem;font-size:.85rem;font-weight:700;color:var(--teks-2)}
.periksa-info.beres{color:var(--hijau)}

/* ── Template: teks dan tombol ── */
.templat-teks{display:block}

/* ── "Membantu?" ── */
.membantu{margin:3rem 0 0;padding:1.25rem 1.4rem;border-radius:1.25rem;background:#fff;border:1px solid var(--garis);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.membantu p{margin:0;font-weight:700;color:var(--primary)}
.membantu div{display:flex;gap:.5rem}
.membantu button{font:inherit;font-weight:700;padding:.5rem 1rem;border-radius:9999px;border:1px solid var(--garis);background:var(--latar);cursor:pointer}
.membantu button:hover{background:var(--hijau-muda);border-color:rgb(0 109 64/.35)}
.membantu + .ajak{margin-top:1.25rem}

/* ── Alat interaktif ── */
.alat{margin:2rem 0;padding:1.4rem;border-radius:1.5rem;background:linear-gradient(180deg,var(--latar-2),#fff);border:1px solid rgb(0 109 64/.25)}
.alat-kepala h3{margin:.25rem 0 .35rem!important}
.alat-kepala p{margin:0 0 1rem}
.alat-label{margin:0!important;display:inline-block;padding:.2rem .65rem;border-radius:9999px;background:var(--hijau);color:#fff;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.alat-kolom{display:grid;gap:.9rem}
@media (min-width:640px){.alat-kolom-2{grid-template-columns:1fr 1fr}.alat-kolom-2 .alat-lebar{grid-column:1/-1}}
.alat label{display:flex;flex-direction:column;gap:.35rem;font-size:.9rem;font-weight:700;color:var(--primary)}
.alat label[hidden]{display:none}
.alat label span{font-weight:500;color:var(--teks-2);font-size:.8rem}
.alat input,.alat textarea,.alat select{font:inherit;font-size:.95rem;font-weight:500;color:var(--teks);padding:.65rem .8rem;border-radius:.8rem;
  border:1px solid rgb(0 49 55/.2);background:#fff;width:100%}
.alat textarea{resize:vertical;line-height:1.55}
.alat input:focus,.alat textarea:focus,.alat select:focus{outline:2px solid rgb(0 109 64/.5);outline-offset:1px;border-color:var(--hijau)}
.alat-hasil{margin-top:1.1rem;padding:1.1rem 1.2rem;border-radius:1rem;background:#fff;border:1px solid var(--garis)}
.alat-hasil-judul{margin:0 0 .5rem!important;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hijau)}
.alat-keluaran{white-space:pre-line;line-height:1.7;color:var(--teks)}
.alat-keluaran.kosong{color:var(--teks-2);font-style:italic}
.alat-info{margin:.6rem 0 0!important;font-size:.85rem;color:var(--teks-2)}
.alat-info:empty{display:none}
.alat-saran{margin:.75rem 0 0!important;padding:0!important;list-style:none}
.alat-saran:empty{display:none}
.alat-saran li{margin:.35rem 0;padding:.5rem .75rem;border-radius:.7rem;background:rgb(255 245 230);color:rgb(122 74 0);font-size:.88rem;line-height:1.5}
.alat-saran li::before{content:"💡 "}
.alat-tombol{display:flex;flex-wrap:wrap;gap:.5rem}
.alat-salin,.alat-kosongkan{margin-top:.9rem;font:inherit;font-size:.9rem;font-weight:700;padding:.55rem 1.1rem;border-radius:9999px;cursor:pointer;border:0;
  background:var(--hijau);color:#fff}
.alat-salin:disabled{opacity:.45;cursor:default}
.alat-kosongkan{background:#fff;color:var(--primary);border:1px solid var(--garis)}
.alat-catatan{margin:.9rem 0 0!important;font-size:.8rem;color:var(--teks-2)}
.alat-tabel{margin-bottom:0}
.alat-tabel th,.alat-tabel td{padding:.4rem}
.alat-tabel input{padding:.45rem .55rem;font-size:.88rem;min-width:5.2rem}
.alat-tabel th[scope="row"] input{min-width:8.5rem}
.alat-tabel select{padding:.4rem .3rem;min-width:3.4rem}
/* Kolom kompetensi tetap terlihat saat tabel digeser ke samping di layar kecil. */
.alat-tabel thead th:first-child,.alat-tabel th[scope="row"]{position:sticky;left:0;z-index:1;background:#f7f8ff}
.alat-tabel tfoot td{font-weight:800;font-size:1.05rem;color:var(--primary);text-align:center}
.alat-tabel tfoot td.terbaik{color:#fff;background:var(--hijau);border-radius:.6rem}