/* ==========================================================================
   Empat Pilar Pendidikan — garis waktu horizontal yang bergeser saat di-scroll
   Terinspirasi alur "timeline + polaroid", disesuaikan ke token KAHF: dongker + emas.
   Semua kelas berawalan .pil- agar tidak bentrok.
   ========================================================================== */
.pil {
  --pil-emas: #e9c46a;
  --pil-emas-muda: #f6e3a1;
  --pil-teks: #e8edf7;
  --pil-redup: #b9c4e0;
  --pil-w: min(1020px, 84vw);   /* lebar satu pilar */
  --pil-jarak: clamp(4rem, 9vw, 8rem);
  position: relative; isolation: isolate; width: 100%;
  color: var(--pil-teks);
  border-top: 1px solid #e9c46a55; border-bottom: 1px solid #e9c46a33;
  background: #040a2d;
}
.pil-pin {
  position: relative; isolation: isolate;
  background:
    radial-gradient(1000px 520px at 85% 0%, #1b319066, transparent 62%),
    radial-gradient(900px 480px at 5% 100%, #e9c46a14, transparent 65%),
    linear-gradient(180deg, #040a2d, #07124a 52%, #040a2d);
}

/* ---------- Latar ---------- */
.pil-latar { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.pil-pola {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(233,196,106,.18) 1px, transparent 1.5px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 0, transparent 80%);
  animation: pil-pola 40s linear infinite;
}
@keyframes pil-pola { to { background-position: 34px 68px; } }
.pil-blob { position: absolute; border-radius: 50%; filter: blur(80px); }
.pil-blob.a { width: 420px; height: 420px; left: -100px; top: 8%; background: #2a4fd6; opacity: .42; animation: pil-hanyut 20s ease-in-out infinite alternate; }
.pil-blob.b { width: 360px; height: 360px; right: -80px; bottom: 6%; background: #e9c46a; opacity: .16; animation: pil-hanyut 26s ease-in-out infinite alternate-reverse; }
@keyframes pil-hanyut { to { transform: translate(110px, 60px) scale(1.2); } }
.pil-bintang {
  position: absolute; right: -8%; top: 50%; width: min(760px, 90vw); aspect-ratio: 1; translate: 0 -50%;
  fill: none; stroke: var(--pil-emas); stroke-width: .6; opacity: .15;
  animation: pil-putar 120s linear infinite;
}
@keyframes pil-putar { to { transform: rotate(360deg); } }
.pil-debu {
  position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--pil-emas-muda); box-shadow: 0 0 10px 2px #e9c46aaa; opacity: 0;
  animation: pil-naik var(--d) linear var(--w) infinite;
}
@keyframes pil-naik { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: .8; } 100% { transform: translate(var(--g), -105vh); opacity: 0; } }

/* ---------- Kepala ---------- */
.pil-kepala { text-align: center; padding-inline: 1.25rem; position: relative; z-index: 2; }
.pil-label {
  display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1rem; border-radius: 999px;
  font: 600 .76rem/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pil-emas); border: 1px solid #e9c46a66; background: #e9c46a14;
}
.pil-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pil-emas); animation: pil-denyut 2.2s ease-out infinite; }
@keyframes pil-denyut { 0% { box-shadow: 0 0 0 0 #e9c46a99; } 70%, 100% { box-shadow: 0 0 0 10px #e9c46a00; } }
.pil .pil-judul {
  margin: .9rem auto 0; max-width: 22ch;
  font: 800 clamp(1.9rem, 4.2vw, 3.1rem)/1.1 'Sora', sans-serif; letter-spacing: -.02em;
  background: linear-gradient(100deg, #f6e3a1 0%, #fff6d4 30%, #e9c46a 55%, #f6e3a1 80%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pil-emas 7s linear infinite; text-wrap: balance;
}
@keyframes pil-emas { to { background-position: -220% 0; } }
.pil .pil-pengantar { margin: .8rem auto 0; max-width: 56ch; font: 400 1rem/1.7 'DM Sans', sans-serif; color: var(--pil-redup); }

/* ---------- Jalur & pilar (dasar = tumpukan vertikal) ---------- */
.pil-jalur { position: relative; width: min(760px, 100% - 2.5rem); margin: 3rem auto 0; padding-bottom: 2rem; }
.pil-track { position: relative; display: grid; gap: 3.5rem; padding-inline-start: 2.2rem; }
.pil-garis { position: absolute; inset-block: .4rem 0; inset-inline-start: .45rem; width: 2px; background: linear-gradient(#e9c46a55, #e9c46a22); border-radius: 2px; }
.pil-isi { position: absolute; top: .4rem; inset-inline-start: .45rem; width: 2px; height: 0; background: linear-gradient(#e9c46a, #fff6d4); border-radius: 2px; box-shadow: 0 0 12px #e9c46a99; }

.pil-item { position: relative; display: grid; gap: 1.4rem; align-items: center; }
.pil-dot {
  position: absolute; inset-inline-start: -2.2rem; top: .35rem; width: 18px; height: 18px; border-radius: 50%;
  background: #0c1a43; border: 2px solid var(--pil-emas); box-shadow: 0 0 0 4px #e9c46a1f;
  transition: background .5s, box-shadow .5s, scale .5s;
}
.pil-item.aktif .pil-dot { background: var(--pil-emas); box-shadow: 0 0 0 6px #e9c46a33, 0 0 22px 4px #e9c46acc; scale: 1.2; }

/* Foto polaroid */
.pil-foto {
  position: relative; margin: 0; width: min(100%, 340px); padding: .7rem .7rem 2.1rem; background: #fffdf6; border-radius: 4px;
  rotate: var(--miring, -3deg); box-shadow: 0 30px 50px -22px #000c, 0 0 0 1px #ffffff22;
  transition: rotate .6s cubic-bezier(.2,.8,.2,1), scale .6s cubic-bezier(.2,.8,.2,1);
}
.pil-foto::before {              /* selotip */
  content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; translate: -50% 0; rotate: -2deg;
  background: linear-gradient(90deg, #e9c46acc, #f6e3a1cc); opacity: .9; border-radius: 2px;
}
.pil-foto span:has(img.logo) { background: linear-gradient(160deg, #fbf6e4, #efe3bd); }
.pil-foto span { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #0c1a43; }
.pil-foto img { width: 112%; height: 100%; max-width: none; object-fit: cover; display: block; translate: var(--geser, 0px) 0; transition: scale .8s cubic-bezier(.2,.8,.2,1); }
.pil-foto img.logo { width: 60%; height: auto; margin: 20% auto 0; object-fit: contain; translate: none; }
.pil-foto i { position: absolute; inset-inline: 0; bottom: .6rem; text-align: center; font: 600 .62rem/1 'DM Sans', sans-serif; letter-spacing: .3em; color: #8a6a12; font-style: normal; }
.pil-foto b { position: absolute; top: 1.2rem; inset-inline-end: -1.4rem; rotate: 90deg; font: 600 .58rem/1 'DM Sans', sans-serif; letter-spacing: .3em; color: #ffffff77; white-space: nowrap; }
.pil-item:hover .pil-foto, .pil-item.aktif .pil-foto { rotate: 0deg; scale: 1.03; }
.pil-item.aktif .pil-foto img { scale: 1.08; }
.pil-foto-bungkus { animation: pil-melayang 7s ease-in-out calc(var(--i) * -1.7s) infinite alternate; }
@keyframes pil-melayang { from { translate: 0 -6px; } to { translate: 0 8px; } }

/* Teks */
.pil-no {
  font: 700 clamp(2.6rem, 5vw, 3.6rem)/1 'Playfair Display', Georgia, serif; color: var(--pil-emas);
  display: inline-block; text-shadow: 0 0 28px #e9c46a55;
}
.pil-baris { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.pil-badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .9rem; border-radius: 999px;
  font: 700 .74rem/1 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pil-emas-muda); background: #ffffff10; border: 1px solid #e9c46a55;
}
.pil-badge svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pil .pil-item h3 { margin: .6rem 0 0; font: 600 clamp(1.7rem, 3.3vw, 2.5rem)/1.15 'Playfair Display', Georgia, serif; color: #fff; letter-spacing: 0; }
.pil .pil-inti { margin: .55rem 0 0; font: italic 500 clamp(1.05rem, 1.7vw, 1.28rem)/1.5 'Playfair Display', Georgia, serif; color: var(--pil-emas); }
.pil-contoh {
  position: relative; margin-top: 1.3rem; padding: 1rem 1.2rem 1.1rem; border-radius: 0 14px 14px 0;
  background: linear-gradient(90deg, #ffffff12, #ffffff05); border-inline-start: 3px solid var(--pil-emas); overflow: hidden;
}
.pil-contoh::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 50%; background: linear-gradient(100deg, transparent, #ffffff22, transparent); transform: skewX(-20deg); }
.pil-item.aktif .pil-contoh::after { animation: pil-kilau 1.4s ease .5s 1 both; }
@keyframes pil-kilau { to { left: 130%; } }
.pil-contoh h4 { margin: 0 0 .45rem; display: flex; align-items: center; gap: .5rem; font: 700 .7rem/1 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--pil-emas); }
.pil-contoh h4 svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pil .pil-contoh p { margin: 0; font: 400 .98rem/1.7 'DM Sans', sans-serif; color: var(--pil-teks); }

.pil-aksi { text-align: center; padding: 0 1.25rem 3.5rem; position: relative; z-index: 2; }
.pil-aksi a {
  display: inline-block; padding: .85rem 1.8rem; border-radius: 999px; font: 700 .9rem/1 'DM Sans', sans-serif; text-decoration: none;
  color: #0c1a43; background: linear-gradient(120deg, #f6e3a1, #e9c46a); box-shadow: 0 14px 30px -14px #e9c46a;
  transition: transform .3s, box-shadow .3s;
}
.pil-aksi a:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -14px #e9c46a; }

.pil-kendali { display: none; }
.pil-lanjut { font: 700 .8rem/1 'DM Sans', sans-serif; color: #0c1a43; background: linear-gradient(120deg, #f6e3a1, #e9c46a); padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 22px -12px #e9c46a; }

/* Muncul saat di-scroll (tumpukan vertikal) */
.js .pil:not(.tampil) .pil-kepala { opacity: 0; translate: 0 24px; }
.js .pil .pil-kepala { transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
.js .pil-item { opacity: .35; translate: 0 30px; transition: opacity .8s ease, translate .9s cubic-bezier(.2,.8,.2,1); }
.js .pil-item.aktif { opacity: 1; translate: 0 0; }

/* ==========================================================================
   Mode horizontal "dipaku": layar lebar, tinggi cukup, gerak normal
   ========================================================================== */
@media (min-width: 901px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .js .pil { height: calc(100vh * (var(--n, 4) * .85 + .45)); }
  .js .pil-pin {
    position: sticky; top: 0; height: 100vh; overflow: clip;
    display: flex; flex-direction: column; justify-content: center; gap: clamp(.8rem, 3vh, 2rem);
    padding-top: 4.6rem; padding-bottom: 1.2rem;
  }
  .js .pil-kepala .pil-judul { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
  .js .pil .pil-pengantar { margin-top: .5rem; font-size: .95rem; }
  .js .pil-jalur { width: 100%; margin: 0; padding: 0; flex: 0 0 auto; }
  .js .pil-track {
    --pad: calc((100vw - var(--pil-w)) / 2);
    display: flex; gap: var(--pil-jarak); width: max-content; padding-inline: var(--pad);
    padding-top: 3.2rem; will-change: transform;
  }
  .js .pil-garis, .js .pil-isi { inset-block: auto; top: .8rem; height: 2px; width: auto; }
  .js .pil-garis { inset-inline-start: var(--pad); inset-inline-end: calc(var(--pad) + var(--pil-w) - 1px); background: #e9c46a33; }
  .js .pil-isi { inset-inline-start: var(--pad); width: 0; background: linear-gradient(90deg, #e9c46a, #fff6d4); }
  .js .pil-isi::after { content: ""; position: absolute; inset-inline-end: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff6d4; box-shadow: 0 0 18px 6px #e9c46acc; animation: pil-kepala 1.6s ease-in-out infinite alternate; }
  @keyframes pil-kepala { to { box-shadow: 0 0 30px 12px #e9c46a88; scale: 1.2; } }

  .js .pil-item {
    --dekat: 0;
    width: var(--pil-w); flex: 0 0 var(--pil-w);
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center;
    opacity: calc(.28 + var(--dekat) * .72); translate: none;
    transform: scale(calc(.9 + var(--dekat) * .1)); transform-origin: 20% 50%;
    transition: none;
  }
  .js .pil-item.aktif { opacity: calc(.28 + var(--dekat) * .72); translate: none; }
  .js .pil-dot { inset-inline-start: 0; top: -2.9rem; }
  .js .pil-foto { width: min(100%, 300px, 38vh); }
  .js .pil .pil-judul { max-width: none; }

  .js .pil-kendali {
    display: flex; align-items: center; justify-content: center; gap: 1.2rem; position: relative; z-index: 2;
  }
  .pil-hitung { font: 700 .95rem/1 'Sora', sans-serif; letter-spacing: .08em; color: var(--pil-emas); min-width: 4.2rem; text-align: end; }
  .pil-hitung small { color: #ffffff66; font-weight: 600; }
  .pil-titik { display: flex; gap: .55rem; }
  .pil-titik button { width: 34px; height: 6px; border: 0; border-radius: 6px; background: #ffffff2a; cursor: pointer; padding: 0; transition: background .4s, width .4s; }
  .pil-titik button.aktif { background: var(--pil-emas); width: 58px; box-shadow: 0 0 14px #e9c46aaa; }
  .pil-petunjuk { font: 500 .78rem/1 'DM Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffffff77; display: inline-flex; align-items: center; gap: .5rem; min-width: 9rem; }
  .pil-petunjuk::after { content: "→"; color: var(--pil-emas); animation: pil-tunjuk 1.4s ease-in-out infinite; }
  @keyframes pil-tunjuk { 50% { translate: 6px 0; } }

  .pil-aksi { padding-bottom: 0; }
  .js .pil-pin .pil-aksi { display: none; }
}

/* ---------- Kecil ---------- */
@media (max-width: 900px) {
  .pil { padding-top: clamp(3.5rem, 8vw, 5rem); }
  .pil-item { grid-template-columns: 1fr; }
  .pil-foto { width: min(100%, 300px); }
  .pil-jalur { margin-top: 2.2rem; }
}
@media (max-width: 520px) { .pil-track { gap: 3rem; } .pil-foto b { display: none; } }

/* ---------- Hemat tenaga & aksesibilitas ---------- */
.pil.diam *, .pil.diam *::before, .pil.diam *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .pil *, .pil *::before, .pil *::after { animation: none !important; }
  .js .pil-item { opacity: 1; translate: none; }
  .js .pil:not(.tampil) .pil-kepala { opacity: 1; translate: none; }
  .pil .pil-judul { background-position: 0 0; }
}