/* ==========================================================================
   Alur Pendaftaran PPDB (Beranda) — ringkas, mendatar, putih bersih dengan ornamen emas + dongker.
   Kelas berawalan .alur2- agar tidak bentrok dengan alur lama (dipakai di halaman PPDB).
   ========================================================================== */
.alur2 {
  --a-navy: #0c1a43; --a-navy2: #14295f; --a-emas: #c9a24b; --a-emas-t: #8a6a12; --a-emas-m: #f0dca0;
  --a-redup: #5a627a; --a-garis: #d6dbe9; --nd: 64px;
  position: relative; isolation: isolate; overflow: clip; color: var(--a-navy);
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: linear-gradient(180deg, #fbf8ef 0%, #ffffff 38%, #ffffff 100%);
  border-top: 1px solid #eadfc0;
}
.alur2-wadah { position: relative; width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Ornamen latar ---------- */
.alur2-latar { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.alur2-bintang { position: absolute; fill: none; stroke-width: .7; animation: alur2-putar 100s linear infinite; }
.alur2-bintang.a { width: min(560px, 80vw); right: -140px; top: -120px; stroke: var(--a-emas); opacity: .38; }
.alur2-bintang.b { width: min(460px, 70vw); left: -150px; bottom: -150px; stroke: var(--a-navy); opacity: .12; animation-direction: reverse; animation-duration: 130s; }
@keyframes alur2-putar { to { transform: rotate(360deg); } }
.alur2-titik { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--a-emas); opacity: .55; animation: alur2-apung 7s ease-in-out infinite alternate; }
.alur2-titik.t1 { left: 8%; top: 18%; } .alur2-titik.t2 { left: 18%; top: 72%; width: 5px; height: 5px; animation-delay: -2s; }
.alur2-titik.t3 { right: 12%; top: 58%; animation-delay: -4s; } .alur2-titik.t4 { right: 26%; top: 14%; width: 5px; height: 5px; animation-delay: -1s; background: var(--a-navy); opacity: .25; }
.alur2-titik.t5 { left: 46%; bottom: 8%; width: 6px; height: 6px; animation-delay: -5s; background: var(--a-navy); opacity: .2; }
@keyframes alur2-apung { to { translate: 14px -26px; } }
.alur2-wajik { position: absolute; width: 14px; height: 14px; rotate: 45deg; border: 1.5px solid var(--a-emas); opacity: .6; animation: alur2-wajik 9s ease-in-out infinite alternate; }
.alur2-wajik.w1 { left: 5%; top: 44%; } .alur2-wajik.w2 { right: 6%; top: 30%; border-color: var(--a-navy); opacity: .3; animation-delay: -3s; } .alur2-wajik.w3 { left: 34%; top: 9%; width: 10px; height: 10px; animation-delay: -6s; }
@keyframes alur2-wajik { to { rotate: 225deg; translate: 0 -18px; } }
.alur2-latar::before {          /* titik halus di pojok */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(12,26,67,.11) 1px, transparent 1.6px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 45% 55% at 0% 100%, #000, transparent 70%), radial-gradient(ellipse 40% 50% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 45% 55% at 0% 100%, #000, transparent 70%), radial-gradient(ellipse 40% 50% at 100% 0%, #000, transparent 70%);
}

/* ---------- Kepala ---------- */
.alur2-kepala { text-align: center; }
.alur2-label {
  display: inline-flex; align-items: center; gap: .8rem;
  font: 700 .78rem/1 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--a-emas-t);
}
.alur2-label::before, .alur2-label::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--a-emas)); }
.alur2-label::after { background: linear-gradient(90deg, var(--a-emas), transparent); }
.alur2 .alur2-kepala h2 {
  margin: 1rem auto 0; max-width: 28ch; color: var(--a-navy);
  font: 600 clamp(2rem, 4.6vw, 3.3rem)/1.12 'Playfair Display', Georgia, serif; letter-spacing: -.01em; text-wrap: balance;
}
.alur2 .alur2-kepala h2 em {
  font-style: italic; background: linear-gradient(100deg, #8a6a12, #c9a24b 40%, #f0dca0 55%, #c9a24b 70%, #8a6a12); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: alur2-kilau 6s linear infinite;
}
@keyframes alur2-kilau { to { background-position: -240% 0; } }
.alur2 .alur2-kepala p { margin: 1rem auto 0; max-width: 52ch; font: 400 1.05rem/1.7 'DM Sans', sans-serif; color: var(--a-redup); }
.alur2-hias { display: block; width: 120px; height: 1px; margin: 1.4rem auto 0; background: linear-gradient(90deg, transparent, var(--a-emas), transparent); position: relative; }
.alur2-hias i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; rotate: 45deg; background: #fff; border: 1.5px solid var(--a-emas); animation: alur2-hias 4s ease-in-out infinite; }
@keyframes alur2-hias { 50% { rotate: 225deg; background: var(--a-emas-m); } }

/* ---------- Langkah (mendatar) ---------- */
.alur2-daftar { list-style: none; margin: clamp(2.6rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.alur2-langkah { position: relative; text-align: center; }
.alur2-tombol {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; flex-direction: column; align-items: center; gap: .9rem; padding-inline: .3rem;
  -webkit-tap-highlight-color: transparent;
}
.alur2-tombol:focus-visible .alur2-node { outline: 3px solid var(--a-emas); outline-offset: 4px; }

/* Penghubung ke langkah berikutnya: garis putus-putus + isian padat saat sudah dilewati */
.alur2-langkah:not(:last-child)::before,
.alur2-langkah:not(:last-child)::after {
  content: ""; position: absolute; top: calc(var(--nd) / 2 - 1px); left: calc(50% + var(--nd) / 2 + 8px); width: calc(100% - var(--nd) - 16px); height: 2px; border-radius: 2px;
}
.alur2-langkah::before { background: repeating-linear-gradient(90deg, #c4cbe0 0 7px, transparent 7px 14px); }
.alur2-langkah::after { background: linear-gradient(90deg, var(--a-navy), var(--a-navy2)); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.alur2-langkah.lewat::after { transform: scaleX(1); }
.alur2-langkah.aktif:not(:last-child)::before { background: repeating-linear-gradient(90deg, var(--a-emas) 0 7px, transparent 7px 14px); background-size: 14px 100%; animation: alur2-jalan .7s linear infinite; }
@keyframes alur2-jalan { to { background-position: 14px 0; } }

.alur2-node {
  position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 var(--nd); width: var(--nd); height: var(--nd); border-radius: 50%;
  background: #fff; border: 2px solid var(--a-navy); color: var(--a-navy);
  box-shadow: 0 10px 22px -14px rgba(12,26,67,.5);
  transition: background .45s, color .45s, border-color .45s, scale .45s cubic-bezier(.3,1.6,.5,1), box-shadow .45s;
}
.alur2-node b { font: 700 1.5rem/1 'Playfair Display', Georgia, serif; }
.alur2-node::after {            /* cincin berdenyut untuk langkah aktif */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--a-emas); opacity: 0;
}
.alur2-tombol:hover .alur2-node { translate: 0 -4px; }
.alur2-langkah.lewat .alur2-node { background: linear-gradient(135deg, var(--a-navy), var(--a-navy2)); color: var(--a-emas-m); }
.alur2-langkah.aktif .alur2-node {
  background: linear-gradient(135deg, #f0dca0, #c9a24b); border-color: #c9a24b; color: var(--a-navy); scale: 1.14;
  box-shadow: 0 16px 30px -12px rgba(169,133,54,.8), 0 0 0 6px rgba(201,162,75,.16);
}
.alur2-langkah.aktif .alur2-node::after { animation: alur2-denyut 1.8s ease-out infinite; }
@keyframes alur2-denyut { 0% { opacity: .9; scale: .9; } 100% { opacity: 0; scale: 1.35; } }

.alur2-judul { font: 600 .98rem/1.35 'Playfair Display', Georgia, serif; color: var(--a-redup); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: color .4s; }
.alur2-langkah.lewat .alur2-judul { color: var(--a-navy2); }
.alur2-langkah.aktif .alur2-judul { color: var(--a-navy); font-weight: 700; }
.alur2-desk { display: none; }

/* ---------- Panel penjelasan (miring, dongker) ---------- */
.alur2-panel { position: relative; width: min(760px, 100%); margin: clamp(2.2rem, 4vw, 3.2rem) auto 0; }
.alur2-panel::before {          /* kartu emas di belakang, miring ke arah lain */
  content: ""; position: absolute; inset: 0; border-radius: 26px; rotate: 2.2deg; translate: 8px 10px;
  border: 1.5px solid var(--a-emas); background: repeating-linear-gradient(135deg, rgba(201,162,75,.10) 0 6px, transparent 6px 14px);
  animation: alur2-goyang 7s ease-in-out infinite alternate;
}
@keyframes alur2-goyang { from { rotate: 1.4deg; } to { rotate: 2.8deg; } }
.alur2-kartu {
  position: relative; display: grid; overflow: hidden; border-radius: 26px; rotate: -1.4deg;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3.4vw, 2.4rem) clamp(1.6rem, 3vw, 2.2rem);
  color: #e9edf8; background: radial-gradient(500px 220px at 100% 0%, #24408f66, transparent 70%), linear-gradient(135deg, #0c1a43, #14295f);
  box-shadow: 0 34px 60px -28px rgba(12,26,67,.65), inset 0 0 0 1px rgba(240,220,160,.22);
  transition: rotate .6s cubic-bezier(.2,.8,.2,1);
}
.alur2-panel:hover .alur2-kartu { rotate: 0deg; }
.alur2-konten { grid-area: 1 / 1; position: relative; opacity: 0; translate: 0 16px; visibility: hidden; transition: opacity .5s ease, translate .6s cubic-bezier(.2,.8,.2,1), visibility 0s .5s; }
.alur2-konten.aktif { opacity: 1; translate: 0 0; visibility: visible; transition-delay: .15s, .15s, 0s; }
.alur2-konten small { display: inline-block; font: 700 .72rem/1 'DM Sans', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--a-emas-m); padding: .4rem .8rem; border: 1px solid rgba(240,220,160,.4); border-radius: 999px; }
.alur2 .alur2-konten h3 { margin: .9rem 0 0; max-width: 24ch; font: 600 clamp(1.3rem, 2.6vw, 1.8rem)/1.25 'Playfair Display', Georgia, serif; color: #fff; }
.alur2 .alur2-konten p { margin: .7rem 0 0; max-width: 52ch; font: 400 1rem/1.75 'DM Sans', sans-serif; color: #c6cfe8; }
.alur2-besar {
  position: absolute; inset-inline-end: 0; bottom: -1.2rem; font: 800 clamp(4.5rem, 10vw, 7.5rem)/1 'Sora', sans-serif; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(240,220,160,.35); pointer-events: none;
}
.alur2-konten.aktif .alur2-besar { animation: alur2-besar 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes alur2-besar { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
.alur2-waktu { position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, #c9a24b, #f0dca0); transform-origin: left; transform: scaleX(0); animation: alur2-waktu 5s linear forwards paused; }
.alur2.tampil:not(.diam):not(.jeda) .alur2-waktu { animation-play-state: running; }
@keyframes alur2-waktu { to { transform: scaleX(1); } }

/* ---------- Tombol ---------- */
.alur2-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: clamp(2.2rem, 4vw, 3rem); }
.alur2-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.7rem; border-radius: 999px; text-decoration: none;
  font: 700 .95rem/1 'DM Sans', sans-serif; transition: transform .3s, box-shadow .3s, background .3s, color .3s;
}
.alur2-btn.utama { color: #fff; background: linear-gradient(135deg, var(--a-navy), var(--a-navy2)); box-shadow: 0 16px 30px -14px rgba(12,26,67,.7); }
.alur2-btn.utama span { color: var(--a-emas-m); transition: translate .3s; }
.alur2-btn.utama::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: alur2-sapu 4.5s ease-in-out 1.5s infinite; }
@keyframes alur2-sapu { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.alur2-btn.garis { color: var(--a-navy); border: 1.5px solid var(--a-navy); background: #fff; }
.alur2-btn:hover { transform: translateY(-3px); }
.alur2-btn.utama:hover { box-shadow: 0 22px 36px -14px rgba(12,26,67,.8); }
.alur2-btn.utama:hover span { translate: 5px 0; }
.alur2-btn.garis:hover { background: var(--a-navy); color: #fff; }

/* ---------- Muncul saat di-scroll ---------- */
.js .alur2:not(.tampil) .alur2-kepala > *, .js .alur2:not(.tampil) .alur2-panel, .js .alur2:not(.tampil) .alur2-aksi { opacity: 0; translate: 0 22px; }
.js .alur2 .alur2-kepala > *, .js .alur2 .alur2-panel, .js .alur2 .alur2-aksi { transition: opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
.js .alur2 .alur2-kepala > :nth-child(2) { transition-delay: .1s; } .js .alur2 .alur2-kepala > :nth-child(3) { transition-delay: .2s; } .js .alur2 .alur2-kepala > :nth-child(4) { transition-delay: .3s; }
.js .alur2 .alur2-panel { transition-delay: .9s; } .js .alur2 .alur2-aksi { transition-delay: 1.1s; }
.js .alur2:not(.tampil) .alur2-tombol { opacity: 0; translate: 0 26px; scale: .85; }
.js .alur2 .alur2-tombol { transition: opacity .7s ease calc(.35s + var(--i) * 90ms), translate .8s cubic-bezier(.3,1.4,.5,1) calc(.35s + var(--i) * 90ms), scale .8s cubic-bezier(.3,1.4,.5,1) calc(.35s + var(--i) * 90ms); }
.js .alur2:not(.tampil) .alur2-langkah::before { opacity: 0; }
.js .alur2 .alur2-langkah::before { transition: opacity .8s ease calc(.55s + var(--i) * 90ms); }
.alur2.diam *, .alur2.diam *::before, .alur2.diam *::after { animation-play-state: paused !important; }

/* ---------- Layar menengah ---------- */
@media (max-width: 1100px) { .alur2 { --nd: 52px; } .alur2-node b { font-size: 1.25rem; } .alur2-judul { font-size: .88rem; } }

/* ---------- HP: daftar vertikal ringkas, penjelasan melebar pada langkah aktif ---------- */
@media (max-width: 820px) {
  .alur2 { --nd: 46px; }
  .alur2-daftar { grid-template-columns: 1fr; width: min(520px, 100%); margin-inline: auto; row-gap: .2rem; }
  .alur2-langkah { text-align: start; padding-bottom: .9rem; }
  .alur2-tombol { flex-direction: row; align-items: center; gap: 1rem; padding: 0; }
  .alur2-judul { -webkit-line-clamp: 3; font-size: 1rem; }
  .alur2-node b { font-size: 1.1rem; }
  .alur2-node::after { inset: -5px; }
  .alur2-langkah:not(:last-child)::before, .alur2-langkah:not(:last-child)::after {
    top: calc(var(--nd) + 6px); bottom: -2px; left: calc(var(--nd) / 2 - 1px); width: 2px; height: auto;
  }
  .alur2-langkah::before { background: repeating-linear-gradient(180deg, #c4cbe0 0 7px, transparent 7px 14px); }
  .alur2-langkah::after { transform: scaleY(0); transform-origin: top; }
  .alur2-langkah.lewat::after { transform: scaleY(1); }
  .alur2-langkah.aktif:not(:last-child)::before { background: repeating-linear-gradient(180deg, var(--a-emas) 0 7px, transparent 7px 14px); background-size: 100% 14px; animation-name: alur2-jalan-v; }
  @keyframes alur2-jalan-v { to { background-position: 0 14px; } }
  .alur2-desk { display: block; margin: 0; padding-inline-start: calc(var(--nd) + 1rem); font: 400 .95rem/1.65 'DM Sans', sans-serif; color: var(--a-redup);
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .45s ease, margin .45s ease; }
  .alur2-langkah.aktif .alur2-desk { max-height: 12rem; opacity: 1; margin-top: .55rem; }
  .alur2-panel { display: none; }
  .alur2-aksi { margin-top: 1.6rem; }
  .alur2-btn { flex: 1 1 100%; justify-content: center; max-width: 520px; }
  .js .alur2:not(.tampil) .alur2-tombol { translate: -20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .alur2 *, .alur2 *::before, .alur2 *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .js .alur2:not(.tampil) .alur2-kepala > *, .js .alur2:not(.tampil) .alur2-panel, .js .alur2:not(.tampil) .alur2-aksi, .js .alur2:not(.tampil) .alur2-tombol { opacity: 1; translate: none; scale: 1; }
  .alur2-kartu, .alur2-panel::before { rotate: -1deg; }
}