/* =====================================================================
   BX3 LANGKAH - garis waktu selang-seling.
   >=1025 px: garis oranye tebal terisi dari kiri, lingkaran ikon menyala saat dilewati, teks bergantian
   di atas (langkah ganjil) dan di bawah (genap) garis dengan tangkai penghubung. Jumlah kolom = jumlah
   langkah (ideal 4–6). <=1024 px: menurun, garis di kiri. Tanpa JS / kurangi animasi: garis penuh.
   ===================================================================== */

.bx3.bx3-steps{--bx3-max:var(--bx3-wide);display:block;background:var(--bx3-white);padding:var(--bx3-sec-y) var(--bx3-pad-x)}
.bx3.bx3-steps--cream{background:var(--bx3-cream)}
.bx3 .bx3-steps__in{max-width:var(--bx3-max);margin:0 auto}
.bx3 .bx3-steps__head{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.bx3 .bx3-steps__head .bx3-text{max-width:30em;text-wrap:pretty}
.bx3 .bx3-steps__track{position:relative;margin-top:clamp(40px,4vw,72px)}
.bx3 .bx3-steps__line{position:absolute;left:calc(100% / (var(--bx3-n,6) * 2));right:calc(100% / (var(--bx3-n,6) * 2));top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--bx3-track);overflow:hidden}
.bx3 .bx3-steps__line::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--bx3-orange);transform-origin:left center;transition:transform 1.9s cubic-bezier(.45,.05,.4,1) .1s}
.bx3-js .bx3 .bx3-steps__line:not(.is-in)::after{transform:scaleX(0)}
.bx3 .bx3-steps__list{position:relative;display:grid;grid-template-columns:repeat(var(--bx3-n,6),minmax(0,1fr));column-gap:clamp(12px,1.6vw,28px)}
.bx3 .bx3-step{display:grid;grid-template-rows:minmax(150px,1fr) auto minmax(150px,1fr);justify-items:center;min-width:0;text-align:center}
.bx3 .bx3-step__dot{grid-row:2;position:relative;z-index:1;display:grid;place-items:center;width:clamp(60px,5vw,76px);height:clamp(60px,5vw,76px);border:2px solid var(--bx3-orange);border-radius:50%;background:var(--bx3-white);color:var(--bx3-orange);transition:background-color .45s var(--bx3-ease) calc(var(--bx3-d,0ms) + 250ms),color .45s var(--bx3-ease) calc(var(--bx3-d,0ms) + 250ms)}
.bx3.bx3-steps--cream .bx3-step__dot{background:var(--bx3-cream)}
.bx3 .bx3-step__dot svg{width:46%;height:46%}
.bx3 .bx3-step.is-in .bx3-step__dot,.bx3.bx3-steps--cream .bx3-step.is-in .bx3-step__dot{background:var(--bx3-orange);color:var(--bx3-white)}
.bx3 .bx3-step__txt{grid-row:1;align-self:end;width:min(150%,300px)}
.bx3 .bx3-step__txt::after{content:"";display:block;width:1px;height:22px;margin:16px auto 10px;background:var(--bx3-orange)}
.bx3 .bx3-step:nth-child(even) .bx3-step__txt{grid-row:3;align-self:start}
.bx3 .bx3-step:nth-child(even) .bx3-step__txt::after{display:none}
.bx3 .bx3-step:nth-child(even) .bx3-step__txt::before{content:"";display:block;width:1px;height:22px;margin:10px auto 16px;background:var(--bx3-orange)}
.bx3 .bx3-step__title{font-size:clamp(1.0625rem,1.3vw,1.3rem);font-weight:700;line-height:1.3;color:var(--bx3-ink)}
.bx3 .bx3-step__text{margin:6px auto 0;max-width:15em;font-size:var(--bx3-fs-sm);line-height:1.65;color:var(--bx3-ink-soft)}

@media (max-width:1024px){
  .bx3 .bx3-steps__track{max-width:560px}
  .bx3 .bx3-steps__line{left:26px;right:auto;top:28px;bottom:28px;width:4px;height:auto;margin:0}
  .bx3 .bx3-steps__line::after{transform-origin:center top}
  .bx3-js .bx3 .bx3-steps__line:not(.is-in)::after{transform:scaleY(0)}
  .bx3 .bx3-steps__list{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .bx3 .bx3-step{grid-template-rows:auto;grid-template-columns:56px minmax(0,1fr);column-gap:20px;justify-items:start;text-align:left}
  .bx3 .bx3-step__dot{grid-row:1;width:56px;height:56px}
  .bx3 .bx3-step__txt,.bx3 .bx3-step:nth-child(even) .bx3-step__txt{grid-row:1;grid-column:2;align-self:start;width:auto;padding-top:4px}
  .bx3 .bx3-step__txt::after,.bx3 .bx3-step:nth-child(even) .bx3-step__txt::before{display:none}
  .bx3 .bx3-step__text{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .bx3 .bx3-steps__line::after,.bx3 .bx3-step__dot{transition:none}
}