/* Shared base for the 07_uygulamalar templates. Values come from tokens/tayfcet.css; this file only composes them. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--color-white); color: var(--color-ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; font-kerning: normal; }

/* numbered mono label: number in teal, label in secondary; middle dot, no long dash */
.lbl { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); white-space: nowrap; }
.lbl b { font-weight: 600; color: var(--color-tayf-blue-700); }
.lbl i { font-style: normal; color: var(--color-mint-400); padding: 0 .5em; }

/* gradient hairline: always lime (left) to lavender (right), anchored to one edge */
.hair { position: absolute; height: 2px; background: var(--gradient-brand); }

/* palette-C aura light (tayf light on light grounds) */
.aura { position: absolute; border-radius: 50%; pointer-events: none; }
.aura.lime { background: radial-gradient(closest-side, rgba(215,229,95,0.420) 0%, rgba(215,229,95,0.361) 18%, rgba(215,229,95,0.260) 36%, rgba(215,229,95,0.160) 54%, rgba(215,229,95,0.076) 72%, rgba(215,229,95,0.025) 86%, rgba(215,229,95,0.000) 100%); }
.aura.mint { background: radial-gradient(closest-side, rgba(137,216,180,0.360) 0%, rgba(137,216,180,0.310) 18%, rgba(137,216,180,0.223) 36%, rgba(137,216,180,0.137) 54%, rgba(137,216,180,0.065) 72%, rgba(137,216,180,0.022) 86%, rgba(137,216,180,0.000) 100%); }
.aura.cyan { background: radial-gradient(closest-side, rgba(101,184,218,0.340) 0%, rgba(101,184,218,0.292) 18%, rgba(101,184,218,0.211) 36%, rgba(101,184,218,0.129) 54%, rgba(101,184,218,0.061) 72%, rgba(101,184,218,0.020) 86%, rgba(101,184,218,0.000) 100%); }
.aura.lav { background: radial-gradient(closest-side, rgba(121,141,203,0.220) 0%, rgba(121,141,203,0.189) 18%, rgba(121,141,203,0.136) 36%, rgba(121,141,203,0.084) 54%, rgba(121,141,203,0.040) 72%, rgba(121,141,203,0.013) 86%, rgba(121,141,203,0.000) 100%); }

/* Light rule (2026-10-11, SPEC 2.2a and 4.3): glow may surround the logo, never cover it.
   Placement (2026-10-11, Tayfun): the lime/yellow glow sits top-left and the blue glow bottom-right, on the diagonal
   through the logo; mint is optional and small. On the frame edges and corners, never behind the logo or text.
   1. Aura centres sit on the frame edges and corners, outside the logo's clear space; no lime aura behind the mark's lime end.
   2. Every glass logo gets a ground-colour core: solid over the lockup plus its clear space (one cell), fading out beyond,
      so no aura bleeds into the mark. The core box is the lockup box grown 2.5x (inset -75%); an ellipse touching its
      sides is solid to 76%, which covers the one-cell clear-space box of every lockup kind, then fades to 0 at the box edge.
   3. Gloss stays subtle (tayf.js: .22 at the top, ~0 by mid-height). Headings and the wordmark never sit on a coloured aura.
   --ground follows the surface (#fff default; set var(--color-mint-white) on mint-white grounds).
   Paint order inside the surface: auras (z -2), then the glass logo with its core (z -1), then all text (z auto),
   so the core never fades a label or a headline. The surface that holds the auras is isolated for that. */
:has(> .aura) { isolation: isolate; }
.aura { z-index: -2; }
[data-glass] { isolation: isolate; z-index: -1; }
[data-glass]::before { content: ""; position: absolute; inset: var(--core-inset, -75%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--ground, #fff) 0%, var(--ground, #fff) var(--core-solid, 76%), color-mix(in srgb, var(--ground, #fff) 50%, transparent) 88%, color-mix(in srgb, var(--ground, #fff) 0%, transparent) 100%); }
html.print [data-glass]::before { display: none; }

/* placeholder: anything not yet known (phone, address). Visible on purpose. */
.ph { color: var(--color-ink-600); border-bottom: 1px dashed var(--color-ink-500); }

/* sheet chrome used by the overview pages (not part of the designs) */
.sheet { background: var(--color-mint-white); padding: 96px; }
.sheet-head { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--border-subtle); padding-bottom: 32px; margin-bottom: 48px; }
.sheet-head h1 { font: 700 76px/1 var(--font-display); letter-spacing: -.025em; margin: 12px 0 0; }
.sheet-head p { margin: 0; max-width: 620px; text-align: right; color: var(--text-secondary); font-size: 17px; line-height: 1.5; }
.note { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.note b { color: var(--color-ink); font-weight: 600; }

/* Print PDFs: static TrueType instances (fonts-statik/, from statik-fontlar.py) so Chrome embeds real fonts, not Type 3. */
@font-face { font-family: "Gabarito P"; src: url("fonts-statik/Gabarito-600.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "Gabarito P"; src: url("fonts-statik/Gabarito-700.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Figtree P"; src: url("fonts-statik/Figtree-400.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Figtree P"; src: url("fonts-statik/Figtree-500.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Figtree P"; src: url("fonts-statik/Figtree-600.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "JetBrains Mono P"; src: url("fonts-statik/JetBrainsMono-500.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "JetBrains Mono P"; src: url("fonts-statik/JetBrainsMono-600.ttf") format("truetype"); font-weight: 600; }
html.print, html.mod-pdf { --font-display: "Gabarito P", sans-serif; --font-text: "Figtree P", sans-serif; --font-mono: "JetBrains Mono P", monospace; }
html.print .aura, html.print .screen-only { display: none; }