/**
 * RTM Elements - Advanced Card
 *
 * Preset: flip, expand, reveal, folder.
 *
 * Warna dan ukuran lewat CSS variable. Control global menulis variable
 * di .rkit-ac, control per kartu (repeater) menulis variable yang sama
 * di .rkit-ac__item, jadi warna per kartu selalu menang.
 *
 * State "terbuka" = :hover, :focus-within, atau .is-active (dipasang JS
 * untuk mode Click dan layar sentuh).
 */

.e-con .elementor-widget-rkit-advanced-card {
  width: 100%;
}

.rkit-ac {
  --rkit-ac-cols: 3;
  --rkit-ac-gap: 24px;
  --rkit-ac-h: 460px;
  --rkit-ac-radius: 18px;
  --rkit-ac-dur: 700ms;
  --rkit-ac-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rkit-ac-zoom: 1.06;
  --rkit-ac-align: left;
  --rkit-ac-bg: #ffffff;
  --rkit-ac-num-c: var(--e-global-color-primary, #111111);
  --rkit-ac-title-c: var(--e-global-color-primary, #111111);
  --rkit-ac-sub-c: var(--e-global-color-secondary, #6b6b73);
  --rkit-ac-desc-c: var(--e-global-color-text, #55555d);
  --rkit-ac-btn-c: #ffffff;
  --rkit-ac-btn-bg: var(--e-global-color-accent, #111111);
  --rkit-ac-btn-bgh: var(--e-global-color-primary, #333333);
  --rkit-ac-persp: 1200px;
  --rkit-ac-xh: 140px;
  --rkit-ac-xh-a: 360px;
  --rkit-ac-panel-h: 76%;
  --rkit-ac-drop: 22%;
  --rkit-ac-obj-fit: cover;
  --rkit-ac-tab-w: 42%;
  --rkit-ac-tab-h: 16px;
  --rkit-ac-ta-d: 20px;
  --rkit-ac-ta-dur: 600ms;
  --rkit-ac-ta-delay: calc(var(--rkit-ac-dur) * 0.35);
  --rkit-ac-ta-stagger: 80ms;
  --rkit-ac-ta-from: translate3d(0, var(--rkit-ac-ta-d), 0);
  --rkit-ac-ta-blur: 0px;
  position: relative;
}

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

.rkit-ac__item {
  position: relative;
  min-width: 0;
  box-sizing: border-box;
}

/* Min Height: menang dari Card Height bila lebih besar. Flip & Expand di
   item (Flip: sisi kartu mengikuti tinggi item; Expand: termasuk baris
   judul), Reveal & Folder di kartunya. */
.rkit-ac--flip .rkit-ac__item,
.rkit-ac--expand .rkit-ac__item,
.rkit-ac--reveal .rkit-ac__card,
.rkit-ac--folder .rkit-ac__card {
  min-height: var(--rkit-ac-minh, 0px);
}

.rkit-ac__item:focus {
  outline: none;
}

.rkit-ac__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.rkit-ac__card {
  position: relative;
  box-sizing: border-box;
  border-radius: var(--rkit-ac-radius);
  transition:
    translate var(--rkit-ac-dur) var(--rkit-ac-ease),
    box-shadow var(--rkit-ac-dur) var(--rkit-ac-ease),
    border-color var(--rkit-ac-dur) var(--rkit-ac-ease),
    background-color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac__surface {
  background-color: var(--rkit-ac-bg);
}

.rkit-ac__item:hover .rkit-ac__surface,
.rkit-ac__item:focus-within .rkit-ac__surface,
.rkit-ac__item.is-active .rkit-ac__surface {
  background-color: var(--rkit-ac-bg-h, var(--rkit-ac-bg));
}

/* ------------------------------------------------------------------ *
 * Media
 * ------------------------------------------------------------------ */

/* Media, overlay dan sheet tanpa radius sendiri: kartu sudah overflow
   hidden, jadi sudutnya terpotong mengikuti radius dalam (radius - tebal
   border). Radius "inherit" memakai radius luar sehingga muncul celah di
   sudut saat Border Width diisi. */
.rkit-ac__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rkit-ac .rkit-ac__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition:
    transform var(--rkit-ac-dur) var(--rkit-ac-ease),
    filter var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac__item:hover .rkit-ac__img,
.rkit-ac__item:focus-within .rkit-ac__img,
.rkit-ac__item.is-active .rkit-ac__img {
  transform: scale(var(--rkit-ac-zoom));
}

.rkit-ac__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--rkit-ac-dur) var(--rkit-ac-ease);
}

/* ------------------------------------------------------------------ *
 * Text
 * ------------------------------------------------------------------ */

.rkit-ac__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 28px;
  text-align: var(--rkit-ac-align);
}

.rkit-ac__bottom {
  margin-top: auto;
}

.rkit-ac__num,
.rkit-ac__title,
.rkit-ac__sub,
.rkit-ac__desc {
  transition: color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac__num {
  display: block;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--rkit-ac-num-c);
}

:where(.rkit-ac) .rkit-ac__title {
  margin: 0 0 0.35em;
  padding: 0;
  font-size: 1.375rem;
  line-height: 1.2;
}

/* Warna judul di selector terpisah yang lebih kuat: warna heading dari
   Elementor Kit / theme (.elementor-kit-X h3) tidak boleh menimpanya.
   Aman karena control warna hanya menulis variable. */
.rkit-ac .rkit-ac__title {
  color: var(--rkit-ac-title-c);
}

.rkit-ac__sub {
  display: block;
  margin-bottom: 0.6em;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--rkit-ac-sub-c);
}

.rkit-ac__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--rkit-ac-desc-c);
}

.rkit-ac__item:hover .rkit-ac__num,
.rkit-ac__item:focus-within .rkit-ac__num,
.rkit-ac__item.is-active .rkit-ac__num {
  color: var(--rkit-ac-num-ch, var(--rkit-ac-num-c));
}

.rkit-ac__item:hover .rkit-ac__title,
.rkit-ac__item:focus-within .rkit-ac__title,
.rkit-ac__item.is-active .rkit-ac__title {
  color: var(--rkit-ac-title-ch, var(--rkit-ac-title-c));
}

.rkit-ac__item:hover .rkit-ac__sub,
.rkit-ac__item:focus-within .rkit-ac__sub,
.rkit-ac__item.is-active .rkit-ac__sub {
  color: var(--rkit-ac-sub-ch, var(--rkit-ac-sub-c));
}

.rkit-ac__item:hover .rkit-ac__desc,
.rkit-ac__item:focus-within .rkit-ac__desc,
.rkit-ac__item.is-active .rkit-ac__desc {
  color: var(--rkit-ac-desc-ch, var(--rkit-ac-desc-c));
}

/* Teks di atas gambar memakai warna dari Style > Caption, bukan warna
   Title / Subtitle / Description (yang untuk teks di atas background). */
.rkit-ac__caption {
  --rkit-ac-num-c: var(--rkit-ac-cap-title-c, #ffffff);
  --rkit-ac-num-ch: var(--rkit-ac-cap-title-c, #ffffff);
  --rkit-ac-title-c: var(--rkit-ac-cap-title-c, #ffffff);
  --rkit-ac-title-ch: var(--rkit-ac-cap-title-c, #ffffff);
  --rkit-ac-sub-c: var(--rkit-ac-cap-sub-c, rgba(255, 255, 255, 0.8));
  --rkit-ac-sub-ch: var(--rkit-ac-cap-sub-c, rgba(255, 255, 255, 0.8));
  --rkit-ac-desc-c: var(--rkit-ac-cap-desc-c, rgba(255, 255, 255, 0.85));
  --rkit-ac-desc-ch: var(--rkit-ac-cap-desc-c, rgba(255, 255, 255, 0.85));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 24px;
  text-align: var(--rkit-ac-align);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Button & link
 * ------------------------------------------------------------------ */

.rkit-ac__actions {
  margin-top: 20px;
}

/* Caption tidak menangkap klik (link kartu di bawahnya), kecuali tombol. */
.rkit-ac__caption .rkit-ac__actions {
  margin-top: 14px;
  pointer-events: auto;
}

:where(.rkit-ac) .rkit-ac__btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  font-size: 0.875rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--rkit-ac-btn-c);
  background-color: var(--rkit-ac-btn-bg);
  border-radius: 999px;
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.rkit-ac a.rkit-ac__btn:hover,
.rkit-ac a.rkit-ac__btn:focus-visible {
  color: var(--rkit-ac-btn-ch, var(--rkit-ac-btn-c));
  background-color: var(--rkit-ac-btn-bgh, var(--rkit-ac-btn-bg));
}

.rkit-ac__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--rkit-ac-radius);
}

/* ------------------------------------------------------------------ *
 * Preset: Flip
 * ------------------------------------------------------------------ */

.rkit-ac--flip-h {
  --rkit-ac-flip: rotateY(180deg);
}

.rkit-ac--flip-v {
  --rkit-ac-flip: rotateX(180deg);
}

.rkit-ac--flip .rkit-ac__item {
  height: var(--rkit-ac-h);
  perspective: var(--rkit-ac-persp);
}

.rkit-ac--on-click .rkit-ac__item {
  cursor: pointer;
}

.rkit-ac__inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition:
    transform var(--rkit-ac-dur) var(--rkit-ac-ease),
    translate var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.rkit-ac__front {
  transform: rotateY(0deg);
  background-color: rgba(127, 127, 127, 0.14);
}

.rkit-ac__back {
  transform: var(--rkit-ac-flip);
}

/* Default background tiap sisi; Style > Flip Sides menimpanya. Gambar
   background dari control default menutupi seluruh sisi. */
:where(.rkit-ac--flip) .rkit-ac__face {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

:where(.rkit-ac--flip) .rkit-ac__back {
  background-color: var(--rkit-ac-bg);
}

.rkit-ac__back-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Back layout Split: strip gambar + panel teks. Tanpa z-index supaya
   tombol bulat (z 3) tetap di atas link penuh kartu (z 2). */
.rkit-ac__split {
  position: absolute;
  inset: 0;
  display: flex;
}

.rkit-ac--split-right .rkit-ac__split {
  flex-direction: row-reverse;
}

.rkit-ac__split-media {
  position: relative;
  flex: 0 0 var(--rkit-ac-split-w, 40%);
  min-width: 0;
  overflow: hidden;
  background-color: rgba(127, 127, 127, 0.14);
}

/* Gradien default supaya nama terbaca; Style > Flip Sides > Back >
   Overlay menimpanya. */
:where(.rkit-ac__split-media) .rkit-ac__back-overlay {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%);
}

:where(.rkit-ac__split-media) .rkit-ac__caption {
  padding: 16px;
}

:where(.rkit-ac__split) > .rkit-ac__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 24px;
}

.rkit-ac__middle {
  margin-block: auto;
}

.rkit-ac--back-split .rkit-ac__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rkit-ac__quote {
  display: inline-flex;
  margin-left: auto;
  font-size: var(--rkit-ac-quote-s, 44px);
  line-height: 1;
  color: var(--rkit-ac-quote-c, rgba(127, 127, 127, 0.25));
}

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

/*
 * Tombol bulat (Flip): depan & Split di pojok kiri atas, Stacked di
 * pojok kanan atas. Selector .rkit-ac .x (0,2,0) supaya menang dari
 * style <button> Elementor Kit / theme (.elementor-kit-X button = 0,1,1,
 * padding / min-width-nya dulu membuat tombol lonjong dan ikon hilang);
 * control widget ({{WRAPPER}} .x) tetap lebih kuat.
 */
.rkit-ac .rkit-ac__flip-btn {
  position: absolute;
  top: var(--rkit-ac-fb-off, 16px);
  left: var(--rkit-ac-fb-off, 16px);
  z-index: 3;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rkit-ac-fb-box, 40px);
  min-width: 0;
  height: var(--rkit-ac-fb-box, 40px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--rkit-ac-fb-s, 14px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  overflow: visible;
  cursor: pointer;
  color: var(--rkit-ac-fb-c, #ffffff);
  background-color: var(--rkit-ac-fb-bg, #111111);
  border-radius: var(--rkit-ac-fb-radius, 50%);
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    scale 0.3s ease;
}

.rkit-ac .rkit-ac__flip-btn:hover,
.rkit-ac .rkit-ac__flip-btn:focus-visible {
  color: var(--rkit-ac-fb-ch, var(--rkit-ac-fb-c, #ffffff));
  background-color: var(--rkit-ac-fb-bgh, var(--rkit-ac-fb-bg, #111111));
  scale: 1.08;
}

.rkit-ac--back-stacked .rkit-ac__back .rkit-ac__flip-btn {
  left: auto;
  right: var(--rkit-ac-fb-off, 16px);
}

.rkit-ac__flip-btn i,
.rkit-ac__flip-btn svg {
  display: block;
  width: var(--rkit-ac-fb-s, 14px);
  height: var(--rkit-ac-fb-s, 14px);
  font-size: var(--rkit-ac-fb-s, 14px);
  line-height: 1;
  color: inherit;
  fill: currentColor;
}

.rkit-ac__flip-btn i::before {
  display: block;
}

.rkit-ac--on-hover .rkit-ac__item:hover .rkit-ac__inner,
.rkit-ac--on-hover .rkit-ac__item:focus-within .rkit-ac__inner,
.rkit-ac--flip .rkit-ac__item.is-active .rkit-ac__inner {
  transform: var(--rkit-ac-flip);
}

/*
 * 3D Depth: teks dan tombol bulat tiap sisi maju ke arah layar
 * (translateZ) sehingga melayang di atas kartu saat berputar. Sisi
 * memakai overflow: clip karena hidden memaksa flatten dan membatalkan
 * preserve-3d; browser lama tetap hidden, kartu rapi tanpa kedalaman.
 */
.rkit-ac--flip-3d .rkit-ac__face,
.rkit-ac--flip-3d .rkit-ac__split {
  transform-style: preserve-3d;
}

.rkit-ac--flip-3d .rkit-ac__face {
  overflow: clip;
}

.rkit-ac--flip-3d .rkit-ac__front > .rkit-ac__caption,
.rkit-ac--flip-3d .rkit-ac__back > .rkit-ac__body,
.rkit-ac--flip-3d .rkit-ac__split > .rkit-ac__body,
.rkit-ac--flip-3d .rkit-ac__face > .rkit-ac__flip-btn {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(var(--rkit-ac-depth, 60px)) scale(var(--rkit-ac-depth-s, 0.94));
}

/* Teks yang maju ada di depan link penuh kartu: klik diteruskan ke link
   di bawahnya. Tombol bulat tetap bisa diklik. */
.rkit-ac--flip-3d .rkit-ac__back > .rkit-ac__body,
.rkit-ac--flip-3d .rkit-ac__split > .rkit-ac__body {
  pointer-events: none;
}

/* Gambar depan tidak di-zoom: kartu sudah berputar saat hover. */
.rkit-ac--flip .rkit-ac__item .rkit-ac__img {
  transform: none;
}

/* ------------------------------------------------------------------ *
 * Preset: Expand
 * ------------------------------------------------------------------ */

/* Lebar kartu tetap sama (grid Columns); yang membesar tinggi gambarnya.
   Selisih tinggi (Expanded - normal) dicadangkan sebagai padding di tiap
   kartu, jadi baris tidak ikut membesar dan konten di bawah tidak
   melompat. Saat terbuka padding menyusut sebesar gambar memanjang.
   Down: ruang di bawah (judul diam), Up: di atas (dasar gambar diam),
   Both Ways: dibagi dua. Selisih negatif otomatis dibulatkan ke 0. */
.rkit-ac--grow-down {
  --rkit-ac-xpt: 0px;
  --rkit-ac-xpb: calc(var(--rkit-ac-xh-a) - var(--rkit-ac-xh));
}

.rkit-ac--grow-up {
  --rkit-ac-xpt: calc(var(--rkit-ac-xh-a) - var(--rkit-ac-xh));
  --rkit-ac-xpb: 0px;
}

.rkit-ac--grow-center {
  --rkit-ac-xpt: calc((var(--rkit-ac-xh-a) - var(--rkit-ac-xh)) / 2);
  --rkit-ac-xpb: calc((var(--rkit-ac-xh-a) - var(--rkit-ac-xh)) / 2);
}

.rkit-ac--expand .rkit-ac__item,
.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) {
  padding-top: var(--rkit-ac-xpt);
  padding-bottom: var(--rkit-ac-xpb);
}

.rkit-ac--expand .rkit-ac__item {
  transition: padding var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--expand .rkit-ac__item:hover,
.rkit-ac--expand .rkit-ac__item:focus-within,
.rkit-ac--expand .rkit-ac__item.is-active {
  padding-top: 0;
  padding-bottom: 0;
}

.rkit-ac__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
  text-align: var(--rkit-ac-align);
}

:where(.rkit-ac--expand) .rkit-ac__num {
  flex: none;
  font-size: 0.875rem;
}

:where(.rkit-ac--expand .rkit-ac__head) .rkit-ac__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rkit-ac--expand .rkit-ac__card {
  height: var(--rkit-ac-xh);
  overflow: hidden;
  background-color: rgba(127, 127, 127, 0.14);
  transition:
    height var(--rkit-ac-dur) var(--rkit-ac-ease),
    box-shadow var(--rkit-ac-dur) var(--rkit-ac-ease),
    border-color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--expand .rkit-ac__item:hover .rkit-ac__card,
.rkit-ac--expand .rkit-ac__item:focus-within .rkit-ac__card,
.rkit-ac--expand .rkit-ac__item.is-active .rkit-ac__card {
  height: var(--rkit-ac-xh-a, var(--rkit-ac-xh));
}

.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) .rkit-ac__card {
  height: var(--rkit-ac-xh);
}

/* Caption selalu ada; tiap elemennya tampil / tersembunyi sesuai tab
   Visibility (lihat Text entrance). */
:where(.rkit-ac--expand) .rkit-ac__caption {
  padding: 16px;
}

/* ------------------------------------------------------------------ *
 * Preset: Reveal
 * ------------------------------------------------------------------ */

.rkit-ac--reveal {
  --rkit-ac-num-ch: #ffffff;
  --rkit-ac-title-ch: #ffffff;
  --rkit-ac-sub-ch: rgba(255, 255, 255, 0.8);
  --rkit-ac-desc-ch: rgba(255, 255, 255, 0.85);
  --rkit-ac-clip: inset(100% 0 0 0);
}

.rkit-ac--from-top {
  --rkit-ac-clip: inset(0 0 100% 0);
}

.rkit-ac--from-left {
  --rkit-ac-clip: inset(0 100% 0 0);
}

.rkit-ac--from-right {
  --rkit-ac-clip: inset(0 0 0 100%);
}

.rkit-ac--from-center {
  --rkit-ac-clip: inset(50% 50% 50% 50%);
}

:where(.rkit-ac--reveal) .rkit-ac__card {
  height: var(--rkit-ac-h);
  overflow: hidden;
  border: 1px solid rgba(127, 127, 127, 0.2);
}

:where(.rkit-ac--reveal) .rkit-ac__num {
  font-size: 4rem;
  font-weight: 400;
}

.rkit-ac__reveal {
  position: absolute;
  inset: 0;
  clip-path: var(--rkit-ac-clip);
  transition: clip-path var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--reveal .rkit-ac__item:hover .rkit-ac__reveal,
.rkit-ac--reveal .rkit-ac__item:focus-within .rkit-ac__reveal,
.rkit-ac--reveal .rkit-ac__item.is-active .rkit-ac__reveal {
  clip-path: inset(0 0 0 0);
}

.rkit-ac--zoom .rkit-ac__reveal .rkit-ac__img {
  transform: scale(calc(var(--rkit-ac-zoom) + 0.2));
}

.rkit-ac--zoom .rkit-ac__item:hover .rkit-ac__reveal .rkit-ac__img,
.rkit-ac--zoom .rkit-ac__item:focus-within .rkit-ac__reveal .rkit-ac__img,
.rkit-ac--zoom .rkit-ac__item.is-active .rkit-ac__reveal .rkit-ac__img {
  transform: scale(1);
}

/* ------------------------------------------------------------------ *
 * Preset: Folder
 * ------------------------------------------------------------------ */

/*
 * Lapisan (bawah ke atas): sheet (Back Image / gradien) -> object (Image)
 * -> panel map. Saat hover tinggi panel berkurang dari atas (tepi atas
 * turun, nomor ikut turun, teks bawah diam) dan object naik dari balik
 * panel sambil membesar.
 */
.rkit-ac--folder .rkit-ac__card {
  height: var(--rkit-ac-h);
  overflow: hidden;
}

.rkit-ac__sheet {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

:where(.rkit-ac__sheet) {
  background-image: linear-gradient(
    160deg,
    var(--e-global-color-accent, #7b61ff) 0%,
    var(--e-global-color-primary, #1b1464) 70%
  );
}

/* Area gambar: top / left / right dari control Padding (default 0 =
   memenuhi background), bawahnya selalu terselip di balik panel yang
   sudah turun, cukup dalam untuk Hover Lift. */
.rkit-ac__object {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(var(--rkit-ac-panel-h) - var(--rkit-ac-drop) - 12%);
  left: 0;
  opacity: 0;
  transform: translateY(60%) scale(0.7) rotate(-6deg);
  transform-origin: 50% 100%;
  transition:
    transform var(--rkit-ac-dur) cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity calc(var(--rkit-ac-dur) * 0.5) var(--rkit-ac-ease);
  pointer-events: none;
}

/* Visible Before Hover: gambar sudah tampil (Offset Before Hover
   menurunkannya), saat hover naik sedikit sebesar Hover Lift. */
.rkit-ac--peek .rkit-ac__object {
  opacity: 1;
  transform: translateY(var(--rkit-ac-peek, 0%));
}

.rkit-ac .rkit-ac__object .rkit-ac__img {
  object-fit: var(--rkit-ac-obj-fit);
  border-radius: 0;
  transform: none;
}

.rkit-ac--folder .rkit-ac__item:hover .rkit-ac__object,
.rkit-ac--folder .rkit-ac__item:focus-within .rkit-ac__object,
.rkit-ac--folder .rkit-ac__item.is-active .rkit-ac__object {
  opacity: 1;
  transform: translateY(calc(var(--rkit-ac-obj-lift, 8%) * -1));
}

.rkit-ac__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: var(--rkit-ac-panel-h);
  border-radius: var(--rkit-ac-radius);
  /* Sudut bawah sudah dipotong kartu (radius dalam), jadi tidak ada
     celah saat kartu ber-border. */
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transition:
    height var(--rkit-ac-dur) var(--rkit-ac-ease),
    background-color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--folder .rkit-ac__item:hover .rkit-ac__panel,
.rkit-ac--folder .rkit-ac__item:focus-within .rkit-ac__panel,
.rkit-ac--folder .rkit-ac__item.is-active .rkit-ac__panel {
  height: calc(var(--rkit-ac-panel-h) - var(--rkit-ac-drop));
}

:where(.rkit-ac--tab) .rkit-ac__panel {
  border-top-left-radius: 0;
}

/* Tab map: sudut kiri membulat, sisi kanan miring. */
.rkit-ac--tab .rkit-ac__panel::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  width: var(--rkit-ac-tab-w);
  height: var(--rkit-ac-tab-h);
  background: inherit;
  border-radius: 12px 12px 0 0;
  clip-path: polygon(0 0, calc(100% - var(--rkit-ac-tab-h)) 0, 100% 100%, 0 100%);
}

:where(.rkit-ac--folder) .rkit-ac__body {
  padding: 22px;
}

.rkit-ac__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rkit-ac--dim .rkit-ac__item {
  transition: opacity var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--dim .rkit-ac__list:hover .rkit-ac__item:not(:hover),
.rkit-ac--dim .rkit-ac__list.has-active .rkit-ac__item:not(.is-active) {
  opacity: 0.45;
}

/* ------------------------------------------------------------------ *
 * Text entrance
 *
 * Teks bertanda .rkit-ac__anim tersembunyi sampai kartu terbuka, lalu
 * masuk satu per satu: delay = Delay + urutan (--i) x Stagger. Saat
 * kartu menutup teks langsung keluar tanpa delay. Flip mode Click hanya
 * memakai .is-active supaya hover tidak "menghabiskan" animasinya.
 * ------------------------------------------------------------------ */

.rkit-ac--ta-fade-down {
  --rkit-ac-ta-from: translate3d(0, calc(var(--rkit-ac-ta-d) * -1), 0);
}

.rkit-ac--ta-fade-left {
  --rkit-ac-ta-from: translate3d(calc(var(--rkit-ac-ta-d) * -1), 0, 0);
}

.rkit-ac--ta-fade-right {
  --rkit-ac-ta-from: translate3d(var(--rkit-ac-ta-d), 0, 0);
}

.rkit-ac--ta-zoom {
  --rkit-ac-ta-from: scale(0.85);
}

.rkit-ac--ta-blur {
  --rkit-ac-ta-from: translate3d(0, calc(var(--rkit-ac-ta-d) * 0.5), 0);
  --rkit-ac-ta-blur: 8px;
}

.rkit-ac__anim {
  opacity: 0;
  transform: var(--rkit-ac-ta-from);
  filter: blur(var(--rkit-ac-ta-blur));
  transition:
    opacity var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    transform var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    filter var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac:not(.rkit-ac--on-click) .rkit-ac__item:hover .rkit-ac__anim,
.rkit-ac:not(.rkit-ac--on-click) .rkit-ac__item:focus-within .rkit-ac__anim,
.rkit-ac__item.is-active .rkit-ac__anim {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay:
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    0s;
}

/* Expand: kartu yang terbuka sejak awal kembali ke state Normal saat
   kartu lain di-hover. */
.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) .rkit-ac__anim {
  opacity: 0;
  transform: var(--rkit-ac-ta-from);
  filter: blur(var(--rkit-ac-ta-blur));
  transition-delay: 0s;
}

.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) .rkit-ac__anim-out {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Kebalikan .rkit-ac__anim (teks sisi depan Flip): keluar tanpa delay
   saat kartu terbuka, masuk lagi dengan delay + stagger saat kartu
   kembali ke depan. Delay ada di state normal karena transisi memakai
   nilai state tujuan. */
.rkit-ac__anim-out {
  transition:
    opacity var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    transform var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    filter var(--rkit-ac-ta-dur) var(--rkit-ac-ease),
    color var(--rkit-ac-dur) var(--rkit-ac-ease);
  transition-delay:
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    calc(var(--rkit-ac-ta-delay) + var(--i, 0) * var(--rkit-ac-ta-stagger)),
    0s;
}

.rkit-ac:not(.rkit-ac--on-click) .rkit-ac__item:hover .rkit-ac__anim-out,
.rkit-ac:not(.rkit-ac--on-click) .rkit-ac__item:focus-within .rkit-ac__anim-out,
.rkit-ac__item.is-active .rkit-ac__anim-out {
  opacity: 0;
  transform: var(--rkit-ac-ta-from);
  filter: blur(var(--rkit-ac-ta-blur));
  transition-delay: 0s;
}

/* Entrance None: tanpa gerak, elemen tetap muncul / hilang sesuai tab
   Visibility, cukup berganti seketika. */
.rkit-ac.rkit-ac--ta-none {
  --rkit-ac-ta-from: none;
  --rkit-ac-ta-blur: 0px;
  --rkit-ac-ta-dur: 1ms;
  --rkit-ac-ta-stagger: 0ms;
}

/*
 * Fold: elemen yang hanya tampil di satu tab Visibility (Expand, Reveal,
 * Folder) juga melipat tingginya supaya tidak menyisakan ruang kosong.
 *   --in  : terlipat, membuka saat kartu terbuka (tab Hover saja).
 *   --out : terbuka, melipat saat kartu terbuka (tab Normal saja).
 */
.rkit-ac__fold {
  display: grid;
  transition: grid-template-rows var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac__fold--in,
.rkit-ac__item:hover .rkit-ac__fold--out,
.rkit-ac__item:focus-within .rkit-ac__fold--out,
.rkit-ac__item.is-active .rkit-ac__fold--out,
.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) .rkit-ac__fold--in {
  grid-template-rows: 0fr;
}

.rkit-ac__fold--out,
.rkit-ac__item:hover .rkit-ac__fold--in,
.rkit-ac__item:focus-within .rkit-ac__fold--in,
.rkit-ac__item.is-active .rkit-ac__fold--in,
.rkit-ac--expand .rkit-ac__list:hover .rkit-ac__item.is-active:not(:hover) .rkit-ac__fold--out {
  grid-template-rows: 1fr;
}

.rkit-ac__fold-inner {
  min-height: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Hover lift (bukan Expand)
 * ------------------------------------------------------------------ */

.rkit-ac--flip .rkit-ac__item:hover .rkit-ac__inner,
.rkit-ac--flip .rkit-ac__item.is-active .rkit-ac__inner,
.rkit-ac--reveal .rkit-ac__item:hover .rkit-ac__card,
.rkit-ac--reveal .rkit-ac__item.is-active .rkit-ac__card,
.rkit-ac--folder .rkit-ac__item:hover .rkit-ac__card,
.rkit-ac--folder .rkit-ac__item.is-active .rkit-ac__card {
  translate: 0 var(--rkit-ac-hover-y, 0);
}

/* ------------------------------------------------------------------ *
 * Preset deck: Swipe Deck, Arc Deck, Fling Stack
 *
 * Semua kartu absolut di tengah stage. JS (atau PHP saat load) menulis
 * per kartu: --rkit-ac-p posisi relatif kartu aktif (pecahan saat drag),
 * --rkit-ac-ap nilai mutlaknya, --rkit-ac-c 1 untuk kartu aktif (memudar
 * saat digeser), --side +1 / -1 bergantian. Bentuk tiap preset murni dari
 * variable ini.
 *
 * Tiga variable posisi didaftarkan (@property) sehingga bisa ditransisi:
 * Swipe & Arc menganimasikan posisinya, bukan transform, jadi kartu Arc
 * meluncur di sepanjang busur (bukan garis lurus). Class --smooth dipasang
 * JS bila browser mendukung; tanpa itu transform yang ditransisi.
 * ------------------------------------------------------------------ */

@property --rkit-ac-p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --rkit-ac-ap {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

@property --rkit-ac-c {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

/* Arc: posisi yang dirapatkan ke luar, sign(p)·|p|^0.73 (dari JS / PHP). */
@property --rkit-ac-q {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.rkit-ac--deck {
  --rkit-ac-dw: 300px;
  --rkit-ac-stage-pad: 40px;
  --rkit-ac-dim: 1;
  --rkit-ac-deck-persp: 1400px;
  /* Ruang atas / bawah kartu; Arc menghitungnya dari bentuk busur. */
  --rkit-ac-pad-t: var(--rkit-ac-stage-pad);
  --rkit-ac-pad-b: var(--rkit-ac-stage-pad);
  --rkit-ac-tr: transform var(--rkit-ac-dur) var(--rkit-ac-ease);
  /* Kartu samping / kartu yang dilempar tidak memicu scroll horizontal. */
  overflow-x: clip;
}

.rkit-ac--deck.rkit-ac--smooth:is(.rkit-ac--swipe, .rkit-ac--arc) {
  --rkit-ac-tr:
    --rkit-ac-p var(--rkit-ac-dur) var(--rkit-ac-ease),
    --rkit-ac-ap var(--rkit-ac-dur) var(--rkit-ac-ease),
    --rkit-ac-c var(--rkit-ac-dur) var(--rkit-ac-ease),
    --rkit-ac-q var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--swipe {
  --rkit-ac-dim: 0.7;
  --rkit-ac-sw-x: 42%;
  --rkit-ac-sw-rot: 30deg;
  --rkit-ac-sw-z: 140px;
  --rkit-ac-sw-s: 0.06;
}

/*
 * Arc: --rkit-ac-vis (ditulis PHP) = posisi q kartu terjauh yang tampil
 * di satu sisi. Ruang atas = angkatan + pembesaran kartu aktif, ruang
 * bawah = turunnya kartu terluar di busur + sudutnya yang ikut miring.
 * Jadi kartu tidak keluar dari tinggi widget.
 */
.rkit-ac--arc {
  --rkit-ac-dw: 220px;
  --rkit-ac-stage-pad: 16px;
  --rkit-ac-arc-a: 6deg;
  --rkit-ac-arc-r: 1600px;
  --rkit-ac-arc-lift: 12px;
  --rkit-ac-arc-as: 1;
  --rkit-ac-arc-st: 0.07;
  --rkit-ac-arc-max: calc(var(--rkit-ac-vis, 2.2) * var(--rkit-ac-arc-a));
  --rkit-ac-pad-t: calc(
    var(--rkit-ac-stage-pad) + var(--rkit-ac-arc-lift)
    + max(0, var(--rkit-ac-arc-as) - 1) * var(--rkit-ac-h) / 2
  );
  --rkit-ac-pad-b: calc(
    var(--rkit-ac-stage-pad)
    + (1 - cos(var(--rkit-ac-arc-max))) * var(--rkit-ac-arc-r)
    + sin(var(--rkit-ac-arc-max)) * min(var(--rkit-ac-dw), 86vw) / 2
  );
}

.rkit-ac--fling {
  --rkit-ac-dw: 260px;
  --rkit-ac-dim: 1;
  --rkit-ac-stage-pad: 56px;
  --rkit-ac-fl-y: 12px;
  --rkit-ac-fl-s: 0.04;
  --rkit-ac-fl-rot: 5deg;
  --rkit-ac-fl-fade: 0.2;
  --rkit-ac-fl-spread: 1;
  --rkit-ac-fl-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rkit-ac--deck .rkit-ac__list {
  position: relative;
  display: block;
  height: var(--rkit-ac-h);
  padding: var(--rkit-ac-pad-t) 0 var(--rkit-ac-pad-b);
  box-sizing: content-box;
  perspective: var(--rkit-ac-deck-persp);
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
  outline: none;
}

.rkit-ac--deck .rkit-ac__list:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.rkit-ac--deck.rkit-ac--draggable .rkit-ac__list {
  cursor: grab;
}

.rkit-ac--deck.is-dragging .rkit-ac__list {
  cursor: grabbing;
}

.rkit-ac--deck .rkit-ac__item {
  position: absolute;
  top: var(--rkit-ac-pad-t);
  right: 0;
  left: 0;
  width: min(var(--rkit-ac-dw), 86%);
  height: var(--rkit-ac-h);
  margin-inline: auto;
  cursor: inherit;
  transition:
    var(--rkit-ac-tr),
    opacity calc(var(--rkit-ac-dur) * 0.6) var(--rkit-ac-ease),
    visibility 0s linear 0s;
  will-change: transform;
}

/* Kartu samping bisa diklik untuk dijadikan aktif (bukan Fling). */
.rkit-ac--swipe .rkit-ac__item:not(.is-active),
.rkit-ac--arc .rkit-ac__item:not(.is-active) {
  cursor: pointer;
}

.rkit-ac--deck .rkit-ac__item.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    var(--rkit-ac-tr),
    opacity calc(var(--rkit-ac-dur) * 0.6) var(--rkit-ac-ease),
    visibility 0s linear calc(var(--rkit-ac-dur) * 0.6);
}

/* Saat drag kartu mengikuti pointer tanpa transisi. */
.rkit-ac--deck.is-dragging .rkit-ac__item {
  transition: none;
}

/* Kartu yang pindah ujung (loop) tidak meluncur melintasi stage:
   langsung di tempat barunya lalu muncul perlahan. */
.rkit-ac--deck .rkit-ac__item.is-jump {
  transition: opacity 0s, visibility 0s;
  animation: rkit-ac-pop calc(var(--rkit-ac-dur) * 0.6) var(--rkit-ac-ease) both;
}

@keyframes rkit-ac-pop {
  from {
    opacity: 0;
  }
}

.rkit-ac--deck .rkit-ac__card {
  height: 100%;
  overflow: hidden;
  background-color: rgba(127, 127, 127, 0.14);
  transition:
    filter var(--rkit-ac-dur) var(--rkit-ac-ease),
    box-shadow var(--rkit-ac-dur) var(--rkit-ac-ease),
    border-color var(--rkit-ac-dur) var(--rkit-ac-ease);
}

.rkit-ac--deck .rkit-ac__item:not(.is-active) .rkit-ac__card {
  filter: brightness(var(--rkit-ac-dim));
}

/* Gambar tidak di-zoom: kartu sudah bergerak. */
.rkit-ac--deck .rkit-ac__item .rkit-ac__img {
  transform: none;
}

:where(.rkit-ac--deck) .rkit-ac__caption {
  padding: 22px;
}

/* Teks tab Hover hanya di kartu aktif, bukan saat kartu samping di-hover. */
.rkit-ac--deck .rkit-ac__item:not(.is-active) .rkit-ac__fold--in {
  grid-template-rows: 0fr;
}

.rkit-ac--deck .rkit-ac__item:not(.is-active) .rkit-ac__fold--out {
  grid-template-rows: 1fr;
}

/* Swipe Deck: coverflow. Kartu samping bergeser, mundur, mengecil dan
   berputar (sisi luarnya menjauh). */
.rkit-ac--swipe .rkit-ac__item {
  transform:
    translateX(calc(var(--rkit-ac-p, 0) * var(--rkit-ac-sw-x)))
    translateZ(calc(var(--rkit-ac-ap, 0) * var(--rkit-ac-sw-z) * -1))
    rotateY(calc(clamp(-1, var(--rkit-ac-p, 0), 1) * var(--rkit-ac-sw-rot)))
    scale(max(0.2, 1 - var(--rkit-ac-ap, 0) * var(--rkit-ac-sw-s)));
}

/* Arc Deck: titik tengah kartu di lingkaran berjari-jari Arc Radius
   (pusatnya di bawah kartu aktif), sudut θ = q·Fan Angle. q merapat ke
   luar, jadi kartu luar makin bertumpuk. Kartu bergeser sin(θ)·R ke
   samping, turun (1 - cos θ)·R, miring θ, lalu diskalakan dari
   tengahnya sendiri: makin jauh makin kecil sedikit demi sedikit. */
.rkit-ac--arc .rkit-ac__item {
  transform:
    translate(
      calc(sin(var(--rkit-ac-q, 0) * var(--rkit-ac-arc-a)) * var(--rkit-ac-arc-r)),
      calc(
        (1 - cos(var(--rkit-ac-q, 0) * var(--rkit-ac-arc-a))) * var(--rkit-ac-arc-r)
        - var(--rkit-ac-c, 0) * var(--rkit-ac-arc-lift)
      )
    )
    rotate(calc(var(--rkit-ac-q, 0) * var(--rkit-ac-arc-a)))
    scale(max(0.3, var(--rkit-ac-arc-as) - var(--rkit-ac-ap, 0) * var(--rkit-ac-arc-st)));
}

/*
 * Fling Stack, tiga keadaan:
 *   Stack   : tumpukan rapat, kartu belakang sedikit turun, miring
 *             bergantian dan makin pudar (bukan makin gelap).
 *   Spread  : hover di kartu -> kartu belakang berserakan di sekitar
 *             kartu teratas (--sx / --sy dalam satuan ukuran kartu, --sr
 *             sudut; pola dari JS), lalu kembali saat kursor keluar.
 *   Shuffle : klik -> tumpukan menguncup sebentar (.is-shuffling), kartu
 *             berikutnya naik ke atas sambil meluruskan diri, lalu kartu
 *             belakang memantul keluar ke posisinya (easing spring).
 * --fx / --fy / --fr = posisi drag atau lemparan kartu teratas.
 */
.rkit-ac--fling .rkit-ac__item {
  cursor: pointer;
  opacity: max(0.1, 1 - var(--rkit-ac-p, 0) * var(--rkit-ac-fl-fade));
  transform:
    translate3d(var(--fx, 0px), calc(var(--rkit-ac-p, 0) * var(--rkit-ac-fl-y) + var(--fy, 0px)), 0)
    rotate(calc(var(--rkit-ac-p, 0) * var(--rkit-ac-fl-rot) * var(--side, 1) + var(--fr, 0deg)))
    scale(max(0.2, 1 - var(--rkit-ac-p, 0) * var(--rkit-ac-fl-s)));
  transition:
    transform var(--rkit-ac-dur) var(--rkit-ac-fl-ease),
    opacity calc(var(--rkit-ac-dur) * 0.6) var(--rkit-ac-ease),
    visibility 0s linear 0s;
  /* Kartu lebih dalam bergerak sedikit belakangan. */
  transition-delay: calc(var(--rkit-ac-p, 0) * 30ms), 0s, 0s;
}

.rkit-ac--fling.is-spread .rkit-ac__item:not(.is-active):not(.is-hidden) {
  opacity: max(0.15, 1 - max(0, var(--rkit-ac-p, 0) - 3) * 0.4);
  transform:
    translate(
      calc(var(--sx, 0) * var(--rkit-ac-fl-spread) * 100%),
      calc(var(--sy, 0) * var(--rkit-ac-fl-spread) * 100%)
    )
    rotate(var(--sr, 0deg))
    scale(0.9);
  transition-delay: calc((var(--rkit-ac-p, 1) - 1) * 40ms), 0s, 0s;
}

/* Menguncup di belakang kartu teratas, cepat, sebelum memantul keluar. */
.rkit-ac--fling.is-shuffling .rkit-ac__item:not(.is-active) {
  transform: scale(0.94);
  transition-duration: 160ms, 160ms, 0s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
}

.rkit-ac--fling .rkit-ac__item.is-flung {
  transition:
    transform calc(var(--rkit-ac-dur) * 0.6) cubic-bezier(0.2, 0.7, 0.3, 1),
    opacity calc(var(--rkit-ac-dur) * 0.6) var(--rkit-ac-ease);
}

/* Navigasi */
.rkit-ac__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--rkit-ac-nav-mt, 8px);
}

.rkit-ac__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rkit-ac-dot-gap, 8px);
}

/* Selector .rkit-ac .x supaya menang dari style <button> Elementor Kit
   / theme (lihat .rkit-ac__flip-btn). */
.rkit-ac .rkit-ac__dot {
  display: block;
  flex: none;
  box-sizing: border-box;
  width: var(--rkit-ac-dot-s, 8px);
  min-width: 0;
  height: var(--rkit-ac-dot-s, 8px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background-color: var(--rkit-ac-dot-c, rgba(127, 127, 127, 0.4));
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

.rkit-ac .rkit-ac__dot.is-active {
  width: var(--rkit-ac-dot-aw, 24px);
  background-color: var(--rkit-ac-dot-ac, var(--e-global-color-primary, #111111));
}

.rkit-ac .rkit-ac__arrow {
  z-index: 300;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rkit-ac-ar-box, 44px);
  min-width: 0;
  height: var(--rkit-ac-ar-box, 44px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--rkit-ac-ar-s, 14px);
  line-height: 1;
  cursor: pointer;
  color: var(--rkit-ac-ar-c, #111111);
  background-color: var(--rkit-ac-ar-bg, #ffffff);
  border-radius: var(--rkit-ac-ar-radius, 50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease,
    scale 0.3s ease;
}

.rkit-ac .rkit-ac__arrow:hover,
.rkit-ac .rkit-ac__arrow:focus-visible {
  color: var(--rkit-ac-ar-ch, var(--rkit-ac-ar-c, #111111));
  background-color: var(--rkit-ac-ar-bgh, var(--rkit-ac-ar-bg, #ffffff));
  scale: 1.06;
}

.rkit-ac .rkit-ac__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  scale: 1;
}

.rkit-ac__arrow i,
.rkit-ac__arrow svg {
  display: block;
  width: var(--rkit-ac-ar-s, 14px);
  height: var(--rkit-ac-ar-s, 14px);
  font-size: var(--rkit-ac-ar-s, 14px);
  line-height: 1;
  color: inherit;
  fill: currentColor;
}

.rkit-ac__arrow i::before {
  display: block;
}

/* Sides: panah di kiri & kanan, tengah tinggi kartu. */
.rkit-ac--nav-sides .rkit-ac__arrow {
  position: absolute;
  top: calc(var(--rkit-ac-pad-t) + var(--rkit-ac-h) / 2);
  translate: 0 -50%;
}

.rkit-ac--nav-sides .rkit-ac__arrow--prev {
  left: var(--rkit-ac-ar-off, 16px);
}

.rkit-ac--nav-sides .rkit-ac__arrow--next {
  right: var(--rkit-ac-ar-off, 16px);
}

@media (prefers-reduced-motion: reduce) {
  .rkit-ac,
  .rkit-ac * {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}