/* ==========================================================================
   HEPOYUNCU CS 1.6 SERVER RENTAL - COMPONENTS STYLESHEET
   Cards, Badges, Modals, Buttons, Original Gaming UI & Animations
   ========================================================================== */

/* Glassmorphism Card Style */
.glass-card {
  background: rgba(22, 25, 39, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Mod Button Selection state */
.mod-btn.active {
  border-color: #ff6b00 !important;
  background-color: rgba(255, 107, 0, 0.2) !important;
  color: #fb923c !important;
  box-shadow: 0 0 15px rgba(255, 107, 0, 0.3);
}

/* Counter animation styling */
.counter {
  font-variant-numeric: tabular-nums;
}

/* FAQ Accordion Transition */
.faq-content {
  transition: all 0.3s ease-in-out;
}

/* Mobile Menu Opening Animation */
@keyframes slideDownMobile {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDownMobile 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pulsing Badge Indicator */
.pulse-badge {
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Infinite Marquee Ticker */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee 25s linear infinite;
}

/* Loading Bar Animation */
.animate-loading-bar {
  animation: loading-progress 1.5s ease-in-out infinite;
}

@keyframes loading-progress {
  0% {
    width: 0%;
    margin-left: 0%;
  }
  50% {
    width: 75%;
    margin-left: 25%;
  }
  100% {
    width: 100%;
    margin-left: 0%;
  }
}

/* ==========================================================================
   SEAMLESS LOGO TRANSPARENCY & ANIMATION EFFECTS
   ========================================================================== */

/* Seamless Blend Mode to eliminate dark bounding box */
.logo-blend {
  mix-blend-mode: lighten;
  filter: contrast(115%) brightness(105%);
}

/* Dynamic Animated Header Logo */
.animate-logo-header {
  animation: logoBreathGlow 4s ease-in-out infinite alternate;
}

/* Dynamic Animated Loading / Emblem Logo */
.animate-logo-emblem {
  animation: logoFloatBreath 3.5s ease-in-out infinite;
}

@keyframes logoBreathGlow {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.35)) drop-shadow(0 0 20px rgba(255, 107, 0, 0.2));
  }
  50% {
    transform: scale(1.03) translateY(-1px);
    filter: drop-shadow(0 0 20px rgba(239, 68, 68, 0.7)) drop-shadow(0 0 35px rgba(255, 107, 0, 0.5));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.35)) drop-shadow(0 0 20px rgba(255, 107, 0, 0.2));
  }
}

@keyframes logoFloatBreath {
  0% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 15px rgba(255, 107, 0, 0.4));
  }
  50% {
    transform: translateY(-8px) scale(1.04);
    filter: drop-shadow(0 0 30px rgba(239, 68, 68, 0.7)) drop-shadow(0 0 50px rgba(255, 107, 0, 0.5));
  }
  100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 15px rgba(255, 107, 0, 0.4));
  }
}

/* ==========================================================================
   CUSTOM CS 1.6 REKLAM & CHARACTER SHOWCASE STYLES
   ========================================================================== */

.neon-border-orange {
  border: 1px solid rgba(255, 107, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.2);
}

.btn-vibrant-orange-red {
  background: linear-gradient(135deg, #ef4444 0%, #ff6b00 50%, #ea580c 100%);
  box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.5), 0 8px 10px -6px rgba(255, 107, 0, 0.3);
  transition: all 0.25s ease-in-out;
}

.btn-vibrant-orange-red:hover {
  background: linear-gradient(135deg, #dc2626 0%, #f97316 50%, #c2410c 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(239, 68, 68, 0.6), 0 10px 15px -5px rgba(255, 107, 0, 0.4);
}

/* Soldier Character Graphic Container */
.character-frame {
  position: relative;
  display: inline-block;
}

.character-frame img {
  filter: drop-shadow(0 15px 30px rgba(255, 107, 0, 0.3)) drop-shadow(0 0 40px rgba(239, 68, 68, 0.25));
  transition: transform 0.3s ease-in-out;
}

.character-frame:hover img {
  transform: scale(1.04) rotate(1deg);
}