/**
 * RTM Elements - Advanced Timeline
 *
 * State diatur JS (advanced_timeline.js):
 *   .rkit-tl--ready      : JS aktif. Animasi masuk hanya berlaku setelah ini,
 *                          jadi konten tetap terlihat kalau JS gagal dimuat.
 *   item .is-visible     : sudah masuk viewport (animasi masuk).
 *   item .is-active      : sudah dilewati progress.
 *   item .is-current     : item terakhir yang dilewati.
 * Posisi garis (--rkit-tl-line-*) dihitung JS dari posisi marker.
 */

/* Di Flexbox Container widget defaultnya selebar kontennya. */
.e-con .elementor-widget-rkit-advanced-timeline {
  width: 100%;
}

/*
 * Warna default mengikuti Global Colors Elementor (Site Settings):
 *   Accent    -> progress, marker aktif, highlight
 *   Primary   -> judul
 *   Text      -> deskripsi
 *   Secondary -> label & caption
 * Warna netral (garis, border, ring) diturunkan dari global tsb, dan
 * --rkit-tl-surface (warna latar di belakang widget) dideteksi JS,
 * jadi tetap pas di situs terang maupun gelap.
 */
.rkit-tl {
  --rkit-tl-accent: var(--e-global-color-accent, #ff4d2e);
  --rkit-tl-fg: var(--e-global-color-primary, #17171c);
  --rkit-tl-fg-active: var(--rkit-tl-fg);
  --rkit-tl-text: var(--e-global-color-text, #5d5d68);
  --rkit-tl-label: var(--e-global-color-secondary, #8b8b96);
  --rkit-tl-metric: var(--rkit-tl-accent);
  --rkit-tl-metric-label: var(--rkit-tl-label);
  --rkit-tl-surface: #fff;

  --rkit-tl-line: color-mix(in srgb, var(--rkit-tl-text) 25%, transparent);
  --rkit-tl-fill: var(--rkit-tl-accent);
  --rkit-tl-line-w: 2px;
  --rkit-tl-line-extend: 0;
  --rkit-tl-track-style: solid;

  --rkit-tl-marker: 36px;
  --rkit-tl-marker-icon: 15px;
  --rkit-tl-marker-bw: 1px;
  --rkit-tl-marker-radius: 50%;
  --rkit-tl-marker-bg: var(--rkit-tl-surface);
  --rkit-tl-marker-border: color-mix(in srgb, var(--rkit-tl-text) 35%, transparent);
  --rkit-tl-marker-color: var(--rkit-tl-label);
  --rkit-tl-marker-active-bg: var(--rkit-tl-accent);
  --rkit-tl-marker-active-border: var(--rkit-tl-accent);
  --rkit-tl-marker-active-color: #fff;
  --rkit-tl-ring: color-mix(in srgb, var(--rkit-tl-accent) 20%, transparent);
  --rkit-tl-marker-scale: 1.08;
  --rkit-tl-marker-shift: 0px;

  --rkit-tl-card-bg: color-mix(in srgb, var(--rkit-tl-text) 5%, var(--rkit-tl-surface));
  --rkit-tl-card-border: color-mix(in srgb, var(--rkit-tl-text) 16%, transparent);
  --rkit-tl-card-radius: 14px;
  --rkit-tl-card-max: 100%;
  --rkit-tl-thumb: 64px;
  --rkit-tl-media-h: 180px;
  --rkit-tl-media-radius: 10px;
  --rkit-tl-media-gap: 16px;
  --rkit-tl-content-gap: 6px;

  --rkit-tl-gap: 28px;
  --rkit-tl-gap-x: 28px;
  --rkit-tl-item-w: 320px;
  --rkit-tl-aside-w: 40%;
  --rkit-tl-offset: 0px;
  --rkit-tl-dim: 0.35;

  --rkit-tl-counter-h: 340px;
  --rkit-tl-counter-bg: color-mix(in srgb, var(--rkit-tl-text) 7%, var(--rkit-tl-surface));
  --rkit-tl-counter-color: var(--rkit-tl-fg);
  --rkit-tl-counter-overlay: rgba(0, 0, 0, 0.35);
  --rkit-tl-sticky-bg: var(--rkit-tl-surface);

  --rkit-tl-dur: 700ms;
  --rkit-tl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  color: var(--rkit-tl-text);
  font-size: 15px;
  line-height: 1.5;
}

/* Browser tanpa color-mix(): warna netral statis. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .rkit-tl {
    --rkit-tl-line: rgba(128, 128, 128, 0.3);
    --rkit-tl-marker-border: rgba(128, 128, 128, 0.45);
    --rkit-tl-ring: rgba(128, 128, 128, 0.2);
    --rkit-tl-card-bg: rgba(128, 128, 128, 0.06);
    --rkit-tl-card-border: rgba(128, 128, 128, 0.2);
    --rkit-tl-counter-bg: rgba(128, 128, 128, 0.1);
  }

  .rkit-tl--graphic {
    --rkit-tl-point: rgba(128, 128, 128, 0.8);
    --rkit-tl-overlay: rgba(0, 0, 0, 0.35);
  }
}

.rkit-tl *,
.rkit-tl *::before,
.rkit-tl *::after {
  box-sizing: border-box;
}

.rkit-tl--line-dashed {
  --rkit-tl-track-style: dashed;
}

.rkit-tl--line-dotted {
  --rkit-tl-track-style: dotted;
}

.rkit-tl--mk-dot {
  --rkit-tl-marker: 14px;
  --rkit-tl-marker-bw: 2px;
  --rkit-tl-marker-scale: 1.25;
}

/* ------------------------------------------------------------------ *
 * Track (garis) - posisi & panjang di-set JS
 * ------------------------------------------------------------------ */

.rkit-tl__list {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rkit-tl__item {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rkit-tl__item::before,
.rkit-tl__item::marker {
  content: none;
}

.rkit-tl__track {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.rkit-tl__fill {
  position: absolute;
  display: block;
  background-color: var(--rkit-tl-fill);
  border-radius: var(--rkit-tl-line-w);
  will-change: transform;
}

.rkit-tl-glow-yes .rkit-tl__fill {
  box-shadow: 0 0 12px var(--rkit-tl-fill);
}

/* Lebar 0 + border: border-style bisa dashed/dotted tanpa gambar. */
.rkit-tl--vertical .rkit-tl__track {
  top: var(--rkit-tl-line-start, 0);
  left: var(--rkit-tl-line-cross, calc(var(--rkit-tl-marker) / 2));
  width: 0;
  height: var(--rkit-tl-line-size, 100%);
  border-left: var(--rkit-tl-line-w) var(--rkit-tl-track-style) var(--rkit-tl-line);
  transform: translateX(-50%);
}

.rkit-tl--vertical .rkit-tl__fill {
  top: 0;
  left: calc(var(--rkit-tl-line-w) * -1);
  width: var(--rkit-tl-line-w);
  height: 100%;
  transform: scaleY(0);
  transform-origin: 50% 0;
}

.rkit-tl--horizontal .rkit-tl__track {
  top: var(--rkit-tl-line-cross, calc(var(--rkit-tl-marker) / 2));
  left: var(--rkit-tl-line-start, 0);
  width: var(--rkit-tl-line-size, 100%);
  height: 0;
  border-top: var(--rkit-tl-line-w) var(--rkit-tl-track-style) var(--rkit-tl-line);
  transform: translateY(-50%);
}

.rkit-tl--horizontal .rkit-tl__fill {
  top: calc(var(--rkit-tl-line-w) * -1);
  left: 0;
  width: 100%;
  height: var(--rkit-tl-line-w);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ *
 * Marker
 * ------------------------------------------------------------------ */

.rkit-tl__marker {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--rkit-tl-marker);
  height: var(--rkit-tl-marker);
  color: var(--rkit-tl-marker-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background-color: var(--rkit-tl-marker-bg);
  border: var(--rkit-tl-marker-bw) solid var(--rkit-tl-marker-border);
  border-radius: var(--rkit-tl-marker-radius);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.5s var(--rkit-tl-ease);
}

.rkit-tl__marker-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rkit-tl__marker i {
  font-size: var(--rkit-tl-marker-icon);
}

.rkit-tl__marker svg {
  width: var(--rkit-tl-marker-icon);
  height: var(--rkit-tl-marker-icon);
  fill: currentColor;
}

.rkit-tl__item.is-active .rkit-tl__marker {
  color: var(--rkit-tl-marker-active-color);
  background-color: var(--rkit-tl-marker-active-bg);
  border-color: var(--rkit-tl-marker-active-border);
}

.rkit-tl__item.is-current .rkit-tl__marker {
  box-shadow: 0 0 0 6px var(--rkit-tl-ring);
  transform: scale(var(--rkit-tl-marker-scale));
}

/* ------------------------------------------------------------------ *
 * Card & content
 * ------------------------------------------------------------------ */

.rkit-tl__entry {
  min-width: 0;
  transition:
    opacity var(--rkit-tl-dur) var(--rkit-tl-ease),
    transform var(--rkit-tl-dur) var(--rkit-tl-ease),
    filter var(--rkit-tl-dur) var(--rkit-tl-ease),
    clip-path var(--rkit-tl-dur) var(--rkit-tl-ease);
  transition-delay: var(--rkit-tl-delay, 0ms);
}

.rkit-tl__card {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  background-color: var(--rkit-tl-card-bg);
  border: 1px solid var(--rkit-tl-card-border);
  border-radius: var(--rkit-tl-card-radius);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    opacity 0.5s ease;
}

/*
 * Pointer Arrow (.rkit-tl--arrow): kotak diputar 45deg yang mewarisi
 * background & border kartu (termasuk state Current), lalu dipotong
 * clip-path supaya hanya separuh luarnya yang terlihat. Arah & posisi
 * diatur per layout lewat:
 *   --rkit-tl-arrow-x / -y : titik tengah pointer di tepi kartu
 *   --rkit-tl-arrow-clip   : separuh yang terlihat (menentukan arah)
 */
.rkit-tl {
  --rkit-tl-arrow: 9px;
  --rkit-tl-arrow-x: 0%;
  --rkit-tl-arrow-y: 50%;
  --rkit-tl-arrow-left: polygon(0 0, 0 100%, 100% 100%);
  --rkit-tl-arrow-right: polygon(0 0, 100% 0, 100% 100%);
  --rkit-tl-arrow-up: polygon(0 0, 100% 0, 0 100%);
  --rkit-tl-arrow-down: polygon(100% 0, 100% 100%, 0 100%);
  --rkit-tl-arrow-clip: var(--rkit-tl-arrow-left);
}

.rkit-tl--arrow .rkit-tl__card {
  overflow: visible;
}

.rkit-tl--arrow .rkit-tl__card::before {
  content: "";
  position: absolute;
  top: var(--rkit-tl-arrow-y);
  left: var(--rkit-tl-arrow-x);
  z-index: 1;
  width: calc(var(--rkit-tl-arrow) * 1.4142);
  height: calc(var(--rkit-tl-arrow) * 1.4142);
  background: inherit;
  border: inherit;
  border-radius: 0;
  clip-path: var(--rkit-tl-arrow-clip);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

.rkit-tl--marker-start {
  --rkit-tl-arrow-y: calc(var(--rkit-tl-marker-shift) + var(--rkit-tl-marker) / 2);
}

/* Kartu di kiri garis: pointer di tepi kanan. */
.rkit-tl--vertical-right .rkit-tl__entry,
.rkit-tl--vertical-alternate .rkit-tl__item:nth-child(even) .rkit-tl__entry {
  --rkit-tl-arrow-x: 100%;
  --rkit-tl-arrow-clip: var(--rkit-tl-arrow-right);
}

/* Horizontal: pointer di tepi atas / bawah, sejajar marker. */
.rkit-tl--horizontal .rkit-tl__slot--bottom {
  --rkit-tl-arrow-y: 0%;
  --rkit-tl-arrow-clip: var(--rkit-tl-arrow-up);
}

.rkit-tl--horizontal .rkit-tl__slot--top {
  --rkit-tl-arrow-y: 100%;
  --rkit-tl-arrow-clip: var(--rkit-tl-arrow-down);
}

.rkit-tl--hmarker-center .rkit-tl__slot {
  --rkit-tl-arrow-x: 50%;
}

.rkit-tl--hmarker-start .rkit-tl__slot {
  --rkit-tl-arrow-x: calc(var(--rkit-tl-marker) / 2);
}

.rkit-tl__card--media-left {
  display: flex;
  align-items: center;
  gap: var(--rkit-tl-media-gap);
}

.rkit-tl__card--media-left .rkit-tl__media {
  flex: 0 0 var(--rkit-tl-thumb);
  width: var(--rkit-tl-thumb);
}

.rkit-tl__card--media-left .rkit-tl__content {
  flex: 1 1 auto;
}

.rkit-tl__card--media-left .rkit-tl__img {
  aspect-ratio: 1;
  height: auto;
}

.rkit-tl__card--media-top .rkit-tl__media {
  margin-bottom: var(--rkit-tl-media-gap);
}

.rkit-tl__card--media-bottom .rkit-tl__media {
  margin-top: var(--rkit-tl-media-gap);
}

.rkit-tl__card--media-top .rkit-tl__img,
.rkit-tl__card--media-bottom .rkit-tl__img {
  height: var(--rkit-tl-media-h);
}

.rkit-tl .rkit-tl__img {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--rkit-tl-media-radius);
}

.rkit-tl__content {
  display: flex;
  flex-direction: column;
  gap: var(--rkit-tl-content-gap);
  min-width: 0;
}

.rkit-tl__label {
  color: var(--rkit-tl-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* Dua class supaya mengalahkan `.elementor-kit-XX h4` (Site Settings >
   Typography) yang membuat ukuran & warna judul berubah dan kartu meninggi.
   Font family tetap dari kit; Style > Content > Title tetap bisa menimpa. */
.rkit-tl .rkit-tl__title {
  margin: 0;
  overflow-wrap: break-word;
  color: var(--rkit-tl-fg);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.4s ease;
}

.rkit-tl__item.is-current .rkit-tl__title {
  color: var(--rkit-tl-fg-active);
}

.rkit-tl .rkit-tl__link,
.rkit-tl .rkit-tl__link:hover,
.rkit-tl .rkit-tl__link:focus {
  color: inherit;
  text-decoration: none;
}

.rkit-tl__desc {
  color: var(--rkit-tl-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.rkit-tl__desc p:last-child {
  margin-bottom: 0;
}

.rkit-tl__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: var(--rkit-tl-metric-justify, flex-start);
  gap: 4px 10px;
  margin-top: 6px;
}

.rkit-tl__metric-value {
  color: var(--rkit-tl-metric);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.rkit-tl__metric-label {
  color: var(--rkit-tl-metric-label);
  font-size: 12px;
}

/* Dim: item yang belum dicapai progress */
.rkit-tl--dim .rkit-tl__item:not(.is-active) .rkit-tl__card {
  opacity: var(--rkit-tl-dim);
}

/* ------------------------------------------------------------------ *
 * Card entrance animations (hanya setelah JS siap)
 *
 * Arah "dari garis" diatur variabel per konteks:
 *   --rkit-tl-slide     : geser X dari luar (Vertical, sisi kartu)
 *   --rkit-tl-line-x/y  : geser dari arah garis
 *   --rkit-tl-wipe      : clip-path awal untuk Wipe (sisi garis tertutup)
 *   --rkit-tl-hinge     : transform-origin untuk Flip / Hinge
 *   --rkit-tl-flip      : sudut awal Flip / Hinge
 * ------------------------------------------------------------------ */

.rkit-tl {
  --rkit-tl-slide: 48px;
  --rkit-tl-line-x: 0px;
  --rkit-tl-line-y: 0px;
  --rkit-tl-wipe: inset(-40px -40px 100% -40px);
  --rkit-tl-hinge: 50% 0;
  --rkit-tl-flip: rotateX(-65deg);
}

/* Vertical: kartu di kanan garis (Line Left) */
.rkit-tl--vertical {
  --rkit-tl-line-x: -48px;
  --rkit-tl-wipe: inset(-40px 100% -40px -40px);
}

/* Horizontal: kartu di bawah garis keluar ke bawah, di atas garis ke atas */
.rkit-tl--horizontal .rkit-tl__slot--bottom {
  --rkit-tl-line-y: -40px;
  --rkit-tl-wipe: inset(-40px -40px 100% -40px);
  --rkit-tl-hinge: 50% 0;
  --rkit-tl-flip: rotateX(-75deg);
}

.rkit-tl--horizontal .rkit-tl__slot--top {
  --rkit-tl-line-y: 40px;
  --rkit-tl-wipe: inset(100% -40px -40px -40px);
  --rkit-tl-hinge: 50% 100%;
  --rkit-tl-flip: rotateX(75deg);
}

/* Graphic: label di bawah grafik, "dari garis" = turun dari atas */
.rkit-tl--graphic {
  --rkit-tl-line-y: -28px;
}

.rkit-tl--anim-clip .rkit-tl__entry {
  clip-path: inset(-40px);
}

.rkit-tl--anim-flip .rkit-tl__entry,
.rkit-tl--anim-tilt .rkit-tl__entry {
  transform-origin: var(--rkit-tl-hinge);
}

.rkit-tl--anim-tilt .rkit-tl__entry {
  --rkit-tl-hinge: 0 100%;
}

.rkit-tl--anim-pop .rkit-tl__entry {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rkit-tl--ready.rkit-tl--anim-fade .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
}

.rkit-tl--ready.rkit-tl--anim-fade-up .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
}

.rkit-tl--ready.rkit-tl--anim-fade-down .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: translate3d(0, -36px, 0);
}

.rkit-tl--ready.rkit-tl--anim-slide .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: translate3d(var(--rkit-tl-slide), 0, 0);
}

.rkit-tl--ready.rkit-tl--anim-from-line .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: translate3d(var(--rkit-tl-line-x), var(--rkit-tl-line-y), 0);
}

.rkit-tl--ready.rkit-tl--anim-flip .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: perspective(900px) var(--rkit-tl-flip);
}

.rkit-tl--ready.rkit-tl--anim-tilt .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: translate3d(0, 48px, 0) rotate(-4deg);
}

.rkit-tl--ready.rkit-tl--anim-clip .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  clip-path: var(--rkit-tl-wipe);
}

.rkit-tl--ready.rkit-tl--anim-zoom .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: scale(0.9);
}

.rkit-tl--ready.rkit-tl--anim-pop .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  transform: scale(0.6);
}

.rkit-tl--ready.rkit-tl--anim-blur .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(0, 14px, 0);
}
/* ------------------------------------------------------------------ *
 * Vertical
 * ------------------------------------------------------------------ */

.rkit-tl__list-wrap {
  position: relative;
}

/* ------------------------------------------------------------------ *
 * Box Height: timeline scroll di dalam kotak (.rkit-tl--boxed dari JS)
 * ------------------------------------------------------------------ */

.rkit-tl--boxed .rkit-tl__body {
  padding: 10px 10px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--rkit-tl-line) transparent;
}

/* Ruang di akhir supaya item terakhir bisa mencapai trigger point. */
.rkit-tl--boxed .rkit-tl__list-wrap {
  padding-bottom: var(--rkit-tl-box-pad, 0px);
}

/* Sticky relatif ke kotak, bukan ke layar. */
.rkit-tl--boxed .rkit-tl__aside {
  top: 0;
}

.rkit-tl--vertical .rkit-tl__list {
  display: flex;
  flex-direction: column;
  gap: var(--rkit-tl-gap);
}

.rkit-tl--vertical .rkit-tl__item {
  display: grid;
  grid-template-columns: var(--rkit-tl-marker) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--rkit-tl-gap-x);
}

.rkit-tl--vertical .rkit-tl__marker {
  grid-row: 1;
  grid-column: 1;
}

.rkit-tl--vertical .rkit-tl__entry {
  grid-row: 1;
  grid-column: 2;
  width: 100%;
  max-width: var(--rkit-tl-card-max);
}

.rkit-tl--marker-start .rkit-tl__marker {
  align-self: start;
  margin-top: var(--rkit-tl-marker-shift);
}

.rkit-tl--marker-center .rkit-tl__marker {
  align-self: center;
}

/* Line Right */
.rkit-tl--vertical-right .rkit-tl__item {
  grid-template-columns: minmax(0, 1fr) var(--rkit-tl-marker);
}

.rkit-tl--vertical-right .rkit-tl__marker {
  grid-column: 2;
}

.rkit-tl--vertical-right .rkit-tl__entry {
  grid-column: 1;
  justify-self: end;
}

.rkit-tl--vertical-right {
  --rkit-tl-slide: -48px;
  --rkit-tl-line-x: 48px;
  --rkit-tl-wipe: inset(-40px -40px -40px 100%);
}

/* Alternating */
.rkit-tl--vertical-alternate .rkit-tl__item {
  grid-template-columns: minmax(0, 1fr) var(--rkit-tl-marker) minmax(0, 1fr);
}

.rkit-tl--vertical-alternate .rkit-tl__marker {
  grid-column: 2;
}

.rkit-tl--vertical-alternate .rkit-tl__item:nth-child(odd) .rkit-tl__entry {
  grid-column: 3;
}

.rkit-tl--vertical-alternate .rkit-tl__item:nth-child(even) .rkit-tl__entry {
  grid-column: 1;
  justify-self: end;
  --rkit-tl-slide: -48px;
  --rkit-tl-line-x: 48px;
  --rkit-tl-wipe: inset(-40px -40px -40px 100%);
}

.rkit-tl__opposite {
  grid-row: 1;
  align-self: center;
  min-width: 0;
}

.rkit-tl--marker-start .rkit-tl__opposite {
  align-self: start;
  padding-top: calc(var(--rkit-tl-marker-shift) + var(--rkit-tl-marker) / 2 - 0.7em);
}

.rkit-tl--vertical-alternate .rkit-tl__item:nth-child(odd) .rkit-tl__opposite {
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

.rkit-tl--vertical-alternate .rkit-tl__item:nth-child(even) .rkit-tl__opposite {
  grid-column: 3;
  justify-self: start;
}

.rkit-tl__opposite .rkit-tl__label {
  font-size: 15px;
}

.rkit-tl__item.is-active .rkit-tl__opposite .rkit-tl__label {
  color: var(--rkit-tl-accent);
}

/* ------------------------------------------------------------------ *
 * Vertical - Sticky Counter
 * ------------------------------------------------------------------ */

.rkit-tl--vertical-sticky {
  --rkit-tl-gap: 72px;
  --rkit-tl-card-bg: transparent;
  --rkit-tl-card-border: transparent;
}

.rkit-tl--vertical-sticky .rkit-tl__card {
  padding: 4px 0;
}

.rkit-tl--vertical-sticky .rkit-tl__body {
  display: grid;
  grid-template-columns: var(--rkit-tl-aside-w) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 5vw, 80px);
}

.rkit-tl__aside {
  position: sticky;
  top: max(var(--rkit-tl-offset), calc(var(--rkit-tl-offset) + (100vh - var(--rkit-tl-offset) - var(--rkit-tl-counter-h)) / 2));
  z-index: 3;
}

.rkit-tl__counter {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--rkit-tl-counter-h);
  background-color: var(--rkit-tl-counter-bg);
  border-radius: 18px;
}

.rkit-tl__panels {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

.rkit-tl__panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.rkit-tl__panel.is-current {
  opacity: 1;
}

.rkit-tl .rkit-tl__panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transform: scale(1.08);
  transition: transform 1.2s var(--rkit-tl-ease);
}

.rkit-tl__panel.is-current .rkit-tl__panel-img {
  transform: scale(1);
}

.rkit-tl__panel--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rkit-tl-counter-overlay);
}

.rkit-tl__panel-num {
  position: relative;
  z-index: 1;
  color: var(--rkit-tl-counter-color);
  font-size: clamp(64px, 9vw, 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transform: translate3d(0, 45%, 0);
  transition: transform 0.7s var(--rkit-tl-ease);
}

.rkit-tl__panel.is-before .rkit-tl__panel-num {
  transform: translate3d(0, -45%, 0);
}

.rkit-tl__panel.is-current .rkit-tl__panel-num {
  transform: none;
}

.rkit-tl__panel--image .rkit-tl__panel-num {
  color: #fff;
}

.rkit-tl__counter-meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  color: var(--rkit-tl-label);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rkit-tl__counter-now {
  color: var(--rkit-tl-fg);
  font-weight: 600;
}

.rkit-tl__bar {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  height: 2px;
  background-color: var(--rkit-tl-line);
  border-radius: 2px;
}

.rkit-tl__bar-fill {
  position: absolute;
  inset: 0;
  display: block;
  background-color: var(--rkit-tl-fill);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ *
 * Pinned (Graphic Line)
 * ------------------------------------------------------------------ */

.rkit-tl__pin {
  position: relative;
}

/* Graphic Pinned = freeze: JS menahan scroll halaman saat stage berada di
   posisi pin. Stage tetap di alur normal, jadi tinggi layout tidak berubah. */
.rkit-tl--pinned .rkit-tl__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Horizontal
 * ------------------------------------------------------------------ */

.rkit-tl--horizontal {
  --rkit-tl-gap: 24px;
  --rkit-tl-gap-x: 24px;
  --rkit-tl-item-w: 180px;
}

/* Item melebar mengisi baris; kalau tidak muat, baris bisa digeser. */
.rkit-tl__viewport {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px 0;
  scrollbar-width: thin;
}

.rkit-tl__rail {
  position: relative;
  width: 100%;
}

.rkit-tl--horizontal .rkit-tl__list {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--rkit-tl-gap);
}

.rkit-tl--horizontal .rkit-tl__item {
  display: flex;
  flex: 1 0 var(--rkit-tl-item-w);
  flex-direction: column;
  min-width: 0;
  max-width: calc(100vw - 32px);
}

.rkit-tl--hmarker-start .rkit-tl__marker {
  align-self: flex-start;
}

.rkit-tl--hmarker-center .rkit-tl__marker {
  align-self: center;
}

.rkit-tl__slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rkit-tl--pos-bottom .rkit-tl__slot--top,
.rkit-tl--pos-top .rkit-tl__slot--bottom {
  display: none;
}

.rkit-tl--pos-bottom .rkit-tl__slot--bottom {
  flex: 1 1 auto;
  padding-top: var(--rkit-tl-gap-x);
}

.rkit-tl--pos-top .rkit-tl__slot--top {
  flex: 1 1 auto;
  justify-content: flex-end;
  padding-bottom: var(--rkit-tl-gap-x);
}

/* Grid: dua baris 1fr selalu sama tinggi (setinggi konten terbesar),
   jadi marker semua item sejajar walau kontennya beda sisi. */
.rkit-tl--horizontal.rkit-tl--pos-alternate .rkit-tl__item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

.rkit-tl--pos-alternate .rkit-tl__slot {
  min-height: 0;
}

.rkit-tl--hmarker-start.rkit-tl--pos-alternate .rkit-tl__marker {
  justify-self: start;
}

.rkit-tl--hmarker-center.rkit-tl--pos-alternate .rkit-tl__marker {
  justify-self: center;
}

.rkit-tl--pos-alternate .rkit-tl__slot--top {
  justify-content: flex-end;
  padding-bottom: var(--rkit-tl-gap-x);
}

.rkit-tl--pos-alternate .rkit-tl__slot--bottom {
  padding-top: var(--rkit-tl-gap-x);
}

/* Kartu sama tinggi saat semua konten berada di satu sisi garis. */
.rkit-tl--pos-bottom .rkit-tl__entry,
.rkit-tl--pos-top .rkit-tl__entry {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.rkit-tl--pos-bottom .rkit-tl__card,
.rkit-tl--pos-top .rkit-tl__card {
  flex: 1 1 auto;
}

/* ------------------------------------------------------------------ *
 * Graphic Line
 * ------------------------------------------------------------------ */

.rkit-tl--graphic {
  --rkit-tl-stage-bg: transparent;
  --rkit-tl-idle: var(--rkit-tl-label);
  --rkit-tl-line-w: 1.5px;
  --rkit-tl-point: color-mix(in srgb, var(--rkit-tl-text) 70%, transparent);
  --rkit-tl-marker: 12px;
  --rkit-tl-marker-bw: 1.5px;
  --rkit-tl-marker-border: var(--rkit-tl-point);
  --rkit-tl-marker-active-bg: var(--rkit-tl-fg);
  --rkit-tl-marker-active-border: var(--rkit-tl-fg);
  --rkit-tl-marker-scale: 1.35;
  --rkit-tl-ring: color-mix(in srgb, var(--rkit-tl-accent) 28%, transparent);
  --rkit-tl-overlay: color-mix(in srgb, var(--rkit-tl-surface) 55%, transparent);
  --rkit-tl-bg-opacity: 0.55;
  --rkit-tl-tag-bg: var(--rkit-tl-accent);
  --rkit-tl-tag-color: #fff;
  --rkit-tl-chart-h: 260px;
  --rkit-tl-labels-gap: 40px;
}

/* Tanpa `position` di sini: Pinned memakai sticky dari .rkit-tl--pinned. */
.rkit-tl--graphic:not(.rkit-tl--pinned) .rkit-tl__stage {
  position: relative;
}

.rkit-tl--graphic .rkit-tl__stage {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 4vw, 56px);
  background-color: var(--rkit-tl-stage-bg);
  border-radius: 20px;
}

.rkit-tl--graphic.rkit-tl--pinned .rkit-tl__stage {
  justify-content: space-between;
}

.rkit-tl__bgs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.rkit-tl__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1s ease,
    transform 1.6s var(--rkit-tl-ease);
}

.rkit-tl__bg.is-current {
  opacity: var(--rkit-tl-bg-opacity);
  transform: scale(1);
}

.rkit-tl__overlay {
  position: absolute;
  inset: 0;
  background: var(--rkit-tl-overlay);
}

.rkit-tl__stage-inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
}

.rkit-tl__chart {
  position: relative;
  height: var(--rkit-tl-chart-h);
  margin: 28px 0 var(--rkit-tl-labels-gap);
}

.rkit-tl__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rkit-tl__path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--rkit-tl-line-w);
}

.rkit-tl__path--track {
  stroke: var(--rkit-tl-line);
}

.rkit-tl--line-dashed .rkit-tl__path--track {
  stroke-dasharray: 6 6;
}

.rkit-tl--line-dotted .rkit-tl__path--track {
  stroke-dasharray: 0.1 7;
  stroke-width: calc(var(--rkit-tl-line-w) * 1.6);
}

.rkit-tl__path--fill {
  stroke: var(--rkit-tl-fill);
  stroke-dasharray: 0 99999;
}

.rkit-tl-glow-yes .rkit-tl__path--fill {
  filter: drop-shadow(0 0 6px var(--rkit-tl-fill));
}

.rkit-tl__point {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: var(--rkit-tl-marker);
  height: var(--rkit-tl-marker);
  margin: calc(var(--rkit-tl-marker) / -2) 0 0 calc(var(--rkit-tl-marker) / -2);
}

.rkit-tl__point::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rkit-tl-marker-bg);
  border: var(--rkit-tl-marker-bw) solid var(--rkit-tl-marker-border);
  border-radius: var(--rkit-tl-marker-radius);
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.5s var(--rkit-tl-ease);
}

.rkit-tl__point.is-active::before {
  background-color: var(--rkit-tl-marker-active-bg);
  border-color: var(--rkit-tl-marker-active-border);
}

.rkit-tl__point.is-current::before {
  background-color: var(--rkit-tl-accent);
  border-color: var(--rkit-tl-accent);
  box-shadow: 0 0 0 5px var(--rkit-tl-ring);
  transform: scale(var(--rkit-tl-marker-scale));
}

.rkit-tl__point-tag {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 4px 9px;
  color: var(--rkit-tl-tag-color);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background-color: var(--rkit-tl-tag-bg);
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(-50%, 6px, 0);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--rkit-tl-ease);
  pointer-events: none;
}

.rkit-tl__point.is-current .rkit-tl__point-tag {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.rkit-tl__head {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background-color: var(--rkit-tl-fill);
  border-radius: 50%;
  box-shadow:
    0 0 0 4px var(--rkit-tl-ring),
    0 0 16px var(--rkit-tl-fill);
  pointer-events: none;
  will-change: transform;
}

.rkit-tl__labels {
  display: grid;
  grid-template-columns: repeat(var(--rkit-tl-count, 5), minmax(0, 1fr));
  gap: 16px;
}

.rkit-tl--graphic .rkit-tl__card {
  overflow: visible;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  --rkit-tl-metric-justify: center;
}

/* Inline (bukan flex) supaya ikut text-align dari Labels Alignment. */
.rkit-tl__meta {
  display: block;
  margin-bottom: 10px;
  color: var(--rkit-tl-label);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rkit-tl__index {
  font-weight: 600;
  transition: color 0.4s ease;
}

.rkit-tl__meta .rkit-tl__label {
  margin-left: 6px;
  font-size: inherit;
  letter-spacing: inherit;
}

.rkit-tl__meta .rkit-tl__label::before {
  content: "\2014\00a0";
}

.rkit-tl--graphic .rkit-tl__title {
  font-size: 20px;
  font-weight: 500;
  color: var(--rkit-tl-idle);
}

.rkit-tl--graphic .rkit-tl__item.is-current .rkit-tl__title {
  color: var(--rkit-tl-fg);
}

.rkit-tl--graphic .rkit-tl__item.is-current .rkit-tl__index {
  color: var(--rkit-tl-accent);
}

.rkit-tl--graphic .rkit-tl__desc {
  font-size: 13px;
}

.rkit-tl--graphic .rkit-tl__metric-value {
  font-size: 20px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1024px) {
  /*
   * Horizontal -> daftar vertikal dengan garis di kiri (seperti Vertical
   * Line Left), supaya tidak keluar frame. JS membaca flex-direction list
   * untuk mengukur garis & progress secara vertikal.
   */
  .rkit-tl--horizontal .rkit-tl__viewport {
    overflow: visible;
    padding: 0;
  }

  .rkit-tl--horizontal .rkit-tl__list {
    flex-direction: column;
  }

  .rkit-tl--horizontal .rkit-tl__item,
  .rkit-tl--horizontal.rkit-tl--pos-alternate .rkit-tl__item {
    display: grid;
    flex: none;
    grid-template-rows: none;
    grid-template-columns: var(--rkit-tl-marker) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--rkit-tl-gap-x);
    max-width: none;
  }

  .rkit-tl--horizontal .rkit-tl__marker {
    grid-row: 1;
    grid-column: 1;
  }

  .rkit-tl--horizontal .rkit-tl__slot {
    grid-row: 1;
    grid-column: 2;
    padding: 0;
    --rkit-tl-line-x: -48px;
    --rkit-tl-line-y: 0px;
    --rkit-tl-wipe: inset(-40px 100% -40px -40px);
    --rkit-tl-hinge: 50% 0;
    --rkit-tl-flip: rotateX(-65deg);
    --rkit-tl-arrow-x: 0%;
    --rkit-tl-arrow-clip: var(--rkit-tl-arrow-left);
  }

  .rkit-tl--horizontal .rkit-tl__slot:empty {
    display: none;
  }

  .rkit-tl--hmarker-start .rkit-tl__slot {
    --rkit-tl-arrow-y: calc(var(--rkit-tl-marker) / 2);
  }

  .rkit-tl--hmarker-center .rkit-tl__slot {
    --rkit-tl-arrow-y: 50%;
  }

  .rkit-tl--horizontal .rkit-tl__track {
    top: var(--rkit-tl-line-start, 0);
    left: var(--rkit-tl-line-cross, calc(var(--rkit-tl-marker) / 2));
    width: 0;
    height: var(--rkit-tl-line-size, 100%);
    border-top: 0;
    border-left: var(--rkit-tl-line-w) var(--rkit-tl-track-style) var(--rkit-tl-line);
    transform: translateX(-50%);
  }

  .rkit-tl--horizontal .rkit-tl__fill {
    top: 0;
    left: calc(var(--rkit-tl-line-w) * -1);
    width: var(--rkit-tl-line-w);
    height: 100%;
    transform: scaleY(0);
    transform-origin: 50% 0;
  }

  /* Graphic: label hanya yang aktif (tablet & mobile) */
  .rkit-tl--graphic .rkit-tl__labels {
    grid-template-columns: minmax(0, 1fr);
  }

  .rkit-tl--graphic .rkit-tl__labels .rkit-tl__item {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
      opacity 0.4s ease,
      transform 0.5s var(--rkit-tl-ease),
      visibility 0s linear 0.4s;
  }

  .rkit-tl--graphic .rkit-tl__labels .rkit-tl__item.is-current {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 0.4s ease,
      transform 0.5s var(--rkit-tl-ease),
      visibility 0s;
  }

  /* Sebelum JS siap, tampilkan item pertama */
  .rkit-tl--graphic:not(.rkit-tl--ready) .rkit-tl__labels .rkit-tl__item:first-child {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  /* Alternating -> garis di kiri */
  .rkit-tl--vertical-alternate .rkit-tl__item {
    grid-template-columns: var(--rkit-tl-marker) minmax(0, 1fr);
  }

  .rkit-tl--vertical-alternate .rkit-tl__marker {
    grid-column: 1;
  }

  .rkit-tl--vertical-alternate .rkit-tl__item:nth-child(n) .rkit-tl__entry {
    grid-column: 2;
    justify-self: stretch;
    --rkit-tl-slide: 48px;
    --rkit-tl-line-x: -48px;
    --rkit-tl-wipe: inset(-40px 100% -40px -40px);
    --rkit-tl-arrow-x: 0%;
    --rkit-tl-arrow-clip: var(--rkit-tl-arrow-left);
  }

  /* Label di atas kartu: kartu tidak lagi bersebelahan dengan marker. */
  .rkit-tl--opposite.rkit-tl--arrow .rkit-tl__card::before {
    content: none;
  }

  .rkit-tl--opposite .rkit-tl__item {
    row-gap: 8px;
  }

  .rkit-tl--opposite .rkit-tl__item:nth-child(n) .rkit-tl__opposite {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    align-self: center;
    padding-top: 0;
    text-align: left;
  }

  .rkit-tl--opposite .rkit-tl__item .rkit-tl__entry {
    grid-row: 2;
  }

  .rkit-tl--opposite .rkit-tl__marker {
    grid-row: 1;
    align-self: center;
    margin-top: 0;
  }

  /* Sticky Counter -> panel ringkas menempel di atas */
  .rkit-tl--vertical-sticky {
    --rkit-tl-counter-h: 120px;
    --rkit-tl-gap: 48px;
  }

  .rkit-tl--vertical-sticky .rkit-tl__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .rkit-tl--vertical-sticky .rkit-tl__aside {
    top: var(--rkit-tl-offset);
    padding: 8px 0;
    background-color: var(--rkit-tl-sticky-bg);
  }

  .rkit-tl--vertical-sticky .rkit-tl__panel-num {
    font-size: 48px;
  }

  .rkit-tl--vertical-sticky .rkit-tl__counter-meta {
    padding: 8px 14px;
  }

  .rkit-tl--graphic {
    --rkit-tl-chart-h: 200px;
    --rkit-tl-labels-gap: 24px;
  }
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rkit-tl__entry,
  .rkit-tl__marker,
  .rkit-tl__panel,
  .rkit-tl__panel-num,
  .rkit-tl .rkit-tl__panel-img,
  .rkit-tl__bg,
  .rkit-tl__point::before,
  .rkit-tl__point-tag {
    transition: none !important;
  }

  .rkit-tl--ready .rkit-tl__item:not(.is-visible) .rkit-tl__entry {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* Pesan di editor saat Dynamic Source tidak menemukan post. */
.rkit-tl-empty {
  padding: 16px;
  color: inherit;
  font-size: 13px;
  text-align: center;
  border: 1px dashed currentColor;
  border-radius: 8px;
  opacity: 0.6;
}