/* Rozet Sistemi - Modern Daire Tasarım */
.user-badge-container {
  position: absolute;
  top: 50px;
  left: 3px;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  animation: badgeSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ana daire container */
.badge-circle {
  position: relative;
  width: 85px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.badge-circle:hover {
  transform: scale(1.08);
}

/* Dış halka */
.badge-outer-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
  animation: ringPulse 3s ease-in-out infinite;
}

/* İç daire - ikon alanı */
.badge-inner-circle {
  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 -2px 8px rgba(0, 0, 0, 0.05),
    inset 0 2px 8px rgba(255, 255, 255, 0.9);
  border: 3px solid rgba(255, 255, 255, 0.9);
  z-index: 2;
}

/* İkon */
.badge-icon {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  animation: iconFloat 3s ease-in-out infinite;
}

/* Alt yarım ay - yazı alanı */
.badge-crescent {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%; /* Daha geniş - kelimelerin sığması için */
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

/* SVG yazı container */
.badge-text-svg {
  position: absolute;
  top: 0;
  left: -10%; /* Merkeze hizalama */
  width: 120%;
  height: 100%;
  overflow: visible;
}

/* Yay şeklinde yazı - 10px sabit */
.badge-text {
  fill: #000;
  font-size: 10px; /* 10px sabit */
  font-weight: 600;
  letter-spacing: 1.2px; /* 0.3px'den 1.2px'e - çok daha geniş */
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
}

/* Üst yazı - opsiyonel farklı stil */
.badge-text-top {
  /* İsterseniz üst yazıya özel stil ekleyebilirsiniz */
}

/* Alt yazı - opsiyonel farklı stil */
.badge-text-bottom {
  /* İsterseniz alt yazıya özel stil ekleyebilirsiniz */
}

/* Animasyonlar */
@keyframes badgeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ringPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Rozet Tipleri - Farklı renk temaları */

/* Bronze */
.user-badge-container.bronze .badge-outer-ring {
  background: linear-gradient(135deg, #cd7f32 0%, #8b5a00 100%);
  box-shadow: 0 4px 20px rgba(205, 127, 50, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Silver */
.user-badge-container.silver .badge-outer-ring {
  background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%);
  box-shadow: 0 4px 20px rgba(192, 192, 192, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}

/* Gold */
.user-badge-container.gold .badge-outer-ring {
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}
.user-badge-container.gold .badge-dot {
  background: rgba(255, 215, 0, 0.9);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
}

/* Platinum */
.user-badge-container.platinum .badge-outer-ring {
  background: linear-gradient(135deg, #e5e4e2 0%, #a8a8a8 100%);
  box-shadow: 0 4px 20px rgba(229, 228, 226, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.4);
}

/* Diamond */
.user-badge-container.diamond .badge-outer-ring {
  background: linear-gradient(135deg, #b9f2ff 0%, #00bfff 100%);
  box-shadow: 0 4px 20px rgba(0, 191, 255, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}
.user-badge-container.diamond .badge-dot {
  background: rgba(0, 191, 255, 0.9);
  box-shadow: 0 0 10px rgba(0, 191, 255, 0.9);
}

/* Exercise Master */
.user-badge-container.exercise-master .badge-outer-ring {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  box-shadow: 0 4px 20px rgba(40, 167, 69, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Reading Master */
.user-badge-container.reading-master .badge-outer-ring {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Speed Demon */
.user-badge-container.speed-demon .badge-outer-ring {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.4),
    inset 0 2p 8px rgba(255, 255, 255, 0.2);
}
.user-badge-container.speed-demon .badge-dot {
  background: rgba(255, 107, 107, 0.9);
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.9);
}

/* Concentration King */
.user-badge-container.concentration-king .badge-outer-ring {
  background: linear-gradient(135deg, #6610f2 0%, #9b59b6 100%);
  box-shadow: 0 4px 20px rgba(102, 16, 242, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.user-badge-container.concentration-king .badge-dot {
  background: rgba(102, 16, 242, 0.9);
  box-shadow: 0 0 10px rgba(102, 16, 242, 0.9);
}
/* Speed Master */
.user-badge-container.speed-master .badge-outer-ring {
  background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
  box-shadow: 0 4px 20px rgba(0, 210, 255, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.user-badge-container.speed-master .badge-dot {
  background: rgba(0, 210, 255, 0.9);
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.9);
}

/* Target Focused */
.user-badge-container.target-focused .badge-outer-ring {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 20px rgba(240, 147, 251, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.user-badge-container.target-focused .badge-dot {
  background: rgba(240, 147, 251, 0.9);
  box-shadow: 0 0 10px rgba(240, 147, 251, 0.9);
}

/* Reading King */
.user-badge-container.reading-king .badge-outer-ring {
  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5),
    inset 0 2px 8px rgba(255, 255, 255, 0.3);
}
.user-badge-container.reading-king .badge-dot {
  background: rgba(255, 215, 0, 0.9);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
}

/* Persistent Reader */
.user-badge-container.persistent-reader .badge-outer-ring {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  box-shadow: 0 4px 20px rgba(255, 65, 108, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}
.user-badge-container.persistent-reader .badge-dot {
  background: rgba(255, 65, 108, 0.9);
  box-shadow: 0 0 10px rgba(255, 65, 108, 0.9);
}

/* Comprehension Expert */
.user-badge-container.comprehension-expert .badge-outer-ring {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  box-shadow: 0 4px 20px rgba(168, 237, 234, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Vocabulary Builder */
.user-badge-container.vocabulary-builder .badge-outer-ring {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  box-shadow: 0 4px 20px rgba(255, 236, 210, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Consistency Master */
.user-badge-container.consistency-master .badge-outer-ring {
  background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);
  box-shadow: 0 4px 20px rgba(253, 219, 146, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Book Worm */
.user-badge-container.book-worm .badge-outer-ring {
  background: linear-gradient(135deg, #96fbc4 0%, #f9f586 100%);
  box-shadow: 0 4px 20px rgba(150, 251, 196, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .user-badge-container {
    width: 90px;
    top: 50px;
    left: 10px;
  }

  .badge-circle {
    width: 80px;
    height: 80px;
  }

  .badge-inner-circle {
    width: 60px;
    height: 60px;
  }

  .badge-icon {
    font-size: 30px;
  }

  .badge-dot {
    width: 5px;
    height: 5px;
  }

  .badge-text {
    font-size: 7px;
    letter-spacing: 0.8px;
  }
}

@media (max-width: 480px) {
  .user-badge-container {
    width: 80px;
    top: 45px;
    left: 8px;
  }

  .badge-circle {
    width: 70px;
    height: 70px;
  }

  .badge-inner-circle {
    width: 52px;
    height: 52px;
  }

  .badge-icon {
    font-size: 26px;
  }

  .badge-dot {
    width: 4px;
    height: 4px;
  }

  .badge-text {
    font-size: 6px;
    letter-spacing: 0.5px;
  }
}