/* ==========================================================================
   TKM HERO — cinematic background transitions
   Layer model:
     .tkm-hero-stage  (z0)  = DYNAMIC. Only this layer ever animates.
     .tkm-hero-scrim  (z1)  = fixed gradient. Never animates, so text contrast
                              stays constant and never "berkedip".
     content          (z20) = STATIC. Text, CTA and indicator box.
   ========================================================================== */

#tkm-hero { --tkm-dwell: 7000ms; --tkm-dur: 1200ms; }

.tkm-hero-stage {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #0C0D11;
}

.tkm-hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, clip-path;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.tkm-hero-slide.is-active  { opacity: 1; visibility: visible; z-index: 2; }
.tkm-hero-slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; }

.tkm-hero-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
  will-change: transform, filter;
  backface-visibility: hidden;
}

/* --- Ken Burns: slow continuous drift while a slide is on screen --------- */
@keyframes tkmKenBurns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.09); }
}
@keyframes tkmKenBurnsDeep {
  from { transform: scale(1.00); }
  to   { transform: scale(1.14); }
}
.tkm-hero-slide.is-active .tkm-hero-img {
  animation: tkmKenBurns var(--tkm-dwell) cubic-bezier(.33, .0, .67, 1) forwards;
}
.tkm-hero-slide.is-active.fx-zoom .tkm-hero-img {
  animation: tkmKenBurnsDeep var(--tkm-dwell) cubic-bezier(.16, .6, .30, 1) forwards;
}

/* --- Random entry effects (one is picked per slide change) --------------- */

/* 1. Smooth crossfade */
.tkm-hero-slide.fx-fade {
  animation: tkmFxFade var(--tkm-dur) cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes tkmFxFade { from { opacity: 0; } to { opacity: 1; } }

/* 2. Dissolve — soft-focus bloom resolving into the photo */
.tkm-hero-slide.fx-dissolve {
  animation: tkmFxDissolve 1500ms cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes tkmFxDissolve {
  from { opacity: 0; filter: blur(16px) saturate(1.35) brightness(1.15); }
  55%  { opacity: .9; filter: blur(5px)  saturate(1.15) brightness(1.06); }
  to   { opacity: 1;  filter: blur(0)    saturate(1)    brightness(1); }
}

/* 3. Wipes — clip-path, no layout shift */
.tkm-hero-slide.fx-wipe-left {
  animation: tkmFxWipeLeft 1150ms cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes tkmFxWipeLeft {
  from { opacity: 1; clip-path: inset(0 0 0 100%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.tkm-hero-slide.fx-wipe-right {
  animation: tkmFxWipeRight 1150ms cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes tkmFxWipeRight {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.tkm-hero-slide.fx-wipe-top {
  animation: tkmFxWipeTop 1200ms cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes tkmFxWipeTop {
  from { opacity: 1; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 4. Slow zoom-in (paired with tkmKenBurnsDeep above) */
.tkm-hero-slide.fx-zoom {
  animation: tkmFxZoom 1400ms cubic-bezier(.16, 1, .30, 1) forwards;
}
@keyframes tkmFxZoom { from { opacity: 0; } to { opacity: 1; } }

/* --- Fixed scrim: never part of the transition -------------------------- */
.tkm-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  /* Lightened: the eyebrow badges and status pills that used to sit over the
     photo are gone, so the scrim no longer has to protect small text. Only
     the left column still carries copy, so the darkness is weighted there. */
  background:
    linear-gradient(to right,
      rgba(12,13,17,.82) 0%,
      rgba(12,13,17,.55) 45%,
      rgba(12,13,17,.15) 100%),
    linear-gradient(to top,
      rgba(12,13,17,.90) 0%,
      rgba(12,13,17,0) 45%,
      rgba(12,13,17,.28) 100%);
}

/* --- STATIC content layer ----------------------------------------------- */
/* Grid-stacking keeps every copy in one cell: container height is the tallest
   child, so swapping content can never shift the layout. */
.tkm-stack { display: grid; }
.tkm-stack > * { grid-area: 1 / 1; }

.tkm-hero-copy,
.tkm-hero-card {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear 520ms;
}
.tkm-hero-copy.is-active,
.tkm-hero-card.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1),
              visibility 0s linear 0s;
}

/* --- Progress-line navigation (replaces arrows + "02 / 05") ------------- */
.tkm-hero-thumb {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tkm-thumb-track {
  display: block;
  position: relative;
  height: 2px;
  margin-bottom: .7rem;
  background: rgba(212, 175, 55, .20);
  overflow: hidden;
}
.tkm-thumb-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0;
  background: linear-gradient(90deg, #996515 0%, #D4AF37 45%, #F5D77F 100%);
  box-shadow: 0 0 10px rgba(245, 215, 127, .75);
}
.tkm-hero-thumb.is-done .tkm-thumb-fill { width: 100%; opacity: .45; }

.tkm-thumb-meta { display: block; }
.tkm-thumb-num {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(156, 163, 175, .8);
  margin-bottom: .15rem;
  transition: color 320ms ease;
}
.tkm-thumb-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(156, 163, 175, .9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 320ms ease;
}
.tkm-hero-thumb:hover .tkm-thumb-label,
.tkm-hero-thumb:hover .tkm-thumb-num { color: #E5E7EB; }
.tkm-hero-thumb.is-active .tkm-thumb-num   { color: #F5D77F; }
.tkm-hero-thumb.is-active .tkm-thumb-label { color: #FFFFFF; font-weight: 800; }
.tkm-hero-thumb:focus-visible { outline: 2px solid #D4AF37; outline-offset: 4px; }

/* --- Pause (hover / hidden tab) ----------------------------------------- */
#tkm-hero.is-paused .tkm-hero-img { animation-play-state: paused; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .tkm-hero-slide,
  .tkm-hero-slide.is-active .tkm-hero-img,
  .tkm-hero-slide.is-active.fx-zoom .tkm-hero-img {
    animation: none !important;
  }
  .tkm-hero-slide.is-active .tkm-hero-img { transform: scale(1.03); }
  .tkm-hero-copy,
  .tkm-hero-card { transition: none; }
}

/* --------------------------------------------------------------------------
   Navigasi hero versi ramping.
   Angka dan nama jurusan dibuang; tersisa garis progress setipis rambut yang
   MENUMPANG di tepi bawah foto (absolute), jadi tidak memakan ruang layout
   dan foto tetap tampil penuh.
   -------------------------------------------------------------------------- */
.tkm-hero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: linear-gradient(to top, rgba(6, 7, 10, .55), rgba(6, 7, 10, 0));
  padding: 2rem 0 0;
  pointer-events: none;
}
.tkm-hero-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem 1.1rem;
  pointer-events: auto;
}

/* tombol sekarang hanya berupa garis */
.tkm-hero-nav .tkm-hero-thumb { padding: 8px 0; }
.tkm-hero-nav .tkm-thumb-track {
  margin-bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, .22);
  transition: background 240ms ease;
}
.tkm-hero-nav .tkm-hero-thumb:hover .tkm-thumb-track {
  background: rgba(255, 255, 255, .38);
}
.tkm-hero-nav .tkm-hero-thumb.is-done .tkm-thumb-fill { opacity: .55; }

@media (max-width: 640px) {
  .tkm-hero-nav-inner { padding: 0 1rem .9rem; gap: 4px; }
  .tkm-hero-nav .tkm-thumb-track { height: 2px; }
}