/* ── metodologi ───────────────────────────────────────────── */
.meth{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(22px,3.4vw,56px); align-items:start; }
.meth-fig{ border:1px solid var(--line); background:var(--plate); padding:14px; position:relative; }
.meth-fig svg{ width:100%; height:auto; display:block; }
.meth-cap{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); line-height:1.55; }
.meth-steps{ display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.8vw,24px);
  padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--line);
  cursor:default; transition:background .18s;
}
.step:first-child{ border-top:1px solid var(--line); }
.step .n{
  font-family:Archivo,sans-serif; font-variation-settings:"wdth" 112,"wght" 800;
  font-size:clamp(26px,3vw,40px); line-height:1; color:var(--num);
  letter-spacing:-.04em; transition:color .18s;
}
.step h3{ font-size:clamp(17px,1.5vw,21px); font-variation-settings:"wdth" 106,"wght" 700; }
.step p{ margin-top:6px; font-size:14.5px; color:var(--txt-2); line-height:1.6; max-width:56ch; }
.step .kit{ margin-top:10px; display:flex; flex-wrap:wrap; gap:7px; }
.step .kit span{
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.09em;
  padding:4px 8px; border:1px solid var(--line-2); color:var(--dim); white-space:nowrap;
}
.step:hover,.step.on{ background:rgba(248,104,0,.05); }
.step:hover .n,.step.on .n{ color:var(--orange); }
.step:hover .kit span,.step.on .kit span{ border-color:rgba(248,104,0,.4); color:var(--txt-2); }
/* blok laterit: citra + overlay poligon yang meredupkan lapisan non-aktif */
.blk{ position:relative; display:block; }
.blk img{ width:100%; height:auto; display:block; }
.blk-ov{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.blk-ov .lay,.blk-ov .mk{ opacity:0; transition:opacity .22s; }
.blk.dim .lay{ opacity:1; }
.blk.dim .lay.hit{ opacity:0; }
.blk .mk.on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .blk-ov .lay,.blk-ov .mk{ transition:none; } }
/* Setiap tahap dibaca terhadap blok, tetapi kolom tahap jauh lebih panjang dari
   gambarnya. Gambar dipatok di bawah nav supaya lapisan yang diredupkan tahap 05
   masih terlihat. Hanya saat dua kolom benar-benar ada, dan hanya bila gambar
   (~580px + nav) masih muat di layar — kalau tidak, patokan justru memotongnya. */
@media (min-width:901px) and (min-height:720px){
  .meth-fig{ position:sticky; top:calc(var(--nav-h) + 24px); }
}
@media (max-width:900px){ .meth{ grid-template-columns:1fr; } }