.petunjuk{margin-top:28px;font-size:.85rem;color:var(--muted);animation:naik 2.2s ease-in-out infinite}
@keyframes naik{50%{transform:translateY(8px)}}

.langkah{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;counter-reset:l}
.langkah li{position:relative;padding-top:18px;border-top:2px solid var(--line)}
.langkah li::before{content:"";position:absolute;top:-2px;left:0;width:0;height:2px;background:var(--accent);transition:width 1.2s ease .3s}
.langkah li.in::before{width:100%}
.langkah b{font-family:var(--serif);font-size:1.6rem;color:var(--accent)}
.langkah h3{margin:4px 0}.langkah p{font-size:.95rem}

.unggul{border-color:var(--accent)}
.kartu .tag{text-transform:none}

.galeri figure{cursor:zoom-in}
#lb{margin:auto;max-width:560px;width:calc(100% - 40px);border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--text);padding:18px}
#lb::backdrop{background:rgba(20,14,8,.6)}
#lb .gambar{aspect-ratio:4/3;border-radius:12px;background:var(--g)}
#lb p{margin-top:12px;font-family:var(--serif);font-size:1.15rem}
#lb .tutup{position:absolute;top:10px;right:10px;z-index:1;background:var(--card);border:1px solid var(--line);border-radius:50%;width:34px;height:34px}
#lb[open]{animation:buka .45s cubic-bezier(.2,.8,.2,1)}
@keyframes buka{from{opacity:0;transform:scale(.9) rotate(-1.5deg)}}

#atas{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);background:var(--bg);color:var(--accent);font-size:1.1rem;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.4s cubic-bezier(.2,.8,.2,1);z-index:25}
#atas.tampil{opacity:1;transform:none;pointer-events:auto}
#atas:hover{background:var(--accent);color:var(--bg)}

.riak{position:fixed;pointer-events:none;border:1.5px solid var(--accent);z-index:40}
.serpih{position:fixed;pointer-events:none;z-index:50;left:0;top:0}
@media(prefers-reduced-motion:reduce){.petunjuk{animation:none}#lb[open]{animation:none}}