/**
 * Testing flow — diagram alur proses pengujian di beranda.
 * Section pagebuilder: resources/views/pagebuilder/testing-flow/
 *
 * Satu bentuk sel dipakai kedua tata letak (simpul di atas, teks di bawah,
 * rata tengah); yang berbeda hanya wadahnya:
 *   >= 1200px  satu baris 8 simpul dengan garis penghubung
 *   <  1200px  petak 2 kolom x 4 baris, tanpa garis — supaya tidak memanjang
 *              ke bawah sepanjang layar di ponsel
 *
 * Animasi progres: cincin tersapu melingkari tiap simpul, ikonnya melompat
 * masuk, dan dua tahap persetujuan menutup dengan centang hijau yang lalu
 * menyerahkan tempatnya kembali ke ikon asal. Di layar besar ini berjalan
 * sendiri sekali tiap masuk layar; di layar kecil progresnya mengikuti
 * guliran (lihat blok .is-scrolly).
 *
 * Keadaan BAWAAN adalah keadaan selesai (cincin penuh, garis penuh, ikon
 * tampil); JS menambahkan .is-armed untuk mengosongkannya lalu .is-playing
 * untuk memutar. Jadi kalau JS mati atau pengguna meminta gerak dikurangi,
 * yang tampil tetap diagram utuh, bukan delapan lingkaran kosong.
 *
 * Semua selector diawali .tk-flowmap. File ini dimuat lewat @push('styles'),
 * yang di layouts/app.blade.php keluar SEBELUM main.css — jadi selector satu
 * kelas akan kalah oleh main.css. Prefiks itu yang menaikkan specificity.
 */

.tk-flowmap{
    --tk-flow-ink: #12203a;
    --tk-flow-muted: rgba(18, 32, 58, 0.58);
    --tk-flow-line: rgba(18, 32, 58, 0.12);
    --tk-flow-brand: var(--themecolor, #375685);
    /* Hijau "berhasil" milik tema (#22c55e / #16a34a / #166534); dipilih yang
       tengah supaya goresan 2px masih tegas di atas putih. */
    --tk-flow-ok: #16a34a;
    --tk-flow-node: 54px;
    /* Jarak antar-kolom; dipakai menghitung panjang ruas penghubung.
       Satu baris delapan simpul tidak punya jarak kolom, petak 2 kolom punya. */
    --tk-flow-gap: 0px;

    /* Satu tahap per 0.55s. Semua penundaan di bawah diturunkan dari sini. */
    --tk-flow-beat: .55s;
    /* Panjang satu giliran penuh (cincin -> ikon -> centang -> ikon kembali).
       Dipakai mode guliran untuk memetakan --p 0..1 ke seluruh giliran itu. */
    --tk-flow-span: 1.7s;

    padding: 64px 0 8px;
}

/* ── Judul section ─────────────────────────────────────────────────────── */
.tk-flowmap .tk-flowmap-title{
    margin: 0 auto 44px;
    max-width: 760px;
}
.tk-flowmap .tk-flowmap-title > span{
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tk-flowmap .tk-flowmap-title > h2{
    margin-bottom: 14px;
    color: var(--tk-flow-ink);
}
.tk-flowmap .tk-flowmap-title > p{
    margin: 0;
    color: var(--tk-flow-muted);
    font-size: 15px;
    line-height: 1.7;
}

/* ── Rail + sel ────────────────────────────────────────────────────────── */
.tk-flowmap .tk-flowmap-rail{
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tk-flowmap .tk-flowmap-step{
    position: relative;
    list-style: none;
    text-align: center;
}

/* Ruas penghubung: dari TEPI simpul ini ke TEPI simpul berikutnya, bukan dari
   pusat ke pusat. Garis pusat-ke-pusat memang tertutup cakram simpul saat
   diam, tapi begitu simpulnya diredupkan (keadaan .is-armed) garisnya
   menembus sampai ke tengah lingkaran dan terlihat berantakan.
   `content` sengaja tidak diisi di sini; tiap tata letak yang memutuskan
   ruas mana yang digambar. */
.tk-flowmap .tk-flowmap-step::before,
.tk-flowmap .tk-flowmap-step::after{
    position: absolute;
    top: calc(var(--tk-flow-node) / 2 - 1px);
    left: calc(50% + var(--tk-flow-node) / 2 + 8px);
    right: calc(var(--tk-flow-node) / 2 + 8px - 50% - var(--tk-flow-gap));
    height: 2px;
}
.tk-flowmap .tk-flowmap-step::before{
    background: var(--tk-flow-line);
}
.tk-flowmap .tk-flowmap-step::after{
    background: var(--tk-flow-brand);
    transform-origin: left center;
}

/* ── Simpul ────────────────────────────────────────────────────────────── */
/* Cakram putih menutup garis penghubung yang lewat di belakangnya; isian
   pelaku ada di ::before yang lebih kecil, sehingga cincin progres punya
   ruang sendiri di tepi luar dan tetap terbaca pada tiap ragam simpul. */
.tk-flowmap .tk-flowmap-node{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--tk-flow-node);
    height: var(--tk-flow-node);
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--tk-flow-brand);
    font-size: 20px;
    line-height: 1;
}
.tk-flowmap .tk-flowmap-node::before{
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(55, 86, 133, 0.10);
}
/* Tahap yang dikerjakan pelanggan diberi isian penuh; tahap MERO isian tipis.
   Bedanya cuma pekat isian, bukan warna lain — supaya tetap satu warna merek. */
.tk-flowmap .tk-flowmap-step--client .tk-flowmap-node::before{
    background: var(--tk-flow-brand);
}
.tk-flowmap .tk-flowmap-step--client .tk-flowmap-node{
    color: #ffffff;
}
.tk-flowmap .tk-flowmap-node > i{
    position: relative;
    z-index: 2;
    font-size: 20px;
    line-height: 1;
}
.tk-flowmap .tk-flowmap-num{
    position: absolute;
    z-index: 4;
    top: -7px;
    right: -7px;
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--tk-flow-line);
    background: #ffffff;
    color: var(--tk-flow-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* Cincin progres. Diputar -90deg supaya sapuannya mulai dari atas.
   Keliling lingkaran r=26 adalah 163.4; dasharray 164 menutupinya penuh. */
.tk-flowmap .tk-flowmap-ring{
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}
.tk-flowmap .tk-flowmap-ring circle{
    fill: none;
    stroke-width: 2;
}
.tk-flowmap .tk-flowmap-ring-track{
    stroke: rgba(18, 32, 58, 0.13);
}
.tk-flowmap .tk-flowmap-ring-bar{
    stroke: var(--tk-flow-brand);
    stroke-linecap: round;
    stroke-dasharray: 164;
    stroke-dashoffset: 0;
}

/* Ikon SVG sendiri (bukan font ikon) — dipakai tahap yang punya gerak khusus. */
.tk-flowmap .tk-flowmap-glyph{
    display: flex;
    align-items: center;
    justify-content: center;
}
.tk-flowmap .tk-flowmap-glyph svg{
    display: block;
    width: 1em;
    height: 1em;
}

/* ── Tahap persetujuan: formulir & sampel ──────────────────────────────── */
/* Dua gerbang tempat laboran memutuskan lolos atau tidak. Ditandai hijau dan
   ditutup centang, bukan sekadar ikon — inilah titik yang menentukan pesanan
   boleh lanjut. */
.tk-flowmap .tk-flowmap-step--verify .tk-flowmap-node{
    color: var(--tk-flow-ok);
}
.tk-flowmap .tk-flowmap-step--verify .tk-flowmap-node::before{
    background: rgba(22, 163, 74, 0.12);
}
.tk-flowmap .tk-flowmap-step--verify .tk-flowmap-ring-bar{
    stroke: var(--tk-flow-ok);
}
/* Keadaan selesai sama seperti tahap lain: ikon aslinya yang tampil.
   Centang hanya lewat — tergambar, ditahan sebentar, lalu menyerahkan
   tempatnya kembali ke ikon. */
.tk-flowmap .tk-flowmap-check{
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 58%;
    height: 58%;
    transform: translate(-50%, -50%);
    overflow: visible;
}
.tk-flowmap .tk-flowmap-check path{
    fill: none;
    stroke: var(--tk-flow-ok);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 21;
    stroke-dashoffset: 0;
    opacity: 0;
}

/* ── Teks tahap ────────────────────────────────────────────────────────── */
.tk-flowmap .tk-flowmap-actor{
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(55, 86, 133, 0.09);
    color: var(--tk-flow-brand);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tk-flowmap .tk-flowmap-step--verify .tk-flowmap-actor{
    background: rgba(22, 163, 74, 0.11);
    color: var(--tk-flow-ok);
}
/* Dua baris judul dikunci supaya deskripsi tiap tahap tetap sebaris, baik
   judulnya satu baris maupun dua (ID dan EN sama-sama muat). */
.tk-flowmap .tk-flowmap-text h4{
    margin: 0 0 6px;
    min-height: calc(14px * 1.35 * 2);
    color: var(--tk-flow-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}
.tk-flowmap .tk-flowmap-text p{
    margin: 0;
    color: var(--tk-flow-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ── Catatan + tombol ──────────────────────────────────────────────────── */
.tk-flowmap .tk-flowmap-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    flex-wrap: wrap;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid var(--tk-flow-line);
}
.tk-flowmap .tk-flowmap-foot p{
    flex: 1 1 420px;
    margin: 0;
    color: var(--tk-flow-muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}
.tk-flowmap .tk-flowmap-foot a{
    flex: none;
}
.tk-flowmap .tk-flowmap-foot a i{
    margin-left: 6px;
}

/* ══ Animasi progres ═══════════════════════════════════════════════════ */

/* Keadaan kosong hanya ada saat JS aktif dan gerak diizinkan. */
.tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-ring-bar{
    stroke-dashoffset: 164;
}
.tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-node{
    transform: scale(.9);
    opacity: .5;
}
.tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-check path{
    stroke-dashoffset: 21;
}
/* Ikon flex item, jadi sudah blok — transform berlaku tanpa perlu display. */
.tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-node > i{
    opacity: 0;
    transform: scale(.4) translateY(5px);
}
.tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-step::after{
    transform: scaleX(0);
}

.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-ring-bar{
    animation: tkFlowRing .7s ease-out forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat));
}
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-node{
    animation: tkFlowPop .55s cubic-bezier(.34, 1.4, .64, 1) forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat));
}
/* Tiap ikon melompat masuk sesaat setelah cincinnya mulai tersapu. */
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-node > i{
    animation: tkFlowIconIn .45s ease-out forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat) + .1s);
}
/* Pada dua tahap persetujuan ikonnya masuk, menepi saat cincin hampir penuh
   untuk memberi tempat pada centang, lalu kembali setelah centang pamit.
   Satu keyframe untuk seluruh giliran itu, bukan animasi bertumpuk yang
   saling rebut properti. */
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-step--verify .tk-flowmap-node > i{
    animation: tkFlowIconInOut 1.45s ease-out forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat) + .1s);
}
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-check path{
    animation: tkFlowCheck .85s ease-out forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat) + .62s);
}
/* Panah unduh memantul sekali begitu ikonnya mendarat. */
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-glyph-arrow{
    animation: tkFlowArrow .8s ease-out forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat) + .38s);
}
/* Ruas menyala menyusul cincinnya, mengantar ke tahap berikutnya. */
.tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-step::after{
    animation: tkFlowFillX .3s linear forwards;
    animation-delay: calc(var(--i) * var(--tk-flow-beat) + .35s);
}

/* Titik awal ditulis tegas, tidak diwarisi dari nilai statis .is-armed:
   mode guliran tidak memakai .is-armed, dan keyframe yang cuma punya `to`
   akan menganimasikan 0 -> 0 di sana. */
@keyframes tkFlowRing{
    from { stroke-dashoffset: 164; }
    to   { stroke-dashoffset: 0; }
}
@keyframes tkFlowPop{
    from { transform: scale(.9); opacity: .5; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes tkFlowIconIn{
    0%   { opacity: 0; transform: scale(.4) translateY(5px); }
    60%  { opacity: 1; transform: scale(1.12) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Persentase mengikuti durasi 1.45s: masuk 0-24%, menepi 35-47%, menunggu
   centang selesai sampai 86%, lalu kembali. */
@keyframes tkFlowIconInOut{
    0%   { opacity: 0; transform: scale(.4) translateY(5px); }
    17%  { opacity: 1; transform: scale(1.12) translateY(0); }
    24%  { opacity: 1; transform: scale(1) translateY(0); }
    35%  { opacity: 1; transform: scale(1); }
    47%  { opacity: 0; transform: scale(.65); }
    86%  { opacity: 0; transform: scale(.65); }
    100% { opacity: 1; transform: scale(1); }
}
/* Durasi .85s: tergambar 0-47%, ditahan sampai 79%, lalu pamit. */
@keyframes tkFlowCheck{
    0%   { opacity: 1; stroke-dashoffset: 21; }
    47%  { opacity: 1; stroke-dashoffset: 0; }
    79%  { opacity: 1; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: 0; }
}
/* Pantulan pegas: turun melewati batas, balik, lalu mengendap di posisi asal. */
@keyframes tkFlowArrow{
    0%   { transform: translateY(-1px); }
    35%  { transform: translateY(3px); }
    60%  { transform: translateY(0); }
    80%  { transform: translateY(1.6px); }
    100% { transform: translateY(0); }
}
@keyframes tkFlowFillX{
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@keyframes tkFlowFillY{
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Pengguna yang meminta gerak dikurangi mendapat diagram diam dan utuh. */
@media (prefers-reduced-motion: reduce){
    /* `*` tidak menjangkau pseudo-element, jadi ruas penghubungnya disebut
       sendiri. */
    .tk-flowmap .tk-flowmap-rail *,
    .tk-flowmap .tk-flowmap-step::after{
        animation: none !important;
        transition: none !important;
    }
    .tk-flowmap .tk-flowmap-step::after{
        transform: scaleX(1) !important;
    }
}

/* ══ Satu baris 8 simpul (>= 1200px) ═══════════════════════════════════ */
@media (min-width: 1200px){
    .tk-flowmap .tk-flowmap-rail{
        display: flex;
        align-items: flex-start;
    }
    /* Tujuh ruas: tiap simpul menyambung ke tetangga kanannya. */
    .tk-flowmap .tk-flowmap-step:not(:last-child)::before,
    .tk-flowmap .tk-flowmap-step:not(:last-child)::after{
        content: "";
    }

    .tk-flowmap .tk-flowmap-step{
        flex: 1 1 0;
        min-width: 0;
        padding: 0 10px;
    }
    .tk-flowmap .tk-flowmap-node{
        margin-bottom: 16px;
    }
}

/* ══ Petak 2 kolom (< 1200px) ══════════════════════════════════════════ */
@media (max-width: 1199px){
    .tk-flowmap{
        padding-top: 56px;
    }
    .tk-flowmap{
        --tk-flow-gap: 16px;
        /* Sela antar-baris sekaligus panjang ruas menurunnya. */
        --tk-flow-rowgap: 36px;
    }
    .tk-flowmap .tk-flowmap-rail{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--tk-flow-rowgap) var(--tk-flow-gap);
        max-width: 560px;
        margin: 0 auto;
    }

    /* ── Alurnya berkelok seperti ular ───────────────────────────────────
       Baris 1 kiri→kanan, turun, baris 2 kanan→kiri, turun, dan seterusnya.
       Penempatannya ditulis satu per satu: auto-placement grid tidak mau
       mundur ke kolom kiri yang sudah terlewati kursornya, jadi tahap 4 akan
       melompat ke baris berikutnya kalau hanya kolomnya yang ditentukan. */
    .tk-flowmap .tk-flowmap-step:nth-child(1){ grid-area: 1 / 1; }
    .tk-flowmap .tk-flowmap-step:nth-child(2){ grid-area: 1 / 2; }
    .tk-flowmap .tk-flowmap-step:nth-child(3){ grid-area: 2 / 2; }
    .tk-flowmap .tk-flowmap-step:nth-child(4){ grid-area: 2 / 1; }
    .tk-flowmap .tk-flowmap-step:nth-child(5){ grid-area: 3 / 1; }
    .tk-flowmap .tk-flowmap-step:nth-child(6){ grid-area: 3 / 2; }
    .tk-flowmap .tk-flowmap-step:nth-child(7){ grid-area: 4 / 2; }
    .tk-flowmap .tk-flowmap-step:nth-child(8){ grid-area: 4 / 1; }

    /* Tiap tahap menggambar ruas KELUAR-nya sendiri; tahap terakhir tidak
       punya. Ruas mendatar di dalam baris, ruas menurun di ujung baris. */
    .tk-flowmap .tk-flowmap-step:not(:last-child)::before,
    .tk-flowmap .tk-flowmap-step:not(:last-child)::after{
        content: "";
    }

    /* Ruas mendatar arah balik (tahap 3, 7): sama persis, dicerminkan. */
    .tk-flowmap .tk-flowmap-step:nth-child(4n+3)::before,
    .tk-flowmap .tk-flowmap-step:nth-child(4n+3)::after{
        left: calc(var(--tk-flow-node) / 2 + 8px - 50% - var(--tk-flow-gap));
        right: calc(50% + var(--tk-flow-node) / 2 + 8px);
    }
    .tk-flowmap .tk-flowmap-step:nth-child(4n+3)::after{
        transform-origin: right center;
    }

    /* Ruas menurun di ujung baris (tahap 2, 4, 6). Ditarik hanya di sela
       antar-baris, tidak dari bawah simpulnya: judul tahap berada tepat di
       jalur itu, dan garis yang menembus tulisan terbaca seperti coretan.
       Sel meregang setinggi barisnya, jadi `bottom` negatif sebesar jarak
       antar-baris membawanya sampai ke simpul berikutnya. */
    .tk-flowmap .tk-flowmap-step:nth-child(2n):not(:last-child)::before,
    .tk-flowmap .tk-flowmap-step:nth-child(2n):not(:last-child)::after{
        top: calc(100% + 4px);
        bottom: calc(8px - var(--tk-flow-rowgap));
        left: calc(50% - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }
    .tk-flowmap .tk-flowmap-step:nth-child(2n):not(:last-child)::after{
        transform-origin: center top;
    }
    .tk-flowmap .tk-flowmap-rail.is-armed .tk-flowmap-step:nth-child(2n):not(:last-child)::after{
        transform: scaleY(0);
    }
    .tk-flowmap .tk-flowmap-rail.is-playing .tk-flowmap-step:nth-child(2n):not(:last-child)::after{
        animation-name: tkFlowFillY;
    }

    /* Ringkas: judul saja. Pelaku sudah terbaca dari pekat isian simpulnya,
       dan keterangan tiap tahap membuat petaknya memanjang lagi. */
    .tk-flowmap .tk-flowmap-actor,
    .tk-flowmap .tk-flowmap-text p,
    .tk-flowmap .tk-flowmap-foot{
        display: none;
    }
    /* Kolomnya cukup lebar untuk judul satu baris, jadi kunci dua baris milik
       tata letak satu-baris-delapan-simpul hanya menyisakan lubang di sini. */
    .tk-flowmap .tk-flowmap-text h4{
        min-height: 0;
        margin: 0;
    }

    /* Progres mengikuti guliran, bukan berjalan sendiri: tiap tahap terisi
       saat ia naik ke tengah layar, dan mundur lagi kalau digulir balik.

       `animation-timeline: view()` tidak bisa dipakai di sini. Body tema
       memakai .wr-overxhidden (overflow-x: hidden), yang membuat overflow-y
       ikut terhitung auto — body jadi scroll container yang tak pernah
       menggulir (yang menggulir html), dan linimasa view() lahir dalam
       keadaan mati. Diverifikasi langsung di halaman ini.

       Jadi progresnya dijalankan dari JS: animasinya dijeda, lalu digeser
       lewat animation-delay negatif sebesar --p (0..1) yang dipasang per
       tahap. Sisa delay di tiap baris menjaga urutan di dalam satu tahap. */
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-node,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-ring-bar,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-node > i,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-glyph-arrow,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-step::after,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-check path{
        animation-play-state: paused;
        animation-fill-mode: both;
    }
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-step::after{
        animation-delay: calc(.35s - var(--p, 0) * var(--tk-flow-span));
    }
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-node,
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-ring-bar{
        animation-delay: calc(0s - var(--p, 0) * var(--tk-flow-span));
    }
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-node > i{
        animation-delay: calc(.1s - var(--p, 0) * var(--tk-flow-span));
    }
    /* Aturan .is-playing untuk ikon tahap verifikasi bawa satu kelas lebih
       banyak, jadi baris di atas kalah tanpa pasangan sespesifik ini —
       shorthand `animation` di sana juga mengembalikan play-state ke running. */
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-step--verify .tk-flowmap-node > i{
        animation-play-state: paused;
        animation-fill-mode: both;
        animation-delay: calc(.1s - var(--p, 0) * var(--tk-flow-span));
    }
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-glyph-arrow{
        animation-delay: calc(.38s - var(--p, 0) * var(--tk-flow-span));
    }
    .tk-flowmap .tk-flowmap-rail.is-scrolly .tk-flowmap-check path{
        animation-delay: calc(.62s - var(--p, 0) * var(--tk-flow-span));
    }
}

@media (max-width: 575px){
    .tk-flowmap{
        --tk-flow-node: 46px;
        padding-top: 44px;
    }
    .tk-flowmap .tk-flowmap-title{
        margin-bottom: 30px;
    }
    .tk-flowmap .tk-flowmap-rail{
        gap: 26px 12px;
    }
    .tk-flowmap .tk-flowmap-node{
        margin-bottom: 12px;
        font-size: 17px;
    }
    .tk-flowmap .tk-flowmap-node > i{
        font-size: 17px;
    }
    .tk-flowmap .tk-flowmap-node::before{
        inset: 4px;
    }
    .tk-flowmap .tk-flowmap-num{
        top: -6px;
        right: -6px;
        width: 19px;
        height: 19px;
        font-size: 10px;
        line-height: 17px;
    }
    .tk-flowmap .tk-flowmap-actor{
        font-size: 9.5px;
        padding: 2px 7px;
        margin-bottom: 6px;
    }
    .tk-flowmap .tk-flowmap-text h4{
        font-size: 13px;
        min-height: calc(13px * 1.35 * 2);
    }
    .tk-flowmap .tk-flowmap-text p{
        font-size: 11.5px;
        line-height: 1.55;
    }
    .tk-flowmap .tk-flowmap-foot{
        margin-top: 34px;
        padding-top: 20px;
    }
    .tk-flowmap .tk-flowmap-foot a{
        width: 100%;
        text-align: center;
    }
}