/* Animasyon stilleri */

/* Temel animasyonlar */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

/* Arka plan animasyonları */
@keyframes matrixFall {
  0% { transform: translateY(-100vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes floatAround {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -30px) rotate(90deg); }
  50% { transform: translate(-20px, -60px) rotate(180deg); }
  75% { transform: translate(-40px, -20px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes particleFloat {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(100px); opacity: 0; }
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

@keyframes codeFloat {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.1; }
  50% { opacity: 0.2; }
  90% { opacity: 0.1; }
  100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.1; }
  50% { transform: scale(1.1); opacity: 0.2; }
  100% { transform: scale(1); opacity: 0.1; }
}

@keyframes snippetFloat {
  0% { 
    transform: translateY(100vh) translateX(0) rotate(0deg) scale(0.8); 
    opacity: 0; 
  }
  10% { 
    opacity: 0.15;
    transform: translateY(90vh) translateX(10px) rotate(1deg) scale(0.9);
  }
  50% { 
    opacity: 0.25; /* Peak visibility */
    transform: translateY(50vh) translateX(50px) rotate(5deg) scale(1);
    box-shadow: 0 4px 15px rgba(4, 104, 215, 0.2);
  }
  90% { 
    opacity: 0.15; 
    transform: translateY(10vh) translateX(90px) rotate(9deg) scale(0.9);
  }
  100% { 
    transform: translateY(-100vh) translateX(100px) rotate(10deg) scale(0.8); 
    opacity: 0; 
  }
}

/* Arka plan konteyneri */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Matrix-style falling code */
.matrix-rain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

.matrix-column {
  position: absolute;
  top: -100%;
  color: var(--primary);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  animation: matrixFall linear infinite;
}

/* Floating geometric shapes */
.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.geometric-shape {
  position: absolute;
  opacity: 0.1;
  animation: floatAround 15s ease-in-out infinite;
}

.shape-circle {
  border-radius: 50%;
  background: var(--gradient);
}

.shape-triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid var(--primary);
  opacity: 0.1;
}

.shape-square {
  background: var(--secondary);
  transform: rotate(45deg);
}

.shape-hexagon {
  width: 60px;
  height: 34.64px;
  background: var(--accent);
  position: relative;
}

.shape-hexagon:before,
.shape-hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.shape-hexagon:before {
  bottom: 100%;
  border-bottom: 17.32px solid var(--accent);
}

.shape-hexagon:after {
  top: 100%;
  border-top: 17.32px solid var(--accent);
}

/* Particle system */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.6;
  animation: particleFloat 8s linear infinite;
}

/* Grid pattern */
.grid-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(4, 104, 215, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(4, 104, 215, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 20s linear infinite;
}

/* Code symbols floating */
.code-symbols {
  position: absolute;
  width: 100%;
  height: 100%;
}

.code-symbol {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-size: 24px;
  color: var(--primary);
  opacity: 0.1;
  animation: codeFloat 12s ease-in-out infinite;
}

/* Code snippets floating - Yeni özellik! */
.code-snippets {
  position: absolute;
  width: 100%;
  height: 100%;
}

.code-snippet {
  position: absolute;
  font-family: 'Fira Code', 'Courier New', monospace;
  font-size: 14px;
  color: var(--primary);
  opacity: 0.2; /* Daha belirgin opacity */
  animation: snippetFloat 15s ease-in-out infinite;
  padding: 6px 12px; /* Daha büyük padding */
  background: rgba(255, 255, 255, 0.08); /* Daha belirgin background */
  border-radius: 6px; /* Daha büyük border radius */
  border: 1px solid rgba(4, 104, 215, 0.2); /* Daha belirgin border */
  backdrop-filter: blur(4px); /* Daha fazla blur */
  white-space: nowrap;
  font-weight: 600; /* Daha bold font */
  box-shadow: 0 2px 8px rgba(4, 104, 215, 0.1); /* Subtle shadow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Text shadow */
}