/* NOA — sitenin ortak temeli: renkler, yazı, seçim/kaydırma çubuğu, odak, sayfa geçişleri, ortam arka planı */

:root {
  --noa-page: #10151f;          /* tüm sayfaların zemini (ortam arka planı bunun üzerine çizilir) */
  --noa-ink: #0a0e15;           /* en koyu ton (footer, koyu bölümler) */
  --noa-text: #f0efe4;
  --noa-acc: 84, 132, 255;      /* NOA mavisi (R, G, B) */
  --noa-blue: rgb(var(--noa-acc));
  --noa-font: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

html {
  background: var(--noa-page);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: rgba(var(--noa-acc), 0.45) var(--noa-ink);
  scrollbar-width: thin;
}
body {
  margin: 0;
  background: var(--noa-page);
  color: var(--noa-text);
  font-family: var(--noa-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: rgba(var(--noa-acc), 0.38); color: #fff; }

/* kaydırma çubuğu (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--noa-ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(rgba(var(--noa-acc), 0.55), rgba(var(--noa-acc), 0.25)); border-radius: 10px; border: 2px solid var(--noa-ink); }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--noa-acc), 0.7); }

/* klavyeyle gezinirken görünür, marka renginde odak halkası */
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(var(--noa-acc), 0.9); outline-offset: 3px; border-radius: 4px; }

/* ---- ortam arka planı (noa-ambient.js çizer) ---- */
.noa-ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.noa-grain {   /* çok hafif film greni: düz renklere doku katar */
  position: fixed; inset: -50%; z-index: 1200; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-size: 160px 160px;
}

/* ---- başlıklar (data-split): kelimeler maskenin altından sırayla çıkar ---- */
.noa-split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.noa-split .w > span { display: inline-block; transform: translateY(112%); transition: transform 0.95s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(0.12s + var(--w, 0) * 0.07s); }
.noa-split.is-in .w > span, .is-in .noa-split .w > span { transform: none; }

/* ---- kartlar (data-spot): imleci izleyen ışık, içeriğin altında kalır ---- */
[data-spot] { position: relative; isolation: isolate; }
.noa-spot {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(340px circle at var(--sx, 50%) var(--sy, 0%), rgba(var(--noa-acc, 84, 132, 255), 0.16), transparent 65%);
}
[data-spot]:hover > .noa-spot { opacity: 1; }

/* ---- sayfalar arası geçiş: üst menü yerinde kalır, içerik yumuşakça değişir (destekleyen tarayıcılarda) ---- */
@view-transition { navigation: auto; }
.noa-hd { view-transition-name: noa-header; }
::view-transition-old(root) { animation: noa-vt-out 0.38s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: noa-vt-in 0.6s cubic-bezier(0, 0, .2, 1) 0.08s both; }
@keyframes noa-vt-out { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }
@keyframes noa-vt-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* geçiş desteği olmayan tarayıcılarda sayfa açılışında hafif belirme */
@supports not (view-transition-name: none) {
  body > main, body > section, body > footer { animation: noa-page-in 0.7s ease both; }
  @keyframes noa-page-in { from { opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .noa-split .w > span { transform: none; transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html { scroll-behavior: auto; }
}