/**
 * RTM Elements - Interactive Showcase
 *
 * Default ditulis dengan specificity rendah (satu class atau :where())
 * supaya selalu kalah dari selector control Elementor ({{WRAPPER}} .x).
 * Warna tombol (info, lightbox) lewat CSS variable agar style
 * button bawaan theme tidak ikut menimpa.
 */

/*
 * Di Flexbox Container widget defaultnya selebar kontennya, sedangkan
 * kolom minmax(0, 1fr) tidak punya lebar intrinsik: tanpa ini widget
 * menyusut jadi ~0px.
 */
.e-con .elementor-widget-rkit-interactive-showcase {
  width: 100%;
}

.rkit-isc {
  --rkit-isc-gap: 12px;
  --rkit-isc-cols: 4;
  --rkit-isc-radius: 0px;
  --rkit-isc-dur: 600ms;
  --rkit-isc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rkit-isc-zoom: 1.08;
  --rkit-isc-dim: 0.35;
  --rkit-isc-item-bg: rgba(127, 127, 127, 0.14);
  --rkit-isc-info-w: 28%;
  --rkit-isc-info-gap: 32px;
  --rkit-isc-acc-h: 560px;
  --rkit-isc-acc-grow: 4;
  --rkit-isc-marquee-h: 640px;
  --rkit-isc-stage-h: 640px;
  --rkit-isc-cw: 240px;
  --rkit-isc-ccols: 5;
  --rkit-isc-num-offset: 16px;
  --rkit-isc-row-h: 220px;
  --rkit-isc-strip-h: 340px;
  --rkit-isc-strip-grow: 12;
  --rkit-isc-persp: 1400px;
  --rkit-isc-rx: 12deg;
  --rkit-isc-ry: -22deg;
  --rkit-isc-rz: -6deg;
  --rkit-isc-sphere-cw: 110px;
  --rkit-isc-arc-cw: 190px;
  --rkit-isc-ring-cw: 230px;
  --rkit-isc-ring-tilt: -6deg;
  --rkit-isc-zoom-len: 300vh;
  --rkit-isc-zoom-end: 0.5;
  --rkit-isc-rv-w: 1.2em;
  --rkit-isc-rv-gap: 0.03em;
  --rkit-isc-play-size: 56px;
  --rkit-isc-glow-o: 0.55;
  --rkit-isc-glow-blur: 80px;
  --rkit-isc-glow-size: 60%;
  position: relative;
}

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

.rkit-isc__main {
  position: relative;
  min-width: 0;
}

.rkit-isc__stage {
  position: relative;
}

/*
 * Lapisan di dalam stage: ambient glow (0) < teks "Behind" (0) < gallery
 * (1) < teks "In Front" (4).
 */
.rkit-isc__stage > :where(.rkit-isc__track, .rkit-isc__grid, .rkit-isc__cols, .rkit-isc__viewport, .rkit-isc__strip, .rkit-isc__scene) {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * Item
 * ------------------------------------------------------------------ */

.rkit-isc__item {
  position: relative;
  margin: 0;
  min-width: 0;
  transition: opacity var(--rkit-isc-dur) var(--rkit-isc-ease);
}

.rkit-isc__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  outline-offset: 3px;
}

.rkit-isc--linked .rkit-isc__link {
  cursor: pointer;
}

.rkit-isc__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rkit-isc-radius);
  background-color: var(--rkit-isc-item-bg);
  isolation: isolate;
  transition: transform var(--rkit-isc-dur) var(--rkit-isc-ease),
    box-shadow var(--rkit-isc-dur) var(--rkit-isc-ease),
    border-color var(--rkit-isc-dur) var(--rkit-isc-ease);
}

.rkit-isc__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 0;
  transition: transform var(--rkit-isc-dur) var(--rkit-isc-ease),
    filter var(--rkit-isc-dur) var(--rkit-isc-ease);
  -webkit-user-drag: none;
}

.rkit-isc--ratio .rkit-isc__media {
  aspect-ratio: var(--rkit-isc-ratio);
}

.rkit-isc--ratio .rkit-isc__img,
.rkit-isc__item.has-ratio .rkit-isc__img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Video di layout "Original": kotak mengikuti rasio video, poster di-crop. */
.rkit-isc__item.has-ratio .rkit-isc__media {
  aspect-ratio: var(--rkit-isc-ratio);
}

/* ------------------------------------------------------------------ *
 * Video
 * ------------------------------------------------------------------ */

.rkit-isc__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform var(--rkit-isc-dur) var(--rkit-isc-ease);
}

.rkit-isc__video.is-playing {
  opacity: 1;
}

video.rkit-isc__img,
canvas.rkit-isc__img {
  object-fit: cover;
}

.rkit-isc__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rkit-isc-play-size);
  height: var(--rkit-isc-play-size);
  margin: calc(var(--rkit-isc-play-size) / -2) 0 0 calc(var(--rkit-isc-play-size) / -2);
  border-radius: 50%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.rkit-isc__play svg {
  width: 42%;
  height: 42%;
  margin-left: 6%;
  fill: currentColor;
}

.rkit-isc--play-corner .rkit-isc__play {
  --rkit-isc-play-size: 34px;
  top: 12px;
  right: 12px;
  left: auto;
  margin: 0;
}

.rkit-isc__item:hover .rkit-isc__play {
  transform: scale(1.08);
}

.rkit-isc--play-hide .rkit-isc__item.is-playing .rkit-isc__play {
  opacity: 0;
  transform: scale(0.8);
}

.rkit-isc__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background-color var(--rkit-isc-dur) var(--rkit-isc-ease);
}

/* Hover effects ----------------------------------------------------- */

.rkit-isc--fx-zoom .rkit-isc__item:hover :is(.rkit-isc__img, .rkit-isc__video),
.rkit-isc--fx-zoom .rkit-isc__item.is-active :is(.rkit-isc__img, .rkit-isc__video) {
  transform: scale(var(--rkit-isc-zoom));
}

.rkit-isc--fx-zoom-out :is(.rkit-isc__img, .rkit-isc__video) {
  transform: scale(var(--rkit-isc-zoom));
}

.rkit-isc--fx-zoom-out .rkit-isc__item:hover :is(.rkit-isc__img, .rkit-isc__video),
.rkit-isc--fx-zoom-out .rkit-isc__item.is-active :is(.rkit-isc__img, .rkit-isc__video) {
  transform: scale(1);
}

.rkit-isc--fx-scale .rkit-isc__item:hover .rkit-isc__media {
  transform: scale(var(--rkit-isc-zoom));
}

.rkit-isc--fx-scale .rkit-isc__item:hover {
  z-index: 2;
}

.rkit-isc--fx-lift .rkit-isc__item:hover .rkit-isc__media {
  transform: translateY(-6px);
}

.rkit-isc--fx-tilt .rkit-isc__item:hover .rkit-isc__media {
  transform: perspective(900px) rotateX(4deg) rotateY(-5deg) scale(1.02);
}

/* Accordion panels change size, so lift/tilt/scale would fight the layout. */
.rkit-isc--accordion.rkit-isc--fx-lift .rkit-isc__item:hover .rkit-isc__media,
.rkit-isc--accordion.rkit-isc--fx-tilt .rkit-isc__item:hover .rkit-isc__media,
.rkit-isc--accordion.rkit-isc--fx-scale .rkit-isc__item:hover .rkit-isc__media {
  transform: none;
}

.rkit-isc--dim .rkit-isc__stage:has(.rkit-isc__item:hover) .rkit-isc__item:not(:hover) {
  opacity: var(--rkit-isc-dim);
}

/* ------------------------------------------------------------------ *
 * Caption
 * ------------------------------------------------------------------ */

.rkit-isc__caption {
  display: block;
  padding: 16px;
  color: #fff;
}

:where(.rkit-isc--cap-hover, .rkit-isc--cap-overlay) .rkit-isc__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.rkit-isc--cap-hover .rkit-isc__caption {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity calc(var(--rkit-isc-dur) * 0.7) var(--rkit-isc-ease),
    transform calc(var(--rkit-isc-dur) * 0.7) var(--rkit-isc-ease);
}

.rkit-isc--cap-hover .rkit-isc__item:hover .rkit-isc__caption,
.rkit-isc--cap-hover .rkit-isc__item:focus-within .rkit-isc__caption,
.rkit-isc--cap-hover .rkit-isc__item.is-active .rkit-isc__caption {
  opacity: 1;
  transform: none;
}

:where(.rkit-isc--cap-below) .rkit-isc__caption {
  padding: 10px 2px 0;
  color: inherit;
}

/* Baris label di atas gambar: caption "Above Image" dan/atau nomor (Loop Strip). */
.rkit-isc__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}

.rkit-isc__head .rkit-isc__caption {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: inherit;
}

.rkit-isc__head .rkit-isc__num {
  position: static;
  flex: 0 0 auto;
  color: inherit;
  font-size: 12px;
  opacity: 0.6;
}

.rkit-isc--strip .rkit-isc__head .rkit-isc__title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rkit-isc--strip .rkit-isc__head .rkit-isc__subtitle {
  display: none;
}

.rkit-isc__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.rkit-isc__subtitle {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.8;
}

/* ------------------------------------------------------------------ *
 * Layout: Accordion Reveal
 * ------------------------------------------------------------------ */

.rkit-isc--accordion .rkit-isc__track {
  display: flex;
  gap: var(--rkit-isc-gap);
  height: var(--rkit-isc-acc-h);
  container-type: size;
}

/*
 * Gambar selalu seukuran panel yang TERBUKA, di tengah panel. Panel hanya
 * membuka/menutup "jendela" di atasnya, jadi gambar tidak pernah di-resize
 * selama animasi. (object-fit cover yang ikut lebar panel membuat gambar
 * tiba-tiba ikut membesar di tengah transisi = gerakan terlihat patah.)
 *
 * Ukuran panel terbuka = ruang track tanpa gap x grow / (grow + jumlah - 1).
 * --rkit-isc-count = jumlah panel, dipasang PHP di root widget.
 */
.rkit-isc--accordion :is(.rkit-isc__img, .rkit-isc__video) {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(100%, calc((100cqw - var(--rkit-isc-gap) * (var(--rkit-isc-count) - 1)) * var(--rkit-isc-acc-grow) / (var(--rkit-isc-acc-grow) + var(--rkit-isc-count) - 1)));
  max-width: none;
  height: 100%;
  object-fit: cover;
  translate: -50% 0;
}

.rkit-isc--acc-vertical :is(.rkit-isc__img, .rkit-isc__video) {
  top: 50%;
  left: 0;
  width: 100%;
  height: max(100%, calc((100cqh - var(--rkit-isc-gap) * (var(--rkit-isc-count) - 1)) * var(--rkit-isc-acc-grow) / (var(--rkit-isc-acc-grow) + var(--rkit-isc-count) - 1)));
  translate: 0 -50%;
}

.rkit-isc--acc-vertical .rkit-isc__track {
  flex-direction: column;
}

.rkit-isc--accordion .rkit-isc__item {
  flex: 1 1 0;
  min-height: 0;
  transition: flex-grow var(--rkit-isc-dur) var(--rkit-isc-ease),
    opacity var(--rkit-isc-dur) var(--rkit-isc-ease);
}

.rkit-isc--accordion .rkit-isc__link {
  display: flex;
  flex-direction: column;
}

.rkit-isc--accordion .rkit-isc__media {
  flex: 1 1 auto;
  min-height: 0;
}

.rkit-isc--accordion .rkit-isc__item.is-active,
.rkit-isc--acc-on-hover .rkit-isc__item:hover,
.rkit-isc--acc-on-hover .rkit-isc__item:focus-within {
  flex-grow: var(--rkit-isc-acc-grow);
}

.rkit-isc--acc-on-hover .rkit-isc__track:hover .rkit-isc__item.is-active:not(:hover) {
  flex-grow: 1;
}

/* Panel sempit: caption hanya tampil di panel yang terbuka. */
.rkit-isc--accordion .rkit-isc__caption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

:where(.rkit-isc--accordion.rkit-isc--cap-hover, .rkit-isc--accordion.rkit-isc--cap-overlay) .rkit-isc__caption {
  top: 0;
  bottom: auto;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.rkit-isc--accordion.rkit-isc--cap-overlay .rkit-isc__caption {
  opacity: 0;
  transition: opacity calc(var(--rkit-isc-dur) * 0.7) var(--rkit-isc-ease);
}

.rkit-isc--accordion.rkit-isc--cap-overlay .rkit-isc__item.is-active .rkit-isc__caption,
.rkit-isc--accordion.rkit-isc--acc-on-hover.rkit-isc--cap-overlay .rkit-isc__item:hover .rkit-isc__caption {
  opacity: 1;
}

.rkit-isc--accordion.rkit-isc--acc-on-hover .rkit-isc__track:hover .rkit-isc__item.is-active:not(:hover) .rkit-isc__caption {
  opacity: 0;
}

.rkit-isc__num {
  position: absolute;
  left: var(--rkit-isc-num-offset);
  bottom: var(--rkit-isc-num-offset);
  z-index: 2;
  color: #fff;
  font-size: clamp(28px, 4vw, 64px);
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  transition: color var(--rkit-isc-dur) var(--rkit-isc-ease);
}

/* ------------------------------------------------------------------ *
 * Layout: Grid / Masonry
 * ------------------------------------------------------------------ */

.rkit-isc--grid-fit .rkit-isc__grid {
  display: grid;
  grid-template-columns: repeat(var(--rkit-isc-cols), minmax(0, 1fr));
  gap: var(--rkit-isc-gap);
}

.rkit-isc--grid-masonry .rkit-isc__grid {
  column-count: var(--rkit-isc-cols);
  column-gap: var(--rkit-isc-gap);
}

.rkit-isc--grid-masonry .rkit-isc__item {
  break-inside: avoid;
  margin-bottom: var(--rkit-isc-gap);
}

/* Mosaic: baris tetap, sebagian item 2x2 / 2x1 / 1x2 (kelas dari pola PHP & JS). */
.rkit-isc--grid-mosaic .rkit-isc__grid {
  display: grid;
  grid-template-columns: repeat(var(--rkit-isc-cols), minmax(0, 1fr));
  grid-auto-rows: var(--rkit-isc-row-h);
  grid-auto-flow: dense;
  gap: var(--rkit-isc-gap);
}

.rkit-isc--grid-mosaic .rkit-isc__item.is-big {
  grid-column: span 2;
  grid-row: span 2;
}

.rkit-isc--grid-mosaic .rkit-isc__item.is-wide {
  grid-column: span 2;
}

.rkit-isc--grid-mosaic .rkit-isc__item.is-tall {
  grid-row: span 2;
}

.rkit-isc--grid-mosaic .rkit-isc__link {
  display: flex;
  flex-direction: column;
}

.rkit-isc--grid-mosaic .rkit-isc__media {
  flex: 1 1 auto;
  min-height: 0;
}

.rkit-isc--grid-mosaic :is(.rkit-isc__img, .rkit-isc__video) {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.rkit-isc--grid-mosaic .rkit-isc__item.has-ratio .rkit-isc__media {
  aspect-ratio: auto;
}

/* ------------------------------------------------------------------ *
 * Layout: Parallax & Marquee columns
 * ------------------------------------------------------------------ */

.rkit-isc__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--rkit-isc-gap);
}

.rkit-isc__col {
  flex: 1 1 0;
  min-width: 0;
}

.rkit-isc__col-group {
  display: flex;
  flex-direction: column;
  gap: var(--rkit-isc-gap);
}

.rkit-isc--parallax.rkit-isc--clip .rkit-isc__stage {
  overflow: hidden;
}

.rkit-isc--parallax .rkit-isc__col-track {
  will-change: transform;
}

.rkit-isc--marquee .rkit-isc__cols {
  height: var(--rkit-isc-marquee-h);
  overflow: hidden;
}

.rkit-isc--marquee.rkit-isc--fade .rkit-isc__cols {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Dua grup identik + padding-bottom = gap, jadi -50% tepat satu putaran. */
.rkit-isc--marquee.is-running .rkit-isc__col-group {
  padding-bottom: var(--rkit-isc-gap);
}

.rkit-isc--marquee.is-running .rkit-isc__col-track {
  animation: rkit-isc-up var(--rkit-isc-mq-d, 30s) linear infinite;
  will-change: transform;
}

.rkit-isc--marquee.is-running .rkit-isc__col.is-down .rkit-isc__col-track {
  animation-name: rkit-isc-down;
}

.rkit-isc--marquee.rkit-isc--pause .rkit-isc__col:hover .rkit-isc__col-track,
.rkit-isc--marquee.is-lb-open .rkit-isc__col-track {
  animation-play-state: paused;
}

@keyframes rkit-isc-up {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -50%, 0); }
}

@keyframes rkit-isc-down {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------------ *
 * Layout: Infinite canvas
 * ------------------------------------------------------------------ */

.rkit-isc__viewport {
  position: relative;
  height: var(--rkit-isc-stage-h);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.rkit-isc--capture .rkit-isc__viewport {
  touch-action: none;
}

.rkit-isc--draggable .rkit-isc__viewport {
  cursor: grab;
}

.rkit-isc--draggable .rkit-isc__viewport.is-dragging {
  cursor: grabbing;
}

.rkit-isc__viewport.is-dragging .rkit-isc__link {
  pointer-events: none;
}

/*
 * .rkit-isc__space = bidang tempat plane digeser. Mode 3D Tilt: bidang ini
 * dua kali ukuran viewport dan dimiringkan, jadi tepinya tidak terlihat.
 */
.rkit-isc__space {
  position: absolute;
  inset: 0;
}

.rkit-isc--tilt .rkit-isc__viewport {
  perspective: var(--rkit-isc-persp);
}

.rkit-isc--tilt .rkit-isc__space {
  inset: -50%;
  transform: rotateX(var(--rkit-isc-rx)) rotateY(var(--rkit-isc-ry)) rotateZ(var(--rkit-isc-rz));
  transform-style: preserve-3d;
}

.rkit-isc__plane {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  will-change: transform;
}

.rkit-isc__tile {
  display: grid;
  grid-template-columns: repeat(var(--rkit-isc-ccols), var(--rkit-isc-cw));
  align-items: start;
  gap: var(--rkit-isc-gap);
  padding: calc(var(--rkit-isc-gap) / 2);
}

.rkit-isc--stagger .rkit-isc__tile .rkit-isc__item.is-offset {
  transform: translateY(calc(50% + var(--rkit-isc-gap) / 2));
}

/* ------------------------------------------------------------------ *
 * Center text & ambient glow
 * ------------------------------------------------------------------ */

.rkit-isc__ctext {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: #fff;
  font-size: clamp(48px, 11vw, 180px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
  pointer-events: none;
}

.rkit-isc__ctext--front {
  mix-blend-mode: difference;
}

.rkit-isc__ctext--back {
  z-index: 0;
  color: #111;
}

.rkit-isc .rkit-isc__ctext-inner {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  -webkit-text-stroke: inherit;
}

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

.rkit-isc__ambient span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--rkit-isc-glow-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  filter: blur(var(--rkit-isc-glow-blur)) saturate(1.6);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 0.7s ease, transform 0.9s ease;
}

.rkit-isc__ambient span.is-on {
  opacity: var(--rkit-isc-glow-o);
  transform: translate(-50%, -50%) scale(1);
}

/* ------------------------------------------------------------------ *
 * Layout: Loop Strip
 * ------------------------------------------------------------------ */

.rkit-isc__strip {
  overflow: hidden;
  padding-block: calc(var(--rkit-isc-strip-h) * var(--rkit-isc-strip-grow) / 200);
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.rkit-isc--draggable .rkit-isc__strip,
.rkit-isc--draggable .rkit-isc__scene {
  cursor: grab;
}

.rkit-isc--draggable :is(.rkit-isc__strip, .rkit-isc__scene).is-dragging {
  cursor: grabbing;
}

:is(.rkit-isc__strip, .rkit-isc__scene).is-dragging .rkit-isc__link {
  pointer-events: none;
}

.rkit-isc--strip.rkit-isc--fade .rkit-isc__strip {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.rkit-isc__strip-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.rkit-isc__strip-group {
  display: flex;
  align-items: flex-end;
  gap: var(--rkit-isc-gap);
  padding-right: var(--rkit-isc-gap);
}

/* Lebar kartu = tinggi x rasio (rasio tetap, atau rasio asli per gambar). */
.rkit-isc--strip .rkit-isc__item {
  flex: 0 0 auto;
  width: calc(var(--rkit-isc-strip-h) * var(--rkit-isc-ar, 0.75));
}

.rkit-isc--strip.rkit-isc--ratio .rkit-isc__item {
  width: calc(var(--rkit-isc-strip-h) * var(--rkit-isc-ratio));
}

.rkit-isc--strip .rkit-isc__media {
  height: var(--rkit-isc-strip-h);
  aspect-ratio: auto;
  transition: height var(--rkit-isc-dur) var(--rkit-isc-ease),
    margin var(--rkit-isc-dur) var(--rkit-isc-ease),
    box-shadow var(--rkit-isc-dur) var(--rkit-isc-ease),
    border-color var(--rkit-isc-dur) var(--rkit-isc-ease);
}

.rkit-isc--strip :is(.rkit-isc__img, .rkit-isc__video) {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Membesar ke atas & bawah; margin negatif menjaga tinggi baris tetap. */
.rkit-isc--strip .rkit-isc__item:hover .rkit-isc__media {
  height: calc(var(--rkit-isc-strip-h) * (1 + var(--rkit-isc-strip-grow) / 100));
  margin-block: calc(var(--rkit-isc-strip-h) * var(--rkit-isc-strip-grow) / -200);
}

.rkit-isc--strip .rkit-isc__item:hover .rkit-isc__head {
  translate: 0 calc(var(--rkit-isc-strip-h) * var(--rkit-isc-strip-grow) / -200);
}

.rkit-isc--strip .rkit-isc__head {
  transition: translate var(--rkit-isc-dur) var(--rkit-isc-ease);
}

/* ------------------------------------------------------------------ *
 * Layout: 3D Sphere, Arc Wheel, 3D Ring (posisi kartu dari JS)
 * ------------------------------------------------------------------ */

.rkit-isc__scene {
  position: relative;
  height: var(--rkit-isc-stage-h);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.rkit-isc__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  will-change: transform;
}

.rkit-isc__orbit > .rkit-isc__item {
  position: absolute;
  top: 0;
  left: 0;
}

.rkit-isc--sphere .rkit-isc__orbit > .rkit-isc__item { width: var(--rkit-isc-sphere-cw); }
.rkit-isc--arc .rkit-isc__orbit > .rkit-isc__item { width: var(--rkit-isc-arc-cw); }
.rkit-isc--ring .rkit-isc__orbit > .rkit-isc__item { width: var(--rkit-isc-ring-cw); }

.rkit-isc--sphere .rkit-isc__scene,
.rkit-isc--ring .rkit-isc__scene {
  perspective: var(--rkit-isc-persp);
}

.rkit-isc--sphere .rkit-isc__orbit,
.rkit-isc--ring .rkit-isc__orbit {
  transform-style: preserve-3d;
}

.rkit-isc--sphere .rkit-isc__orbit > .rkit-isc__item,
.rkit-isc--ring:not(.rkit-isc--ring-back) .rkit-isc__orbit > .rkit-isc__item {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Arc: titik pusat roda diatur JS (tinggi kartu + jari-jari + Top Offset). */
.rkit-isc--arc .rkit-isc__orbit {
  top: 0;
}

/* Caption di kartu kecil 3D: lebih ringkas. */
:where(.rkit-isc--sphere, .rkit-isc--arc, .rkit-isc--ring) .rkit-isc__caption {
  padding: 10px 12px;
}

:where(.rkit-isc--sphere) .rkit-isc__title {
  font-size: 12px;
}

:where(.rkit-isc--sphere) .rkit-isc__subtitle {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Layout: Scroll Zoom
 * ------------------------------------------------------------------ */

.rkit-isc__zoom {
  position: relative;
  height: var(--rkit-isc-zoom-len);
}

.rkit-isc__zoom-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* Lebar = layar / skala akhir: penuh saat zoom out, kolom tepi ter-crop di awal. */
.rkit-isc__zoom-scene {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: calc(100% / var(--rkit-isc-zoom-end));
  transform: translate3d(-50%, 70vh, 0);
  transform-origin: 50% 0;
  will-change: transform;
}

.rkit-isc--zoom .rkit-isc__col-track {
  will-change: transform;
}

.rkit-isc--zoom.is-static .rkit-isc__zoom {
  height: auto;
}

/* Sticky tidak berfungsi di halaman ini (ancestor ber-overflow): JS yang menahan posisinya. */
.rkit-isc--zoom.is-js-pin .rkit-isc__zoom-sticky {
  position: relative;
  top: auto;
  will-change: transform;
}

/* ------------------------------------------------------------------ *
 * Layout: Text Hover Reveal
 * ------------------------------------------------------------------ */

.rkit-isc__reveal {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rkit-isc__reveal-text {
  margin: 0;
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

.rkit-isc__word {
  display: inline-block;
  white-space: nowrap;
}

/*
 * Huruf & gambar sama-sama di alur teks: huruf menyusut (max-width → 0,
 * nilai awal dipasang JS), gambar melebar 0 → Image Width. Huruf
 * berikutnya bergeser persis selebar gambar, tidak ada yang ditimpa.
 * Tinggi gambar = lebar / Image Ratio; margin vertikal negatif menjaga
 * tinggi baris tetap 1em supaya baris lain tidak ikut melompat.
 */
.rkit-isc__char {
  --_rv-h: calc(var(--rkit-isc-rv-w, 1.2em) / (var(--rkit-isc-ratio, 4/3)));
  display: inline-block;
  white-space: nowrap;
}

.rkit-isc__char-t {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  transition: max-width calc(var(--rkit-isc-dur) * 0.8) var(--rkit-isc-ease),
    opacity calc(var(--rkit-isc-dur) * 0.4) ease;
}

.rkit-isc__char .rkit-isc__media {
  display: inline-block;
  width: 0;
  max-width: 90vw;
  height: var(--_rv-h);
  margin: calc((1em - var(--_rv-h)) / 2) 0;
  vertical-align: middle;
  border-radius: 0.08em;
  opacity: 0;
  transition: width calc(var(--rkit-isc-dur) * 0.8) var(--rkit-isc-ease),
    margin calc(var(--rkit-isc-dur) * 0.8) var(--rkit-isc-ease),
    opacity calc(var(--rkit-isc-dur) * 0.4) ease;
}

/* Gambar selebar ukuran akhir, di tengah: saat kotak melebar, gambar terbuka dari tengah. */
.rkit-isc .rkit-isc__char .rkit-isc__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--rkit-isc-rv-w, 1.2em);
  max-width: 90vw;
  height: 100%;
  object-fit: cover;
  translate: -50% 0;
}

.rkit-isc__char.is-on .rkit-isc__char-t {
  max-width: 0 !important;
  opacity: 0;
}

.rkit-isc__char.is-on .rkit-isc__media {
  width: var(--rkit-isc-rv-w, 1.2em);
  margin-left: var(--rkit-isc-rv-gap, 0.03em);
  margin-right: var(--rkit-isc-rv-gap, 0.03em);
  opacity: 1;
  cursor: pointer;
}

.rkit-isc .rkit-isc__pool {
  display: none !important;
}

/* ------------------------------------------------------------------ *
 * Info panel
 * ------------------------------------------------------------------ */

.rkit-isc--info {
  display: grid;
  gap: var(--rkit-isc-info-gap);
}

.rkit-isc--info-left {
  grid-template-columns: var(--rkit-isc-info-w) minmax(0, 1fr);
}

.rkit-isc--info-right {
  grid-template-columns: minmax(0, 1fr) var(--rkit-isc-info-w);
}

.rkit-isc--info-right .rkit-isc__info {
  order: 2;
}

.rkit-isc__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.rkit-isc__info-eyebrow {
  margin-bottom: 8px;
  color: #a21caf;
  font-size: 14px;
  font-weight: 600;
}

.rkit-isc__info-heading {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.15;
}

.rkit-isc__info-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #6b6b6b;
}

.rkit-isc__info-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}

.rkit-isc .rkit-isc__info-btn {
  color: var(--rkit-isc-btn-c, inherit);
  background-color: var(--rkit-isc-btn-bg, transparent);
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.rkit-isc .rkit-isc__info-btn:hover,
.rkit-isc .rkit-isc__info-btn:focus-visible {
  color: var(--rkit-isc-btn-c-h, var(--rkit-isc-btn-c, inherit));
  background-color: var(--rkit-isc-btn-bg-h, var(--rkit-isc-btn-bg, transparent));
}

.rkit-isc__info-btn-icon {
  transition: transform 0.25s ease;
}

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

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

@media (max-width: 767px) {
  .rkit-isc--info-left,
  .rkit-isc--info-right {
    grid-template-columns: minmax(0, 1fr);
  }

  .rkit-isc--info-right .rkit-isc__info {
    order: 0;
  }

  .rkit-isc--acc-stack .rkit-isc__track {
    flex-direction: column;
  }

  .rkit-isc--acc-stack :is(.rkit-isc__img, .rkit-isc__video) {
    top: 50%;
    left: 0;
    width: 100%;
    height: max(100%, calc((100cqh - var(--rkit-isc-gap) * (var(--rkit-isc-count) - 1)) * var(--rkit-isc-acc-grow) / (var(--rkit-isc-acc-grow) + var(--rkit-isc-count) - 1)));
    translate: 0 -50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rkit-isc__item,
  .rkit-isc__media,
  .rkit-isc__img,
  .rkit-isc__caption {
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------------ *
 * Lightbox (dipasang di <body>; variabel disalin dari root widget)
 * ------------------------------------------------------------------ */

.rkit-isc-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 80px;
  visibility: hidden;
}

.rkit-isc-lb.is-open {
  visibility: visible;
}

.rkit-isc-lb__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--rkit-isc-lb-bg, rgba(10, 10, 10, 0.94));
  opacity: 0;
  transition: opacity 0.5s ease;
}

.rkit-isc-lb.is-open .rkit-isc-lb__backdrop {
  opacity: 1;
}

.rkit-isc-lb.is-closing .rkit-isc-lb__backdrop {
  opacity: 0;
  transition-duration: 0.45s;
}

.rkit-isc-lb__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  touch-action: pan-y pinch-zoom;
}

.rkit-isc-lb__img {
  display: block;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: var(--rkit-isc-lb-radius, 0);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-user-select: none;
  user-select: none;
}

.rkit-isc-lb.is-loading .rkit-isc-lb__img {
  opacity: 0;
  transform: scale(0.97);
}

/* Video tanpa poster: kotak tetap berukuran, gambarnya saja yang tidak ada. */
.rkit-isc-lb__img:not([src]) {
  visibility: hidden;
}

.rkit-isc-lb__frame {
  position: relative;
  display: block;
  max-width: 100%;
}

.rkit-isc-lb__player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--rkit-isc-lb-radius, 0);
  background-color: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rkit-isc-lb__player:empty {
  display: none;
}

.rkit-isc-lb.has-video .rkit-isc-lb__player {
  opacity: 1;
}

.rkit-isc-lb__player > * {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
}

/* Selama zoom yang terlihat adalah ghost; gambar asli disembunyikan. */
.rkit-isc-lb.is-zooming .rkit-isc-lb__img {
  opacity: 0;
  transition: none;
}

/* Tutup tanpa zoom (thumbnail di luar layar / reduce motion): gambar memudar. */
.rkit-isc-lb.is-fading .rkit-isc-lb__img {
  opacity: 0;
}

.rkit-isc-lb__ghost {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: cover;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, clip-path;
}

.rkit-isc-lb__caption {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.35s ease, translate 0.35s ease;
  color: var(--rkit-isc-lb-text, #fff);
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
}

.rkit-isc-lb__caption:empty {
  display: none;
}

.rkit-isc-lb__caption small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.7;
}

.rkit-isc-lb__counter {
  position: absolute;
  top: 30px;
  left: 28px;
  color: var(--rkit-isc-lb-text, #fff);
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.35s ease;
  font-variant-numeric: tabular-nums;
}

/*
 * Tombol lightbox. Nilai Style > Lightbox > Arrows / Close Button datang
 * sebagai --rkit-isc-lb-{arrow|close}-*; tiap tombol memetakannya ke
 * variabel lokal --_btn-* supaya aturan di bawah cukup ditulis sekali.
 */
.rkit-isc-lb .rkit-isc-lb__prev,
.rkit-isc-lb .rkit-isc-lb__next {
  --_btn-size: var(--rkit-isc-lb-arrow-size, 48px);
  --_btn-icon: var(--rkit-isc-lb-arrow-icon, 22px);
  --_btn-bs: var(--rkit-isc-lb-arrow-bs, none);
  --_btn-bw: var(--rkit-isc-lb-arrow-bw, 1px);
  --_btn-radius: var(--rkit-isc-lb-arrow-radius, 50%);
  --_btn-c: var(--rkit-isc-lb-arrow-c, #fff);
  --_btn-c-h: var(--rkit-isc-lb-arrow-c-h, var(--_btn-c));
  --_btn-bg: var(--rkit-isc-lb-arrow-bg, rgba(255, 255, 255, 0.1));
  --_btn-bg-h: var(--rkit-isc-lb-arrow-bg-h, rgba(255, 255, 255, 0.2));
  --_btn-bc: var(--rkit-isc-lb-arrow-bc, currentColor);
  --_btn-bc-h: var(--rkit-isc-lb-arrow-bc-h, var(--_btn-bc));
  --_btn-shadow: var(--rkit-isc-lb-arrow-shadow, none);
  --_btn-shadow-h: var(--rkit-isc-lb-arrow-shadow-h, var(--_btn-shadow));
}

.rkit-isc-lb .rkit-isc-lb__close {
  --_btn-size: var(--rkit-isc-lb-close-size, 48px);
  --_btn-icon: var(--rkit-isc-lb-close-icon, 22px);
  --_btn-bs: var(--rkit-isc-lb-close-bs, none);
  --_btn-bw: var(--rkit-isc-lb-close-bw, 1px);
  --_btn-radius: var(--rkit-isc-lb-close-radius, 50%);
  --_btn-c: var(--rkit-isc-lb-close-c, #fff);
  --_btn-c-h: var(--rkit-isc-lb-close-c-h, var(--_btn-c));
  --_btn-bg: var(--rkit-isc-lb-close-bg, rgba(255, 255, 255, 0.1));
  --_btn-bg-h: var(--rkit-isc-lb-close-bg-h, rgba(255, 255, 255, 0.2));
  --_btn-bc: var(--rkit-isc-lb-close-bc, currentColor);
  --_btn-bc-h: var(--rkit-isc-lb-close-bc-h, var(--_btn-bc));
  --_btn-shadow: var(--rkit-isc-lb-close-shadow, none);
  --_btn-shadow-h: var(--rkit-isc-lb-close-shadow-h, var(--_btn-shadow));
}

.rkit-isc-lb .rkit-isc-lb__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_btn-size);
  height: var(--_btn-size);
  margin: 0;
  padding: 0;
  border-style: var(--_btn-bs);
  border-width: var(--_btn-bw);
  border-color: var(--_btn-bc);
  border-radius: var(--_btn-radius);
  color: var(--_btn-c);
  background-color: var(--_btn-bg);
  box-shadow: var(--_btn-shadow);
  cursor: pointer;
  opacity: 0;
  translate: 0 6px;
  pointer-events: none;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease, opacity 0.35s ease, translate 0.35s ease;
}

.rkit-isc-lb.is-ready .rkit-isc-lb__btn {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.rkit-isc-lb.is-ready .rkit-isc-lb__caption {
  opacity: 1;
  translate: 0 0;
}

.rkit-isc-lb.is-ready .rkit-isc-lb__counter {
  opacity: 0.75;
}

.rkit-isc-lb .rkit-isc-lb__btn:hover,
.rkit-isc-lb .rkit-isc-lb__btn:focus-visible {
  color: var(--_btn-c-h);
  background-color: var(--_btn-bg-h);
  border-color: var(--_btn-bc-h);
  box-shadow: var(--_btn-shadow-h);
  transform: scale(1.06);
}

.rkit-isc-lb.is-ready .rkit-isc-lb__btn[disabled] {
  opacity: 0.3;
  cursor: default;
  transform: none;
}

.rkit-isc-lb .rkit-isc-lb__prev,
.rkit-isc-lb .rkit-isc-lb__next {
  top: 50%;
  margin-top: calc(var(--_btn-size) / -2);
}

.rkit-isc-lb .rkit-isc-lb__prev { left: var(--rkit-isc-lb-arrow-offset, 20px); }
.rkit-isc-lb .rkit-isc-lb__next { right: var(--rkit-isc-lb-arrow-offset, 20px); }

.rkit-isc-lb .rkit-isc-lb__close {
  top: var(--rkit-isc-lb-close-offset, 20px);
  right: var(--rkit-isc-lb-close-offset, 20px);
}

.rkit-isc-lb__btn svg {
  width: var(--_btn-icon);
  height: var(--_btn-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ruang gambar ikut melebar bila tombol diperbesar / digeser ke dalam. */
.rkit-isc-lb {
  padding-top: max(72px, calc(var(--rkit-isc-lb-close-offset, 20px) + var(--rkit-isc-lb-close-size, 48px) + 8px));
  padding-bottom: 72px;
  padding-left: max(80px, calc(var(--rkit-isc-lb-arrow-offset, 20px) + var(--rkit-isc-lb-arrow-size, 48px) + 12px));
  padding-right: max(80px, calc(var(--rkit-isc-lb-arrow-offset, 20px) + var(--rkit-isc-lb-arrow-size, 48px) + 12px));
}

/* ------------------------------------------------------------------ *
 * Hover preview (Open Preview On: Hover). Tidak menangkap pointer:
 * item di bawahnya tetap ter-hover dan tetap bisa diklik.
 * ------------------------------------------------------------------ */

.rkit-isc-peek {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.3s;
}

.rkit-isc-peek.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.rkit-isc-peek__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--rkit-isc-peek-bg, rgba(10, 10, 10, 0.55));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rkit-isc-peek__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rkit-isc-peek.is-open :is(.rkit-isc-peek__backdrop, .rkit-isc-peek__figure) {
  opacity: 1;
  transform: none;
}

.rkit-isc-peek__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--rkit-isc-lb-radius, 0);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: width 0.3s ease, height 0.3s ease;
}

/* Hitam hanya untuk video; PNG transparan tetap transparan. */
.rkit-isc-peek__media.is-video {
  background-color: #000;
}

.rkit-isc-peek__media > * {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  object-fit: cover;
}

.rkit-isc-peek__caption {
  color: var(--rkit-isc-lb-text, #fff);
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
}

.rkit-isc-peek__caption:empty {
  display: none;
}

.rkit-isc-peek__caption small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .rkit-isc-peek__figure,
  .rkit-isc-peek__media {
    transition-duration: 0.01ms;
  }
}

html.rkit-isc-lb-lock {
  overflow: hidden;
}

/* Mobile: panah pindah ke bawah tengah. */
@media (max-width: 767px) {
  .rkit-isc-lb {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: calc(var(--rkit-isc-lb-arrow-size, 48px) + 48px);
  }

  .rkit-isc-lb .rkit-isc-lb__prev,
  .rkit-isc-lb .rkit-isc-lb__next {
    top: auto;
    bottom: 24px;
    margin-top: 0;
  }

  .rkit-isc-lb .rkit-isc-lb__prev { left: calc(50% - var(--_btn-size) - 12px); }
  .rkit-isc-lb .rkit-isc-lb__next { right: calc(50% - var(--_btn-size) - 12px); }
}