/* ============================================================
   RFONLINE.DEV — Hero split layout + rotating popup card
   Kiri: judul & teks.  Kanan: kartu popup yang berganti acak.
   ============================================================ */

/* Saat split aktif, hero-content jadi grid 2 kolom & rata kiri */
.hero.hero-split .hero-content {
  max-width: 1200px;
  width: 100%;
  text-align: left;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 56px;
  padding: 120px 24px 90px;
}
.hero.hero-split .hero-title,
.hero.hero-split .hero-subtitle {
  margin-left: 0;
  margin-right: 0;
  max-width: 560px;
}
.hero.hero-split .hero-actions { justify-content: flex-start; }
.hero-split .hero-left { position: relative; z-index: 3; }

/* ---- Stage kanan tempat kartu muncul ---- */
.hero-rotator {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.hero-rotator-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 420px;
}

/* ---- Kartu popup ---- */
.hero-rcard {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(155deg, rgba(28,22,52,.92), rgba(14,12,28,.92));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.hero-rcard.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hero-rcard.is-leaving {
  opacity: 0;
  transform: translateY(-16px) scale(.97);
}

/* Glow aksen di pojok kartu (kayak di video) */
.hero-rcard::after {
  content: "";
  position: absolute;
  width: 220px; height: 220px;
  top: -90px; right: -70px;
  background: radial-gradient(circle, var(--color-accent-glow, rgba(91,115,255,.4)), transparent 70%);
  filter: blur(8px);
  opacity: .7;
  pointer-events: none;
}

.hero-rcard-label {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  position: relative; z-index: 2;
}

/* ===== Tipe: STAT ===== */
.hrc-stat-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt, var(--color-accent)));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; z-index: 2;
}
.hrc-stat-label { color: var(--color-text-secondary); font-size: 1rem; position: relative; z-index: 2; }
.hrc-stat-icon { font-size: 2rem; position: relative; z-index: 2; }

/* ===== Tipe: PRODUCT / MODULE ===== */
.hrc-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; position: relative; z-index: 2; }
.hrc-desc { color: var(--color-text-secondary); font-size: .92rem; line-height: 1.5; position: relative; z-index: 2; }
.hrc-price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: var(--color-accent); position: relative; z-index: 2; }
.hrc-price small { font-size: .8rem; color: var(--color-text-secondary); font-weight: 500; }
.hrc-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 2; }
.hrc-feats li { font-size: .86rem; color: var(--color-text-secondary); display: flex; gap: 8px; align-items: flex-start; }
.hrc-feats li::before { content: "✓"; color: var(--color-accent); font-weight: 800; }
.hrc-pill { align-self: flex-start; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-alt, var(--color-accent))); color: #fff; position: relative; z-index: 2; }

/* ===== Tipe: IMAGE ===== */
.hero-rcard.hrc-type-image { padding: 0; }
.hrc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hrc-img-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 40px 22px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
  font-weight: 600;
}

/* ===== Tipe: ANIMATION ===== */
.hrc-anim-wrap { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 200px; }

/* orbit anim */
.hrc-orbit { position: relative; width: 200px; height: 200px; }
.hrc-orbit .core { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-accent), var(--color-accent-alt, var(--color-accent))); box-shadow: 0 0 40px var(--color-accent-glow, rgba(91,115,255,.6)); }
.hrc-orbit .ring { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.hrc-orbit .ring.r2 { inset: 28px; }
.hrc-orbit .ring.r3 { inset: 56px; }
.hrc-orbit .ring i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); }
.hrc-orbit .ring.r1 { animation: hrc-spin 6s linear infinite; }
.hrc-orbit .ring.r2 { animation: hrc-spin 4.4s linear infinite reverse; }
.hrc-orbit .ring.r3 { animation: hrc-spin 3.2s linear infinite; }
@keyframes hrc-spin { to { transform: rotate(360deg); } }

/* bar chart anim */
.hrc-chart { display: flex; align-items: flex-end; gap: 12px; height: 170px; width: 100%; padding: 0 10px; }
.hrc-chart span { flex: 1; height: 100%; min-width: 10px; border-radius: 8px 8px 0 0; background: linear-gradient(to top, var(--color-accent), var(--color-accent-alt, var(--color-accent))); box-shadow: 0 0 14px var(--color-accent-glow, rgba(91,115,255,.45)); animation: hrc-bar 2.4s ease-in-out infinite; transform-origin: bottom; }
.hrc-chart span:nth-child(1){ animation-delay: 0s; } .hrc-chart span:nth-child(2){ animation-delay: .2s; } .hrc-chart span:nth-child(3){ animation-delay: .4s; } .hrc-chart span:nth-child(4){ animation-delay: .6s; } .hrc-chart span:nth-child(5){ animation-delay: .8s; } .hrc-chart span:nth-child(6){ animation-delay: 1s; }
.hrc-chart span:nth-child(1){ animation-duration: 2.4s; } .hrc-chart span:nth-child(2){ animation-duration: 2.0s; } .hrc-chart span:nth-child(3){ animation-duration: 2.8s; } .hrc-chart span:nth-child(4){ animation-duration: 1.8s; } .hrc-chart span:nth-child(5){ animation-duration: 2.6s; } .hrc-chart span:nth-child(6){ animation-duration: 2.2s; }
@keyframes hrc-bar { 0%,100%{ transform: scaleY(.25);} 50%{ transform: scaleY(1);} }

/* pulse / radar anim */
.hrc-pulse { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.hrc-pulse span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: hrc-pulse 2.6s ease-out infinite; }
.hrc-pulse span:nth-child(2){ animation-delay: .8s; } .hrc-pulse span:nth-child(3){ animation-delay: 1.6s; }
.hrc-pulse .dot { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-accent), var(--color-accent-alt, var(--color-accent))); box-shadow: 0 0 30px var(--color-accent-glow, rgba(91,115,255,.7)); }
@keyframes hrc-pulse { 0%{ transform: scale(.4); opacity: .9; } 100%{ transform: scale(1); opacity: 0; } }

/* dot indicators */
.hero-rotator-dots { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
.hero-rotator-dots b { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); cursor: pointer; transition: all .3s ease; }
.hero-rotator-dots b.on { background: var(--color-accent); width: 22px; border-radius: 4px; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero.hero-split .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 100px 20px 70px;
  }
  .hero.hero-split .hero-title,
  .hero.hero-split .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero.hero-split .hero-actions { justify-content: center; }
  .hero-rotator { min-height: 360px; }
  .hero-rotator-stage { height: 360px; max-width: 100%; }
}
@media (max-width: 480px) {
  .hero-rotator-stage { height: 320px; }
  .hrc-stat-value { font-size: 2.4rem; }
}