/* ============================================
   STAGE ENHANCE — 3D / Glassmorphism / Hyperframe
   Visual layer di atas main.css. Konten TIDAK berubah.
   ============================================ */

/* ---- Animated Mesh Background + Floating Blobs ---- */
body {
  background:
    radial-gradient(at 12% 18%, rgba(249,115,22,.10) 0, transparent 45%),
    radial-gradient(at 88% 12%, rgba(139,92,246,.12) 0, transparent 45%),
    radial-gradient(at 50% 92%, rgba(59,130,246,.10) 0, transparent 50%),
    linear-gradient(180deg, #eaf4ff, #f4f0ff 55%, #fff4e6) !important;
  background-attachment: fixed;
  position: relative;
}
body::before, body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  z-index: -1;
  opacity: .35;
  pointer-events: none;
  animation: blobFloat 22s ease-in-out infinite;
}
body::before {
  top: -120px; right: -100px;
  width: 420px; height: 420px;
  background: radial-gradient(circle, #f97316, transparent 70%);
}
body::after {
  bottom: -140px; left: -120px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, #8b5cf6, transparent 70%);
  animation-delay: -8s;
}
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-40px) scale(1.15); }
}

/* ---- Sticky Glass Header ---- */
.site-header {
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(120,53,15,.18) !important;
  position: sticky; top: 0; z-index: 90;
  box-shadow: 0 4px 24px rgba(15,23,42,.06);
}

/* ---- Stage Hero — 3D Float + Glow ---- */
.stage-hero {
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,247,237,.78)) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(120,53,15,.18) !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 60px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  position: relative;
  overflow: hidden;
  animation: heroIn .7s cubic-bezier(.16,1,.3,1);
}
.stage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 0%, rgba(249,115,22,.16), transparent 55%);
  pointer-events: none;
}
.stage-hero .emoji-big {
  filter: drop-shadow(0 12px 24px rgba(249,115,22,.35));
  animation: emojiFloat 4s ease-in-out infinite;
}
@keyframes emojiFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-10px) rotate(-3deg); }
}
.stage-hero .stage-num {
  background: linear-gradient(135deg, #ef4444, #f97316) !important;
  box-shadow: 0 6px 16px rgba(239,68,68,.4);
  letter-spacing: 1px;
}
.stage-hero h1 {
  background: linear-gradient(135deg, #78350f, #b45309, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Cards — Glassmorphism + 3D Hover Tilt ---- */
.card, .goal-card {
  background: rgba(255,255,255,.74) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 20px !important;
  box-shadow:
    0 10px 36px rgba(15,23,42,.09),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  transform-style: preserve-3d;
  position: relative;
}
.card:hover, .goal-card:hover {
  transform: translateY(-6px) rotateX(2.5deg);
  box-shadow:
    0 28px 60px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* accent bar di kiri tiap card */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f97316, #8b5cf6);
  opacity: .55;
}

/* konsep cards (eef2ff bg) keep distinct tint */
.card[style*="eef2ff"] {
  background: rgba(238,242,255,.78) !important;
}
.card[style*="fef3c7"], .card[style*="fde68a"] {
  background: rgba(254,243,199,.80) !important;
}
.card[style*="dbeafe"], .card[style*="bfdbfe"] {
  background: rgba(219,234,254,.80) !important;
}
.card[style*="fce7f3"], .card[style*="fbcfe8"] {
  background: rgba(252,231,243,.80) !important;
}
.card[style*="fee2e2"], .card[style*="fecaca"] {
  background: rgba(254,226,226,.82) !important;
}

/* ---- Card headings — gradient accent ---- */
.card h2, .goal-card h2 {
  letter-spacing: -.3px;
}

/* ---- KPI chips — glass pills with 3D pop ---- */
.goal-card .kpi {
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(120,53,15,.25) !important;
  border-radius: 14px !important;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 18px rgba(15,23,42,.07);
}
.goal-card .kpi:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 14px 30px rgba(15,23,42,.13);
}

/* ---- Checklist items — glass + hover slide ---- */
.checklist-item {
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 12px !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.checklist-item:hover {
  transform: translateX(4px);
  background: rgba(254,243,199,.85) !important;
  box-shadow: 0 6px 18px rgba(245,158,11,.18);
}

/* ---- Quiz questions — glass cards ---- */
.quiz-q {
  background: rgba(255,255,255,.65) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 14px !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.quiz-q:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15,23,42,.1);
}
.quiz-q .opt {
  transition: transform .15s ease, background .15s ease;
}
.quiz-q .opt:hover {
  transform: translateX(3px);
}

/* ---- Progress bar — glow ---- */
.progress-bar {
  background: rgba(15,23,42,.08) !important;
  border-radius: 99px !important;
  overflow: hidden;
}
.progress-bar .fill {
  background: linear-gradient(90deg, #f97316, #8b5cf6) !important;
  box-shadow: 0 0 16px rgba(249,115,22,.5);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}

/* ---- Tab persona (Bu Tini / Mas Kevin) — modern tab ---- */
.praktik-tabs .tab-bar {
  border-bottom: none !important;
  gap: 8px !important;
}
.praktik-tabs .tab-btn {
  border-radius: 14px !important;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 14px rgba(15,23,42,.08);
}
.praktik-tabs .tab-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
.praktik-tabs .tab-btn.active {
  box-shadow: 0 8px 22px rgba(180,83,9,.32);
}
.praktik-tabs .tab-content {
  animation: tabIn .4s cubic-bezier(.16,1,.3,1);
}
@keyframes tabIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Buttons — modern depth ---- */
.btn-primary, button.btn-primary {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  border: none !important;
  box-shadow: 0 8px 22px rgba(249,115,22,.36) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(249,115,22,.46) !important;
}

/* ---- Scroll Fade-Up Animation ---- */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.fade-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Code blocks — modern ---- */
.card pre, pre {
  border-radius: 12px !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.3);
}

/* ---- Tables in cards — cleaner ---- */
.card table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}

/* ---- Reduce motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .stage-hero, .stage-hero .emoji-big,
  .fade-on-scroll, .card, .goal-card { animation: none !important; transition: none !important; }
  .fade-on-scroll { opacity: 1; transform: none; }
}

/* ---- Mobile — soften 3D ---- */
@media (max-width: 600px) {
  .card:hover, .goal-card:hover { transform: translateY(-3px); }
  body::before, body::after { opacity: .25; }
}


/* persona-section safety — force visible di semua viewport (anti regression) */
.praktik-tabs { display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 100px; box-sizing: border-box; }
.tab-content.active { display: block !important; }
.tab-content { box-sizing: border-box; max-width: 100%; }
@media (max-width: 480px) {
  .praktik-tabs { padding: 14px !important; }
  .tab-content { font-size: 13.5px !important; }
}