/* ============================================
   GLOBAL SUCCESS TEACHING - SPRINKLES
   Sparkles, glitter, shimmer & twinkling effects
   Premium feeling, performance-aware (no JS for CSS effects)
   ============================================ */

/* ---------- Reusable sparkle keyframes ---------- */
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1)   rotate(180deg); }
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(8px, -10px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes glitterSweep {
  0%   { transform: translateX(-120%) rotate(15deg); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(220%) rotate(15deg); opacity: 0; }
}

/* ============================================================
   1) HERO BADGE & TITLE SPARKLES
   Hero-content içine 6 küçük altın yıldız ekler, twinkle eder.
   ============================================================ */
.hero-content {
  position: relative;
}

.hero-content .sparkle {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-image: radial-gradient(circle at center, #FFE08A 0%, #E8B547 40%, transparent 70%);
  border-radius: 50%;
  filter: drop-shadow(0 0 6px rgba(232, 181, 71, 0.85));
  opacity: 0;
  animation: twinkle 2.6s ease-in-out infinite, drift 6s ease-in-out infinite;
  z-index: 4;
}

/* 6 farklı pozisyon ve gecikme */
.hero-content .sparkle:nth-child(1) { top: -10px;  left: 18%;  width: 10px; height: 10px; animation-delay: 0s,    0s; }
.hero-content .sparkle:nth-child(2) { top: 8%;     left: 78%;  width: 16px; height: 16px; animation-delay: 0.4s,  0.6s; }
.hero-content .sparkle:nth-child(3) { top: 32%;    left: 5%;   width: 12px; height: 12px; animation-delay: 0.9s,  1.2s; }
.hero-content .sparkle:nth-child(4) { top: 48%;    left: 92%;  width: 9px;  height: 9px;  animation-delay: 1.4s,  0.3s; }
.hero-content .sparkle:nth-child(5) { top: 70%;    left: 12%;  width: 14px; height: 14px; animation-delay: 1.8s,  1.7s; }
.hero-content .sparkle:nth-child(6) { top: 18%;    left: 50%;  width: 8px;  height: 8px;  animation-delay: 2.2s,  0.9s; }

/* Mobilde daha az sparkle (ekran küçük, kalabalık olmasın) */
@media (max-width: 640px) {
  .hero-content .sparkle:nth-child(n+5) { display: none; }
}

/* ============================================================
   2) CARD HOVER GLITTER SWEEP
   .service-card, .testimonial-card, .approach-card hover'ında
   üzerinden bir parlama/glitter dalga geçer.
   ============================================================ */
.service-card,
.testimonial-card,
.approach-card,
.qualification-card,
.how-card {
  position: relative;
  overflow: hidden;
}

.service-card::after,
.testimonial-card::after,
.approach-card::after,
.qualification-card::after,
.how-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 30%,
    rgba(255, 224, 138, 0.25) 45%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 224, 138, 0.25) 55%,
    transparent 70%,
    transparent 100%
  );
  transform: translateX(-120%) rotate(15deg);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.service-card:hover::after,
.testimonial-card:hover::after,
.approach-card:hover::after,
.qualification-card:hover::after,
.how-card:hover::after {
  animation: glitterSweep 1.1s ease-in-out forwards;
}

/* ============================================================
   3) BACKGROUND FLOATING GOLD DOTS (subtle, site-wide)
   Body'nin sağ-sol tarafında çok yavaş süzülen 4 küçük altın
   nokta. Performans için sadece transform animate edilir.
   ============================================================ */
.floating-sprinkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-sprinkles .float-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE08A 0%, #E8B547 50%, transparent 75%);
  filter: blur(0.5px);
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes floatUp {
  0%   { transform: translateY(110vh) scale(0.6); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.45; }
  100% { transform: translateY(-15vh) scale(1.1); opacity: 0; }
}

.floating-sprinkles .float-dot:nth-child(1) { left: 8%;   width: 6px;  height: 6px; animation: floatUp 22s linear infinite;        animation-delay: 0s; }
.floating-sprinkles .float-dot:nth-child(2) { left: 26%;  width: 10px; height: 10px; animation: floatUp 28s linear infinite;        animation-delay: 4s; }
.floating-sprinkles .float-dot:nth-child(3) { left: 48%;  width: 5px;  height: 5px; animation: floatUp 18s linear infinite;        animation-delay: 8s; }
.floating-sprinkles .float-dot:nth-child(4) { left: 68%;  width: 9px;  height: 9px; animation: floatUp 25s linear infinite;        animation-delay: 12s; }
.floating-sprinkles .float-dot:nth-child(5) { left: 85%;  width: 7px;  height: 7px; animation: floatUp 20s linear infinite;        animation-delay: 6s; }
.floating-sprinkles .float-dot:nth-child(6) { left: 92%;  width: 5px;  height: 5px; animation: floatUp 24s linear infinite;        animation-delay: 14s; }

/* Mobil + reduced motion'da kapat (batarya / performans) */
@media (max-width: 768px) {
  .floating-sprinkles .float-dot:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-sprinkles { display: none; }
  .hero-content .sparkle { display: none; }
  .service-card::after,
  .testimonial-card::after,
  .approach-card::after,
  .qualification-card::after,
  .how-card::after { display: none; }
}

/* ============================================================
   4) CONFETTI CANVAS (JS confetti'nin overlay'i)
   Tüm sayfada body'ye absolute, üstte. Pointer-event yok.
   ============================================================ */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}