/* ==========================================================================
   ZERO ONE - MAIN STYLESHEET (v2.0)
   Architecture: Base > Layout > Components > Utilities
   Author: Senior Front-End Developer
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES & CONFIGURATION
   -------------------------------------------------------------------------- */
:root {
  /* Brand Colors */
  --z-black: #0f0f0f;
  --z-red: #e60000;
  --z-white: #ffffff;
  --z-gray: #f9f9f9;
  --z-border: #e5e5e5;

  /* Transitions - Apple Style Smoothness */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);

  /* Dimensions */
  --header-height: 80px;
}

/* --------------------------------------------------------------------------
   2. BASE & RESET
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  background: var(--z-white);
  color: var(--z-black);
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Font Display Optimization */
@font-face {
  font-family: "Poppins";
  font-display: swap;
}

@font-face {
  font-family: "Syne";
  font-display: swap;
}

/* --------------------------------------------------------------------------
   PERFORMANCE OPTIMIZED ANIMATIONS (Moved from JS to prevent FOUC)
   -------------------------------------------------------------------------- */

/* SEO Friendly: Progressive Enhancement - Only hide when JS is enabled */
body.js-enabled section:not(#projects):not(#journal) {
  opacity: 0;
  transition: opacity 0.6s ease;
}

body.js-enabled section:not(#projects):not(#journal).animate-fade-in {
  opacity: 1;
}

/* Fade In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* Shake Animation for Form Validation */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

/* Lazy Image Loading (LCP Safe - Excludes Hero images) */
.lazy-image {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Slider Section Visibility (Performance Optimized) */
.slider-section-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.slider-section-visible {
  opacity: 1;
  visibility: visible;
}

/* Note: Duplicate definitions removed - keeping only this one */

/* Brand Selection Color */
::selection {
  background-color: var(--z-red);
  color: var(--z-white);
}

/* --------------------------------------------------------------------------
   3. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

/* Header Base */
#main-header {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-out-expo),
    padding 0.4s var(--ease-out-expo), border-color 0.4s ease;
}

/* Header Text Colors (Default) */
#main-header nav > a,
#main-header nav > div > button {
  color: var(--z-black);
  transition: color 0.3s ease;
}

#main-header nav .fa-chevron-down {
  color: #9ca3af;
}

#main-header #menu-toggle span {
  background-color: var(--z-black);
}

/* Header Hover States */
#main-header nav > a:hover,
#main-header nav > div > button:hover,
#main-header nav .group:hover .fa-chevron-down {
  color: var(--z-red) !important;
}

/* --- SCROLLED STATE (Red Background) --- */
#main-header.scrolled {
  background-color: var(--z-red) !important;
  border-color: var(--z-red) !important;
  box-shadow: 0 10px 30px -10px rgba(230, 0, 0, 0.3);
}

#main-header.scrolled nav > a,
#main-header.scrolled nav > div > button,
#main-header.scrolled nav .fa-chevron-down {
  color: var(--z-white) !important;
}

#main-header.scrolled #menu-toggle span {
  background-color: var(--z-white) !important;
}

/* Dropdown Fix inside Scrolled Header */
#main-header.scrolled .mega-menu {
  background-color: var(--z-white);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

#main-header.scrolled .mega-menu * {
  color: inherit; /* Reset inheritance */
}

/* Force dark text inside white dropdown even if header is red */
#main-header.scrolled .mega-menu h3,
#main-header.scrolled .mega-menu h4,
#main-header.scrolled .mega-menu a,
#main-header.scrolled .mega-menu span:not(.text-z-red) {
  color: var(--z-black) !important;
}

/* --------------------------------------------------------------------------
   4. MEGA MENU ANIMATIONS
   -------------------------------------------------------------------------- */
.mega-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s var(--ease-out-expo);
  pointer-events: none;
  will-change: transform, opacity;
}

/* Show Logic */
nav > .group:hover > .mega-menu,
.mega-menu.show,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Invisible Bridge (Prevents menu closing when moving mouse) */
nav .group::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 20px;
  z-index: 99;
  background: transparent;
}

/* --------------------------------------------------------------------------
   5. HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section {
  position: relative;
  /* Fallback image if JS lazy load fails */
  background-color: #f5f5f5;
  overflow: hidden;
}

/* Gradient Overlay */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.hero-section > * {
  position: relative;
  z-index: 2;
}

/* JS Parallax Element */
.hero-background {
  z-index: 0 !important;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   6. TECH STACK MARQUEE
   -------------------------------------------------------------------------- */
.mask-edges {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.marquee-wrapper {
  transform: translate3d(0, 0, 0); /* Force GPU */
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

.track-left {
  animation: scrollLeft 60s linear infinite;
}
.track-right {
  animation: scrollRight 60s linear infinite;
}

@keyframes scrollLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes scrollRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Tech Card specific styles */
.tech-card {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(230, 0, 0, 0.1);
  border-color: var(--z-red);
}

/* --------------------------------------------------------------------------
   7. SLIDER COMPONENTS
   -------------------------------------------------------------------------- */
.slider-animate-wrapper {
  min-height: 400px;
}

[data-slider-track] {
  display: flex;
  align-items: stretch;
  will-change: transform;
  /* GPU acceleration for smoother sliding */
  transform: translate3d(0, 0, 0);
}

/* Slider Card Hover Effects */
.slider-card-image-container {
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}

.slider-card:hover .slider-card-image-container {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.slider-card img {
  transition: transform 0.7s var(--ease-out-expo);
  transform-origin: center;
}

.slider-card:hover img {
  transform: scale(1.08);
}

/* Slider Visibility - Using definitions from line 107-116 */

/* --------------------------------------------------------------------------
   8. UTILITIES
   -------------------------------------------------------------------------- */

/* Scrollbar Hiding */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Dragging Cursors */
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}

/* Smooth Fade In Animation Class */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.8s var(--ease-out-expo) forwards;
}

/* Mobile Menu Z-Index Fix */
#mobile-menu {
  z-index: 100; /* Above everything */
}

/* Mobile-optimized background images */
.projects-bg-image {
  background-image: url('/img/proje.webp');
}

/* Mobile: Lazy load background images */
@media (max-width: 768px) {
  .projects-bg-image[data-bg-mobile="lazy"] {
    background-image: none;
  }
  
  .projects-bg-image[data-bg-mobile="lazy"].loaded {
    background-image: url('/img/proje.webp');
    transition: background-image 0.3s ease;
  }
}

/* =================================================
   CUSTOM SCROLLBAR STYLES
   ================================================= */
html {
  scrollbar-width: thin; /* İnce çubuk */
  scrollbar-color: var(--z-black) transparent; /* [thumb] [track] */
}

/* 2. WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px; /* Dikey scroll genişliği - Çok ince ve zarif */
  height: 6px; /* Yatay scroll yüksekliği */
}

/* Track (Yol) - Tamamen şeffaf yapıyoruz ki site havada asılı gibi dursun */
::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 4px; /* Üst ve alttan hafif boşluk */
}

/* Thumb (Hareket eden parça) */
::-webkit-scrollbar-thumb {
  background-color: rgba(15, 15, 15, 0.4); /* --z-black ama hafif saydam */
  border-radius: 100vh; /* Tam yuvarlak (Pill shape) */
  transition: background-color 0.3s ease;
}

/* Hover Durumu - Kullanıcı tutmak istediğinde belirginleşsin */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--z-red); /* Marka rengiyle parlasın */
  cursor: grab;
}

/* Aktif (Tıklama) Durumu */
::-webkit-scrollbar-thumb:active {
  background-color: var(--z-black); /* Tıklayınca tam siyah */
  cursor: grabbing;
}

/* Scrollbar Köşesi (Yatay ve dikeyin birleştiği nokta) */
::-webkit-scrollbar-corner {
  background: transparent;
}