/* Unit Pendidikan — timeline geser (gaya sayogya.com) */
.ut-bagian{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem);color:#fff;background:radial-gradient(1200px 500px at 15% 0%,#12308f55,transparent 60%),linear-gradient(180deg,#081330,#0f2252 55%,#081330)}
.ut-bagian::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.ut-kepala{position:relative;text-align:center;max-width:720px;margin:0 auto clamp(2rem,5vw,3.2rem);padding:0 1.2rem}
.ut-kepala small{display:inline-block;padding:.3rem .9rem;border:1px solid #d9b76555;border-radius:999px;color:#d9b765;font:700 .78rem 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.ut-kepala h2{margin:.9rem 0 .5rem;font:700 clamp(1.9rem,4.4vw,3rem)/1.15 'Playfair Display',serif;color:#fff}
.ut-kepala h2 em{font-style:italic;color:#e9c46a}
.ut-kepala p{margin:0;color:#e6d9b0;font:400 1rem/1.6 'DM Sans',sans-serif}

.ut-slider{position:relative;outline:none}
.ut-layar{position:relative;overflow:hidden;padding:0 0 .5rem}
.ut-track{position:relative;display:flex;gap:clamp(2rem,4vw,4rem);width:max-content;padding-right:30vw;transition:transform .85s cubic-bezier(.65,.05,.25,1);will-change:transform}
.ut-garis{position:absolute;left:0;right:0;top:14px;height:1px;background:#ffffff33}
.ut-garis i{position:absolute;left:0;top:-1px;height:3px;width:0;background:linear-gradient(90deg,#e9c46a,#d9b765);border-radius:3px;transition:width .85s cubic-bezier(.65,.05,.25,1)}

.ut-item{position:relative;flex:0 0 min(580px,86vw);display:grid;grid-template-columns:230px 1fr;gap:1.6rem;align-items:start;padding-top:3.4rem;opacity:.35;transform:scale(.96);transform-origin:left top;transition:opacity .6s,transform .6s;cursor:pointer}
.ut-item.aktif{opacity:1;transform:none;cursor:default}
.ut-dot{position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;background:#0f2252;border:2px solid #ffffff66;transition:all .5s}
.ut-item.aktif .ut-dot{background:var(--warna,#e9c46a);border-color:#e9c46a;box-shadow:0 0 0 6px #e9c46a33}
.ut-item.lewat .ut-dot{background:#e9c46a;border-color:#e9c46a}

.ut-foto{position:relative;margin:0;padding:8px 8px 22px;background:#fff;border-radius:6px;box-shadow:0 18px 40px -14px #000a;transform:rotate(var(--miring,-3deg));transition:transform .6s}
.ut-item.aktif .ut-foto{transform:rotate(var(--miring,-3deg)) translateY(-4px)}
.ut-foto img,.ut-kosong{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:#0f2252}
.ut-kosong{display:grid;place-items:center;background:linear-gradient(145deg,var(--warna,#b8892b),#081330);color:#fff;font:700 2.6rem 'Playfair Display',serif;letter-spacing:.04em}
.ut-foto figcaption{position:absolute;right:-2px;top:20px;writing-mode:vertical-rl;font:700 .55rem 'DM Sans',sans-serif;letter-spacing:.2em;color:#a29f94;text-transform:uppercase;padding-right:4px}

.ut-no{display:inline-block;margin-right:.5rem;font:600 1.7rem 'Playfair Display',serif;color:#e9c46a}
.ut-lencana{display:inline-flex;align-items:center;padding:.22rem .7rem;border:1px solid #ffffff55;border-radius:999px;font:700 .72rem 'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.ut-teks h3{margin:.55rem 0 .4rem;font:600 clamp(1.35rem,2.3vw,1.75rem)/1.2 'Playfair Display',serif;color:#fff}
.ut-sub{margin:0 0 .8rem;font:italic 500 .95rem 'Playfair Display',serif;color:#e9c46a}
.ut-teks p.ut-desk{margin:0 0 1rem;font:400 .92rem/1.65 'DM Sans',sans-serif;color:#f3ecd6}
.ut-info{margin:0 0 1.1rem;padding:.7rem .9rem;border-left:3px solid #e9c46a;background:#ffffff12;border-radius:0 8px 8px 0}
.ut-info b{display:block;margin-bottom:.2rem;font:700 .68rem 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e9c46a}
.ut-info span{font:400 .85rem/1.5 'DM Sans',sans-serif;color:#fff}
.ut-aksi{display:flex;flex-wrap:wrap;gap:.6rem}
.ut-aksi a{display:inline-flex;align-items:center;min-height:42px;padding:.5rem 1.15rem;border-radius:999px;font:700 .9rem 'DM Sans',sans-serif;text-decoration:none;transition:transform .25s,background .25s}
.ut-aksi a:first-child{background:#e9c46a;color:#1a1400}
.ut-aksi a:last-child{border:1px solid #ffffff66;color:#fff}
.ut-aksi a:hover{transform:translateY(-2px)}
.ut-item:not(.aktif) .ut-aksi a{pointer-events:none}

.ut-kendali{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem;margin-top:clamp(1.6rem,4vw,2.4rem);padding:0 1rem}
.ut-panah{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff44;background:#ffffff10;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .25s,transform .25s}
.ut-panah:hover{background:#ffffff26;transform:scale(1.06)}
.ut-tab{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.ut-tab button{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:.35rem .9rem;border-radius:999px;border:1px solid #ffffff2e;background:#ffffff0d;color:#f3ecd6;font:700 .82rem 'DM Sans',sans-serif;cursor:pointer;transition:all .3s}
.ut-tab button i{font:600 .72rem monospace;font-style:normal;color:#d9b765}
.ut-tab button.aktif{background:#d9b765;border-color:#d9b765;color:#081330}
.ut-tab button.aktif i{color:#081330}
.ut-progres{position:relative;height:3px;max-width:240px;margin:1.2rem auto 0;background:#ffffff22;border-radius:3px;overflow:hidden}
.ut-progres span{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#e9c46a}
.ut-progres.jalan span{animation:utIsi var(--durasi,6000ms) linear forwards}
@keyframes utIsi{to{transform:scaleX(1)}}

@media (max-width:820px){
  .ut-item{grid-template-columns:1fr;flex-basis:84vw;gap:1rem;transform-origin:center top}
  .ut-foto{max-width:220px;margin:0 auto}
  .ut-track{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .ut-track,.ut-garis i,.ut-item,.ut-foto{transition:none}
  .ut-progres.jalan span{animation:none}
}