/* Perjalanan Belajar — kartu langkah bersambung */
.jr-section{position:relative;overflow:hidden;background:radial-gradient(60% 50% at 85% 0%,rgba(246,196,83,.18),transparent),radial-gradient(50% 50% at 0% 100%,rgba(63,138,74,.14),transparent)}
.jr-head{text-align:center;max-width:780px;margin:0 auto clamp(30px,4vw,48px)}
.jr-head h2{font-size:clamp(32px,4.8vw,56px);letter-spacing:-1.1px;line-height:1.06;margin:14px 0 14px;text-wrap:balance}
.jr-head h2 em{font-style:normal;background:linear-gradient(100deg,var(--green-d),#d99a12);-webkit-background-clip:text;background-clip:text;color:transparent}
.jr-head p{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:38em;margin:0 auto}

ol.jr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 20px}
.jr-step{--t:#3f8a4a;position:relative;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px 20px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.jr-step:nth-child(5n+2){--t:#d99a12}.jr-step:nth-child(5n+3){--t:#1f7a7a}.jr-step:nth-child(5n+4){--t:#b8532f}.jr-step:nth-child(5n+5){--t:#4f5ab8}
.jr-step:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(40,84,60,.16)}
.jr-no{position:absolute;top:12px;right:16px;font-family:var(--serif);font-weight:800;font-size:46px;line-height:1;color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--t) 38%,transparent)}
.jr-ico{width:56px;height:56px;border-radius:19px;display:grid;place-items:center;font-size:27px;margin-bottom:16px;background:color-mix(in srgb,var(--t) 15%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--t) 30%,transparent)}
.jr-step h3{font-size:clamp(17px,1.5vw,20px);line-height:1.2;margin:0}
.jr-step p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
/* sambungan antar langkah */
.jr-step:not(:last-child):after{content:"";position:absolute;top:50px;left:100%;width:20px;border-top:2.5px dashed color-mix(in srgb,var(--t) 55%,transparent)}
.jr-step:nth-child(5n):after{display:none}
/* langkah terakhir = tujuan */
.jr-step.is-goal{background:linear-gradient(150deg,var(--navy-2),var(--navy));border-color:transparent;color:#fff}
.jr-step.is-goal h3{color:#fff}.jr-step.is-goal p{color:rgba(255,255,255,.8)}
.jr-step.is-goal .jr-ico{background:rgba(246,196,83,.2);box-shadow:inset 0 0 0 1.5px rgba(246,196,83,.55)}
.jr-step.is-goal .jr-no{-webkit-text-stroke-color:rgba(246,196,83,.7)}
/* muncul bertahap */
.jr.in .jr-step{animation:jr-pop .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes jr-pop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}

@media (max-width:1020px){
  ol.jr{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jr-step:nth-child(5n):after{display:block}
  .jr-step:nth-child(3n):after{display:none}
}
@media (max-width:640px){
  ol.jr{grid-template-columns:1fr;gap:26px;position:relative}
  .jr-step{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:center;padding:16px 18px}
  .jr-ico{margin:0}
  .jr-no{font-size:36px;top:8px}
  .jr-step:nth-child(n):after{display:block}
  .jr-step:not(:last-child):after{top:100%;left:45px;width:0;height:26px;border-top:0;border-left:2.5px dashed color-mix(in srgb,var(--t) 55%,transparent)}
  .jr-step:last-child:after{display:none}
}
@media (prefers-reduced-motion:reduce){.jr.in .jr-step{animation:none}.jr-step{transition:none}}

/* Ikon garis (SVG) menggantikan emoji */
.jr-ico{color:color-mix(in srgb,var(--t) 78%,#10261b)}
.jr-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.jr-step.is-goal .jr-ico{color:#f6c453}