/**
 * RTM Elements - Advanced Hero Slider
 *
 * Satu engine untuk semua style. JS hanya mengatur state tiap slide:
 *  - class  : is-active / is-prev / is-next / is-leaving / is-instant
 *  - var    : --rkit-hs-offset  (-2..2, posisi relatif terhadap slide aktif)
 *  - attr   : data-dir="next|prev" di root
 * Semua gerak (fade, geser, clip, berlawanan arah) ditulis di sini per style.
 *
 * Warna memakai CSS custom property supaya default tiap style tetap bisa
 * ditimpa control Elementor ({{WRAPPER}} .rkit-hs { --var: ... }).
 */

/* ------------------------------------------------------------------ *
 * Lebar widget
 *
 * Di Flexbox Container, widget defaultnya selebar kontennya. Isi slider
 * serba absolute sehingga lebarnya bisa kolaps. Pola yang sama dipakai
 * Elementor untuk widget Video/Maps; specificity-nya rendah sehingga
 * Advanced > Width milik pengguna tetap menang.
 * ------------------------------------------------------------------ */

.e-con .elementor-widget-rkit-hero-slider {
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

.rkit-hs {
  --rkit-hs-height: 100vh;
  --rkit-hs-speed: 1200ms;
  --rkit-hs-delay: 6000ms;
  --rkit-hs-ease: cubic-bezier(0.77, 0, 0.175, 1);
  --rkit-hs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rkit-hs-gutter: clamp(20px, 3.6vw, 56px);
  --rkit-hs-bg: #111;
  --rkit-hs-fg: #fff;
  /* Warna teks di atas blok berwarna --rkit-hs-fg (tombol Solid, Frame hover). */
  --rkit-hs-fg-inverse: #111;
  --rkit-hs-muted: rgba(255, 255, 255, 0.72);
  --rkit-hs-overlay-default: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.6) 100%);
  --rkit-hs-overlay-opacity: 1;
  --rkit-hs-content-w: 640px;
  --rkit-hs-desc-w: 42ch;
  --rkit-hs-title-gap: 16px;
  --rkit-hs-group-gap: 24px;
  --rkit-hs-body-gap: 28px;
  --rkit-hs-arrow-size: 48px;
  --rkit-hs-arrow-icon: 18px;
  --rkit-hs-arrow-color: var(--rkit-hs-fg);
  --rkit-hs-arrow-bg: transparent;
  --rkit-hs-arrow-border: rgba(255, 255, 255, 0.4);
  --rkit-hs-arrow-color-h: #111;
  --rkit-hs-arrow-bg-h: #fff;
  --rkit-hs-arrow-border-h: #fff;
  --rkit-hs-arrow-border-w: 1px;
  --rkit-hs-dot-color: rgba(255, 255, 255, 0.4);
  --rkit-hs-dot-active: #fff;
  /* Style > Pagination > Dots. */
  --rkit-hs-dot-size: 7px;
  --rkit-hs-dot-long: 22px;
  --rkit-hs-btn-border-w: 1px;
  --rkit-hs-btn-icon-size: 1em;
  --rkit-hs-btn-icon-gap: 10px;
  --rkit-hs-pagination-offset: var(--rkit-hs-gutter);

  position: relative;
  color: var(--rkit-hs-fg);
}

@supports (height: 100svh) {
  .rkit-hs {
    --rkit-hs-height: 100svh;
  }
}

.rkit-hs:focus-visible {
  outline: 2px solid var(--rkit-hs-dot-active);
  outline-offset: -4px;
}

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

/* ------------------------------------------------------------------ *
 * Base structure
 * ------------------------------------------------------------------ */

.rkit-hs__stage {
  position: relative;
  container-type: inline-size;
  /* Height = tinggi minimum; --rkit-hs-fit-h diisi JS bila teks butuh
     ruang lebih (lihat fit() di advanced_hero_slider.js). */
  height: max(var(--rkit-hs-height), var(--rkit-hs-fit-h, 0px));
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  background: var(--rkit-hs-bg);
  touch-action: pan-y;
}

.rkit-hs__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.rkit-hs__media-item {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--rkit-hs-slide-bg, transparent);
}

/* `.rkit-hs` di depan: Elementor punya `.elementor img { max-width: 100%;
   height: auto; }` (0,1,1) yang kalau tidak dikalahkan membuat gambar
   tidak menutup penuh dan kolom tirai Numbered hanya selebar kolomnya. */
.rkit-hs .rkit-hs__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.rkit-hs__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Ditimpa Style > Container > Overlay Color (classic/gradient) dan
     Overlay Color per slide, keduanya langsung ke elemen ini. */
  background: var(--rkit-hs-overlay-default);
  opacity: var(--rkit-hs-overlay-opacity);
}

.rkit-hs .is-instant,
.rkit-hs .is-instant .rkit-hs__img {
  transition: none !important;
}

/* ---------- Content ---------- */

.rkit-hs__contents {
  position: absolute;
  z-index: 3;
  display: grid;
  pointer-events: none;
}

.rkit-hs__content {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--rkit-hs-group-gap);
  min-width: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--rkit-hs-speed);
}

.rkit-hs__content.is-active {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.rkit-hs__title-group,
.rkit-hs__body-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rkit-hs__title-group {
  gap: var(--rkit-hs-title-gap);
}

.rkit-hs__body-group {
  gap: var(--rkit-hs-body-gap);
}

.rkit-hs__subheading {
  order: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rkit-hs__heading {
  order: 1;
  margin: 0;
  font-size: calc(clamp(34px, 4.4vw, 68px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

.rkit-hs__description {
  order: 0;
  max-width: var(--rkit-hs-desc-w);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}

/* Warna teks ditulis dengan `.rkit-hs` di depan (0,2,0). Global Kit
   Elementor (Site Settings > Typography / Links) menghasilkan
   `.elementor-kit-N h2 { color }` dan `.elementor-kit-N a { color }`
   (0,1,1); tanpa ini control Color widget tidak berpengaruh. Override
   per style (0,2,0) ditulis setelah blok ini, jadi tetap menang. */
.rkit-hs .rkit-hs__subheading {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-sub-color, var(--rkit-hs-muted)));
}

.rkit-hs .rkit-hs__heading {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-heading-color, var(--rkit-hs-fg)));
}

/* Tipografi heading mengikuti Global Kit per tag (Site Settings >
   Typography > H1..H6). Semua aturan tipografi heading per style
   sengaja ber-specificity 0,1,0 (`:where(.rkit-hs--x) .rkit-hs__heading`):
   - kalah dari `.elementor-kit-N h2` (0,1,1)  -> nilai global dipakai;
   - menang dari reset tema `h2` (0,0,1)       -> nilai style jadi fallback
     untuk properti yang tidak diatur global;
   - kalah dari control Typography widget ({{WRAPPER}} ..., 0,4,0).
   Fallback ukuran ikut skala tag; H2 (default) = desain asli. */
h1.rkit-hs__heading {
  --rkit-hs-heading-scale: 1.15;
}

h3.rkit-hs__heading {
  --rkit-hs-heading-scale: 0.8;
}

h4.rkit-hs__heading {
  --rkit-hs-heading-scale: 0.65;
}

h5.rkit-hs__heading {
  --rkit-hs-heading-scale: 0.52;
}

h6.rkit-hs__heading,
p.rkit-hs__heading {
  --rkit-hs-heading-scale: 0.42;
}

.rkit-hs .rkit-hs__description {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-desc-color, var(--rkit-hs-muted)));
}

.rkit-hs__description p {
  margin: 0 0 0.8em;
}

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

.rkit-hs__button-wrap {
  order: 1;
}

/* Satu atau dua tombol (Dual Button). Inline supaya ikut text-align
   konten; baris baru saat tidak muat. */
.rkit-hs__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rkit-hs-btns-gap, 16px 28px);
  max-width: 100%;
  vertical-align: top;
}

/* ---------- Subheading: ikon + Text / Box ---------- */

.rkit-hs__subheading-inner {
  display: inline-flex;
  align-items: center;
  gap: var(--rkit-hs-sub-icon-gap, 0.6em);
  max-width: 100%;
  vertical-align: top;
}

.rkit-hs__subheading-icon {
  display: inline-flex;
  flex: none;
  color: var(--rkit-hs-sub-icon-color, currentColor);
  font-size: var(--rkit-hs-sub-icon-size, 1.2em);
  line-height: 1;
}

.rkit-hs__subheading-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Box default: badge tipis dari warna teks; Style > Subheading menimpa. */
.rkit-hs--sub-box .rkit-hs__subheading-inner {
  padding: 0.55em 1.1em;
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
}

.rkit-hs__content--sub-below .rkit-hs__subheading {
  order: 2;
}

.rkit-hs__content--btn-before .rkit-hs__button-wrap {
  order: -1;
}

/* Deskripsi (max-width) mengikuti alignment konten. */
.rkit-hs__content .rkit-hs__description {
  margin-left: var(--rkit-hs-desc-ml, 0);
  margin-right: var(--rkit-hs-desc-mr, 0);
}

.rkit-hs--spotlight .rkit-hs__content,
.rkit-hs--portfolio .rkit-hs__content {
  --rkit-hs-desc-ml: auto;
  --rkit-hs-desc-mr: auto;
}

/* ---------- Button ---------- */

.rkit-hs__button {
  display: inline-flex;
  align-items: center;
  gap: var(--rkit-hs-btn-icon-gap);
  background: var(--rkit-hs-btn-bg, transparent);
  border: var(--rkit-hs-btn-border-w) solid var(--rkit-hs-btn-border, transparent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Sama seperti teks: kalahkan `.elementor-kit-N a` (0,1,1) dan
   `.elementor-kit-N a:hover` (0,2,1). */
.rkit-hs .rkit-hs__button,
.rkit-hs .rkit-hs__button:visited {
  color: var(--rkit-hs-btn-color, var(--rkit-hs-fg));
}

.rkit-hs .rkit-hs__button:hover,
.rkit-hs .rkit-hs__button:focus-visible {
  color: var(--rkit-hs-btn-color-h, var(--rkit-hs-btn-color, var(--rkit-hs-fg)));
}

.rkit-hs__button:hover,
.rkit-hs__button:focus-visible {
  background: var(--rkit-hs-btn-bg-h, var(--rkit-hs-btn-bg, transparent));
  border-color: var(--rkit-hs-btn-border-h, var(--rkit-hs-btn-border, transparent));
}

.rkit-hs__button-icon {
  display: inline-flex;
  font-size: var(--rkit-hs-btn-icon-size);
  transition: transform 0.35s var(--rkit-hs-ease-out);
}

.rkit-hs__button-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.rkit-hs__button:hover .rkit-hs__button-icon {
  transform: translateX(3px);
}

/* Tombol bergaris bawah (underline) sebagai default. */
.rkit-hs__button-text {
  position: relative;
}

.rkit-hs--elegance .rkit-hs__button-text::after,
.rkit-hs--portfolio .rkit-hs__button-text::after,
.rkit-hs--project .rkit-hs__button-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.5s var(--rkit-hs-ease-out);
}

.rkit-hs--elegance .rkit-hs__button:hover .rkit-hs__button-text::after,
.rkit-hs--portfolio .rkit-hs__button:hover .rkit-hs__button-text::after,
.rkit-hs--project .rkit-hs__button:hover .rkit-hs__button-text::after {
  animation: rkit-hs-underline 0.7s var(--rkit-hs-ease-out);
}

@keyframes rkit-hs-underline {
  0% {
    transform: scaleX(1);
    transform-origin: right;
  }
  45% {
    transform: scaleX(0);
    transform-origin: right;
  }
  55% {
    transform: scaleX(0);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ---------- Button Style (Style > Button > Button Style) ----------
 * Kosong = tampilan bawaan layout. Selain itu root mendapat
 * `.rkit-hs--btn-custom` + `.rkit-hs--btn-{style}`. Warna default tiap
 * style ditulis sebagai variabel di root (0,2,0) sehingga mengalahkan
 * variabel bawaan layout (0,1,0) tetapi tetap kalah dari control warna
 * widget ({{WRAPPER}} .rkit-hs, 0,4,0). Aturan bentuk (0,3,0) mengalahkan
 * padding/radius bawaan layout (0,2,0) tetapi kalah dari control
 * Padding / Border Radius widget.
 */

.rkit-hs.rkit-hs--btn-custom .rkit-hs__button {
  position: relative;
  isolation: isolate;
  transition:
    color 0.45s ease,
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    transform 0.45s var(--rkit-hs-ease-out);
}

/* Matikan garis bawah bawaan layout; style underline menyalakannya lagi. */
.rkit-hs.rkit-hs--btn-custom .rkit-hs__button-text::after {
  content: none;
}

/* Underline & Line Reveal */
.rkit-hs.rkit-hs--btn-underline,
.rkit-hs.rkit-hs--btn-line {
  --rkit-hs-btn-color: var(--rkit-hs-fg);
  --rkit-hs-btn-bg: transparent;
  --rkit-hs-btn-border: transparent;
  --rkit-hs-btn-color-h: var(--rkit-hs-fg);
  --rkit-hs-btn-bg-h: transparent;
  --rkit-hs-btn-border-h: transparent;
}

.rkit-hs.rkit-hs--btn-underline .rkit-hs__button,
.rkit-hs.rkit-hs--btn-line .rkit-hs__button {
  padding: 4px 0 6px;
  border-radius: 0;
}

.rkit-hs.rkit-hs--btn-underline .rkit-hs__button-text::after,
.rkit-hs.rkit-hs--btn-line .rkit-hs__button-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.5s var(--rkit-hs-ease-out);
}

/* Underline: garis tersapu keluar lalu masuk lagi. */
.rkit-hs.rkit-hs--btn-underline .rkit-hs__button:hover .rkit-hs__button-text::after,
.rkit-hs.rkit-hs--btn-underline .rkit-hs__button:focus-visible .rkit-hs__button-text::after {
  animation: rkit-hs-underline 0.7s var(--rkit-hs-ease-out);
}

/* Line Reveal: garis tidak ada, tergambar dari kiri saat hover. */
.rkit-hs.rkit-hs--btn-line .rkit-hs__button-text::after {
  transform: scaleX(0);
}

.rkit-hs.rkit-hs--btn-line .rkit-hs__button:hover .rkit-hs__button-text::after,
.rkit-hs.rkit-hs--btn-line .rkit-hs__button:focus-visible .rkit-hs__button-text::after {
  /* Matikan animasi sapuan milik Elegance/Portfolio/Fixed Project. */
  animation: none;
  transform: scaleX(1);
  transform-origin: left;
}

/* Frame & Pill: garis tepi, isi menyapu masuk saat hover. */
.rkit-hs.rkit-hs--btn-frame,
.rkit-hs.rkit-hs--btn-pill {
  --rkit-hs-btn-color: var(--rkit-hs-fg);
  --rkit-hs-btn-bg: transparent;
  --rkit-hs-btn-border: var(--rkit-hs-fg);
  --rkit-hs-btn-color-h: var(--rkit-hs-fg-inverse);
  --rkit-hs-btn-bg-h: var(--rkit-hs-fg);
  --rkit-hs-btn-border-h: var(--rkit-hs-fg);
}

.rkit-hs.rkit-hs--btn-frame .rkit-hs__button,
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button {
  padding: 15px 30px;
  overflow: hidden;
  border-radius: 0;
}

.rkit-hs.rkit-hs--btn-pill .rkit-hs__button {
  border-radius: 999px;
}

/* Latar tombol tetap; warna hover dibawa lapisan ::before. */
.rkit-hs.rkit-hs--btn-frame .rkit-hs__button:hover,
.rkit-hs.rkit-hs--btn-frame .rkit-hs__button:focus-visible,
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button:hover,
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button:focus-visible {
  background: var(--rkit-hs-btn-bg, transparent);
}

.rkit-hs.rkit-hs--btn-frame .rkit-hs__button::before,
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rkit-hs-btn-bg-h);
  transition: transform 0.55s var(--rkit-hs-ease-out);
}

/* Frame: dari kiri, keluar ke kanan. */
.rkit-hs.rkit-hs--btn-frame .rkit-hs__button::before {
  transform: scaleX(0);
  transform-origin: right;
}

.rkit-hs.rkit-hs--btn-frame .rkit-hs__button:hover::before,
.rkit-hs.rkit-hs--btn-frame .rkit-hs__button:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* Pill: naik dari bawah. */
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button::before {
  transform: scaleY(0);
  transform-origin: bottom;
}

.rkit-hs.rkit-hs--btn-pill .rkit-hs__button:hover::before,
.rkit-hs.rkit-hs--btn-pill .rkit-hs__button:focus-visible::before {
  transform: scaleY(1);
}

/* Solid: blok penuh, hover terangkat dan berbalik jadi garis tepi. */
.rkit-hs.rkit-hs--btn-solid {
  --rkit-hs-btn-color: var(--rkit-hs-fg-inverse);
  --rkit-hs-btn-bg: var(--rkit-hs-fg);
  --rkit-hs-btn-border: var(--rkit-hs-fg);
  --rkit-hs-btn-color-h: var(--rkit-hs-fg);
  --rkit-hs-btn-bg-h: transparent;
  --rkit-hs-btn-border-h: var(--rkit-hs-fg);
}

.rkit-hs.rkit-hs--btn-solid .rkit-hs__button {
  padding: 16px 30px;
  border-radius: 4px;
}

.rkit-hs.rkit-hs--btn-solid .rkit-hs__button:hover,
.rkit-hs.rkit-hs--btn-solid .rkit-hs__button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.5);
}

/* Corner Brackets: dua sudut yang melebar jadi bingkai penuh. */
.rkit-hs.rkit-hs--btn-brackets {
  --rkit-hs-btn-color: var(--rkit-hs-fg);
  --rkit-hs-btn-bg: transparent;
  --rkit-hs-btn-border: transparent;
  --rkit-hs-btn-color-h: var(--rkit-hs-fg);
  --rkit-hs-btn-bg-h: transparent;
  --rkit-hs-btn-border-h: transparent;
}

.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button {
  padding: 15px 28px;
  border-radius: 0;
}

.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button::before,
.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid currentColor;
  pointer-events: none;
  transition: width 0.5s var(--rkit-hs-ease-out), height 0.5s var(--rkit-hs-ease-out);
}

.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button::before {
  top: 0;
  left: 0;
  border-top-width: 1px;
  border-left-width: 1px;
}

.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button::after {
  right: 0;
  bottom: 0;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button:hover::before,
.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button:hover::after,
.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button:focus-visible::before,
.rkit-hs.rkit-hs--btn-brackets .rkit-hs__button:focus-visible::after {
  width: 100%;
  height: 100%;
}

/* ---------- Navigation: arrows + counter ---------- */

.rkit-hs__nav {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rkit-hs__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--rkit-hs-arrow-size);
  height: var(--rkit-hs-arrow-size);
  margin: 0;
  padding: 0;
  color: var(--rkit-hs-arrow-color);
  background: var(--rkit-hs-arrow-bg);
  border: var(--rkit-hs-arrow-border-w) solid var(--rkit-hs-arrow-border);
  border-radius: 50%;
  font-size: var(--rkit-hs-arrow-icon);
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.rkit-hs__arrow:hover,
.rkit-hs__arrow:focus-visible {
  color: var(--rkit-hs-arrow-color-h);
  background: var(--rkit-hs-arrow-bg-h);
  border-color: var(--rkit-hs-arrow-border-h);
}

.rkit-hs__arrow:focus-visible {
  outline: 2px solid var(--rkit-hs-dot-active);
  outline-offset: 3px;
}

.rkit-hs__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.rkit-hs__arrow svg,
.rkit-hs__arrow i {
  width: 1em;
  height: 1em;
  font-size: inherit;
}

.rkit-hs__arrow svg:not([fill="none"]) {
  fill: currentColor;
}

.rkit-hs__counter {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  color: var(--rkit-hs-counter-color, var(--rkit-hs-fg));
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rkit-hs__counter-sep,
.rkit-hs__counter-total {
  color: var(--rkit-hs-counter-total-color, var(--rkit-hs-muted));
}

.rkit-hs__counter-current {
  display: inline-block;
}

.rkit-hs__counter-current.is-changing {
  animation: rkit-hs-counter-in 0.7s var(--rkit-hs-ease-out) both;
}

@keyframes rkit-hs-counter-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.2em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* ---------- Pagination ---------- */

.rkit-hs__pagination {
  --rkit-hs-progress: 1;
  position: absolute;
  z-index: 5;
  display: flex;
}

.rkit-hs__bullet {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  color: var(--rkit-hs-dot-color);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.4s ease;
}

.rkit-hs__bullet:focus-visible {
  outline: 2px solid var(--rkit-hs-dot-active);
  outline-offset: 4px;
}

.rkit-hs__bullet.is-active {
  color: var(--rkit-hs-dot-active);
}

/* Dots */
.rkit-hs__pagination--dots {
  gap: var(--rkit-hs-dot-gap, 4px);
}

/* Area klik minimal 24px, ikut membesar bila dot diperbesar. */
.rkit-hs__pagination--dots .rkit-hs__bullet {
  --_hit: max(
    24px,
    calc(var(--rkit-hs-dot-w, var(--rkit-hs-dot-size)) + 2px),
    calc(var(--rkit-hs-dot-h, var(--rkit-hs-dot-size)) + 2px),
    calc(var(--rkit-hs-dot-w-h, 0px) + 2px),
    calc(var(--rkit-hs-dot-h-h, 0px) + 2px),
    calc(var(--rkit-hs-dot-w-a, var(--rkit-hs-dot-long)) + 2px),
    calc(var(--rkit-hs-dot-h-a, var(--rkit-hs-dot-long)) + 2px)
  );

  align-items: center;
  justify-content: center;
  width: var(--_hit);
  height: var(--_hit);
}

/* Style > Pagination > Dots: ukuran & warna per state lewat variabel
   --rkit-hs-dot-{w,h,bg}[-h|-a]. */
.rkit-hs__bullet-dot {
  --_w: var(--rkit-hs-dot-w, var(--rkit-hs-dot-size));
  --_h: var(--rkit-hs-dot-h, var(--rkit-hs-dot-size));

  display: block;
  width: var(--_w);
  height: var(--_h);
  background-color: var(--rkit-hs-dot-bg, currentColor);
  border-radius: 999px;
  transition:
    width 0.5s var(--rkit-hs-ease-out),
    height 0.5s var(--rkit-hs-ease-out),
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.rkit-hs__bullet:not(.is-active):is(:hover, :focus-visible) .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-h, var(--_w));
  height: var(--rkit-hs-dot-h-h, var(--_h));
  background-color: var(--rkit-hs-dot-bg-h, var(--rkit-hs-dot-bg, currentColor));
}

/* Gradient Normal tidak ikut ke dot aktif; gradient Active tetap menimpa. */
.rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-a, var(--rkit-hs-dot-long));
  height: var(--rkit-hs-dot-h-a, var(--_h));
  background-color: var(--rkit-hs-dot-bg-a, currentColor);
  background-image: none;
}

.rkit-hs--vertical .rkit-hs__pagination--dots {
  flex-direction: column;
}

.rkit-hs--vertical .rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-a, var(--_w));
  height: var(--rkit-hs-dot-h-a, var(--rkit-hs-dot-long));
}

/* Tabs dengan progress */
.rkit-hs__pagination--tabs {
  /* Style > Pagination > Tab Gap (--rkit-hs-tab-gap). */
  gap: var(--rkit-hs-tab-gap, clamp(12px, 2vw, 32px));
}

.rkit-hs__pagination--tabs .rkit-hs__bullet {
  flex: 1 1 0;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 0 0 4px;
}

.rkit-hs__bullet-bar {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: var(--rkit-hs-dot-color);
}

.rkit-hs__bullet-fill {
  position: absolute;
  inset: 0;
  background: var(--rkit-hs-dot-active);
  transform: scaleX(0);
  transform-origin: left;
}

.rkit-hs__bullet.is-done .rkit-hs__bullet-fill {
  transform: scaleX(1);
}

.rkit-hs__bullet.is-active .rkit-hs__bullet-fill {
  transform: scaleX(var(--rkit-hs-progress));
}

.rkit-hs__bullet-label {
  display: block;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Numbers */
.rkit-hs__pagination--numbers {
  gap: 24px;
}

.rkit-hs__bullet-number {
  display: block;
  color: transparent;
  font-size: clamp(40px, 5vw, 88px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  -webkit-text-stroke: 1px currentColor;
  transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease;
}

.rkit-hs__pagination--numbers .rkit-hs__bullet-number {
  -webkit-text-stroke-color: var(--rkit-hs-dot-color);
}

.rkit-hs__pagination--numbers .rkit-hs__bullet.is-active .rkit-hs__bullet-number,
.rkit-hs__pagination--numbers .rkit-hs__bullet:hover .rkit-hs__bullet-number {
  color: var(--rkit-hs-dot-active);
  -webkit-text-stroke-color: var(--rkit-hs-dot-active);
}

.rkit-hs--single .rkit-hs__nav,
.rkit-hs--single .rkit-hs__pagination {
  display: none;
}

/* ---------- Reset <button> dari tema / Elementor Kit ----------
 * Tema (mis. Hello: `button:hover { background-color: ... }`) dan Global
 * Button Kit (`.elementor-kit-N button:hover`) ikut mengenai tombol slider.
 * `.rkit-hs button.x` (0,2,1) dan `:hover` (0,3,1) mengalahkan keduanya,
 * tetapi tetap kalah dari control widget ({{WRAPPER}} ...).
 */

.rkit-hs button.rkit-hs__bullet,
.rkit-hs button.rkit-hs__thumb,
.rkit-hs button.rkit-hs__arrow {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
}

.rkit-hs button.rkit-hs__bullet,
.rkit-hs button.rkit-hs__bullet:hover,
.rkit-hs button.rkit-hs__bullet:focus,
.rkit-hs button.rkit-hs__bullet:active {
  color: var(--rkit-hs-dot-color);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

.rkit-hs button.rkit-hs__bullet:hover,
.rkit-hs button.rkit-hs__bullet:focus-visible,
.rkit-hs button.rkit-hs__bullet.is-active {
  color: var(--rkit-hs-dot-active);
}

.rkit-hs button.rkit-hs__thumb,
.rkit-hs button.rkit-hs__thumb:hover,
.rkit-hs button.rkit-hs__thumb:focus,
.rkit-hs button.rkit-hs__thumb:active {
  background: var(--rkit-hs-slide-bg, rgba(0, 0, 0, 0.06));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rkit-hs button.rkit-hs__arrow,
.rkit-hs button.rkit-hs__arrow:focus,
.rkit-hs button.rkit-hs__arrow:active {
  color: var(--rkit-hs-arrow-color);
  background: var(--rkit-hs-arrow-bg);
  border: var(--rkit-hs-arrow-border-w) solid var(--rkit-hs-arrow-border);
  border-radius: 50%;
  font-size: var(--rkit-hs-arrow-icon);
  line-height: 1;
}

.rkit-hs button.rkit-hs__arrow:hover,
.rkit-hs button.rkit-hs__arrow:focus-visible {
  color: var(--rkit-hs-arrow-color-h);
  background: var(--rkit-hs-arrow-bg-h);
  border-color: var(--rkit-hs-arrow-border-h);
}

/* ------------------------------------------------------------------ *
 * Content reveal (Animate Content)
 *
 * Hanya aktif setelah JS siap (.is-ready), jadi tanpa JS slide pertama
 * tetap tampil utuh.
 * ------------------------------------------------------------------ */

.rkit-hs {
  --rkit-hs-content-delay: calc(var(--rkit-hs-speed) * 0.35);
}

.rkit-hs--anim.is-ready .rkit-hs__subheading,
.rkit-hs--anim.is-ready .rkit-hs__heading:not(.is-split),
.rkit-hs--anim.is-ready .rkit-hs__description,
.rkit-hs--anim.is-ready .rkit-hs__button-wrap {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.35s ease, transform 0s linear 0.35s;
}

.rkit-hs--anim.is-ready .rkit-hs__word-inner {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.35s ease;
}

.rkit-hs--anim.is-ready .rkit-hs__content.is-active .rkit-hs__subheading,
.rkit-hs--anim.is-ready .rkit-hs__content.is-active .rkit-hs__heading:not(.is-split),
.rkit-hs--anim.is-ready .rkit-hs__content.is-active .rkit-hs__description,
.rkit-hs--anim.is-ready .rkit-hs__content.is-active .rkit-hs__button-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--rkit-hs-ease-out), transform 1.1s var(--rkit-hs-ease-out);
  transition-delay: calc(var(--rkit-hs-content-delay) + var(--rkit-hs-step, 0) * 110ms);
}

.rkit-hs--anim.is-ready .rkit-hs__content.is-active .rkit-hs__word-inner {
  transform: none;
  transition: transform 1.1s var(--rkit-hs-ease-out);
  transition-delay: calc(var(--rkit-hs-content-delay) + 110ms + var(--rkit-hs-word, 0) * 45ms);
}

.rkit-hs__subheading {
  --rkit-hs-step: 0;
}

.rkit-hs__heading {
  --rkit-hs-step: 1;
}

.rkit-hs__description {
  --rkit-hs-step: 3;
}

.rkit-hs__button-wrap {
  --rkit-hs-step: 4;
}

.rkit-hs__content--sub-below .rkit-hs__subheading {
  --rkit-hs-step: 2;
}

.rkit-hs__content--btn-before .rkit-hs__button-wrap {
  --rkit-hs-step: 2.5;
}

.rkit-hs__word {
  display: inline-block;
  overflow: hidden;
  /* Ruang untuk descender (g, y, p) agar tidak terpotong mask. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: top;
}

/* ------------------------------------------------------------------ *
 * Transisi media bersama
 * ------------------------------------------------------------------ */

/* Fade: Elegance */
.rkit-hs--elegance .rkit-hs__media-item {
  opacity: 0;
  z-index: 0;
  transition: opacity var(--rkit-hs-speed) var(--rkit-hs-ease-out);
}

.rkit-hs--elegance .rkit-hs__media-item.is-leaving {
  opacity: 1;
  z-index: 1;
  transition: none;
}

.rkit-hs--elegance .rkit-hs__media-item.is-active {
  opacity: 1;
  z-index: 2;
}

/* Ken Burns: zoom-out perlahan selama slide tampil. */
.rkit-hs--kenburns .rkit-hs__media-item .rkit-hs__img {
  transform: scale(1.14);
  transition: none;
}

.rkit-hs--kenburns .rkit-hs__media-item.is-active .rkit-hs__img {
  transform: scale(1);
  transition: transform calc(var(--rkit-hs-delay) + var(--rkit-hs-speed) * 2) cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rkit-hs--kenburns .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: scale(1);
  transition: transform var(--rkit-hs-speed) var(--rkit-hs-ease-out);
}

/* ------------------------------------------------------------------ *
 * 1. Elegance
 * ------------------------------------------------------------------ */

.rkit-hs--elegance {
  --rkit-hs-height: calc(100vh - 32px);
  padding: 16px;
}

@supports (height: 100svh) {
  .rkit-hs--elegance {
    --rkit-hs-height: calc(100svh - 32px);
  }
}

.rkit-hs--elegance .rkit-hs__stage {
  border-radius: 16px;
}

.rkit-hs--elegance .rkit-hs__contents {
  left: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
  bottom: calc(var(--rkit-hs-pagination-offset) + 88px);
}

.rkit-hs--elegance .rkit-hs__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: end;
  column-gap: 48px;
}

.rkit-hs--elegance .rkit-hs__title-group {
  grid-column: 1;
  max-width: var(--rkit-hs-content-w);
}

.rkit-hs--elegance .rkit-hs__body-group {
  grid-column: 2;
  gap: 22px;
}

.rkit-hs--elegance .rkit-hs__description {
  font-size: 15px;
  line-height: 1.55;
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-desc-color, rgba(255, 255, 255, 0.86)));
}

.rkit-hs--elegance .rkit-hs__nav {
  top: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
}

.rkit-hs--elegance .rkit-hs__counter {
  order: -1;
  margin-right: 8px;
}

.rkit-hs--elegance .rkit-hs__pagination {
  left: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
  bottom: var(--rkit-hs-pagination-offset);
}

.rkit-hs--elegance .rkit-hs__pagination--tabs {
  gap: var(--rkit-hs-tab-gap, 0);
}

.rkit-hs--elegance .rkit-hs__pagination--tabs .rkit-hs__bullet-label {
  padding-right: 16px;
}

/* ------------------------------------------------------------------ *
 * 2. Portfolio
 * ------------------------------------------------------------------ */

.rkit-hs--portfolio {
  --rkit-hs-bg: #f3f3f1;
  --rkit-hs-fg: #121212;
  --rkit-hs-fg-inverse: #fff;
  --rkit-hs-muted: rgba(18, 18, 18, 0.62);
  --rkit-hs-overlay-default: transparent;
  --rkit-hs-frame-w: min(44%, 860px);
  --rkit-hs-frame-h: 50%;
  --rkit-hs-frame-top: 15%;
  --rkit-hs-shift: 60cqw;
  --rkit-hs-ghost-blur: 14px;
  --rkit-hs-ghost-opacity: 0.35;
  --rkit-hs-content-w: 900px;
  --rkit-hs-desc-w: 60ch;
  --rkit-hs-thumb-w: clamp(120px, 13vw, 250px);
  --rkit-hs-arrow-border: rgba(18, 18, 18, 0.2);
  --rkit-hs-arrow-color-h: #fff;
  --rkit-hs-arrow-bg-h: #121212;
  --rkit-hs-arrow-border-h: #121212;
  --rkit-hs-dot-color: rgba(18, 18, 18, 0.22);
  --rkit-hs-dot-active: #121212;
}

.rkit-hs--portfolio .rkit-hs__media--frame {
  inset: auto;
  top: var(--rkit-hs-frame-top);
  left: 50%;
  width: var(--rkit-hs-frame-w);
  height: var(--rkit-hs-frame-h);
  transform: translateX(-50%);
}

/* Gambar dan teks satu slide bergerak bersama. Slide tetangga tetap
   terlihat samar (blur) di tepi, lalu menajam saat masuk ke tengah. */
.rkit-hs--portfolio .rkit-hs__media-item,
.rkit-hs--portfolio .rkit-hs__content {
  opacity: 0;
  filter: blur(var(--rkit-hs-ghost-blur));
  transform: translate3d(calc(var(--rkit-hs-offset) * var(--rkit-hs-shift)), 0, 0);
  transition:
    transform var(--rkit-hs-speed) var(--rkit-hs-ease),
    filter var(--rkit-hs-speed) var(--rkit-hs-ease),
    opacity var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--portfolio .rkit-hs__media-item.is-prev,
.rkit-hs--portfolio .rkit-hs__media-item.is-next,
.rkit-hs--portfolio .rkit-hs__content.is-prev,
.rkit-hs--portfolio .rkit-hs__content.is-next {
  opacity: var(--rkit-hs-ghost-opacity);
}

.rkit-hs--portfolio .rkit-hs__media-item.is-active,
.rkit-hs--portfolio .rkit-hs__content.is-active {
  opacity: 1;
  filter: blur(0);
}

.rkit-hs--portfolio .rkit-hs__content {
  visibility: visible;
}

/* Teks ikut bergeser bersama slide, jadi reveal per kata tidak dipakai. */
.rkit-hs--portfolio.rkit-hs--anim.is-ready .rkit-hs__content .rkit-hs__subheading,
.rkit-hs--portfolio.rkit-hs--anim.is-ready .rkit-hs__content .rkit-hs__heading,
.rkit-hs--portfolio.rkit-hs--anim.is-ready .rkit-hs__content .rkit-hs__description,
.rkit-hs--portfolio.rkit-hs--anim.is-ready .rkit-hs__content .rkit-hs__button-wrap,
.rkit-hs--portfolio.rkit-hs--anim.is-ready .rkit-hs__content .rkit-hs__word-inner {
  opacity: 1;
  transform: none;
  transition: none;
}

.rkit-hs--portfolio .rkit-hs__contents {
  top: calc(var(--rkit-hs-frame-top) + var(--rkit-hs-frame-h) + 28px);
  left: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
  justify-items: center;
}

.rkit-hs--portfolio .rkit-hs__content {
  max-width: var(--rkit-hs-content-w);
  gap: 12px;
  text-align: center;
  --rkit-hs-title-gap: 14px;
  --rkit-hs-body-gap: 18px;
}

:where(.rkit-hs--portfolio) .rkit-hs__heading {
  font-size: calc(clamp(28px, 3vw, 54px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 500;
  line-height: 1.05;
}

.rkit-hs--portfolio .rkit-hs__subheading {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-sub-color, var(--rkit-hs-fg)));
  font-size: 11px;
}

.rkit-hs--portfolio .rkit-hs__description {
  font-size: 14px;
}

.rkit-hs--portfolio .rkit-hs__thumbs {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.rkit-hs__thumb {
  position: absolute;
  width: var(--rkit-hs-thumb-w);
  aspect-ratio: 8 / 5;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--rkit-hs-slide-bg, rgba(0, 0, 0, 0.06));
  border: 0;
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.8s var(--rkit-hs-ease-out);
}

.rkit-hs__thumb.is-prev {
  left: var(--rkit-hs-gutter);
  bottom: var(--rkit-hs-gutter);
}

.rkit-hs__thumb.is-next {
  top: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
}

/* Thumbnail yang sedang tidak dipakai tetap di posisi terakhirnya
   saat memudar, supaya tidak "terbang" melintasi layar. */
.rkit-hs__thumb:not(.is-prev):not(.is-next) {
  top: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
}

.rkit-hs__thumb.is-prev,
.rkit-hs__thumb.is-next {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition-delay: calc(var(--rkit-hs-speed) * 0.4);
}

.rkit-hs__thumb .rkit-hs__img {
  transition: transform 0.8s var(--rkit-hs-ease-out);
}

.rkit-hs__thumb:hover .rkit-hs__img {
  transform: scale(1.06);
}

.rkit-hs--portfolio .rkit-hs__nav {
  inset: 0;
  pointer-events: none;
}

.rkit-hs--portfolio .rkit-hs__nav > * {
  pointer-events: auto;
}

.rkit-hs--portfolio .rkit-hs__counter {
  position: absolute;
  top: var(--rkit-hs-gutter);
  left: var(--rkit-hs-gutter);
  color: var(--rkit-hs-counter-color, var(--rkit-hs-fg));
  font-size: clamp(48px, 5.2vw, 96px);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.rkit-hs--portfolio .rkit-hs__counter {
  gap: 0.12em;
}

.rkit-hs--portfolio .rkit-hs__counter-sep,
.rkit-hs--portfolio .rkit-hs__counter-total {
  font-size: 0.32em;
}

.rkit-hs--portfolio .rkit-hs__arrow {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--rkit-hs-arrow-size) / -2);
}

.rkit-hs--portfolio .rkit-hs__arrow--prev {
  left: var(--rkit-hs-gutter);
}

.rkit-hs--portfolio .rkit-hs__arrow--next {
  right: var(--rkit-hs-gutter);
}

.rkit-hs--portfolio .rkit-hs__pagination {
  left: 50%;
  bottom: calc(var(--rkit-hs-pagination-offset) - 8px);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ *
 * 3. Dual Layer
 * ------------------------------------------------------------------ */

.rkit-hs--dual {
  --rkit-hs-bg: #0b0b0b;
  --rkit-hs-content-delay: calc(var(--rkit-hs-speed) * 0.5);
  --rkit-hs-card-w: 40%;
  --rkit-hs-card-h: 60%;
  --rkit-hs-blur: 16px;
  --rkit-hs-overlay-default: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 55%, rgba(0, 0, 0, 0.25) 100%);
  --rkit-hs-arrow-size: 44px;
  --rkit-hs-arrow-bg: rgba(0, 0, 0, 0.25);
  --rkit-hs-btn-color: #111;
  --rkit-hs-btn-bg: #fff;
  --rkit-hs-btn-border: #fff;
  --rkit-hs-btn-color-h: #fff;
  --rkit-hs-btn-bg-h: transparent;
  --rkit-hs-btn-border-h: #fff;
}

/* Keadaan diam: tersembunyi, gambar sedikit diperbesar (untuk zoom-out saat masuk). */
.rkit-hs--dual .rkit-hs__media-item,
.rkit-hs--dual .rkit-hs__card {
  z-index: 0;
  opacity: 0;
  clip-path: inset(0);
  transition: none;
}

.rkit-hs--dual .rkit-hs__media-item .rkit-hs__img,
.rkit-hs--dual .rkit-hs__card .rkit-hs__img {
  transform: scale(1.12);
  transition: none;
}

/* Keluar: background terhapus dari bawah ke atas, kartu runtuh ke bawah. */
.rkit-hs--dual .rkit-hs__media-item.is-leaving,
.rkit-hs--dual .rkit-hs__card.is-leaving {
  z-index: 2;
  opacity: 1;
  transition: clip-path calc(var(--rkit-hs-speed) * 0.55) var(--rkit-hs-ease);
}

.rkit-hs--dual .rkit-hs__media-item.is-leaving {
  clip-path: inset(0 0 100% 0);
}

.rkit-hs--dual .rkit-hs__card.is-leaving {
  clip-path: inset(100% 0 0 0);
}

.rkit-hs--dual[data-dir="prev"] .rkit-hs__media-item.is-leaving {
  clip-path: inset(100% 0 0 0);
}

.rkit-hs--dual[data-dir="prev"] .rkit-hs__card.is-leaving {
  clip-path: inset(0 0 100% 0);
}

/* Varian arah horizontal. */
.rkit-hs--dual.rkit-hs--wipe-x .rkit-hs__media-item.is-leaving {
  clip-path: inset(0 100% 0 0);
}

.rkit-hs--dual.rkit-hs--wipe-x .rkit-hs__card.is-leaving {
  clip-path: inset(0 0 0 100%);
}

.rkit-hs--dual.rkit-hs--wipe-x[data-dir="prev"] .rkit-hs__media-item.is-leaving {
  clip-path: inset(0 0 0 100%);
}

.rkit-hs--dual.rkit-hs--wipe-x[data-dir="prev"] .rkit-hs__card.is-leaving {
  clip-path: inset(0 100% 0 0);
}

.rkit-hs--dual .rkit-hs__media-item.is-leaving .rkit-hs__img,
.rkit-hs--dual .rkit-hs__card.is-leaving .rkit-hs__img {
  transform: scale(1);
}

/* Masuk: muncul setelah slide lama hampir hilang, lalu zoom-out perlahan. */
.rkit-hs--dual .rkit-hs__media-item.is-active,
.rkit-hs--dual .rkit-hs__card.is-active {
  z-index: 1;
  opacity: 1;
  transition: opacity calc(var(--rkit-hs-speed) * 0.3) ease calc(var(--rkit-hs-speed) * 0.45);
}

.rkit-hs--dual .rkit-hs__media-item.is-active .rkit-hs__img,
.rkit-hs--dual .rkit-hs__card.is-active .rkit-hs__img {
  transform: scale(1);
  transition: transform calc(var(--rkit-hs-speed) * 1.4) var(--rkit-hs-ease-out) calc(var(--rkit-hs-speed) * 0.45);
}

.rkit-hs--dual.rkit-hs--blur .rkit-hs__media .rkit-hs__img {
  filter: blur(var(--rkit-hs-blur));
  scale: 1.12;
}

.rkit-hs__cards {
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 50%;
  width: var(--rkit-hs-card-w);
  height: var(--rkit-hs-card-h);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
}

.rkit-hs__card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--rkit-hs-slide-bg, #222);
}

.rkit-hs--dual .rkit-hs__contents {
  left: var(--rkit-hs-gutter);
  bottom: calc(var(--rkit-hs-pagination-offset) + 44px);
  width: max(280px, min(var(--rkit-hs-content-w), calc(50% - var(--rkit-hs-card-w) / 2 - var(--rkit-hs-gutter) - 24px)));
}

:where(.rkit-hs--dual) .rkit-hs__heading {
  font-size: calc(clamp(30px, 3vw, 52px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.rkit-hs--dual .rkit-hs__description {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-desc-color, rgba(255, 255, 255, 0.9)));
  font-size: 17px;
}

.rkit-hs--dual .rkit-hs__button {
  padding: 15px 28px;
  border-radius: 999px;
  letter-spacing: 0.18em;
}

.rkit-hs--dual .rkit-hs__nav {
  inset: 0;
  pointer-events: none;
}

.rkit-hs--dual .rkit-hs__nav > * {
  pointer-events: auto;
}

.rkit-hs--dual .rkit-hs__arrow {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--rkit-hs-arrow-size) / -2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rkit-hs--dual .rkit-hs__arrow--prev {
  left: var(--rkit-hs-gutter);
}

.rkit-hs--dual .rkit-hs__arrow--next {
  right: var(--rkit-hs-gutter);
}

.rkit-hs--dual .rkit-hs__counter {
  position: absolute;
  right: var(--rkit-hs-gutter);
  bottom: var(--rkit-hs-pagination-offset);
  font-size: 18px;
  font-weight: 700;
}

.rkit-hs--dual .rkit-hs__pagination {
  left: 50%;
  bottom: calc(var(--rkit-hs-pagination-offset) - 6px);
  transform: translateX(-50%);
}

.rkit-hs--dual .rkit-hs__pagination--tabs {
  width: min(560px, 50%);
}

/* ------------------------------------------------------------------ *
 * 4. Spotlight
 * ------------------------------------------------------------------ */

.rkit-hs--spotlight {
  --rkit-hs-overlay-default: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Reveal dari bawah (next) / atas (prev) + zoom-out gambar. */
.rkit-hs--spotlight .rkit-hs__media-item {
  z-index: 0;
  clip-path: inset(100% 0 0 0);
  transition: none;
}

.rkit-hs--spotlight[data-dir="prev"] .rkit-hs__media-item {
  clip-path: inset(0 0 100% 0);
}

.rkit-hs--spotlight .rkit-hs__media-item.is-leaving {
  z-index: 1;
  clip-path: inset(0);
}

.rkit-hs--spotlight .rkit-hs__media-item.is-active {
  z-index: 2;
  clip-path: inset(0);
  transition: clip-path var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--spotlight:not(.rkit-hs--kenburns) .rkit-hs__media-item .rkit-hs__img {
  transform: scale(1.3);
  transition: none;
}

.rkit-hs--spotlight:not(.rkit-hs--kenburns) .rkit-hs__media-item.is-active .rkit-hs__img,
.rkit-hs--spotlight:not(.rkit-hs--kenburns) .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: scale(1);
  transition: transform calc(var(--rkit-hs-speed) * 1.5) var(--rkit-hs-ease-out);
}

.rkit-hs--spotlight .rkit-hs__media-item.is-leaving .rkit-hs__img {
  filter: brightness(0.6);
  transition: filter var(--rkit-hs-speed) ease, transform var(--rkit-hs-speed) var(--rkit-hs-ease-out);
}

.rkit-hs--spotlight .rkit-hs__contents {
  inset: 0;
  padding: calc(var(--rkit-hs-gutter) + 60px) var(--rkit-hs-gutter);
  place-items: center;
}

.rkit-hs--spotlight .rkit-hs__content {
  max-width: min(var(--rkit-hs-content-w), 100%);
  align-items: stretch;
  text-align: center;
  --rkit-hs-group-gap: 20px;
}

.rkit-hs--spotlight {
  --rkit-hs-content-w: 1000px;
}

:where(.rkit-hs--spotlight) .rkit-hs__heading {
  font-size: calc(clamp(44px, 6.8vw, 120px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.rkit-hs--spotlight .rkit-hs__description {
  font-size: 17px;
  font-weight: 500;
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-desc-color, rgba(255, 255, 255, 0.85)));
}

.rkit-hs--spotlight .rkit-hs__button {
  padding: 14px 26px;
  border-radius: 999px;
  border-color: var(--rkit-hs-btn-border, rgba(255, 255, 255, 0.5));
}

.rkit-hs--spotlight .rkit-hs__button:hover {
  color: var(--rkit-hs-btn-color-h, #111);
  background: var(--rkit-hs-btn-bg-h, #fff);
  border-color: var(--rkit-hs-btn-border-h, #fff);
}

.rkit-hs--spotlight .rkit-hs__nav {
  inset: 0;
  pointer-events: none;
}

.rkit-hs--spotlight .rkit-hs__nav > * {
  pointer-events: auto;
}

.rkit-hs--spotlight .rkit-hs__counter {
  position: absolute;
  top: var(--rkit-hs-gutter);
  left: var(--rkit-hs-gutter);
  font-size: 17px;
  font-weight: 700;
}

.rkit-hs--spotlight .rkit-hs__arrow {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--rkit-hs-arrow-size) / -2);
}

.rkit-hs--spotlight .rkit-hs__arrow--prev {
  left: var(--rkit-hs-gutter);
}

.rkit-hs--spotlight .rkit-hs__arrow--next {
  right: var(--rkit-hs-gutter);
}

.rkit-hs--spotlight .rkit-hs__pagination {
  left: 50%;
  bottom: var(--rkit-hs-pagination-offset);
  width: min(960px, calc(100% - var(--rkit-hs-gutter) * 2));
  transform: translateX(-50%);
  justify-content: center;
}

.rkit-hs--spotlight .rkit-hs__pagination--tabs .rkit-hs__bullet {
  flex: 0 1 120px;
  gap: 10px;
}

.rkit-hs--spotlight .rkit-hs__pagination--tabs .rkit-hs__bullet-bar {
  order: 2;
}

.rkit-hs--spotlight .rkit-hs__pagination--tabs .rkit-hs__bullet-label {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* ------------------------------------------------------------------ *
 * 5. Numbered
 * ------------------------------------------------------------------ */

.rkit-hs--numbered {
  --rkit-hs-bg: #0e1515;
  --rkit-hs-content-delay: var(--rkit-hs-speed);
  --rkit-hs-strip-dur: calc(var(--rkit-hs-speed) * 0.4);
  --rkit-hs-strip-stagger: calc(var(--rkit-hs-speed) * 0.05);
  --rkit-hs-number-stroke: rgba(255, 255, 255, 0.6);
  --rkit-hs-cols: 5;
  --rkit-hs-lines-color: rgba(255, 255, 255, 0.22);
  --rkit-hs-overlay-default: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
  --rkit-hs-numbers-h: clamp(90px, 13vh, 150px);
  --rkit-hs-btn-border: rgba(255, 255, 255, 0.6);
  --rkit-hs-btn-color-h: #111;
  --rkit-hs-btn-bg-h: #fff;
  --rkit-hs-btn-border-h: #fff;
}

.rkit-hs__lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--rkit-hs-cols), minmax(0, 1fr));
  pointer-events: none;
}

.rkit-hs__line + .rkit-hs__line {
  border-left: 1px solid var(--rkit-hs-lines-color);
}

.rkit-hs.is-ready .rkit-hs__line {
  transform-origin: top;
  animation: rkit-hs-line 1.6s var(--rkit-hs-ease-out) both;
}

.rkit-hs.is-ready .rkit-hs__line:nth-child(2) { animation-delay: 0.08s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(3) { animation-delay: 0.16s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(4) { animation-delay: 0.24s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(5) { animation-delay: 0.32s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(6) { animation-delay: 0.4s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(7) { animation-delay: 0.48s; }
.rkit-hs.is-ready .rkit-hs__line:nth-child(8) { animation-delay: 0.56s; }

@keyframes rkit-hs-line {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Kolom tirai: gambar dipotong per kolom, tiap kolom punya delay sendiri. */
.rkit-hs--numbered .rkit-hs__media-item {
  z-index: 0;
}

.rkit-hs--numbered .rkit-hs__media-item.is-active {
  z-index: 1;
}

.rkit-hs--numbered .rkit-hs__media-item.is-leaving {
  z-index: 2;
}

.rkit-hs__strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * 100cqw / var(--rkit-hs-cols));
  /* +1px menutup celah sub-pixel antar kolom. */
  width: calc(100cqw / var(--rkit-hs-cols) + 1px);
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: none;
}

.rkit-hs__strip .rkit-hs__img {
  position: absolute;
  top: 0;
  left: calc(var(--i) * -100cqw / var(--rkit-hs-cols));
  width: 100cqw;
  height: 100%;
}

.rkit-hs__strip .rkit-hs__overlay {
  left: calc(var(--i) * -100cqw / var(--rkit-hs-cols));
  right: auto;
  width: 100cqw;
}

.rkit-hs--numbered[data-dir="prev"] .rkit-hs__strip {
  clip-path: inset(0 0 0 100%);
}

/* Keluar: tiap kolom menyusut ke kanan, bergantian dari kiri. */
.rkit-hs--numbered .rkit-hs__media-item.is-leaving .rkit-hs__strip {
  clip-path: inset(0 0 0 100%);
  transition: clip-path var(--rkit-hs-strip-dur) var(--rkit-hs-ease) calc(var(--i) * var(--rkit-hs-strip-stagger));
}

.rkit-hs--numbered[data-dir="prev"] .rkit-hs__media-item.is-leaving .rkit-hs__strip {
  clip-path: inset(0 100% 0 0);
  transition-delay: calc(var(--ri) * var(--rkit-hs-strip-stagger));
}

/* Masuk: tiap kolom tumbuh dari kiri, setelah layar sempat gelap. */
.rkit-hs--numbered .rkit-hs__media-item.is-active .rkit-hs__strip {
  clip-path: inset(0);
  transition: clip-path var(--rkit-hs-strip-dur) var(--rkit-hs-ease) calc(var(--rkit-hs-speed) * 0.62 + var(--i) * var(--rkit-hs-strip-stagger));
}

.rkit-hs--numbered[data-dir="prev"] .rkit-hs__media-item.is-active .rkit-hs__strip {
  transition-delay: calc(var(--rkit-hs-speed) * 0.62 + var(--ri) * var(--rkit-hs-strip-stagger));
}

.rkit-hs .is-instant .rkit-hs__strip {
  transition: none !important;
}

/* Angka outline raksasa: aktif di kolom kanan-tengah, tetangga di tepi. */
.rkit-hs__bignumbers {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.rkit-hs__bignumber {
  position: absolute;
  left: 0;
  bottom: 6%;
  color: transparent;
  font-size: clamp(140px, 38vh, 440px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  line-height: 0.8;
  opacity: 0;
  -webkit-text-stroke: 1px var(--rkit-hs-number-stroke);
  transform: translate3d(calc(62cqw + var(--rkit-hs-offset) * 60cqw), 0, 0);
  transition:
    transform calc(var(--rkit-hs-speed) * 0.9) var(--rkit-hs-ease),
    opacity calc(var(--rkit-hs-speed) * 0.6) ease;
}

.rkit-hs__bignumber.is-active {
  opacity: 1;
}

.rkit-hs__bignumber.is-prev {
  opacity: 0.35;
  transform: translate3d(1cqw, 0, 0);
}

.rkit-hs__bignumber.is-next {
  opacity: 0.35;
  transform: translate3d(92cqw, 0, 0);
}

.rkit-hs--numbered .rkit-hs__contents {
  top: 0;
  bottom: 0;
  left: calc(100% / var(--rkit-hs-cols));
  width: max(calc(100% / var(--rkit-hs-cols) * 2), min(480px, 100%));
  padding: var(--rkit-hs-gutter) var(--rkit-hs-gutter) var(--rkit-hs-gutter) clamp(16px, 1.6vw, 28px);
  align-content: center;
}

.rkit-hs--numbered:has(.rkit-hs__pagination--numbers:not(.rkit-hs__pagination--custom)) .rkit-hs__contents {
  bottom: var(--rkit-hs-numbers-h);
}

:where(.rkit-hs--numbered) .rkit-hs__heading {
  font-size: calc(clamp(36px, 4.4vw, 76px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 500;
  line-height: 1.04;
}

.rkit-hs--numbered .rkit-hs__subheading {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-sub-color, rgba(255, 255, 255, 0.85)));
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.rkit-hs--numbered .rkit-hs__button {
  padding: 16px 26px;
}

.rkit-hs--numbered .rkit-hs__nav {
  top: var(--rkit-hs-gutter);
  right: var(--rkit-hs-gutter);
}

.rkit-hs--numbered .rkit-hs__counter {
  order: -1;
  margin-right: 8px;
}

.rkit-hs--numbered .rkit-hs__pagination {
  left: 0;
  right: 0;
  bottom: 0;
}

.rkit-hs--numbered .rkit-hs__pagination--numbers {
  display: grid;
  grid-template-columns: repeat(var(--rkit-hs-cols), minmax(0, 1fr));
  gap: 0;
  min-height: var(--rkit-hs-numbers-h);
  align-items: end;
}

.rkit-hs--numbered .rkit-hs__pagination--numbers .rkit-hs__bullet {
  height: 100%;
  align-items: flex-end;
  padding: 0 clamp(20px, 2.4vw, 40px) clamp(18px, 3vh, 34px);
}

.rkit-hs--numbered .rkit-hs__pagination--numbers .rkit-hs__bullet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rkit-hs-dot-active);
  transform: scaleX(0);
  transform-origin: left;
}

.rkit-hs--numbered .rkit-hs__pagination--numbers .rkit-hs__bullet.is-active::before {
  transform: scaleX(var(--rkit-hs-progress));
}

.rkit-hs--numbered .rkit-hs__pagination--dots {
  left: 50%;
  right: auto;
  bottom: calc(var(--rkit-hs-pagination-offset) - 8px);
  transform: translateX(-50%);
}

.rkit-hs--numbered .rkit-hs__pagination--tabs {
  left: calc(100% / var(--rkit-hs-cols) + clamp(16px, 1.6vw, 28px));
  right: var(--rkit-hs-gutter);
  bottom: var(--rkit-hs-pagination-offset);
}

/* ------------------------------------------------------------------ *
 * 6. Fixed Project
 *
 * Bingkai gambar tetap di kiri. Slide baru di-reveal dari kanan (atau
 * kiri saat prev) sambil zoom-out, slide lama bergeser pelan ke kiri
 * sambil sedikit membesar (parallax). Kolom sempit di tepi kanan
 * menampilkan pratinjau slide berikutnya. Panel teks transparan berada
 * di antara keduanya, heading menumpang di atas gambar.
 * ------------------------------------------------------------------ */

.rkit-hs--project {
  --rkit-hs-bg: #e6e5e1;
  --rkit-hs-fg: #111;
  --rkit-hs-fg-inverse: #fff;
  --rkit-hs-muted: rgba(17, 17, 17, 0.7);
  --rkit-hs-overlay-default: transparent;
  --rkit-hs-project-w: 64%;
  --rkit-hs-peek-w: 11%;
  --rkit-hs-project-top: 6%;
  --rkit-hs-project-bottom: 16%;
  --rkit-hs-project-space: clamp(20px, 2.2vw, 36px);
  --rkit-hs-project-zoom: 1.35;
  --rkit-hs-overlap: clamp(40px, 8vw, 140px);
  --rkit-hs-arrow-size: 56px;
  --rkit-hs-arrow-icon: 30px;
  --rkit-hs-arrow-bg: transparent;
  --rkit-hs-arrow-border: transparent;
  --rkit-hs-arrow-color-h: #111;
  --rkit-hs-arrow-bg-h: transparent;
  --rkit-hs-arrow-border-h: transparent;
  --rkit-hs-dot-color: rgba(17, 17, 17, 0.25);
  --rkit-hs-dot-active: #111;
}

.rkit-hs--project .rkit-hs__media {
  inset: auto;
  top: var(--rkit-hs-project-top);
  bottom: var(--rkit-hs-project-bottom);
  left: var(--rkit-hs-gutter);
  width: var(--rkit-hs-project-w);
  overflow: hidden;
}

.rkit-hs--project .rkit-hs__media--peek {
  left: auto;
  right: 0;
  width: var(--rkit-hs-peek-w);
}

/* Diam: tersembunyi di tepi kanan (next) / kiri (prev), gambar diperbesar. */
.rkit-hs--project .rkit-hs__media-item {
  z-index: 0;
  clip-path: inset(0 0 0 100%);
  transition: none;
}

.rkit-hs--project[data-dir="prev"] .rkit-hs__media-item {
  clip-path: inset(0 100% 0 0);
}

.rkit-hs--project .rkit-hs__media-item .rkit-hs__img {
  transform: scale(var(--rkit-hs-project-zoom));
  transition: none;
}

/* Keluar: tetap terlihat di bawah slide baru, bergeser & membesar pelan. */
.rkit-hs--project .rkit-hs__media-item.is-leaving {
  z-index: 1;
  clip-path: inset(0);
}

.rkit-hs--project .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: translate3d(-8%, 0, 0) scale(1.2);
  transition: transform var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--project[data-dir="prev"] .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: translate3d(8%, 0, 0) scale(1.2);
}

/* Masuk: reveal + zoom-out yang lebih panjang dari reveal-nya. */
.rkit-hs--project .rkit-hs__media-item.is-active {
  z-index: 2;
  clip-path: inset(0);
  transition: clip-path var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--project .rkit-hs__media-item.is-active .rkit-hs__img {
  transform: none;
  transition: transform calc(var(--rkit-hs-speed) * 1.6) var(--rkit-hs-ease-out);
}

/* Pratinjau: slide berikutnya di atas, slide aktif (pratinjau lama)
   tetap di bawahnya sampai tertutup. */
.rkit-hs--project .rkit-hs__media--peek .rkit-hs__media-item.is-active {
  z-index: 1;
  transition: none;
}

.rkit-hs--project .rkit-hs__media--peek .rkit-hs__media-item.is-active .rkit-hs__img {
  transform: none;
  transition: none;
}

.rkit-hs--project .rkit-hs__media--peek .rkit-hs__media-item.is-next {
  z-index: 2;
  clip-path: inset(0);
  transition: clip-path var(--rkit-hs-speed) var(--rkit-hs-ease) calc(var(--rkit-hs-speed) * 0.15);
}

.rkit-hs--project .rkit-hs__media--peek .rkit-hs__media-item.is-next .rkit-hs__img {
  transform: none;
  transition: transform calc(var(--rkit-hs-speed) * 1.6) var(--rkit-hs-ease-out) calc(var(--rkit-hs-speed) * 0.15);
}

.rkit-hs__panel {
  position: absolute;
  top: var(--rkit-hs-project-top);
  bottom: var(--rkit-hs-project-bottom);
  left: calc(var(--rkit-hs-gutter) + var(--rkit-hs-project-w) + var(--rkit-hs-project-space));
  right: calc(var(--rkit-hs-peek-w) + var(--rkit-hs-project-space));
  z-index: 3;
  pointer-events: none;
}

.rkit-hs--project .rkit-hs__contents {
  inset: 0;
}

/* Heading di atas, teks & tombol rata bawah dengan gambar. */
.rkit-hs--project .rkit-hs__content {
  justify-content: space-between;
}

:where(.rkit-hs--project) .rkit-hs__heading {
  position: relative;
  z-index: 1;
  /* Blok melebar ke kiri sejauh overlap + jarak panel ke gambar. */
  margin-left: calc((var(--rkit-hs-overlap) + var(--rkit-hs-project-space)) * -1);
  font-size: calc(clamp(34px, 4.6vw, 84px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.rkit-hs--project .rkit-hs__description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-desc-color, var(--rkit-hs-fg)));
}

.rkit-hs--project .rkit-hs__subheading {
  color: var(--rkit-hs-slide-fg, var(--rkit-hs-sub-color, var(--rkit-hs-fg)));
}

/* Counter + arrow di pita bawah, di bawah panel & pratinjau. */
.rkit-hs--project .rkit-hs__nav {
  left: calc(var(--rkit-hs-gutter) + var(--rkit-hs-project-w) + var(--rkit-hs-project-space));
  right: var(--rkit-hs-gutter);
  bottom: calc(var(--rkit-hs-project-bottom) / 2 - var(--rkit-hs-arrow-size) / 2);
  gap: 4px;
}

.rkit-hs--project .rkit-hs__counter {
  order: -1;
  margin-right: auto;
}

.rkit-hs--project .rkit-hs__arrow svg {
  transition: transform 0.4s var(--rkit-hs-ease-out);
}

.rkit-hs--project .rkit-hs__arrow--prev:hover svg {
  transform: translateX(-5px);
}

.rkit-hs--project .rkit-hs__arrow--next:hover svg {
  transform: translateX(5px);
}

.rkit-hs--project .rkit-hs__pagination {
  left: var(--rkit-hs-gutter);
  bottom: calc(var(--rkit-hs-project-bottom) / 2 - 12px);
}

/* ---------- Fixed Project: Text Position = Left (cermin) ----------
 * Gambar di kanan, pratinjau di tepi kiri, slide baru masuk dari kiri.
 * Susunan panel/nav hanya dicerminkan di >= 768px; di mobile layout
 * bertumpuk (gambar atas, teks bawah) sehingga tidak perlu dibalik.
 */

.rkit-hs--project.rkit-hs--text-left .rkit-hs__media {
  left: auto;
  right: var(--rkit-hs-gutter);
}

.rkit-hs--project.rkit-hs--text-left .rkit-hs__media--peek {
  left: 0;
  right: auto;
}

/* Arah reveal & parallax dibalik. */
.rkit-hs--project.rkit-hs--text-left .rkit-hs__media-item {
  clip-path: inset(0 100% 0 0);
}

.rkit-hs--project.rkit-hs--text-left[data-dir="prev"] .rkit-hs__media-item {
  clip-path: inset(0 0 0 100%);
}

.rkit-hs--project.rkit-hs--text-left .rkit-hs__media-item.is-active,
.rkit-hs--project.rkit-hs--text-left .rkit-hs__media-item.is-leaving,
.rkit-hs--project.rkit-hs--text-left .rkit-hs__media--peek .rkit-hs__media-item.is-next {
  clip-path: inset(0);
}

.rkit-hs--project.rkit-hs--text-left .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: translate3d(8%, 0, 0) scale(1.2);
}

.rkit-hs--project.rkit-hs--text-left[data-dir="prev"] .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: translate3d(-8%, 0, 0) scale(1.2);
}

@media (min-width: 768px) {
  .rkit-hs--project.rkit-hs--text-left .rkit-hs__panel {
    left: calc(var(--rkit-hs-peek-w) + var(--rkit-hs-project-space));
    right: calc(var(--rkit-hs-gutter) + var(--rkit-hs-project-w) + var(--rkit-hs-project-space));
  }

  /* Teks rata kanan agar menempel ke gambar; heading melebar ke kanan
     menumpang di atas gambar. Alignment dari Style > Content tetap menang. */
  .rkit-hs--project.rkit-hs--text-left .rkit-hs__content {
    text-align: right;
  }

  :where(.rkit-hs--project.rkit-hs--text-left) .rkit-hs__heading {
    margin-left: 0;
    margin-right: calc((var(--rkit-hs-overlap) + var(--rkit-hs-project-space)) * -1);
  }

  .rkit-hs--project.rkit-hs--text-left .rkit-hs__nav {
    left: var(--rkit-hs-gutter);
    right: calc(var(--rkit-hs-gutter) + var(--rkit-hs-project-w) + var(--rkit-hs-project-space));
  }

  .rkit-hs--project.rkit-hs--text-left .rkit-hs__pagination {
    left: auto;
    right: var(--rkit-hs-gutter);
  }
}

/* ------------------------------------------------------------------ *
 * 7. Diverge Split
 * ------------------------------------------------------------------ */

.rkit-hs--diverge {
  --rkit-hs-panel-bg: #2b2b28;
  --rkit-hs-overlay-default: transparent;
  --rkit-hs-btn-border: rgba(255, 255, 255, 0.6);
  --rkit-hs-btn-color-h: #111;
  --rkit-hs-btn-bg-h: #fff;
  --rkit-hs-btn-border-h: #fff;
  --rkit-hs-content-w: 560px;
}

.rkit-hs--diverge .rkit-hs__media,
.rkit-hs--diverge .rkit-hs__contents {
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
}

.rkit-hs--diverge .rkit-hs__media {
  inset: 0 auto 0 0;
}

.rkit-hs--diverge .rkit-hs__contents {
  right: 0;
  display: block;
}

.rkit-hs--diverge.rkit-hs--reverse .rkit-hs__media {
  inset: 0 0 0 auto;
}

.rkit-hs--diverge.rkit-hs--reverse .rkit-hs__contents {
  right: auto;
  left: 0;
}

/* Kolom gambar & konten bergerak berlawanan arah. */
.rkit-hs--diverge .rkit-hs__media-item,
.rkit-hs--diverge .rkit-hs__content {
  transition: transform var(--rkit-hs-speed) var(--rkit-hs-ease);
  will-change: transform;
}

.rkit-hs--diverge .rkit-hs__media-item {
  transform: translate3d(0, calc(var(--rkit-hs-offset) * -100%), 0);
}

.rkit-hs--diverge .rkit-hs__content {
  position: absolute;
  inset: 0;
  justify-content: center;
  padding: var(--rkit-hs-gutter) clamp(24px, 6vw, 120px);
  background: var(--rkit-hs-slide-bg, var(--rkit-hs-panel-bg));
  visibility: visible;
  transform: translate3d(0, calc(var(--rkit-hs-offset) * 100%), 0);
}

.rkit-hs--diverge .rkit-hs__content > * {
  max-width: var(--rkit-hs-content-w);
}

:where(.rkit-hs--diverge) .rkit-hs__heading {
  font-size: calc(clamp(32px, 3.3vw, 56px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 500;
  line-height: 1.1;
}

.rkit-hs--diverge .rkit-hs__button {
  padding: 15px 28px;
  border-radius: 999px;
}

.rkit-hs--diverge .rkit-hs__nav {
  left: 50%;
  bottom: var(--rkit-hs-gutter);
  gap: 20px;
  padding: 6px;
  transform: translateX(-50%);
}

.rkit-hs--diverge .rkit-hs__pagination {
  top: 50%;
  right: calc(var(--rkit-hs-gutter) / 2);
  transform: translateY(-50%);
}

.rkit-hs--diverge.rkit-hs--reverse .rkit-hs__pagination {
  right: auto;
  left: calc(var(--rkit-hs-gutter) / 2);
}

.rkit-hs--diverge .rkit-hs__pagination--tabs,
.rkit-hs--diverge .rkit-hs__pagination--numbers {
  top: auto;
  bottom: calc(var(--rkit-hs-gutter) + 64px);
  right: var(--rkit-hs-gutter);
  width: calc(50% - var(--rkit-hs-gutter) * 2);
  transform: none;
}

.rkit-hs--diverge .rkit-hs__pagination--numbers .rkit-hs__bullet-number {
  font-size: 32px;
}

/* ------------------------------------------------------------------ *
 * 8. Journey Cards
 *
 * Background penuh + deretan kartu slide berikutnya di kanan (offset
 * 1..3 terlihat, 4 = parkir di luar layar; maxOffset = 4 di JS).
 * Next: background baru membesar dari kotak kartu pertama menjadi
 * layar penuh, kartu lain bergeser ke kiri satu slot.
 * Prev: kebalikannya, background lama menyusut kembali ke kartu pertama.
 * Kotak kartu pertama (--rkit-hs-jc-rect) dipakai bersama oleh kartu
 * dan clip-path background, jadi keduanya selalu segaris.
 * ------------------------------------------------------------------ */

.rkit-hs--journey {
  --rkit-hs-bg: #0b1220;
  --rkit-hs-overlay-default:
    linear-gradient(90deg, rgba(5, 12, 28, 0.72) 0%, rgba(5, 12, 28, 0.35) 48%, rgba(5, 12, 28, 0.12) 100%),
    linear-gradient(0deg, rgba(5, 12, 28, 0.55) 0%, rgba(5, 12, 28, 0) 35%);
  --rkit-hs-muted: rgba(255, 255, 255, 0.78);
  --rkit-hs-content-w: 620px;
  --rkit-hs-desc-w: 46ch;
  --rkit-hs-content-delay: calc(var(--rkit-hs-speed) * 0.45);
  --rkit-hs-jc-left: 55%;
  --rkit-hs-jc-top: 30%;
  --rkit-hs-jc-w: clamp(150px, 17vw, 290px);
  --rkit-hs-jc-h: clamp(210px, 24vw, 400px);
  --rkit-hs-jc-gap: 20px;
  --rkit-hs-jc-radius: 10px;
  --rkit-hs-jc-label: #fff;
  --rkit-hs-jc-rect: inset(
    var(--rkit-hs-jc-top)
    calc(100% - var(--rkit-hs-jc-left) - var(--rkit-hs-jc-w))
    calc(100% - var(--rkit-hs-jc-top) - var(--rkit-hs-jc-h))
    var(--rkit-hs-jc-left)
    round var(--rkit-hs-jc-radius)
  );
  /* Tombol garis tepi transparan, sama seperti layout gelap lainnya. */
  --rkit-hs-btn-color: #fff;
  --rkit-hs-btn-bg: transparent;
  --rkit-hs-btn-border: rgba(255, 255, 255, 0.6);
  --rkit-hs-btn-color-h: #0b1220;
  --rkit-hs-btn-bg-h: #fff;
  --rkit-hs-btn-border-h: #fff;
  --rkit-hs-arrow-size: 44px;
  --rkit-hs-arrow-bg: rgba(255, 255, 255, 0.08);
  --rkit-hs-arrow-border: rgba(255, 255, 255, 0.35);
}

/* ---------- Background ---------- */

.rkit-hs--journey .rkit-hs__media-item {
  z-index: 0;
  opacity: 0;
  clip-path: var(--rkit-hs-jc-rect);
  transition: none;
}

/* Dalam keadaan diam, kotak gambar background = kotak kartu pertama,
   jadi potongan (object-fit: cover) gambarnya identik dengan kartu.
   Saat membesar, kotak gambar ikut melebar bersama clip-path sehingga
   kartu terlihat benar-benar tumbuh menjadi background tanpa lompatan. */
.rkit-hs--journey .rkit-hs__media-item .rkit-hs__img {
  position: absolute;
  top: var(--rkit-hs-jc-top);
  left: var(--rkit-hs-jc-left);
  width: var(--rkit-hs-jc-w);
  height: var(--rkit-hs-jc-h);
  transition: none;
}

.rkit-hs--journey .rkit-hs__media-item.is-active,
.rkit-hs--journey .rkit-hs__media-item.is-leaving {
  opacity: 1;
}

.rkit-hs--journey .rkit-hs__media-item.is-active .rkit-hs__img,
.rkit-hs--journey .rkit-hs__media-item.is-leaving .rkit-hs__img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Next: yang baru di atas, membesar dari kartu pertama. */
.rkit-hs--journey .rkit-hs__media-item.is-active {
  z-index: 2;
  clip-path: inset(0 0 0 0 round 0px);
  transition: clip-path var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--journey .rkit-hs__media-item.is-active .rkit-hs__img {
  transition:
    top var(--rkit-hs-speed) var(--rkit-hs-ease),
    left var(--rkit-hs-speed) var(--rkit-hs-ease),
    width var(--rkit-hs-speed) var(--rkit-hs-ease),
    height var(--rkit-hs-speed) var(--rkit-hs-ease);
}

/* Yang lama sedikit membesar di belakang (kedalaman). */
.rkit-hs--journey .rkit-hs__media-item.is-leaving {
  z-index: 1;
  clip-path: inset(0 0 0 0 round 0px);
}

.rkit-hs--journey .rkit-hs__media-item.is-leaving .rkit-hs__img {
  transform: scale(1.08);
  transition: transform var(--rkit-hs-speed) var(--rkit-hs-ease);
}

/* Prev: yang baru langsung penuh di bawah, yang lama menyusut kembali
   menjadi kartu pertama. */
.rkit-hs--journey[data-dir="prev"] .rkit-hs__media-item.is-active,
.rkit-hs--journey[data-dir="prev"] .rkit-hs__media-item.is-active .rkit-hs__img {
  transition: none;
}

.rkit-hs--journey[data-dir="prev"] .rkit-hs__media-item.is-active {
  z-index: 1;
}

.rkit-hs--journey[data-dir="prev"] .rkit-hs__media-item.is-leaving {
  z-index: 2;
  clip-path: var(--rkit-hs-jc-rect);
  transition: clip-path var(--rkit-hs-speed) var(--rkit-hs-ease);
}

.rkit-hs--journey[data-dir="prev"] .rkit-hs__media-item.is-leaving .rkit-hs__img {
  top: var(--rkit-hs-jc-top);
  left: var(--rkit-hs-jc-left);
  width: var(--rkit-hs-jc-w);
  height: var(--rkit-hs-jc-h);
  transform: none;
  transition:
    top var(--rkit-hs-speed) var(--rkit-hs-ease),
    left var(--rkit-hs-speed) var(--rkit-hs-ease),
    width var(--rkit-hs-speed) var(--rkit-hs-ease),
    height var(--rkit-hs-speed) var(--rkit-hs-ease);
}

/* ---------- Kartu ---------- */

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

.rkit-hs .rkit-hs__jcard,
.rkit-hs .rkit-hs__jcard:hover,
.rkit-hs .rkit-hs__jcard:focus,
.rkit-hs .rkit-hs__jcard:active {
  position: absolute;
  top: var(--rkit-hs-jc-top);
  left: var(--rkit-hs-jc-left);
  display: block;
  width: var(--rkit-hs-jc-w);
  height: var(--rkit-hs-jc-h);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Offset 1..4 berjajar dari slot pertama ke kanan. Offset <= 0 (slide
   aktif & yang sudah lewat) diparkir tak terlihat di slot pertama, di
   bawah kartu offset 1 (z-index), jadi tidak pernah menangkap klik. */
.rkit-hs__jcard {
  z-index: max(var(--rkit-hs-offset), 0);
  opacity: clamp(0, var(--rkit-hs-offset), 1);
  pointer-events: auto;
  transform: translate3d(calc((max(var(--rkit-hs-offset), 1) - 1) * (var(--rkit-hs-jc-w) + var(--rkit-hs-jc-gap))), 0, 0);
  transition:
    transform var(--rkit-hs-speed) var(--rkit-hs-ease),
    opacity calc(var(--rkit-hs-speed) * 0.5) ease;
}

/* Kartu yang baru jadi slide aktif tetap di slot pertama dan memudar,
   sementara background-nya membesar dari slot yang sama. */
/* Background yang membesar memakai potongan gambar yang sama persis,
   jadi kartunya cukup hilang cepat. */
.rkit-hs__jcard.is-active {
  transition: opacity calc(var(--rkit-hs-speed) * 0.12) ease;
}

/* Prev: slide lama kembali jadi kartu setelah background menyusut. */
.rkit-hs--journey[data-dir="prev"] .rkit-hs__jcard.is-next {
  transition:
    transform var(--rkit-hs-speed) var(--rkit-hs-ease),
    opacity calc(var(--rkit-hs-speed) * 0.2) ease var(--rkit-hs-speed);
}

.rkit-hs__jcard-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--rkit-hs-slide-bg, #1c2536);
  border-radius: var(--rkit-hs-jc-radius);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
}

/* Gambar selebar yang dibutuhkan untuk menutup kartu (tinggi kartu x rasio
   gambar, dari atribut width/height), lalu dipotong di tengah oleh kartu.
   Dengan sizes="auto" (WordPress 6.7+ untuk gambar lazy) browser memilih
   file dari srcset berdasarkan lebar elemen ini. Kalau <img> hanya selebar
   kartu, gambar landscape di kartu portrait mengambil file kecil (mis.
   300x169) lalu diperbesar untuk cover -> blur. */
.rkit-hs .rkit-hs__jcard-media .rkit-hs__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.8s var(--rkit-hs-ease-out);
}

.rkit-hs .rkit-hs__jcard:hover .rkit-hs__jcard-media .rkit-hs__img {
  transform: translateX(-50%) scale(1.07);
}

.rkit-hs__jcard-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #0b1220;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  font-size: 14px;
  transition: transform 0.4s var(--rkit-hs-ease-out);
}

.rkit-hs__jcard:hover .rkit-hs__jcard-icon {
  transform: rotate(45deg);
}

.rkit-hs__jcard-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--rkit-hs-jc-label);
  line-height: 1.25;
}

.rkit-hs__jcard-title {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rkit-hs__jcard-sub {
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.7;
}

/* Label Position = Inside Card (Bottom / Top). Label ditaruh di atas
   gambar (z-index di atas .rkit-hs__jcard-media yang datang setelahnya
   di DOM) dengan gradasi di sisi yang sama supaya tetap terbaca. */
.rkit-hs--jc-meta-in {
  --rkit-hs-jc-meta-inset: 16px;
  --rkit-hs-jc-meta-shade: rgba(0, 0, 0, 0.6);
}

.rkit-hs--jc-meta-in .rkit-hs__jcard-meta {
  z-index: 2;
  left: var(--rkit-hs-jc-meta-inset);
  right: var(--rkit-hs-jc-meta-inset);
  pointer-events: none;
}

.rkit-hs--jc-meta-inside-bottom .rkit-hs__jcard-meta {
  top: auto;
  bottom: var(--rkit-hs-jc-meta-inset);
}

/* Atas: sisakan ruang di kanan untuk ikon panah (30px + jaraknya). */
.rkit-hs--jc-meta-inside-top .rkit-hs__jcard-meta {
  top: var(--rkit-hs-jc-meta-inset);
  bottom: auto;
  right: calc(var(--rkit-hs-jc-meta-inset) + 38px);
}

.rkit-hs--jc-meta-in .rkit-hs__jcard-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 55%;
  pointer-events: none;
}

.rkit-hs--jc-meta-inside-bottom .rkit-hs__jcard-media::after {
  bottom: 0;
  background: linear-gradient(to top, var(--rkit-hs-jc-meta-shade), transparent);
}

.rkit-hs--jc-meta-inside-top .rkit-hs__jcard-media::after {
  top: 0;
  background: linear-gradient(to bottom, var(--rkit-hs-jc-meta-shade), transparent);
}

/* Ikon panah di atas gradasi. */
.rkit-hs--jc-meta-in .rkit-hs__jcard-icon {
  z-index: 2;
}

/* ---------- Konten, navigasi, pagination ---------- */

.rkit-hs--journey .rkit-hs__contents {
  top: 0;
  bottom: 0;
  left: calc(var(--rkit-hs-gutter) + 36px);
  width: min(var(--rkit-hs-content-w), calc(var(--rkit-hs-jc-left) - var(--rkit-hs-gutter) - 72px));
  align-content: center;
}

:where(.rkit-hs--journey) .rkit-hs__heading {
  font-size: calc(clamp(44px, 6.4vw, 112px) * var(--rkit-hs-heading-scale, 1));
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.rkit-hs--journey .rkit-hs__description {
  font-size: 14px;
  line-height: 1.65;
}

.rkit-hs--journey .rkit-hs__button {
  padding: 14px 26px;
  border-radius: 4px;
}

.rkit-hs--journey .rkit-hs__nav {
  left: 50%;
  bottom: var(--rkit-hs-gutter);
  transform: translateX(-50%);
}

.rkit-hs--journey .rkit-hs__pagination {
  top: 50%;
  left: calc(var(--rkit-hs-gutter) / 2);
  transform: translateY(-50%);
}

.rkit-hs--journey .rkit-hs__pagination--dots {
  flex-direction: column;
}

.rkit-hs--journey .rkit-hs__pagination--dots .rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-a, var(--_w));
  height: var(--rkit-hs-dot-h-a, var(--rkit-hs-dot-long));
}

.rkit-hs--journey .rkit-hs__pagination--tabs,
.rkit-hs--journey .rkit-hs__pagination--numbers {
  top: auto;
  bottom: var(--rkit-hs-gutter);
  left: calc(var(--rkit-hs-gutter) + 36px);
  width: min(420px, calc(var(--rkit-hs-jc-left) - var(--rkit-hs-gutter) * 2));
  transform: none;
}

.rkit-hs--journey .rkit-hs__pagination--numbers .rkit-hs__bullet-number {
  font-size: 32px;
}

@media (max-width: 1024px) {
  .rkit-hs--journey {
    --rkit-hs-jc-left: 52%;
    --rkit-hs-jc-w: clamp(140px, 22vw, 240px);
    --rkit-hs-jc-h: clamp(190px, 30vw, 330px);
  }
}

/* Layar sempit: teks di atas, kartu di bawah. */
@media (max-width: 767px) {
  .rkit-hs--journey {
    --rkit-hs-jc-left: var(--rkit-hs-gutter);
    --rkit-hs-jc-top: 60%;
    --rkit-hs-jc-w: 34vw;
    --rkit-hs-jc-h: 24%;
    --rkit-hs-jc-gap: 12px;
  }

  .rkit-hs--journey .rkit-hs__contents {
    top: calc(var(--rkit-hs-gutter) * 2);
    bottom: 48%;
    left: var(--rkit-hs-gutter);
    right: var(--rkit-hs-gutter);
    width: auto;
    align-content: end;
  }

  .rkit-hs--journey .rkit-hs__pagination {
    display: none;
  }

  .rkit-hs--journey .rkit-hs__nav {
    bottom: calc(var(--rkit-hs-gutter) / 2);
  }
}

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

@media (max-width: 1024px) {
  .rkit-hs--dual {
    --rkit-hs-card-w: 56%;
    --rkit-hs-card-h: 42%;
  }

  .rkit-hs--dual .rkit-hs__cards {
    top: 36%;
  }

  .rkit-hs--dual .rkit-hs__contents {
    right: var(--rkit-hs-gutter);
    width: auto;
    max-width: var(--rkit-hs-content-w);
  }

  .rkit-hs--project {
    --rkit-hs-project-w: 56%;
    --rkit-hs-peek-w: 8%;
    --rkit-hs-overlap: clamp(24px, 6vw, 80px);
  }
}

@media (max-width: 767px) {
  .rkit-hs {
    --rkit-hs-gutter: 20px;
    --rkit-hs-arrow-size: 40px;
  }

  :where(.rkit-hs--elegance) .rkit-hs__heading {
    font-size: calc(clamp(30px, 9vw, 44px) * var(--rkit-hs-heading-scale, 1));
  }

  .rkit-hs__stage {
    min-height: 560px;
  }

  /* Elegance */
  .rkit-hs--elegance {
    padding: 10px;
    --rkit-hs-height: calc(100vh - 20px);
  }

  .rkit-hs--elegance .rkit-hs__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .rkit-hs--elegance .rkit-hs__contents {
    bottom: calc(var(--rkit-hs-pagination-offset) + 40px);
  }

  .rkit-hs--elegance .rkit-hs__pagination--tabs .rkit-hs__bullet-label,
  .rkit-hs--spotlight .rkit-hs__pagination--tabs .rkit-hs__bullet-label {
    display: none;
  }

  /* Portfolio */
  .rkit-hs--portfolio {
    --rkit-hs-frame-w: calc(100% - 40px);
    --rkit-hs-frame-h: 44%;
    --rkit-hs-frame-top: 16%;
  }

  .rkit-hs--portfolio {
    --rkit-hs-shift: 94cqw;
  }

  .rkit-hs--portfolio .rkit-hs__thumbs {
    display: none;
  }

  .rkit-hs--portfolio .rkit-hs__counter {
    font-size: 44px;
  }

  .rkit-hs--portfolio .rkit-hs__arrow {
    top: auto;
    bottom: calc(var(--rkit-hs-gutter) - 8px);
    margin-top: 0;
  }

  /* Dual */
  .rkit-hs--dual {
    --rkit-hs-card-w: calc(100% - 40px);
    --rkit-hs-card-h: 34%;
  }

  .rkit-hs--dual .rkit-hs__cards {
    top: 30%;
  }

  .rkit-hs--dual .rkit-hs__arrow {
    top: 30%;
  }

  .rkit-hs--dual .rkit-hs__arrow--prev {
    left: 8px;
  }

  .rkit-hs--dual .rkit-hs__arrow--next {
    right: 8px;
  }

  .rkit-hs--dual .rkit-hs__description {
    font-size: 15px;
  }

  /* Spotlight */
  .rkit-hs--spotlight .rkit-hs__arrow {
    top: auto;
    bottom: calc(var(--rkit-hs-pagination-offset) + 28px);
    margin-top: 0;
  }

  /* Numbered */
  .rkit-hs--numbered {
    --rkit-hs-numbers-h: 84px;
  }

  .rkit-hs--numbered .rkit-hs__contents {
    left: 0;
    width: 100%;
    padding-left: var(--rkit-hs-gutter);
  }

  .rkit-hs__bignumber {
    bottom: 12%;
    font-size: clamp(120px, 26vh, 220px);
  }

  /* Layar sempit: angka tetangga hanya menambah ramai. */
  .rkit-hs__bignumber.is-prev,
  .rkit-hs__bignumber.is-next {
    opacity: 0;
  }

  .rkit-hs--numbered .rkit-hs__pagination--numbers .rkit-hs__bullet {
    padding-inline: 12px;
  }

  .rkit-hs--numbered .rkit-hs__bullet-number {
    font-size: 30px;
  }

  /* Fixed Project: gambar di atas, panel di bawah. */
  .rkit-hs--project {
    --rkit-hs-peek-w: 36px;
    --rkit-hs-project-w: calc(100% - var(--rkit-hs-gutter) - var(--rkit-hs-peek-w) - 12px);
    --rkit-hs-overlap: 0px;
    --rkit-hs-arrow-size: 44px;
    --rkit-hs-arrow-icon: 24px;
  }

  .rkit-hs--project .rkit-hs__media {
    top: var(--rkit-hs-gutter);
    bottom: auto;
    height: 42%;
  }

  .rkit-hs__panel {
    top: calc(42% + var(--rkit-hs-gutter) * 2);
    bottom: calc(var(--rkit-hs-arrow-size) + var(--rkit-hs-gutter) * 1.5);
    left: var(--rkit-hs-gutter);
    right: var(--rkit-hs-gutter);
  }

  .rkit-hs--project .rkit-hs__content {
    justify-content: flex-start;
  }

  :where(.rkit-hs--project) .rkit-hs__heading {
    margin-left: 0;
  }

  .rkit-hs--project .rkit-hs__nav {
    left: var(--rkit-hs-gutter);
    bottom: var(--rkit-hs-gutter);
  }

  .rkit-hs--project .rkit-hs__pagination {
    display: none;
  }

  /* Diverge: gambar di atas, konten di bawah. */
  .rkit-hs--diverge .rkit-hs__media,
  .rkit-hs--diverge .rkit-hs__contents,
  .rkit-hs--diverge.rkit-hs--reverse .rkit-hs__media,
  .rkit-hs--diverge.rkit-hs--reverse .rkit-hs__contents {
    left: 0;
    right: 0;
    width: auto;
  }

  .rkit-hs--diverge .rkit-hs__media,
  .rkit-hs--diverge.rkit-hs--reverse .rkit-hs__media {
    top: 0;
    bottom: 55%;
  }

  .rkit-hs--diverge .rkit-hs__contents,
  .rkit-hs--diverge.rkit-hs--reverse .rkit-hs__contents {
    top: 45%;
    bottom: 0;
  }

  .rkit-hs--diverge .rkit-hs__content {
    justify-content: flex-start;
    padding: 32px var(--rkit-hs-gutter) 88px;
  }

  .rkit-hs--diverge .rkit-hs__pagination,
  .rkit-hs--diverge.rkit-hs--reverse .rkit-hs__pagination {
    top: calc(45% - 40px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .rkit-hs--diverge .rkit-hs__pagination--dots {
    flex-direction: row;
  }

  .rkit-hs--diverge .rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
    width: var(--rkit-hs-dot-w-a, var(--rkit-hs-dot-long));
    height: var(--rkit-hs-dot-h-a, var(--_h));
  }
}

/* ------------------------------------------------------------------ *
 * Posisi pilihan pengguna (Navigation > Arrows / Pagination Position)
 *
 * Diletakkan setelah semua style & responsive, dengan specificity lebih
 * tinggi dari aturan per style (termasuk versi mobile-nya), sehingga
 * posisi yang dipilih berlaku di semua style dan semua breakpoint.
 * Offset: --rkit-hs-arrows-x/y, --rkit-hs-pag-x/y (default = gutter).
 * ------------------------------------------------------------------ */

/* ---------- Arrows ---------- */

.rkit-hs__arrows {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--rkit-hs-arrows-gap, 12px);
}

.rkit-hs .rkit-hs__arrows .rkit-hs__arrow {
  position: relative;
  inset: auto;
  margin: 0;
  transform: none;
}

.rkit-hs__arrows--top-left,
.rkit-hs__arrows--top-center,
.rkit-hs__arrows--top-right {
  top: var(--rkit-hs-arrows-y, var(--rkit-hs-gutter));
}

.rkit-hs__arrows--bottom-left,
.rkit-hs__arrows--bottom-center,
.rkit-hs__arrows--bottom-right {
  bottom: var(--rkit-hs-arrows-y, var(--rkit-hs-gutter));
}

.rkit-hs__arrows--top-left,
.rkit-hs__arrows--bottom-left {
  left: var(--rkit-hs-arrows-x, var(--rkit-hs-gutter));
}

.rkit-hs__arrows--top-right,
.rkit-hs__arrows--bottom-right {
  right: var(--rkit-hs-arrows-x, var(--rkit-hs-gutter));
}

.rkit-hs__arrows--top-center,
.rkit-hs__arrows--bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

/* Sides: prev di kiri, next di kanan, tengah vertikal. */
.rkit-hs__arrows--sides {
  inset: 0;
  pointer-events: none;
}

.rkit-hs .rkit-hs__arrows--sides .rkit-hs__arrow {
  position: absolute;
  top: calc(50% + var(--rkit-hs-arrows-y, 0px));
  margin-top: calc(var(--rkit-hs-arrow-size) / -2);
}

.rkit-hs .rkit-hs__arrows--sides .rkit-hs__arrow:not([disabled]) {
  pointer-events: auto;
}

.rkit-hs .rkit-hs__arrows--sides .rkit-hs__arrow--prev {
  left: var(--rkit-hs-arrows-x, var(--rkit-hs-gutter));
}

.rkit-hs .rkit-hs__arrows--sides .rkit-hs__arrow--next {
  right: var(--rkit-hs-arrows-x, var(--rkit-hs-gutter));
}

/* ---------- Counter ----------
 * Offset: --rkit-hs-counter-x/y (default = gutter). Counter di dalam
 * wadah custom / di antara arrow dilepas dari posisi absolute, order &
 * margin bawaan style; ukuran & warna per style tetap dipakai. */

.rkit-hs .rkit-hs__counter-pos .rkit-hs__counter,
.rkit-hs .rkit-hs__arrows .rkit-hs__counter {
  position: static;
  inset: auto;
  order: 0;
  margin: 0;
}

.rkit-hs__counter-pos {
  position: absolute;
  z-index: 6;
  display: flex;
  pointer-events: none;
}

.rkit-hs__counter-pos--top-left,
.rkit-hs__counter-pos--top-center,
.rkit-hs__counter-pos--top-right {
  top: var(--rkit-hs-counter-y, var(--rkit-hs-gutter));
}

.rkit-hs__counter-pos--bottom-left,
.rkit-hs__counter-pos--bottom-center,
.rkit-hs__counter-pos--bottom-right {
  bottom: var(--rkit-hs-counter-y, var(--rkit-hs-gutter));
}

.rkit-hs__counter-pos--top-left,
.rkit-hs__counter-pos--middle-left,
.rkit-hs__counter-pos--bottom-left {
  left: var(--rkit-hs-counter-x, var(--rkit-hs-gutter));
}

.rkit-hs__counter-pos--top-right,
.rkit-hs__counter-pos--middle-right,
.rkit-hs__counter-pos--bottom-right {
  right: var(--rkit-hs-counter-x, var(--rkit-hs-gutter));
}

.rkit-hs__counter-pos--top-center,
.rkit-hs__counter-pos--bottom-center {
  left: 50%;
  transform: translateX(-50%);
}

/* Middle: tengah vertikal; Vertical Offset menggeser naik (-) / turun (+). */
.rkit-hs__counter-pos--middle-left,
.rkit-hs__counter-pos--middle-right {
  top: calc(50% + var(--rkit-hs-counter-y, 0px));
  transform: translateY(-50%);
}

/* ---------- Pagination ---------- */

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination.rkit-hs__pagination--custom {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  max-width: calc(100% - var(--rkit-hs-gutter) * 2);
  flex-direction: row;
  justify-content: flex-start;
  transform: none;
}

/* Tabs butuh lebar tetap karena tiap tab flex: 1. */
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--tabs {
  width: min(640px, calc(100% - var(--rkit-hs-gutter) * 2));
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-left,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-center,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-right {
  top: var(--rkit-hs-pag-y, var(--rkit-hs-gutter));
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-left,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-center,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-right {
  bottom: var(--rkit-hs-pag-y, var(--rkit-hs-gutter));
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-left,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-left,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-middle-left {
  left: var(--rkit-hs-pag-x, var(--rkit-hs-gutter));
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-right,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-right,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-middle-right {
  right: var(--rkit-hs-pag-x, var(--rkit-hs-gutter));
  justify-content: flex-end;
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-top-center,
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--at-bottom-center {
  left: 50%;
  justify-content: center;
  transform: translateX(-50%);
}

/* Middle left / right: susunan vertikal. */
.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--vert {
  top: calc(50% + var(--rkit-hs-pag-y, 0px));
  flex-direction: column;
  transform: translateY(-50%);
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--vert.rkit-hs__pagination--tabs {
  width: clamp(140px, 16vw, 220px);
}

.rkit-hs .rkit-hs__stage > .rkit-hs__pagination--vert.rkit-hs__pagination--tabs .rkit-hs__bullet {
  flex: 0 0 auto;
}

/* Bentuk dot aktif mengikuti arah pagination, bukan arah slider. */
.rkit-hs .rkit-hs__pagination--custom:not(.rkit-hs__pagination--vert) .rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-a, var(--rkit-hs-dot-long));
  height: var(--rkit-hs-dot-h-a, var(--_h));
}

.rkit-hs .rkit-hs__pagination--vert .rkit-hs__bullet.is-active .rkit-hs__bullet-dot {
  width: var(--rkit-hs-dot-w-a, var(--_w));
  height: var(--rkit-hs-dot-h-a, var(--rkit-hs-dot-long));
}

/* Numbered + Numbers: grid selebar slider hanya untuk posisi default. */
.rkit-hs--numbered .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--numbers {
  display: flex;
  gap: 24px;
  min-height: 0;
}

.rkit-hs--numbered .rkit-hs__stage > .rkit-hs__pagination--custom.rkit-hs__pagination--numbers .rkit-hs__bullet {
  height: auto;
  padding: 10px 0 0;
}

/* ------------------------------------------------------------------ *
 * Reduced motion: tanpa geser/zoom, cukup ganti slide.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rkit-hs *,
  .rkit-hs *::before,
  .rkit-hs *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}