/* ─── AetherNode Pro — Görsel Cilalar (enhancements.css) ───
   Bu dosya style.css'TEN SONRA yüklenir. Mevcut tasarımı bozmaz,
   yalnızca eklemeli mikro iyileştirmeler yapar:
     - Erişilebilir focus halkası (a11y)
     - Buton basilma/hover mikro etkileşimleri
     - Kart hover kalkma efekti (mevcut .card/.feature-card'ı hedefler)
     - Aktif nav link altı çizgi animasyonu
     - Özel kaydırma çubuğu (karanlık temaya uygun)
     - Reduced-motion kullanıcılar için animasyon kapama
     - Görsel yer tutucu (aspect-ratio) CLS engelleme
     - Yazılım/donanım ivmesi ipucu
   Eklenmedi: var olanı bozan kural yok; specificity düşük tutuldu. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Erişilebilir focus halkası — tüm interaktif öğelerde, sadece klavye için. */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buton tıklanabilirlik ipucu + mikro etkileşim (mevcut .btn-* sınıfları). */
button, a.btn, a[class*="btn-"] {
  -webkit-tap-highlight-color: var(--orange-dim);
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
button:hover, a.btn:hover, a[class*="btn-"]:hover {
  filter: brightness(1.07);
}
button:active, a.btn:active, a[class*="btn-"]:active {
  transform: translateY(1px) scale(.99);
}

/* Kart hover kalkma (herhangi bir .card/*-card sınıfını hedefler; yoksa no-op). */
.card, .feature-card, .plan-card, .price-card,
.faq-card, .stat-card, .step-card, .commit-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.card:hover, .feature-card:hover, .plan-card:hover, .price-card:hover,
.faq-card:hover, .stat-card:hover, .step-card:hover, .commit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45),
              0 0 0 1px var(--orange-glow);
  border-color: var(--orange-glow);
}

/* Aktif nav link altı çizgi animasyonu (mevcut .active sınıfına dayalı). */
.nav-links a {
  position: relative;
}
.nav-links a.active::after,
.nav-links a:hover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform-origin: left center;
  animation: navUnderline .25s ease forwards;
}
@keyframes navUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Karanlık temaya uygun kaydırma çubuğu (Webkit + Firefox). */
html {
  scrollbar-color: var(--panel2) var(--black);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb {
  background: var(--panel2);
  border-radius: 8px;
  border: 2px solid var(--black);
}
::-webkit-scrollbar-thumb:hover { background: var(--border2); }

/* Görsel CLS engelleme — genişlik/yükseklik verilmemiş img'ler için aspect-ratio. */
img:not([width]):not([height]) {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Seçim rengi (site kimliğiyle uyumlu). */
::selection {
  background: var(--orange);
  color: #fff;
}

/* Yazıtipi sıkıştırma/optical — Chrome'da metin daha keskin. */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GPU ivmesi ipucu — sık animasyonlu hero/cta için. */
.hero, .btn-primary-orange, .btn-hero {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Lazy-load görseller için degrade yer tutucu (görsel yüklenmeden önce). */
img[loading="lazy"]:not([src]),
img.lazy:not([src]) {
  background: linear-gradient(135deg, var(--black2), var(--panel));
  min-height: 120px;
}

/* Küçük erişilebilirlik: ana içerik odaklandığında yumuşak kaydırma. */
main:focus-visible {
  scroll-margin-top: 88px;
}

/* Sayfa seviyesi yardımcı: .section-title'a gradient accent (mevcutsa). */
.section-title, h1, h2 {
  text-wrap: balance;
}