.parallax-section > * {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.4s ease-out forwards;
  animation-delay: 0.3s;
}

.parallax-section {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
}

.parallax-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.35)
  );
  pointer-events: none;
}

.parallax-section > * {
  position: relative;
  z-index: 1;
}

#hero {
  background: linear-gradient(120deg, #525252, #000000);
  background-size: 200% 200%;
  animation: heroGradientMove 10s ease-in-out infinite alternate;
  will-change: background-position;
}

.hero-content h1 {
  animation: fadeInUp 500ms ease-out both;
}
.hero-content p {
  animation: fadeInUp 800ms ease-out both;
}
@keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes heroGradientMove {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

.scroll-indicator {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

.side-navbar li {
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.side-navbar li:hover {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}
.side-navbar li.active {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1);
}

#Projeler li {
  transition: transform 0.35s ease, box-shadow 0.35s ease,
    border-color 0.35s ease, background 0.35s ease;
  transform-style: preserve-3d;
  isolation: isolate;
}
#Projeler li:hover {
  transform: translateY(-6px) rotateX(1.2deg) rotateY(-1.2deg);
}
#Projeler li::before {
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
#Projeler li:hover::before {
  opacity: 0.7;
  filter: blur(6px);
  transform: translate3d(0, 0, 1px);
}

#Projeler img {
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
#Projeler li:hover img {
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.06) contrast(1.02);
}

#Projeler .proj-tags span {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
#Projeler li:hover .proj-tags span {
  transform: translateY(-1px);
}

#Projeler .proj-cta .cta-btn {
  transition: transform 0.25s ease, box-shadow 0.25s ease,
    border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
#Projeler .proj-cta .cta-btn:hover {
  transform: translateY(-2px);
}

.side-navbar li.active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.side-navbar.is-labels-hidden li.active::after {
  opacity: 0;
  transform: translateY(-50%) translateX(-6px);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .cv-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease,
      border-color 0.25s ease, background 0.25s ease, opacity 0.25s ease;
  }
  .cv-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.26);
    opacity: 0.98;
  }
  .cv-btn i {
    transition: transform 0.25s ease;
  }
  .cv-btn:hover i {
    transform: translateX(2px);
  }
}

.cv-btn:active {
  filter: brightness(1.02);
}

@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
    padding: 60px 20px;
  }
  .parallax-section > * {
    transform: translateY(10px);
  }
}