/* Alur pendaftaran PPDB: jalur setapak bernomor (urutan memang berurutan). */
.alur{padding:8px 0 84px}
.alur-banner{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:#1f4d2c;color:#fff;text-align:center;padding:46px 22px 118px}
.alur-banner:before,.alur-banner:after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:-1;background-repeat:repeat-x;background-position:0 100%;background-size:480px 100%}
.alur-banner:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120' preserveAspectRatio='none'%3E%3Cpath fill='%232f6b3c' d='M0 58C80 24 160 24 240 58S400 92 480 58V120H0Z'/%3E%3C/svg%3E");animation:alur-hill 120s linear infinite reverse}
.alur-banner:after{height:70px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120' preserveAspectRatio='none'%3E%3Cpath fill='%23173f2a' d='M0 84C80 50 160 50 240 84S400 118 480 84V120H0Z'/%3E%3C/svg%3E");animation:alur-hill 80s linear infinite}
@keyframes alur-hill{to{background-position:-480px 100%}}
.alur-banner h2{color:#fff;font-size:clamp(28px,4.4vw,44px);margin:0 0 10px}
.alur-banner p{margin:0 auto;max-width:56ch;color:#e4efd9}
.alur-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-top:22px}
.alur-count{padding:8px 16px;border-radius:99px;background:#f4e6b0;color:#4a3a08;font-weight:800;font-size:14px}
.alur-card{position:relative;z-index:2;max-width:860px;margin:-74px auto 0;padding:10px 30px;background:#fff;border-radius:24px;box-shadow:0 7px 0 rgba(23,63,42,.14)}
.alur-list{list-style:none;margin:0;padding:0;position:relative}
.alur-list:before{content:"";position:absolute;left:26px;top:48px;bottom:48px;width:3px;transform-origin:top;
  background:repeating-linear-gradient(180deg,#7fb04a 0 9px,transparent 9px 17px);transform:scaleY(1)}
.js .alur-list:not(.in):before{transform:scaleY(0)}
.alur-list.in:before{transition:transform 2.2s ease-out}
.alur-list li{position:relative;display:grid;grid-template-columns:54px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid #e9e3cf}
.alur-list li:last-child{border-bottom:0}
.alur-no{position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#2f6b3c;color:#fff;
  font:800 22px/1 var(--serif);box-shadow:0 0 0 6px #fff,0 0 0 8px #cfe4c4}
.alur-list li:last-child .alur-no{background:#f4b83a;color:#3a2a05;box-shadow:0 0 0 6px #fff,0 0 0 8px #f4dc9b}
.alur-list h3{margin:2px 0 4px;font-size:20px;color:#173f2a}
.alur-list p{margin:0;color:var(--muted);line-height:1.65}
.alur-note{max-width:860px;margin:18px auto 0;text-align:center;font-size:14px;color:var(--muted)}
@media (max-width:640px){.alur-card{padding:6px 16px;margin-top:-64px}.alur-list li{grid-template-columns:44px 1fr;gap:14px}.alur-no{width:44px;height:44px;font-size:18px}.alur-list:before{left:21px}}
@media (prefers-reduced-motion:reduce){.alur-banner:before,.alur-banner:after{animation:none}.alur-list.in:before{transition:none}.js .alur-list:not(.in):before{transform:none}}

/* tambahan: matahari, awan, tunas yang tumbuh mengikuti scroll */
.alur-sun{position:absolute;right:clamp(14px,5vw,60px);top:18px;width:clamp(52px,7vw,84px);aspect-ratio:1;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 120 120'%3E%3Cg stroke='%23f4b83a' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M0 -40V-56M0 40V56M-40 0H-56M40 0H56M28 -28L40 -40M-28 -28L-40 -40M28 28L40 40M-28 28L-40 40'/%3E%3C/g%3E%3Ccircle r='26' fill='%23f4b83a'/%3E%3C/svg%3E") center/contain no-repeat;animation:alur-spin 80s linear infinite}
.alur-cloud{position:absolute;left:0;top:26px;width:clamp(80px,10vw,140px);aspect-ratio:220/90;z-index:-1;opacity:.9;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cpath fill='%23fffaf0' d='M14 82c-12 0-12-20 4-22 0-16 20-24 34-14 8-20 40-22 52-2 14-10 36-2 36 16 14-4 30 4 28 20 0 4-2 2-6 2z'/%3E%3C/svg%3E") center/contain no-repeat;animation:alur-cloud 110s linear infinite;animation-delay:-30s}
@keyframes alur-spin{to{transform:rotate(360deg)}}
@keyframes alur-cloud{from{transform:translateX(-15vw)}to{transform:translateX(100vw)}}
.alur-track{position:relative}
.alur-walker{position:absolute;left:27px;top:-58px;width:44px;height:58px;margin-left:-22px;z-index:3;pointer-events:none;transform-origin:50% 100%;will-change:transform}
.alur-walker svg{display:block;width:100%;height:100%;overflow:visible}
.alur-sway{transform-origin:22px 58px;animation:alur-sway 3.2s ease-in-out infinite alternate}
@keyframes alur-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.alur-bloom{transform-origin:0 0;transform:translate(22px,17px) scale(0);transition:transform .7s cubic-bezier(.2,1.4,.4,1)}
.alur-walker.done .alur-bloom{transform:translate(22px,17px) scale(1)}
.alur-live .alur-no:not(.reached){background:#a9c3a0;box-shadow:0 0 0 6px #fff,0 0 0 8px #e3eadc}
.alur-live li:last-child .alur-no:not(.reached){background:#e6d29a;color:#7a6a3a;box-shadow:0 0 0 6px #fff,0 0 0 8px #f0e6c4}
.alur-no.reached{animation:alur-pop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes alur-pop{from{transform:scale(.8)}to{transform:scale(1)}}
.alur-no{transition:background-color .4s,color .4s,box-shadow .4s}
.alur-list li h3{transition:color .3s}
.alur-list li:hover h3{color:#2f6b3c}
@media (max-width:640px){.alur-walker{left:22px}}
@media (prefers-reduced-motion:reduce){.alur-sun,.alur-cloud,.alur-sway,.alur-no.reached{animation:none}.alur-walker{display:none}}