/* =============================================================================
   Kayalar İnşaat — v3 "Gece şantiyesi" · 1/4 Tokenlar
   -----------------------------------------------------------------------------
   Tailwind config'in karşılığı: renkler, fontlar, ölçüler, süreler, easing ve
   keyframe'ler burada tek yerde tanımlanır. Diğer v3 dosyaları yalnızca bu
   değişkenleri kullanır; renk ya da süre sabit yazılmaz.

   Yükleme sırası: style.css → v3/tokens.css → v3/base.css → v3/home.css
                   → v3/pages.css → icons.css
   ============================================================================= */

/* ── Fontlar (sunucudan, 3. parti istek yok) ─────────────────────────────────
   Clash Display — Indian Type Foundry, Fontshare lisansı (ticari kullanım serbest)
   Inter        — Rasmus Andersson, SIL Open Font License 1.1
   Clash Türkçe karakterlerin tamamını içerir (Ğ ğ İ ı Ş ş …); ₺ ve → yoktur,
   o iki karakter başlıklarda kullanılmamalı (Inter'e düşer).                   */

@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Inter değişken font — Google Fonts'un latin + latin-ext alt kümeleri.
   unicode-range sayesinde tarayıcı yalnızca gereken dosyayı indirir. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tasarım jetonları ──────────────────────────────────────────────────────── */

:root {
  /* Zemin: lacivert-antrasit rampası. En koyu ton footer ve hero gölgesinde. */
  --k3-navy-950: #060911;
  --k3-navy-900: #0A0F18;
  --k3-navy-850: #0D131E;
  --k3-navy-800: #121A27;
  --k3-navy-700: #1A2433;
  --k3-navy-600: #253146;

  /* Metin: sıcak fildişi başlık, soğuk gri gövde. Hepsi #0A0F18 üstünde AA+. */
  --k3-ivory: #F4F1EA;        /* başlık — 17:1 */
  --k3-body: #BFC5CF;         /* gövde — 10.8:1 */
  --k3-slate: #8D96A5;        /* ikincil — 6.1:1 */
  --k3-slate-dim: #5E6878;    /* yalnız süs çizgileri, metinde kullanılmaz */

  /* Altın: panelde seçilen ana renkten türetilir. Koyu zeminde okunsun diye
     şampanya tonuna açılır; logo gradyanının üç durağı ayrıca tanımlıdır. */
  --k3-gold: color-mix(in srgb, var(--primary) 70%, #FFE6B0);
  --k3-gold-soft: color-mix(in srgb, var(--k3-gold) 14%, transparent);
  --k3-gold-line: color-mix(in srgb, var(--k3-gold) 38%, transparent);
  --k3-copper: #B97D4E;
  --k3-gold-grad: linear-gradient(180deg, #F1DEAE 0%, var(--k3-gold) 48%, color-mix(in srgb, var(--primary) 82%, #5A3F14) 100%);

  /* Çizgiler — "ince çizgiler" kuralı: 1px, düşük opaklık */
  --k3-line: rgba(244, 241, 234, .08);
  --k3-line-strong: rgba(244, 241, 234, .15);

  /* Tipografi */
  --k3-font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --k3-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --k3-fs-hero: clamp(2.6rem, 6.2vw, 5.5rem);
  --k3-fs-display: clamp(2.3rem, 5.4vw, 4.8rem);
  --k3-fs-h2: clamp(2rem, 4.1vw, 3.5rem);
  --k3-fs-h3: clamp(1.28rem, 1.9vw, 1.7rem);
  --k3-fs-lead: clamp(1.02rem, 1.25vw, 1.16rem);
  --k3-fs-small: .8125rem;
  --k3-tracking-caps: .18em;

  /* Ölçü — mimari his için köşeler keskin tutulur */
  --k3-container: 1320px;
  --k3-gutter: clamp(1.15rem, 4vw, 3rem);
  --k3-section-y: clamp(5rem, 11vw, 9.5rem);
  --k3-radius-xs: 2px;
  --k3-radius-sm: 4px;
  --k3-radius: 8px;

  /* Hareket — brief kuralı: 200–600 ms, power2.out / power3.out */
  --k3-dur-fast: .2s;
  --k3-dur: .4s;
  --k3-dur-slow: .6s;
  --k3-ease-power2: cubic-bezier(.215, .61, .355, 1);  /* GSAP power2.out */
  --k3-ease-power3: cubic-bezier(.165, .84, .44, 1);   /* GSAP power3.out */
  --k3-stagger: .1s;                                   /* 0.08–0.12 aralığı */

  /* Katmanlar */
  --k3-z-grain: 95;
  --k3-z-header: 100;

  --header-h: 84px;
}

/* style.css jetonlarının v3 karşılıkları.
   Site her zaman koyu temada üretilir (<html data-theme="dark">). Seçici
   bilinçli olarak html[data-theme] yazıldı: panelden gelen :root{} renkleri
   (başlık, metin, bağlantı) aynı özgüllükte kalsaydı koyu zeminde okunmaz
   olurdu — bkz. KURULUM.md, "koyu mod tuzağı". Ana renk (--primary) ve vurgu
   (--accent) panelden gelmeye devam eder. */
html[data-theme="dark"] {
  --bg: var(--k3-navy-900);
  --bg-alt: var(--k3-navy-850);
  --bg-deep: var(--k3-navy-950);
  --surface: var(--k3-navy-800);
  --surface-2: var(--k3-navy-700);
  --border: #212B3B;
  --border-strong: #2E3A4E;
  --heading: var(--k3-ivory);
  --text: var(--k3-body);
  --muted: var(--k3-slate);
  --on-deep: var(--k3-ivory);
  --on-deep-muted: #9AA3B2;
  --link: var(--k3-gold);
  --link-hover: #F3E2B8;
  --primary-lift: color-mix(in srgb, var(--primary) 78%, #FFF1CF);
  --primary-soft: color-mix(in srgb, var(--primary) 16%, transparent);
  --primary-ring: color-mix(in srgb, var(--primary) 34%, transparent);

  --ph-1: #152033;
  --ph-2: #0D131E;
  --ph-3: #22304A;
  --ph-4: #36445C;

  --radius-sm: var(--k3-radius-sm);
  --radius: var(--k3-radius);
  --radius-lg: 10px;
  --container: var(--k3-container);
  --gutter: var(--k3-gutter);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow: 0 10px 30px rgba(2, 5, 12, .45);
  --shadow-lg: 0 30px 70px rgba(2, 5, 12, .6);

  --ease: var(--k3-ease-power2);
  --ease-out: var(--k3-ease-power3);
  --dur: var(--k3-dur);

  color-scheme: dark;
}

/* ── Keyframe'ler (Tailwind "animation" karşılığı) ───────────────────────────
   Hepsi tek amaçlı ve kısa; sonsuz dönenler yalnızca küçük ipuçlarıdır
   (kaydırma oku, vinç ikaz lambası) ve prefers-reduced-motion'da durur.      */

@keyframes k3-nudge {          /* aşağı kaydırma oku: "devamı var" */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes k3-beacon {         /* vinç tepesindeki ikaz lambası */
  0%, 70%, 100% { opacity: .25; }
  80% { opacity: 1; }
}
@keyframes k3-fade-up {        /* JS yokken bile çalışan yedek giriş */
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes k3-rise {           /* maskenin altından yükselen harf/kelime */
  from { transform: translateY(112%); }
  to { transform: none; }
}
@keyframes k3-rise-fade {      /* açılışta metin ve düğmeler */
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes k3-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes k3-media-in {       /* hero görseli yerine oturur */
  from { opacity: .3; transform: scale(1.05); }
  to { opacity: 1; transform: none; }
}
@keyframes k3-mask-in {        /* görsel alttan perdeyle açılır */
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}