/* Sync365 · v9: kad Tip permulaan (halaman utama). Tiga langkah bergambar; hanya langkah semasa mempunyai teks.
   Gerakan: transform, opacity dan warna sahaja; lengkung --ease-out; ikon bergerak untuk langkah semasa (berulang 3 kali kemudian rehat),
   apabila tetikus/fokus menghampiri, atau sekali apabila kad mula dipaparkan. Kurangkan gerakan: html[data-reduce]. */

.tp-wrap { display: grid; grid-template-rows: 1fr; margin-top: 18px; transition: grid-template-rows .3s var(--ease-out), opacity .22s ease; }
.tp-wrap.out { grid-template-rows: 0fr; opacity: 0; margin-top: 0; } .tp-wrap.out > .tp { overflow: hidden; min-height: 0; padding-block: 0; border-width: 0; }
.tp { position: relative; padding: 16px 14px 14px; border-radius: 26px; }
.tp.enter { animation: tp-in .6s var(--ease-out) .15s both; } @keyframes tp-in { from { opacity: 0; transform: translateY(10px); } }

.tp-h { display: flex; align-items: center; gap: 10px; padding: 0 4px 0 6px; }
.tp-e { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); }
.tp-e::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.tp-n { margin-left: auto; font: 600 13px var(--f-ui); color: var(--ink3); font-variant-numeric: tabular-nums; } .tp-n b { color: var(--ink); font-weight: 700; }
.tp-x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px -8px 0; border: 0; border-radius: 14px; background: transparent; color: var(--ink3); cursor: pointer; transition: background-color .16s ease, color .16s ease, transform .14s var(--ease-out); }
.tp-x:hover { background: var(--hover); color: var(--ink); } .tp-x:active { transform: scale(.92); }
.tp-x:focus-visible { outline: 0; box-shadow: var(--focus); }

/* jalur: garis di belakang ikon; isi aksen mengikut bilangan langkah siap */
.tp-ts { position: relative; list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tp-ts::before, .tp-ts::after { content: ""; position: absolute; top: 45px; height: 2px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); border-radius: 1px; }
.tp-ts::before { background: var(--rule2); opacity: .7; }
.tp-ts::after { background: var(--accent); transform-origin: left; transform: scaleX(var(--f)); transition: transform .6s var(--ease-out); }
.tp-ts.in::after { animation: tp-fill .9s var(--ease-out) .5s both; } .tp-ts.adv::after { animation: tp-fill-adv .7s var(--ease-out) both; }
@keyframes tp-fill { from { transform: scaleX(0); } } @keyframes tp-fill-adv { from { transform: scaleX(var(--f0)); } }
.tp-ts > li { position: relative; z-index: 1; display: grid; }
.tp.enter .tp-ts > li { animation: tp-rise .6s var(--ease-out) calc(.3s + var(--k) * 80ms) both; } @keyframes tp-rise { from { opacity: 0; transform: translateY(10px); } }

.tp-t { display: grid; justify-items: center; align-content: start; gap: 8px; width: 100%; padding: 8px 4px 10px; border: 0; border-radius: 20px; background: transparent; color: var(--ink2); font: inherit; text-align: center; cursor: pointer; transition: background-color .2s ease, transform .14s var(--ease-out); }
.tp-t:hover { background: var(--hover); } .tp-t:active { transform: scale(.97); }
.tp-t:focus-visible { outline: 0; box-shadow: var(--focus); }
.tp-t b { font: 600 14px/1.2 var(--f-ui); color: var(--ink); text-wrap: balance; }
.tp-t.now { background: var(--accent-tint); } .tp-t.now:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tp-t:not(.now):not(.done) b { color: var(--ink2); } .tp-t:not(.now):not(.done) .tip-i { opacity: .62; }
.tp-ic { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: var(--panel); } .tp-ic .ai { width: 70px; height: 70px; }
.tp-t.now .tp-ic { background: transparent; }

/* ikon: keadaan akhir sebagai asal; gerakan hanya pada langkah semasa, hover/fokus */
.tip-i { --ai-soft: var(--accent-tint); color: var(--ink); overflow: visible; }
.tp-t.done .tip-i { --ai-soft: color-mix(in srgb, var(--accent) 22%, transparent); }
.ti-bc { fill: var(--accent); } .ti-star { fill: var(--accent-ink); } .ti-bs { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ti-l1, .ti-l2, .ti-dot, .ti-sheet, .ti-badge, .ti-b { transform-box: fill-box; }
.ti-dot { fill: var(--accent-text); transform-origin: 50% 50%; }
.ti-back { opacity: .5; } .ti-ln { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ti-badge { transform-origin: 50% 50%; } .ti-b { transform-origin: 50% 100%; stroke-width: 3.2; }

.tp-t.now .ti-l1 { animation: ti-j1 4.6s var(--ease-out) 1.2s 3; } .tp-t.now .ti-l2 { animation: ti-j2 4.6s var(--ease-out) 1.2s 3; } .tp-t.now .ti-dot { animation: ti-dot 4.6s var(--ease-out) 1.2s 3; }
.tp-t:hover .ti-l1, .tp-t:focus-visible .ti-l1 { animation: ti-j1 .9s var(--ease-out) both; } .tp-t:hover .ti-l2, .tp-t:focus-visible .ti-l2 { animation: ti-j2 .9s var(--ease-out) both; } .tp-t:hover .ti-dot, .tp-t:focus-visible .ti-dot { animation: ti-dot .9s var(--ease-out) both; }
@keyframes ti-j1 { 0%, 6% { transform: translateX(-6px); } 24%, 100% { transform: none; } } @keyframes ti-j2 { 0%, 6% { transform: translateX(6px); } 24%, 100% { transform: none; } }
@keyframes ti-dot { 0%, 20% { opacity: 0; transform: scale(.4); } 34%, 100% { opacity: 1; transform: none; } }

.tp-t.now .ti-sheet { animation: ti-sheet 4.6s var(--ease-out) 1.2s 3; } .tp-t.now .ti-ln { animation: ti-ln 4.6s var(--ease-out) 1.2s 3; } .tp-t.now .tip-bukti .ti-badge { animation: ti-pop 4.6s var(--ease-out) 1.2s 3; }
.tp-t:hover .ti-sheet, .tp-t:focus-visible .ti-sheet { animation: ti-sheet 1.1s var(--ease-out) both; } .tp-t:hover .ti-ln, .tp-t:focus-visible .ti-ln { animation: ti-ln 1.1s var(--ease-out) both; } .tp-t:hover .tip-bukti .ti-badge, .tp-t:focus-visible .tip-bukti .ti-badge { animation: ti-pop 1.1s var(--ease-out) both; }
@keyframes ti-sheet { 0%, 5% { opacity: 0; transform: translateY(-9px); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes ti-ln { 0%, 26% { stroke-dashoffset: 1; } 48%, 100% { stroke-dashoffset: 0; } }
@keyframes ti-pop { 0%, 40% { opacity: 0; transform: scale(.55); } 58%, 100% { opacity: 1; transform: none; } }

.tp-t.now .ti-b { animation: ti-bar 4.6s var(--ease-out) 1.2s 3 both; } .tp-t.now .ti-b1 { animation-name: ti-bar; } .tp-t.now .ti-b2 { animation-name: ti-bar2; } .tp-t.now .ti-b3 { animation-name: ti-bar3; }
.tp-t:hover .ti-b, .tp-t:focus-visible .ti-b { animation: ti-bar 1.2s var(--ease-out) both; } .tp-t:hover .ti-b2, .tp-t:focus-visible .ti-b2 { animation-name: ti-bar2; } .tp-t:hover .ti-b3, .tp-t:focus-visible .ti-b3 { animation-name: ti-bar3; }
@keyframes ti-bar { 0%, 4% { transform: scaleY(0); } 22%, 100% { transform: none; } } @keyframes ti-bar2 { 0%, 10% { transform: scaleY(0); } 28%, 100% { transform: none; } } @keyframes ti-bar3 { 0%, 16% { transform: scaleY(0); } 34%, 100% { transform: none; } }
.tp-t.now .tip-laporan .ti-badge { animation: ti-pop 4.6s var(--ease-out) 1.2s 3; }
.tp-t:hover .tip-laporan .ti-badge, .tp-t:focus-visible .tip-laporan .ti-badge { animation: ti-pop 1.2s var(--ease-out) both; }

/* lencana siap: bulatan aksen dengan tanda semak yang dilukis */
.tp-ok { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; overflow: visible; opacity: 0; transform: scale(.5); pointer-events: none; }
.tp-ok-c { fill: var(--accent); stroke: var(--panel); stroke-width: 2; } .tp-ok-p { fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tp-t.done .tp-ok { opacity: 1; transform: none; }
.tp-t.fresh .tp-ok { animation: tp-ok .45s var(--ease-out) .35s both; } .tp-t.fresh .tp-ok-p { animation: tp-okp .4s var(--ease-out) .6s both; }
@keyframes tp-ok { from { opacity: 0; transform: scale(.5); } } @keyframes tp-okp { from { stroke-dashoffset: 1; } }
.tp.enter .tp-t.done .tp-ok { animation: tp-ok .45s var(--ease-out) calc(.7s + var(--k, 0) * 80ms) both; }

/* baris tindakan: satu ayat dan satu butang */
.tp-cta { display: flex; align-items: center; gap: 12px; margin: 8px 6px 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.tp-cap { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.35; color: var(--ink2); text-wrap: balance; }
.tp-cta .btn { flex: none; }
@media (min-width: 700px) { .tp { padding: 18px 20px 16px; } .tp-ts { max-width: 560px; margin-inline: auto; } .tp-ic { width: 84px; height: 84px; } .tp-ic .ai { width: 80px; height: 80px; } .tp-ts::before, .tp-ts::after { top: 49px; } .tp-ok { width: 24px; height: 24px; } }

/* kurangkan gerakan: tiada animasi; keadaan akhir sentiasa dipaparkan */
html[data-reduce] .tp, html[data-reduce] .tp *, html[data-reduce] .tp-ts::after { animation: none !important; transition: none !important; }