/* İSTİSNAİ v3 — giriş taslakları · shared tokens + base (READ-ONLY for sketch builders).
   Colours come from the logo files (docs/istisnai-logo*.svg) + the brand sheet's light grey.
   Fonts: DM Sans + DM Mono are self-hosted (shared/fonts.css, latin + latin-ext) — no render-blocking
   Google CSS, so every sketch's script starts immediately. Pages preload the DM Sans latin file. */
@import url("fonts.css");

/* "AI" legibility: DM Sans draws capital I and lowercase l identically, so "AI ile" reads "Al ile".
   This one-glyph face (IBM Plex Sans "I" only, OFL, ~2 KB) is placed first in --font-sans and is used
   ONLY for U+0049 via unicode-range — every other character still comes from DM Sans. */
@font-face {
  font-family: "Ist AI I";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/plex-sans-I-normal-100-700.woff2) format("woff2");
  unicode-range: U+0049;
}
@font-face {
  font-family: "Ist AI I";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/plex-sans-I-italic-100-700.woff2) format("woff2");
  unicode-range: U+0049;
}

:root {
  /* brand */
  --indigo: #452FFD;          /* the Λ — THE brand colour (logo file) */
  --indigo-2: #5B4DFF;        /* brand sheet "Ana Mavi": lighter indigo, large type / glows on dark */
  --indigo-3: #8F84FF;        /* indigo for small text on --ink (AA ≈ 6.4:1) */
  --lilac: #CFCBFF;           /* palest indigo tint */
  --ink: #0D0D14;             /* logo dark */
  --ink-2: #16161F;
  --paper: #F5F5F7;           /* brand sheet "Açık" */
  --white: #FFFFFF;
  --grey-1: #E7E7EC;
  --grey-2: #C9C9D2;
  --grey-3: #8C8C99;          /* ≥ 3:1 on paper — labels only, not body text */
  --grey-4: #5A5A66;          /* body-safe on paper (≈ 6.2:1) */
  --grey-5: #2A2A33;

  /* design-tool canvas (Ortak İmleç 2: the hero's build stage + the portfolio's "proje dosyası") */
  --canvas: #17171D;
  --canvas-2: #202028;          /* raised panels / artboard backs on the canvas */
  --canvas-dot: rgba(255, 255, 255, 0.07);  /* 24 px dot grid */
  --canvas-line: rgba(255, 255, 255, 0.1);
  --canvas-label: #8C8C99;      /* frame labels (DM Mono 11px) */

  /* type */
  --font-sans: "Ist AI I", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layout */
  --gutter: clamp(16px, 4vw, 56px);
  --nav-h: 76px;
  --maxw: 1320px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--indigo-2); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------ type */
.t-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0; }
.t-lede {
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.t-h2 {
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.035em;
  margin: 0;
}
.t-body { font-size: 16px; line-height: 1.55; font-weight: 400; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ logo (inline SVG from V3.logoSVG) */
.v3-logo { width: 100%; height: auto; overflow: visible; }
.v3-logo .lg-l, .v3-logo .lg-s { fill: var(--logo-ink, var(--ink)); }
.v3-logo .lg-lambda { fill: var(--logo-lambda, var(--indigo)); }
.v3-icon .ic-lambda { fill: var(--logo-lambda, var(--indigo)); }
.v3-icon .ic-i { fill: var(--logo-ink, var(--ink)); }

/* ------------------------------------------------------------ site nav (same in every sketch) */
.site-nav {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 20;
  color: var(--ink);
  --logo-ink: var(--ink);
}
.site-nav--dark { color: var(--paper); --logo-ink: var(--white); }
.site-nav__mark { display: inline-flex; align-items: center; height: 44px; text-decoration: none; }
.site-nav__mark .v3-icon { height: 26px; width: auto; }
.site-nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.site-nav__links a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  opacity: 0.86;
  padding: 10px 0;
  transition: opacity 0.2s;
}
.site-nav__links a:hover { opacity: 1; }
@media (max-width: 520px) {
  .site-nav__links { gap: 16px; }
  .site-nav__links a { font-size: 13px; }
}

/* ------------------------------------------------------------ sketch switcher pill (sketch-nav.js) */
.v3-pill {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(13, 13, 20, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.18);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}
.v3-pill a {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  opacity: 0.75;
}
.v3-pill a:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.v3-pill .v3-pill__now { opacity: 1; padding: 0 8px; white-space: nowrap; }
.v3-pill .v3-pill__now b { color: var(--indigo-3); font-weight: 500; }
.v3-clean .v3-pill { display: none; }