/*
 * Animasi alur kerja di section "Cara Kerja" landing (partial homepage.partials.workflow-motion).
 * Panggung 1920x1080 diskalakan JS agar pas lebar kartu. Semua class berawalan am- dan
 * semua selector di bawah .alur-motion supaya tidak bentrok dengan Bootstrap/AdminLTE.
 */
.alur-motion {
    --am-primary: #EE9D01;
    --am-primary-dark: #a86f00;
    --am-primary-soft: rgba(238, 157, 1, 0.12);
    --am-slate-50: #f8fafc;
    --am-slate-100: #f1f5f9;
    --am-slate-200: #e2e8f0;
    --am-slate-300: #cbd5e1;
    --am-slate-400: #94a3b8;
    --am-slate-500: #64748b;
    --am-slate-600: #475569;
    --am-slate-700: #334155;
    --am-slate-800: #1e293b;
    --am-slate-900: #0f172a;
    --am-success: #10b981;
    --am-success-ink: #047857;
    --am-success-soft: rgba(16, 185, 129, 0.12);
    --am-danger: #ef4444;
    --am-info: #0284c7;
    --am-info-soft: rgba(2, 132, 199, 0.12);
    --am-warning-ink: #92400e;
    --am-wa-bubble: #dcf8c6;
    --am-radius: 16px;
    --am-ease: cubic-bezier(.2, .8, .2, 1);
    --am-shadow: 0 10px 15px -3px rgba(0, 0, 0, .05), 0 4px 6px -2px rgba(0, 0, 0, .025);
    --am-shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 10px 10px -5px rgba(15, 23, 42, .04);
    margin-top: 32px;
}
.alur-motion * { box-sizing: border-box; margin: 0; padding: 0; }

/* Bingkai 16:9; panggung di dalamnya diskalakan JS (scale = lebar bingkai / 1920) */
.alur-motion .am-bingkai {
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    border: 1px solid var(--apderis-line, var(--am-slate-200));
    border-radius: 18px;
    background: var(--am-slate-50);
}
.alur-motion .am-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    font-family: 'Source Sans Pro', 'Segoe UI', -apple-system, sans-serif;
    line-height: 1.3;
    color: var(--am-slate-700);
    background: var(--am-slate-50);
    overflow: hidden;
}

.alur-motion .am-brand {
    position: absolute;
    left: 96px;
    top: 56px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 26px;
    font-weight: 700;
    color: var(--am-slate-800);
    z-index: 5;
}
.alur-motion .am-brand i { width: 18px; height: 18px; border-radius: 6px; background: var(--am-primary); }
.alur-motion .am-brand span { color: var(--am-slate-500); font-weight: 400; }

.alur-motion .am-langkah { position: absolute; right: 96px; top: 52px; display: flex; gap: 8px; z-index: 5; }
.alur-motion .am-langkah b { width: 44px; height: 8px; border-radius: 4px; background: var(--am-slate-200); transition: background .4s; }
.alur-motion .am-langkah b.on { background: var(--am-primary); }

.alur-motion .am-timer { position: absolute; left: 0; bottom: 0; height: 6px; width: 100%; background: var(--am-slate-200); z-index: 5; }
.alur-motion .am-timer b { display: block; height: 100%; width: 0; background: var(--am-primary); }

.alur-motion .am-scene {
    position: absolute;
    inset: 0;
    padding: 150px 96px 80px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}
.alur-motion .am-scene.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* Elemen masuk bertahap: --d = jeda dalam detik sejak adegan mulai */
.alur-motion .am-a { opacity: 0; transform: translateY(28px); }
.alur-motion .am-scene.on .am-a { animation: am-masuk .8s var(--am-ease) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes am-masuk { to { opacity: 1; transform: none; } }

.alur-motion .am-pop { opacity: 0; transform: scale(.4); }
.alur-motion .am-scene.on .am-pop { animation: am-pop .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes am-pop { to { opacity: 1; transform: none; } }

.alur-motion .am-kiri { opacity: 0; transform: translateX(-60px); }
.alur-motion .am-kanan { opacity: 0; transform: translateX(60px); }
.alur-motion .am-scene.on .am-kiri,
.alur-motion .am-scene.on .am-kanan { animation: am-masuk .8s var(--am-ease) forwards; animation-delay: calc(var(--d, 0) * 1s); }

/* Teks diketik: buka dari kiri ke kanan */
.alur-motion .am-ketik { display: inline-block; clip-path: inset(0 100% 0 0); }
.alur-motion .am-scene.on .am-ketik { animation: am-ketik .9s steps(18) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes am-ketik { to { clip-path: inset(0 0 0 0); } }

/* Nilai berganti: .am-lama keluar, .am-baru masuk pada --d yang sama */
.alur-motion .am-swap { position: relative; display: inline-block; }
.alur-motion .am-swap .am-baru { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.alur-motion .am-scene.on .am-swap .am-lama { animation: am-hilang .4s ease forwards; animation-delay: calc(var(--d, 0) * 1s); }
.alur-motion .am-scene.on .am-swap .am-baru { animation: am-muncul .5s var(--am-ease) forwards; animation-delay: calc(var(--d, 0) * 1s + .2s); }
@keyframes am-hilang { to { opacity: 0; transform: translateY(-14px); } }
@keyframes am-muncul { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.alur-motion .am-eyebrow { font-size: 24px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--am-primary-dark); }
.alur-motion .am-h1 { font-size: 92px; line-height: 1.05; font-weight: 700; color: var(--am-slate-800); letter-spacing: -.02em; }
.alur-motion .am-h2 { font-size: 58px; line-height: 1.1; font-weight: 700; color: var(--am-slate-800); letter-spacing: -.01em; margin-top: 10px; }
.alur-motion .am-lead { font-size: 29px; color: var(--am-slate-600); margin-top: 16px; max-width: 760px; line-height: 1.4; }

.alur-motion .am-card { background: #fff; border: 1px solid var(--am-slate-200); border-radius: var(--am-radius); box-shadow: var(--am-shadow); }

.alur-motion .am-peran {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 8px 18px 8px 8px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--am-slate-200);
    font-size: 22px;
    color: var(--am-slate-600);
}
.alur-motion .am-peran i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: var(--am-slate-800);
    background: var(--am-primary);
}
.alur-motion .am-peran b { color: var(--am-slate-800); }

.alur-motion .am-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-size: 21px; font-weight: 700; }
.alur-motion .am-status.abu { background: var(--am-slate-100); color: var(--am-slate-600); }
.alur-motion .am-status.oranye { background: var(--am-primary-soft); color: var(--am-warning-ink); }
.alur-motion .am-status.hijau { background: var(--am-success-soft); color: var(--am-success-ink); }

.alur-motion .am-tata { display: grid; grid-template-columns: 720px 1fr; gap: 72px; align-items: start; }

/* ---------- Adegan 1: masalah ---------- */
.alur-motion .am-masalah-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.alur-motion .am-masalah { position: relative; padding: 30px; font-size: 30px; font-weight: 700; color: var(--am-slate-700); line-height: 1.2; }
.alur-motion .am-masalah span { display: block; font-size: 22px; font-weight: 400; color: var(--am-slate-500); margin-top: 10px; }
.alur-motion .am-masalah::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    height: 4px;
    width: 0;
    border-radius: 2px;
    background: var(--am-danger);
}
.alur-motion .am-scene.on .am-masalah::after { animation: am-coret .5s ease forwards; animation-delay: calc(var(--c, 3) * 1s); }
@keyframes am-coret { to { width: calc(100% - 48px); } }
.alur-motion .am-scene.on .am-masalah {
    animation: am-pop .55s cubic-bezier(.3, 1.6, .5, 1) forwards, am-redup .5s ease forwards;
    animation-delay: calc(var(--d, 0) * 1s), calc(var(--c, 3) * 1s + .3s);
}
@keyframes am-redup { to { opacity: .45; } }
.alur-motion .am-jawab { margin-top: 64px; }
.alur-motion .am-jawab .am-h1 span { color: var(--am-primary-dark); }

/* ---------- Adegan 2: terima unit ---------- */
.alur-motion .am-form { padding: 36px 40px; position: relative; }
.alur-motion .am-baris {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid var(--am-slate-100);
    font-size: 27px;
}
.alur-motion .am-baris:first-child { border-top: 0; }
.alur-motion .am-baris > span { color: var(--am-slate-500); font-size: 23px; }
.alur-motion .am-baris > b { color: var(--am-slate-800); font-weight: 600; }
.alur-motion .am-cek-kecil { display: inline-flex; gap: 18px; font-size: 24px; color: var(--am-slate-700); }
.alur-motion .am-cek-kecil em { font-style: normal; display: inline-flex; align-items: center; gap: 8px; }
.alur-motion .am-cek-kecil em::before {
    content: '\2713';
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    background: var(--am-success);
    color: #fff;
}
.alur-motion .am-cek-kecil em.tidak::before { content: '\2013'; background: var(--am-slate-200); color: var(--am-slate-500); }
.alur-motion .am-nota {
    position: absolute;
    right: 0;
    bottom: -150px;
    width: 400px;
    padding: 26px 28px;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 22px;
    align-items: center;
    box-shadow: var(--am-shadow-xl);
}
.alur-motion .am-nota-no { font: 700 22px/1.3 Consolas, 'Cascadia Mono', monospace; color: var(--am-slate-800); }
.alur-motion .am-nota-ket { font-size: 21px; color: var(--am-slate-500); margin-top: 6px; }
.alur-motion .am-qr { width: 120px; height: 120px; display: grid; grid-template-columns: repeat(21, 1fr); }
.alur-motion .am-qr i { display: block; }
.alur-motion .am-qr i.h { background: var(--am-slate-800); }

/* ---------- Adegan 3: pelanggan cek status ---------- */
.alur-motion .am-hp {
    position: relative;
    width: 430px;
    height: 820px;
    margin: -40px auto 0;
    border-radius: 56px;
    background: var(--am-slate-900);
    padding: 18px;
    box-shadow: var(--am-shadow-xl);
}
.alur-motion .am-layar { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: #efeae2; }
.alur-motion .am-hp-atas {
    height: 92px;
    background: #075e54;
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding: 0 26px 16px;
    font-size: 23px;
    font-weight: 700;
    gap: 14px;
}
.alur-motion .am-hp-atas i { width: 42px; height: 42px; border-radius: 50%; background: var(--am-primary); display: block; }
.alur-motion .am-gelembung {
    margin: 22px 20px 0;
    padding: 16px 18px;
    background: #fff;
    border-radius: 4px 18px 18px 18px;
    font-size: 22px;
    line-height: 1.4;
    color: var(--am-slate-800);
    max-width: 340px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.alur-motion .am-gelembung u { color: var(--am-info); text-decoration: none; font-weight: 700; }
.alur-motion .am-gelembung span { display: block; text-align: right; font-size: 18px; color: var(--am-slate-500); margin-top: 6px; }
.alur-motion .am-layar2 { position: absolute; inset: 0; background: var(--am-slate-50); padding: 70px 28px 28px; transform: translateX(100%); }
.alur-motion .am-scene.on .am-layar2 { animation: am-geser-masuk .7s var(--am-ease) forwards; animation-delay: 3.4s; }
@keyframes am-geser-masuk { to { transform: none; } }
.alur-motion .am-layar2-judul { font-size: 27px; font-weight: 700; color: var(--am-slate-800); }
.alur-motion .am-layar2-no { font: 700 21px Consolas, monospace; color: var(--am-slate-500); margin-top: 6px; }
.alur-motion .am-pin {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--am-slate-200);
    font-size: 20px;
    color: var(--am-slate-500);
}
.alur-motion .am-pin b { display: block; font-size: 30px; letter-spacing: .3em; color: var(--am-slate-800); margin-top: 4px; }
.alur-motion .am-alur-hp { list-style: none; margin-top: 22px; }
.alur-motion .am-alur-hp li { position: relative; padding: 0 0 22px 46px; font-size: 22px; color: var(--am-slate-400); }
.alur-motion .am-alur-hp li::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--am-slate-300);
    background: #fff;
}
.alur-motion .am-alur-hp li::after { content: ''; position: absolute; left: 17px; top: 30px; bottom: 2px; width: 3px; background: var(--am-slate-200); }
.alur-motion .am-alur-hp li:last-child::after { display: none; }
.alur-motion .am-alur-hp li.ok { color: var(--am-slate-700); }
.alur-motion .am-alur-hp li.ok::before { background: var(--am-success); border-color: var(--am-success); }
.alur-motion .am-alur-hp li.kini { color: var(--am-slate-800); font-weight: 700; }
.alur-motion .am-alur-hp li.kini::before { border-color: var(--am-primary); background: var(--am-primary); animation: am-denyut 1.4s ease-in-out infinite; }
@keyframes am-denyut { 50% { box-shadow: 0 0 0 9px var(--am-primary-soft); } }
.alur-motion .am-alur-hp li span { display: block; font-size: 19px; font-weight: 400; color: var(--am-slate-500); }

.alur-motion .am-poin { list-style: none; margin-top: 36px; }
.alur-motion .am-poin li { display: flex; gap: 18px; align-items: flex-start; font-size: 27px; color: var(--am-slate-600); padding: 12px 0; line-height: 1.35; }
.alur-motion .am-poin li::before {
    content: '\2713';
    flex: none;
    width: 36px;
    height: 36px;
    margin-top: 1px;
    border-radius: 10px;
    background: var(--am-success-soft);
    color: var(--am-success-ink);
    font-weight: 700;
    display: grid;
    place-items: center;
}
.alur-motion .am-poin li b { color: var(--am-slate-800); }

/* ---------- Adegan 4: dikerjakan ---------- */
.alur-motion .am-kanban { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.alur-motion .am-kolom { height: 290px; padding: 20px 22px; border-radius: var(--am-radius); background: var(--am-slate-100); font-size: 22px; font-weight: 700; color: var(--am-slate-600); }
.alur-motion .am-kolom span { font-weight: 400; color: var(--am-slate-500); font-size: 21px; display: block; margin-top: 2px; }
.alur-motion .am-tiket { position: absolute; left: 22px; top: 96px; width: 370px; padding: 18px 22px; border-left: 6px solid var(--am-primary); box-shadow: var(--am-shadow-xl); }
.alur-motion .am-scene.on .am-tiket { animation: am-masuk .6s var(--am-ease) forwards, am-pindah 4.4s var(--am-ease) forwards; animation-delay: .6s, 1.6s; }
@keyframes am-pindah {
    0%, 15% { transform: translateX(0); }
    32%, 62% { transform: translateX(438px); }
    80%, 100% { transform: translateX(876px); }
}
.alur-motion .am-tiket-no { font: 700 21px Consolas, monospace; color: var(--am-slate-500); }
.alur-motion .am-tiket-unit { font-size: 26px; font-weight: 700; color: var(--am-slate-800); margin: 4px 0 8px; }
.alur-motion .am-tiket-ket { font-size: 21px; color: var(--am-slate-600); }
.alur-motion .am-setuju { position: absolute; left: 460px; top: 240px; z-index: 2; }

.alur-motion .am-stok { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.alur-motion .am-stok .am-card { padding: 26px 30px; }
.alur-motion .am-judul-kecil { font-size: 23px; font-weight: 700; color: var(--am-slate-500); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.alur-motion .am-batch {
    display: grid;
    grid-template-columns: 1fr 300px 110px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--am-slate-100);
    font-size: 25px;
    color: var(--am-slate-700);
}
.alur-motion .am-batch b { color: var(--am-slate-800); font-variant-numeric: tabular-nums; }
.alur-motion .am-qty { text-align: right; font-weight: 700; color: var(--am-slate-800); font-variant-numeric: tabular-nums; }
.alur-motion .am-scene.on .am-batch.pakai { animation: am-sorot 1.4s ease forwards; animation-delay: 4.9s; }
@keyframes am-sorot { 30% { background: var(--am-primary-soft); } 100% { background: transparent; } }
.alur-motion .am-ringkas { display: flex; gap: 40px; align-items: baseline; }
.alur-motion .am-angka { font-size: 64px; font-weight: 700; color: var(--am-slate-800); line-height: 1; font-variant-numeric: tabular-nums; }
.alur-motion .am-ringkas-ket { font-size: 22px; color: var(--am-slate-500); margin-top: 8px; }

/* ---------- Adegan 5: selesai dan bayar ---------- */
.alur-motion .am-wa {
    padding: 20px 24px;
    background: var(--am-wa-bubble);
    border-radius: 4px 20px 20px 20px;
    font-size: 25px;
    line-height: 1.4;
    color: var(--am-slate-800);
    max-width: 600px;
    margin-top: 30px;
}
.alur-motion .am-wa span { display: block; font-size: 19px; color: var(--am-slate-500); margin-bottom: 6px; font-weight: 700; }
.alur-motion .am-kasir { padding: 36px 40px; position: relative; }
.alur-motion .am-item { display: flex; justify-content: space-between; padding: 12px 0; font-size: 26px; border-top: 1px solid var(--am-slate-100); }
.alur-motion .am-item:first-child { border-top: 0; }
.alur-motion .am-item b { font-variant-numeric: tabular-nums; color: var(--am-slate-800); font-weight: 600; }
.alur-motion .am-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 2px dashed var(--am-slate-200);
    font-size: 28px;
    font-weight: 700;
    color: var(--am-slate-800);
}
.alur-motion .am-total b { font-size: 58px; font-variant-numeric: tabular-nums; }
.alur-motion .am-metode { display: flex; gap: 14px; margin-top: 24px; }
.alur-motion .am-metode span {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    border-radius: 12px;
    border: 2px solid var(--am-slate-200);
    font-size: 23px;
    font-weight: 700;
    color: var(--am-slate-500);
}
.alur-motion .am-scene.on .am-metode span.pilih { animation: am-pilih .4s ease forwards; animation-delay: 3.4s; }
@keyframes am-pilih { to { border-color: var(--am-primary); background: var(--am-primary-soft); color: var(--am-warning-ink); } }
.alur-motion .am-garansi { display: flex; align-items: center; gap: 16px; margin-top: 22px; font-size: 23px; color: var(--am-slate-600); }
.alur-motion .am-cap {
    position: absolute;
    right: 40px;
    bottom: 26px;
    padding: 8px 22px;
    border: 4px solid var(--am-success);
    border-radius: 12px;
    color: var(--am-success-ink);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .12em;
    transform: rotate(-8deg) scale(1.8);
    opacity: 0;
}
.alur-motion .am-scene.on .am-cap { animation: am-cap .45s cubic-bezier(.3, 1.4, .5, 1) forwards; animation-delay: 4.4s; }
@keyframes am-cap { to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* ---------- Adegan 6: otomatis tercatat ---------- */
.alur-motion .am-aliran { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.alur-motion .am-aliran path { fill: none; stroke: var(--am-primary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.alur-motion .am-scene.on .am-aliran path { animation: am-gambar 1s var(--am-ease) forwards; animation-delay: calc(var(--d, 0) * 1s); }
@keyframes am-gambar { to { stroke-dashoffset: 0; } }
.alur-motion .am-pusat { position: absolute; left: 780px; top: 500px; width: 360px; padding: 26px 30px; text-align: center; border: 2px solid var(--am-primary); box-shadow: var(--am-shadow-xl); }
.alur-motion .am-pusat span { font-size: 22px; color: var(--am-slate-500); display: block; }
.alur-motion .am-pusat b { font-size: 52px; color: var(--am-slate-800); font-variant-numeric: tabular-nums; }
.alur-motion .am-efek { position: absolute; width: 480px; padding: 24px 28px; }
.alur-motion .am-efek-isi { font-size: 26px; color: var(--am-slate-700); margin-top: 10px; line-height: 1.4; }
.alur-motion .am-efek-isi b { color: var(--am-slate-800); font-variant-numeric: tabular-nums; }
.alur-motion .am-naik { color: var(--am-success-ink); font-weight: 700; }
.alur-motion .am-jurnal { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; font-size: 22px; margin-top: 8px; }
.alur-motion .am-jurnal span { padding: 3px 0; }
.alur-motion .am-jurnal .k { padding-left: 32px; color: var(--am-slate-500); }
.alur-motion .am-batang { display: flex; align-items: flex-end; gap: 10px; height: 74px; margin-top: 10px; }
.alur-motion .am-batang i { flex: 1; border-radius: 4px 4px 0 0; background: var(--am-slate-200); height: var(--h); }
.alur-motion .am-batang i:last-child { background: var(--am-primary); height: 0; transition: height 1s var(--am-ease); }
.alur-motion .am-bawah { position: absolute; left: 96px; right: 96px; bottom: 76px; text-align: center; font-size: 28px; color: var(--am-slate-600); }
.alur-motion .am-bawah b { color: var(--am-slate-800); }

/* ---------- Adegan 7: pemilik, cabang, peran ---------- */
.alur-motion .am-peran-list { display: grid; gap: 20px; margin-top: 36px; }
.alur-motion .am-peran-card { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: center; padding: 22px 28px; }
.alur-motion .am-peran-card i {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 26px;
    font-weight: 700;
    color: var(--am-slate-800);
}
.alur-motion .am-peran-card i.p { background: var(--am-primary); }
.alur-motion .am-peran-card i.a { background: var(--am-info-soft); color: var(--am-info); }
.alur-motion .am-peran-card i.t { background: var(--am-success-soft); color: var(--am-success-ink); }
.alur-motion .am-peran-nama { font-size: 28px; font-weight: 700; color: var(--am-slate-800); }
.alur-motion .am-peran-ket { font-size: 22px; color: var(--am-slate-600); margin-top: 4px; }
.alur-motion .am-cabang-wrap { position: relative; height: 760px; }
.alur-motion .am-akun { position: absolute; left: 50%; top: 0; width: 420px; margin-left: -210px; padding: 24px 30px; text-align: center; border: 2px solid var(--am-primary); }
.alur-motion .am-akun span { font-size: 22px; color: var(--am-slate-500); display: block; }
.alur-motion .am-akun b { font-size: 34px; color: var(--am-slate-800); }
.alur-motion .am-cabang { position: absolute; top: 330px; width: 270px; padding: 24px 26px; }
.alur-motion .am-cabang-nama { font-size: 25px; font-weight: 700; color: var(--am-slate-800); }
.alur-motion .am-cabang-ket { font-size: 21px; color: var(--am-slate-500); margin-top: 4px; }
.alur-motion .am-mini { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 16px; }
.alur-motion .am-mini i { flex: 1; border-radius: 3px 3px 0 0; background: var(--am-primary); opacity: .35; height: 0; transition: height .9s var(--am-ease); }
.alur-motion .am-mini i:last-child { opacity: 1; }
.alur-motion .am-pisah { position: absolute; left: 0; right: 0; top: 620px; text-align: center; font-size: 24px; color: var(--am-slate-600); }

/* ---------- Adegan 8: modul pendukung + penutup ---------- */
.alur-motion .am-modul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.alur-motion .am-modul .am-card { padding: 26px 28px; }
.alur-motion .am-modul-nama { font-size: 27px; font-weight: 700; color: var(--am-slate-800); line-height: 1.2; }
.alur-motion .am-modul-ket { font-size: 22px; color: var(--am-slate-500); margin-top: 8px; line-height: 1.35; }
.alur-motion .am-garis-atas { display: block; width: 44px; height: 6px; border-radius: 3px; background: var(--am-primary); margin-bottom: 16px; }
.alur-motion .am-tutup {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    background: var(--am-slate-50);
    opacity: 0;
}
.alur-motion .am-scene.on .am-tutup { animation: am-tampak .8s ease forwards; animation-delay: 4.6s; }
@keyframes am-tampak { to { opacity: 1; } }
.alur-motion .am-logo { display: flex; align-items: center; gap: 22px; font-size: 96px; font-weight: 700; color: var(--am-slate-800); letter-spacing: -.02em; }
.alur-motion .am-logo i { width: 64px; height: 64px; border-radius: 20px; background: var(--am-primary); }
.alur-motion .am-tutup-tagline { font-size: 40px; color: var(--am-slate-600); margin-top: 22px; }
.alur-motion .am-tutup-sub { margin-top: 18px; font-size: 26px; color: var(--am-slate-500); }

/* ---------- Kontrol di bawah bingkai ---------- */
.alur-motion .am-kontrol { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.alur-motion .am-kontrol button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--apderis-line, var(--am-slate-200));
    border-radius: 999px;
    background: #fff;
    color: var(--apderis-ink, var(--am-slate-800));
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
}
.alur-motion .am-kontrol button:hover { border-color: var(--am-primary); }
.alur-motion .am-kontrol button:focus-visible { outline: 3px solid var(--am-primary-soft); outline-offset: 2px; border-color: var(--am-primary); }
.alur-motion .am-dots { display: flex; gap: 4px; }
.alur-motion .am-kontrol .am-dots button { min-width: 0; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; }
.alur-motion .am-dots button::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--am-slate-300); }
.alur-motion .am-dots button[aria-current="true"]::before { background: var(--am-primary); }

/* Langsung ke keadaan akhir adegan: reduced motion, atau ?statis untuk pratinjau */
.alur-motion.am-statis *,
.alur-motion.am-statis *::before,
.alur-motion.am-statis *::after { animation-delay: 0s !important; animation-duration: 0s !important; transition: none !important; }

/* Panggung 16:9 tidak terbaca di layar sempit; di HP cukup kartu langkah di atasnya */
@media (max-width: 767.98px) {
    .alur-motion { display: none; }
}