/* ayhanegemen.com v2 — temel stil: font, renk, ızgara, tipografi, gezinme, figür çerçevesi.
   Sayfaya özel stiller: home.css (ana sayfa), article.css (proje makaleleri). */

/* ---------- Font: Geist + Geist Mono (OFL), kendi sunucumuzdan ---------- */
@font-face {
  font-family: 'Geist';
  src: url(../fonts/Geist-Variable.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url(../fonts/GeistMono-Variable.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokenlar. Canvas sahneleri renkleri buradan okur ---------- */
:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-2: #121212;
  --fg: #f2f2f2;
  --fg-2: #b8b8b8;
  --muted: #7a7a7a;
  --dim: #4a4a4a;
  --line: #232323;
  --accent: #ff5a1f; /* tek sinyal rengi: değiştirmek için yalnız bu satır */

  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --m: clamp(16px, 2.6vw, 40px);     /* sayfa kenar boşluğu */
  --gap: clamp(12px, 1.5vw, 24px);   /* ızgara aralığı */
  --nav-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Genel ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.5 var(--sans);
  letter-spacing: -0.006em;
  font-feature-settings: 'ss01', 'tnum' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
ul, ol { padding: 0; list-style: none; }
img, canvas { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--bg); }

/* 12 kolonluk ızgara: her bölüm bunun üstüne oturur */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: 0 var(--m);
}

/* ---------- Tipografi ---------- */
.label {
  font: 450 11px/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.label b { font-weight: 450; color: var(--fg); }
.display {
  font-weight: 500;
  font-size: clamp(52px, 10.4vw, 172px);
  line-height: 0.9;
  letter-spacing: -0.058em;
  margin-left: -0.05em; /* büyük harflerin optik hizası */
}
.num { font-variant-numeric: tabular-nums; }

/* Başlık satırları alttan kayarak gelir (JS açıkken) */
.lines > span { display: block; overflow: clip; overflow-clip-margin: 0.1em; padding-bottom: 0.04em; }
.lines > span > span { display: block; }
.js .lines > span > span { transform: translateY(105%); transition: transform 1.2s var(--ease-out); }
.js .lines.in > span > span { transform: none; }
.js .lines.in > span:nth-child(2) > span { transition-delay: .08s; }
.js .lines.in > span:nth-child(3) > span { transition-delay: .16s; }

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.2s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Gezinme: ince, saydam, her zeminde okunur ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 var(--m);
  mix-blend-mode: difference;
  color: #fff;
}
.nav-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 22px; }
.nav-links a, .nav-title { font: 450 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.nav-links a { opacity: .6; transition: opacity .25s; }
.nav-links a:hover, .nav-links a[aria-current] { opacity: 1; }
.nav-title { position: absolute; left: 50%; transform: translate(-50%, 6px); opacity: 0; transition: opacity .4s, transform .6s var(--ease-out); white-space: nowrap; }
.nav.titled .nav-title { opacity: .6; transform: translate(-50%, 0); }
/* Menünün altından geçen içerik yazılara karışmasın: üstte zemine doğru kararma */
body::before {
  content: ''; position: fixed; inset: 0 0 auto; z-index: 49; pointer-events: none;
  height: calc(var(--nav-h) + 16px);
  background: linear-gradient(var(--bg) 45%, transparent);
}
/* Okuma ilerlemesi: üstte ince sinyal çizgisi */
.progress { position: fixed; inset: 0 0 auto; z-index: 51; height: 1px; background: var(--accent); transform-origin: left; transform: scaleX(var(--read, 0)); }

/* ---------- Figür: köşe işaretli çerçeve + HUD etiketleri ---------- */
.frame {
  --tick: color-mix(in srgb, var(--fg) 45%, transparent);
  --t: 10px;
  position: relative;
  background:
    linear-gradient(var(--tick) 0 0) top left / var(--t) 1px,
    linear-gradient(var(--tick) 0 0) top left / 1px var(--t),
    linear-gradient(var(--tick) 0 0) top right / var(--t) 1px,
    linear-gradient(var(--tick) 0 0) top right / 1px var(--t),
    linear-gradient(var(--tick) 0 0) bottom left / var(--t) 1px,
    linear-gradient(var(--tick) 0 0) bottom left / 1px var(--t),
    linear-gradient(var(--tick) 0 0) bottom right / var(--t) 1px,
    linear-gradient(var(--tick) 0 0) bottom right / 1px var(--t),
    var(--bg-2);
  background-repeat: no-repeat;
}
.frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud { position: absolute; z-index: 2; pointer-events: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud.tl { top: 14px; left: 16px; }
.hud.tr { top: 14px; right: 16px; text-align: right; }
.hud.bl { bottom: 14px; left: 16px; }
.hud.br { bottom: 14px; right: 16px; text-align: right; }
.hud-row { display: flex; gap: 18px; }
.hud [data-hud] { text-transform: none; } /* birimler küçük harf kalsın: m/s, s */
/* Kamera düğmesi: HUD'daki tek tıklanabilir öğe */
.cam-toggle {
  pointer-events: auto; cursor: pointer;
  padding: 6px 10px; margin: -6px -10px 0 0;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  color: var(--fg); border-radius: 0;
  transition: border-color .2s, color .2s;
}
.cam-toggle:hover, .cam-toggle:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.hud-note { margin-left: 10px; color: var(--dim); }
.live { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: .25; } }

figcaption { margin-top: 12px; max-width: 72ch; }
figcaption b { color: var(--fg); font-weight: 450; }

/* ---------- Alt bilgi ---------- */
.footer {
  margin-top: 18vh;
  padding-top: 18px; padding-bottom: 28px;
  border-top: 1px solid var(--line);
  row-gap: 10px;
}
.footer > :nth-child(1) { grid-column: 1 / 5; }
.footer > :nth-child(2) { grid-column: 5 / 10; display: flex; gap: 22px; }
.footer > :nth-child(3) { grid-column: 10 / 13; text-align: right; }
.footer a { color: var(--fg); transition: color .2s; }
.footer a:hover { color: var(--accent); }

@media (max-width: 760px) {
  .nav-title { display: none; }
  /* Dar figürde HUD sadeleşir: köşe başına tek bilgi */
  .frame .hud.tr:not(.cam-toggle), .hud [data-hud="alt"], .hud [data-hud="lap"], .hud-note { display: none; }
  .footer > * { grid-column: 1 / -1 !important; text-align: left !important; }
}

@media (prefers-reduced-motion: reduce) {
  .js .lines > span > span, .js .reveal { transform: none; transition: opacity .01s; }
  .live { animation: none; }
}