/* metode versi awam */
#metode{--mt-merah:#c9503a;--mt-oranye:#e58a45;--mt-kuning:#e3b94e;--mt-hijau:#5a9e74;--mt-biru:#4f8fc4;--mt-nila:#5f6fb0}
.mt-ikon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mt-lbl{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}

/* gambaran besar */
.mt-peta{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.1fr) 28px minmax(0,1.2fr);gap:8px;margin:0 0 20px}
.mt-kol{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 14px 8px;min-width:0}
.mt-kol h3{display:flex;align-items:center;gap:8px;font-size:14.5px;margin:0 0 4px}
.mt-kol h3 i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:var(--card);font-size:12px;flex:none}
.mt-kol>p{margin:0 0 6px;font-size:12px;color:var(--ink2)}
.mt-li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px;line-height:1.35;min-width:0}
.mt-li>span{min-width:0}
.mt-li b{display:block;font-size:13px}
.mt-li small{color:var(--ink2)}
.mt-li .mt-ikon{color:var(--mtc,var(--brand2));margin-top:1px}
button.mt-li{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:flex-start;width:100%;padding:7px 6px;margin:0 -6px;border-top:1px solid var(--line);border-radius:8px;font-size:12.5px;line-height:1.35;cursor:pointer;width:calc(100% + 12px)}
button.mt-li:hover{background:var(--surface)}
button.mt-li b{color:var(--brand2)}
.mt-panah{display:grid;place-items:center;color:var(--ink2)}
@media (max-width:900px){.mt-peta{grid-template-columns:minmax(0,1fr)}.mt-panah{height:22px}.mt-panah svg{transform:rotate(90deg)}}

/* kartu bagian */
details.mt-sek{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;min-width:0}
details.mt-sek>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px}
details.mt-sek>summary::-webkit-details-marker{display:none}
details.mt-sek>summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:rotate(45deg);transition:transform .2s}
details.mt-sek[open]>summary::after{transform:rotate(-135deg)}
details.mt-sek>summary:hover{background:var(--surface);border-radius:var(--r)}
.mt-nom{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:color-mix(in oklab,var(--brand2) 14%,transparent);color:var(--brand2)}
.mt-nom .mt-ikon{width:19px;height:19px}
.mt-jd{min-width:0}
.mt-jd b{display:block;font-family:var(--display);font-size:15.5px;letter-spacing:-.01em}
.mt-jd small{display:block;color:var(--ink2);font-size:12.5px;line-height:1.35;margin-top:1px}
.mt-isi{padding:2px 18px 18px;display:grid;gap:16px;min-width:0}
.mt-isi>*{min-width:0}
@media (max-width:640px){.mt-isi{padding:2px 12px 14px}details.mt-sek>summary{padding:12px}}

/* singkatnya */
.mt-singkat{background:var(--surface);border-left:4px solid var(--brand2);border-radius:0 12px 12px 0;padding:12px 14px;font-size:14.5px;line-height:1.55}
.mt-singkat p{margin:4px 0 0}

/* alur langkah */
ol.mt-alur{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:22px}
ol.mt-alur>li{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--mtc);border-radius:12px;padding:10px 12px 11px;min-width:0}
ol.mt-alur>li+li::before{content:"";position:absolute;left:-16px;top:50%;width:8px;height:8px;border-right:2px solid var(--ink2);border-bottom:2px solid var(--ink2);transform:translateY(-50%) rotate(-45deg);opacity:.7}
.mt-ak{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mt-ak i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in oklab,var(--mtc) 16%,transparent);color:var(--mtc);flex:none}
.mt-ak em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--ink2);letter-spacing:.06em}
ol.mt-alur b{display:block;font-size:13px;line-height:1.3}
ol.mt-alur small{display:block;color:var(--ink2);font-size:11.8px;line-height:1.35;margin-top:2px}
@media (max-width:820px){
  ol.mt-alur{grid-auto-flow:row;grid-auto-columns:auto;gap:16px}
  ol.mt-alur>li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;border-top-width:1px;border-left:3px solid var(--mtc)}
  ol.mt-alur>li .mt-ak{grid-row:span 2;margin:0}
  ol.mt-alur>li .mt-ak em{display:none}
  ol.mt-alur>li+li::before{left:50%;top:-12px;transform:translateX(-50%) rotate(45deg)}
}

/* contoh hitung: tangga */
.mt-contoh{border:1px solid var(--line);border-radius:14px;padding:14px 14px 10px;background:linear-gradient(180deg,color-mix(in oklab,var(--mt-hijau) 6%,transparent),transparent 120px)}
.mt-ch{margin-bottom:10px}
.mt-ch b{display:block;font-size:14px;margin-top:2px}
.mt-ch small{display:block;color:var(--ink2);font-size:12px;line-height:1.4;margin-top:2px}
ol.mt-tangga{list-style:none;margin:0;padding:0}
ol.mt-tangga>li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:4px 10px;align-items:start;padding:8px 6px 8px 0}
ol.mt-tangga>li::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line)}
ol.mt-tangga>li:first-child::before{top:14px}
ol.mt-tangga>li:last-child::before{bottom:calc(100% - 14px)}
.mt-tt{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--brand2);color:var(--brand2);font-size:11px;font-weight:800;line-height:1}
.mt-tl{min-width:0;font-size:13px;line-height:1.4}
.mt-tl b{font-weight:650}
.mt-tl small{display:block;color:var(--ink2);font-size:12px;line-height:1.4;margin-top:1px}
.mt-tv{font-family:var(--display);font-weight:800;font-size:15px;text-align:right;font-variant-numeric:tabular-nums;max-width:48vw;overflow-wrap:anywhere}
.mt-tv small{display:block;font-family:var(--font);font-weight:500;font-size:11px;color:var(--ink2)}
li.mt-in .mt-tt{border-color:var(--mt-biru);color:var(--mt-biru)}
li.mt-in .mt-tv{color:var(--mt-biru);font-size:14px}
li.mt-ok .mt-tt{border-color:var(--mt-hijau);background:var(--mt-hijau);color:#fff}
li.mt-no .mt-tt{border-color:var(--mt-merah);background:var(--mt-merah);color:#fff}
li.mt-ok .mt-tv{color:var(--mt-hijau)}
li.mt-no .mt-tv{color:var(--mt-merah)}
li.mt-hasil{background:color-mix(in oklab,var(--mt-oranye) 13%,transparent);border-radius:12px;padding-left:0;margin-top:4px}
li.mt-hasil .mt-tt{border-color:var(--mt-oranye);background:var(--mt-oranye);color:#fff}
li.mt-hasil .mt-tv{font-size:19px}
li.mt-hasil .mt-tl b{font-weight:800}
.mt-cat{margin:8px 0 2px;font-size:12px;color:var(--ink2);line-height:1.45}
.mt-muat{display:flex;gap:10px;align-items:center;color:var(--ink2);font-size:13px;padding:6px 0}
.mt-muat .spin{width:20px;height:20px;border-width:2px;margin:0}
@media (max-width:640px){
  ol.mt-tangga>li{grid-template-columns:22px minmax(0,1fr);padding-right:0}
  .mt-tv{grid-column:2;text-align:left;max-width:none}
  .mt-tv small{display:inline;margin-left:6px}
}

/* rincian teknis & batasan */
details.mt-tek{border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
details.mt-tek>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--ink2)}
details.mt-tek>summary::-webkit-details-marker{display:none}
details.mt-tek>summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
details.mt-tek[open]>summary::after{transform:rotate(-135deg)}
.mt-tekisi{padding:0 14px 12px;font-size:13px;min-width:0}
.mt-tekisi .rumus{background:var(--card)}
.mt-tekisi p{margin:6px 0}
.mt-batas{font-size:13px}
.mt-batas ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.mt-batas li{display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.mt-batas li::before{content:"";flex:none;width:7px;height:7px;margin-top:7px;border-radius:2px;background:var(--mt-kuning);transform:rotate(45deg)}
.mt-pil{display:inline-flex;flex-wrap:wrap;gap:6px}
.mt-tekisi code,.mt-tl,.mt-cat{overflow-wrap:anywhere}