/* ============================================
   KelolaCredit Logo — SVG / Inline helper
   Reusable via <use> or direct include
   ============================================ */

/* Additional page-specific enhancements */

/* Pulse animation for CTA badge */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(217,164,65,0); }
}
.pulse { animation: pulse-gold 2.2s infinite; }

/* Float animation for hero icons */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.float { animation: float 3.5s ease-in-out infinite; }

/* Shimmer on gold text */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 40%, #fff 55%, var(--gold-bright) 70%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Fade-in on scroll */
.fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Stat counter strip */
.stat-strip {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: center; padding: 2rem 0;
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 2rem; font-weight: 800;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}
.stat-label { font-size: 0.82rem; color: var(--text-dark); }

/* Tag pills */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  background: rgba(217,164,65,0.08);
  border: 1px solid rgba(217,164,65,0.2);
  color: var(--gold); font-size: 0.78rem; font-weight: 500;
  padding: 4px 12px; border-radius: 100px;
}