/* Komponen gerak untuk artikel: diagram alur, penggeser, garis waktu. Dipasang otomatis di halaman artikel oleh bangun_katalog.py.
   Gerak berjalan sekali saat komponen terlihat; semua tampil langsung bila pembaca mematikan animasi. */
.mk{margin:28px auto;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--putih);padding:18px 18px 14px;box-shadow:var(--bayang)}
.mk__judul{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:.95rem;color:var(--navy);margin-bottom:10px}
html[data-tema="gelap"] .mk__judul{color:#E4E7EB}
.mk__tanda{font-size:.72rem;font-weight:600;color:var(--teks-2);border:1px solid var(--border);border-radius:99px;padding:2px 10px;white-space:nowrap}
.mk__cap{font-size:.85rem;color:var(--teks-2);margin:10px 0 0;line-height:1.5}
.mk svg{width:100%;height:auto;display:block}
/* diagram transmisi */
.dg-kotak{fill:var(--biru-muda);stroke:var(--biru-tua);stroke-width:1.5}
.dg-kunci{fill:var(--navy)}
.dg-hasil{fill:var(--oranye)}
.dg-redup{fill:none;stroke:var(--teks-2);stroke-width:1.5;stroke-dasharray:5 4}
.dg-t{font:600 12.5px Inter,system-ui,sans-serif;fill:var(--navy);text-anchor:middle}
.dg-tp{font:700 13.5px Inter,system-ui,sans-serif;fill:#fff;text-anchor:middle}
.dg-jalur{font:700 10.5px Inter,system-ui,sans-serif;fill:var(--biru-tua);text-anchor:middle;letter-spacing:.06em}
.dg-panah{fill:none;stroke:var(--biru-tua);stroke-width:2.2;stroke-linecap:round}
html[data-tema="gelap"] .dg-kotak{fill:#16212b;stroke:#7CBDF5}
html[data-tema="gelap"] .dg-t{fill:#E4E7EB}
html[data-tema="gelap"] .dg-kunci{fill:#244a6b}
html[data-tema="gelap"] .dg-panah{stroke:#7CBDF5}
html[data-tema="gelap"] .dg-jalur{fill:#7CBDF5}
html[data-tema="gelap"] .dg-hasil + text{fill:#1A1A1A}
.dg [data-s]{opacity:0}
.dg.jalan [data-s]{animation:dgMuncul .55s ease forwards;animation-delay:calc(var(--k)*.6s)}
.dg .dg-panah{stroke-dasharray:1;stroke-dashoffset:1}
.dg.jalan .dg-panah{animation:dgGaris .6s ease forwards;animation-delay:calc(var(--k)*.6s)}
@keyframes dgMuncul{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dgGaris{to{stroke-dashoffset:0}}
.dg:not(.dg-js) [data-s]{opacity:1}.dg:not(.dg-js) .dg-panah{stroke-dashoffset:0}
/* penggeser */
.gs{display:grid;gap:14px}
.gs__atur{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:600;color:var(--teks-2)}
.gs__atur input{flex:1;accent-color:var(--biru-tua)}
.gs__nilai{min-width:3.4em;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
html[data-tema="gelap"] .gs__nilai{color:#E4E7EB}
.gs__baris{display:grid;grid-template-columns:7.2em 1fr 4.2em;align-items:center;gap:10px;font-size:.85rem}
.gs__lajur{background:var(--abu);border-radius:8px;height:26px;overflow:hidden}
html[data-tema="gelap"] .gs__lajur{background:#1a1d22}
.gs__isi{height:100%;border-radius:8px;transition:width .5s ease;background:var(--biru)}
.gs__isi.tumbuh{background:var(--oranye)}
.gs__angka{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.gs__turun{font-size:.8rem;color:var(--merah);font-weight:600;min-height:1.2em}
@media (max-width:420px){.gs__baris{grid-template-columns:5.6em 1fr 3.8em}}
/* garis waktu */
.gw{position:relative;margin:6px 0 0 14px;padding-left:26px;border-left:2px solid var(--border)}
.gw::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:var(--isi,0%);background:var(--biru-tua);transition:height 2.4s ease}
.gw.jalan{--isi:100%}
.gw__item{position:relative;margin:0 0 22px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--k)*.45s)}
.gw.jalan .gw__item{opacity:1;transform:none}
.gw:not(.gw-js) .gw__item{opacity:1;transform:none}
.gw__item::before{content:"";position:absolute;left:-35px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--putih);border:3px solid var(--biru-tua)}
.gw__item.patah::before{border-color:var(--merah);background:var(--merah)}
.gw__tahun{font-weight:800;color:var(--biru-tua);font-size:.95rem}
html[data-tema="gelap"] .gw__tahun{color:#7CBDF5}
.gw__item p{margin:2px 0 0;font-size:.92rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){.dg [data-s],.gw__item{opacity:1!important;animation:none!important;transform:none!important;transition:none!important}.dg .dg-panah{stroke-dashoffset:0!important;animation:none!important}.gw::before{transition:none;height:100%}.gs__isi{transition:none}}

.mk .mk__aksi{text-align:center;margin-top:12px}
.mk button.mk__btn{font:inherit;font-weight:600;font-size:.85rem;border:1px solid var(--biru-tua);color:var(--biru-tua);background:transparent;border-radius:99px;padding:6px 16px;cursor:pointer}
.mk button.mk__btn:hover{background:var(--biru-muda)}
html[data-tema="gelap"] .mk button.mk__btn{color:#7CBDF5;border-color:#7CBDF5}
html[data-tema="gelap"] .mk button.mk__btn:hover{background:#16212b}
/* indeks urutan animasi */
[data-k="0"]{--k:0}
[data-k="1"]{--k:1}
[data-k="2"]{--k:2}
[data-k="3"]{--k:3}
[data-k="4"]{--k:4}
[data-k="5"]{--k:5}
[data-k="6"]{--k:6}

/* Komponen term premium: batang bertumpuk yield = perkiraan suku bunga + term premium. */
.tp{display:grid;gap:12px}
.tp__bar{display:flex;height:46px;border-radius:10px;overflow:hidden;background:var(--abu)}
html[data-tema="gelap"] .tp__bar{background:#1a1d22}
.tp__rata{background:var(--navy);width:70%}
html[data-tema="gelap"] .tp__rata{background:#244a6b}
.tp__prem{background:var(--oranye);width:13.3%;transition:width .35s ease}
.tp__legenda{display:flex;justify-content:space-between;gap:10px;font-size:.85rem;color:var(--teks-2);font-variant-numeric:tabular-nums}
.tp__legenda b{color:var(--navy)}
html[data-tema="gelap"] .tp__legenda b{color:#E4E7EB}
.tp__total{text-align:center;font-weight:800;font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums}
html[data-tema="gelap"] .tp__total{color:#E4E7EB}
.tp__selisih{text-align:center;font-size:.85rem;font-weight:600;color:var(--hijau-teks);min-height:1.3em}
.tp__atur{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:600;color:var(--teks-2)}
.tp__atur input{flex:1;accent-color:var(--biru-tua)}
@media (prefers-reduced-motion:reduce){.tp__prem{transition:none}}