/* Blog Page Styles - Turunan dari style.css */

/* Memastikan konsistensi dengan style utama */
/* Header sudah menggunakan style dari style.css utama */

/* Variabel warna yang konsisten dengan tema utama */
:root {
  --primary-color: #6e57e0;
  --secondary-color: #00d9ff;
  --accent-color: #ff3e7f;
  --dark-bg: #0a0a1a;
  --darker-bg: #05050f;
  --light-text: #ffffff;
  --gray-text: #a0a0c0;
  --card-bg: rgba(20, 20, 40, 0.7);
  --glass-effect: rgba(255, 255, 255, 0.05);
  --glow-effect: 0 0 15px rgba(110, 87, 224, 0.5);
  --gradient-primary: linear-gradient(135deg, #6e57e0, #00d9ff);
  --gradient-accent: linear-gradient(135deg, #ff3e7f, #ffb344);
  --border-light: 1px solid rgba(255, 255, 255, 0.1);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Animasi untuk elemen teknologi mengambang - konsisten dengan style utama */
.floating-tech-elements {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.tech-element {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(110, 87, 224, 0.1);
  box-shadow: 0 0 20px rgba(110, 87, 224, 0.3);
  color: var(--secondary-color);
  font-size: 24px;
  opacity: 0.5;
  animation: techFloat 15s infinite ease-in-out;
}

.element-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.element-2 {
  top: 25%;
  right: 10%;
  animation-delay: -3s;
}

.element-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: -6s;
}

.element-4 {
  bottom: 30%;
  right: 15%;
  animation-delay: -9s;
}

.element-5 {
  top: 50%;
  left: 50%;
  animation-delay: -12s;
}

@keyframes techFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(0) translateX(20px);
  }
  75% {
    transform: translateY(20px) translateX(10px);
  }
}

/* Responsive Styles */
@media (max-width: 1200px) {
  .tech-element {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .tech-element {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .tech-element {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}