@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* Temel Ayarlar (Tailwind config içinde de tanımlandı) */
:root {
  --color-bg: #050505;
  --color-accent: #d9232d;
}

body {
  overflow-x: hidden;
}

body {
    background-color: #050505; /* Ana arka plan rengin */
    margin: 0;
    min-height: 100vh;
    position: relative;
}

.full-page-banner {
    position: fixed;
    inset: 0;
    z-index: 0; /* İçeriğin arkasında kalması için */
    pointer-events: none;
    
    /* GRADYAN VE GÖRSEL BİRLEŞİMİ */
    background: 
        /* 1. KATMAN: Soldan sağa doğru siyah geçiş (Görseli soldan kapatır) */
        linear-gradient(to right, #050505 10%, rgba(5, 5, 5, 0.8) 40%, transparent 100%),
        /* 2. KATMAN: Senin banner görselin */
        url("https://autotuned.net/banner.svg");
    
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain; /* Görselin yüksekliğe tam sığması için */
    
    /* Görselin şiddeti (0.1 - 0.3 arası idealdir) */
    opacity: 0.15; 
    
    /* Hafif bir gri tonu (Noir estetiği için) */
    filter: grayscale(100%);
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.05em;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg);
}
::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #222;
}

/* Utilities */
.text-balance { text-wrap: balance; }
.glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

@media (max-width: 992px) {
  .split-layout {
    grid-template-columns: 1fr;
  }
}

.mouse-scroll {
  width: 16px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  position: relative;
}
.mouse-scroll::before {
  content: '';
  width: 2px;
  height: 4px;
  background: white;
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  border-radius: 1px;
  animation: scroll-anim 2s infinite;
}

@keyframes scroll-anim {
  0% { opacity: 1; top: 4px; }
  100% { opacity: 0; top: 12px; }
}

  .noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    z-index: 9999;
  }

/* JS Animasyon Sınıfları */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}