/* ── Self-hosted fonts ──────────────────────────────────────────────────────
   Served from this origin, not Google's CDN. Two reasons, and the second matters more:
   (1) it removes two third-party DNS+TLS handshakes before the first paint;
   (2) the Google Fonts CDN receives every visitor's IP address. This site's privacy page
       says no third party is fed visitor data, and a font request is exactly the kind of
       quiet exception that makes such a claim untrue. Self-hosting keeps it true.
   Each file was checked for the full Turkish set before being committed. */
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/InstrumentSerif.ttf") format("truetype");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/InstrumentSerifItalic.ttf") format("truetype");
}
@font-face {
  /* Variable: one file covers the 400-700 range the design uses. */
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/InstrumentSans.ttf") format("truetype");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/IBMPlexMono-400.ttf") format("truetype");
}
@font-face {
  /* IBM Plex Mono is NOT variable — 500 needs its own file or the browser fakes it. */
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/IBMPlexMono-500.ttf") format("truetype");
}

/* ─────────────────────────────────────────────────────────────────────────────
   ATLAVEN — design system
   Direction: "the instrument house". Deep-space ink, warm ember signal,
   engineering-serif voice. Family system: Atlaven = the orbits (the house
   that carries products); each product = one luminous body (Promvia's ◉).
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  --void: #0a0c12;
  --void-2: #0d1019;
  --panel: #12151f;
  --ink: #eae7de;
  --dim: #a09d92;
  --faint: #6d6b63;
  --ok: #5fbf8f;
  --line: rgba(234, 231, 222, 0.1);
  --line-strong: rgba(234, 231, 222, 0.22);
  --ember: #8fb0e6;      /* The Serva's family color: the frost body */
  --ember-hot: #b3cdf5;
  --frost: #e8885c;      /* secondary: the house ember */
  --radius: 14px;
  --maxw: 1200px;
  --on-ember: #0c1420;
  --orbit-ring: rgba(234, 231, 222, 0.07);
  --grain-blend: screen;
  --grain-opacity: 0.05;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 0.75, 0.2, 1);
}

/* Day theme — deliberately Promvia's paper palette: the two brands are the same
   family's daylight and night. */
:root[data-theme="light"] {
  --ok: #1e7a4d;
  --void: #f3eee2;
  --void-2: #ede7d8;
  --panel: #fdfaf2;
  --ink: #1a1813;
  --dim: #5f5a4b;
  --faint: #6f6a58;
  --line: rgba(26, 24, 19, 0.12);
  --line-strong: rgba(26, 24, 19, 0.28);
  --ember: #1d3b66;
  --ember-hot: #142c4e;
  --frost: #c2431a;
  --on-ember: #eef3fb;
  --orbit-ring: rgba(26, 24, 19, 0.09);
  --grain-blend: multiply;
  --grain-opacity: 0.06;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fine grain so the void isn't flat */
body { transition: background 0.35s ease, color 0.35s ease; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: color-mix(in srgb, var(--ember) 35%, transparent); color: var(--ink); }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.02; }
p { margin: 0; }
a { color: var(--frost); text-decoration: none; }

.shell { position: relative; z-index: 1; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ember);
}
.dim { color: var(--dim); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.top.scrolled { background: color-mix(in srgb, var(--void) 80%, transparent); backdrop-filter: blur(12px); border-color: var(--line); }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 17px; letter-spacing: 0.14em; }
.brand svg { display: block; }

/* Signature beacon-pulse on the header mark — the same slow lighthouse sweep Promvia carries, so
   all three properties breathe alike. The ring emits from --ember, which is each site's OWN core
   colour: warm on atlaven.com, frost-blue on theserva.app (The Serva swaps the pair). */
.brand-mark { position: relative; display: inline-flex; line-height: 0; }
/* inset: 0 — the ring must emit from the FULL mark box, as Promvia's does. An inset here shrinks
   the emitting circle and the pulse comes out visibly smaller (10px box vs 26px = a 28px ring
   against Promvia's 40px). */
.brand-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  animation: brand-pulse 3.6s cubic-bezier(0.25, 0.6, 0.2, 1) infinite;
}
@keyframes brand-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 45%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ember) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ember) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .brand-mark::after { animation: none; } }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { position: relative; color: var(--dim); font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-mono); }
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--ember); transition: right 0.3s var(--ease);
}
.nav a:hover::after { right: 0; }
.nav a.active { color: var(--ink); }
.nav a.active::after { right: 0; }
/* Utility toggles — same pattern as Promvia's header: borderless text + icon buttons,
   always last, separated by a hairline. */
.nav-utils { display: inline-flex; align-items: center; gap: 15px; margin-left: 2px; padding-left: 16px; border-left: 1px solid var(--line); }
.util-btn {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--dim); display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; transition: color 0.2s ease;
}
.util-btn:hover { color: var(--ink); }
/* Fixed 18×18 box, 16×16 icon — sun and moon share the footprint so toggling never shifts layout. */
.util-icon { width: 18px; height: 18px; min-width: 18px; line-height: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: grid; align-content: center; padding: 140px 0 90px; overflow: hidden; }
/* width/height 100% required: inset alone doesn't stretch a canvas (it keeps its 300×150 intrinsic size) */
#orbits { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }

.hero-word {
  font-family: var(--font-display);
  font-size: clamp(74px, 15.5vw, 218px);
  line-height: 0.92;
  letter-spacing: 0.015em;
  color: var(--ink);
  user-select: none;
  display: flex;
}
.hero-word span { display: inline-block; opacity: 0; transform: translateY(0.45em) rotate(2deg); animation: letter-in 0.9s var(--ease) forwards; }
@keyframes letter-in { to { opacity: 1; transform: none; } }

.hero-sub { margin-top: 34px; max-width: 620px; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--dim); }
.hero-sub em { font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: 1.08em; }

.hero-meta { margin-top: 46px; display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }

.scroll-cue { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; animation: cue 2.6s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.55; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); color: var(--ink); background: transparent;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.15s ease;
  will-change: transform;
}
.btn:hover { border-color: var(--ember); color: var(--ember-hot); }
.btn-solid { background: var(--ember); border-color: var(--ember); color: var(--on-ember); font-weight: 600; }
.btn-solid:hover { background: var(--ember-hot); border-color: var(--ember-hot); color: var(--on-ember); }

/* ── Proof band — honest numbers from shipped work. When customers exist, this band
      is where their wall goes; until then we don't fake one. ─────────────── */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 64px 0; background: color-mix(in srgb, var(--panel) 55%, transparent); }
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.proof-cell { background: var(--void-2); padding: 34px 28px; }
.proof-cell b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 58px); line-height: 1; color: var(--ember); }
.proof-cell span { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.proof-note { margin-top: 18px; font-size: 13.5px; color: var(--faint); max-width: 560px; }

/* ── Method — the house process, four moves ─────────────────────────────── */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px; counter-reset: step; }
.method-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; background: linear-gradient(170deg, var(--panel), transparent); position: relative; }
.method-step::before {
  counter-increment: step; content: "0" counter(step);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.24em; color: var(--ember);
}
.method-step h3 { margin-top: 14px; font-size: 24px; }
.method-step p { margin-top: 12px; color: var(--dim); font-size: 14.5px; line-height: 1.65; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.section { padding: 130px 0; position: relative; }
.section-head { display: grid; gap: 18px; max-width: 860px; margin-bottom: 70px; }
.section-title { font-size: clamp(38px, 5.6vw, 68px); letter-spacing: -0.01em; }
.section-title em { font-style: italic; color: var(--ember); }

/* Manifesto ledger */
.ledger { display: grid; border-top: 1px solid var(--line); }
.ledger-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 28px; align-items: baseline;
  padding: 44px 0; border-bottom: 1px solid var(--line);
}
.ledger-num { font-family: var(--font-mono); font-size: 13px; color: var(--ember); letter-spacing: 0.2em; }
.ledger-claim { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.18; }
.ledger-why { margin-top: 14px; max-width: 760px; color: var(--dim); font-size: 15.5px; line-height: 1.65; }

/* ── Product cards ──────────────────────────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }

.product {
  position: relative; display: block; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--void-2));
  padding: 42px 38px 38px; color: var(--ink); overflow: hidden;
  transition: border-color 0.3s ease, transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.product:hover { border-color: var(--line-strong); transform: translateY(-6px); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8); }
.product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 20%), rgba(232, 136, 92, 0.1), transparent 45%);
  transition: opacity 0.35s ease;
}
.product:hover::after { opacity: 1; }

.product-mark { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.product-name { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.01em; }
.badge {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; color: var(--dim);
}
.badge-live { border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); }
.product-tag { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--ember); margin-bottom: 14px; }
.product-desc { color: var(--dim); font-size: 15.5px; line-height: 1.65; }
.product-cta { margin-top: 30px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.product-cta .arrow { transition: transform 0.25s var(--ease); }
.product:hover .product-cta .arrow { transform: translateX(6px); }
.product:hover .product-cta { color: var(--ember-hot); }

.product-soon { border-style: dashed; opacity: 0.75; }
.product-soon:hover { transform: none; box-shadow: none; }

/* Stat row on product detail */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 46px; }
.stat { background: var(--void-2); padding: 26px 24px; }
.stat b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 30px; color: var(--ink); }
.stat span { font-size: 12.5px; color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--font-mono); }

/* ── Contact / footer ───────────────────────────────────────────────────── */
.contact-line { font-family: var(--font-display); font-size: clamp(30px, 5vw, 58px); line-height: 1.15; max-width: 900px; }
.contact-line a { color: var(--ember); border-bottom: 1px solid color-mix(in srgb, var(--ember) 40%, transparent); transition: border-color 0.2s; }
.contact-line a:hover { border-color: var(--ember-hot); color: var(--ember-hot); }

footer { border-top: 1px solid var(--line); padding: 52px 0 44px; }

/* Directory footer — mirrors the Atlaven pattern so a visitor who arrives on the product site
   can still see the house and its sibling product. */
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; margin-bottom: 30px; border-bottom: 1px solid var(--line);
}
.foot-brand .foot-word { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.foot-brand p { margin-top: 14px; max-width: 320px; font-size: 13.5px; line-height: 1.6; color: var(--faint); }
.foot-col .foot-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 16px;
}
.foot-col ul { list-style: none; display: grid; gap: 11px; }
.foot-col a { font-size: 14px; color: var(--dim); transition: color 0.2s; }
.foot-col a:hover { color: var(--ink); }
.foot-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.foot-dot-live { background: var(--ember); }
/* The house link is navigation, not a product — set it off from the dotted list above it. */
.foot-col .foot-more { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--line); }
.foot-col .foot-more a { color: var(--faint); font-size: 13px; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }
}
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--ink); }
.foot-legal a { color: var(--dim); }

/* ── Reveal on scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ── Legal pages (privacy, terms) ───────────────────────────────────────── */
.legal { max-width: 860px; padding: 150px 0 110px; }
.legal h1 { font-size: clamp(38px, 6vw, 64px); margin-top: 14px; }
.legal .legal-date { margin-top: 20px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--faint); }
.legal section { margin-top: 46px; }
.legal h2 { font-size: 21px; letter-spacing: -0.01em; }
.legal p { margin-top: 12px; color: var(--dim); font-size: 15.5px; line-height: 1.7; }
.legal p a { color: var(--ember); border-bottom: 1px solid color-mix(in srgb, var(--ember) 40%, transparent); }
.legal p a:hover { color: var(--ink); }
.legal .legal-contact { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line); }

/* ── Page-top spacing for subpages ─────────────────────────────────────── */
.page-head { padding: 190px 0 60px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .brand-word { display: none; }
}

@media (max-width: 720px) {
  .top-inner { gap: 14px; }
  .brand { font-size: 13px; letter-spacing: 0.1em; gap: 8px; }
  .brand svg { width: 20px; height: 20px; }
  .nav { gap: 14px; }
  .nav a { font-size: 11px; letter-spacing: 0.05em; }
  .ledger-row { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .section { padding: 90px 0; }
  .hero { padding-top: 120px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-word span { animation: none; opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .product, .product-cta .arrow { transition: none; }
}

/* ── Hero şematik rota (yalnız The Serva) ─────────────────────────────────
   Sayfa açılışında rota kendini çizer, duraklar sırayla belirir. Frost ailesi
   rengi, orbit alanının üstünde çok düşük opaklıkta — okunabilirliği bozmaz. */
.hero { position: relative; }
.hero-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.hero-route-yol {
  fill: none; stroke: var(--ember, #8fb0e6); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; opacity: .45;
  animation: heroRouteCiz 2.4s cubic-bezier(.16,1,.3,1) .5s forwards;
}
.hero-route-durak {
  fill: var(--ember, #8fb0e6); opacity: 0;
  animation: heroDurakBelir .5s ease-out forwards;
}
.hero-route-fabrika {
  fill: none; stroke: var(--ember, #8fb0e6); stroke-width: 2; opacity: 0;
  animation: heroDurakBelir .6s ease-out 2.3s forwards;
}
@keyframes heroRouteCiz { to { stroke-dashoffset: 0; } }
@keyframes heroDurakBelir { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .hero-route-yol { animation: none; stroke-dashoffset: 0; }
  .hero-route-durak, .hero-route-fabrika { animation: none; opacity: .55; }
}
@media (max-width: 760px) { .hero-route { display: none; } }

/* ── The Blueprint (2026-08-31): The Serva's own room in the house ───────────
   The orbit field belongs to Atlaven and Promvia; The Serva draws on
   ENGINEERING GRID PAPER instead — a millimetric plan sheet behind the hero,
   with the self-drawing route reading as a drafted line on it. Pure CSS
   gradients, theme-aware through the accent variables, no new assets. */
.hero #orbits { display: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--ember, #8fb0e6) 7%, transparent) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ember, #8fb0e6) 7%, transparent) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(to right, color-mix(in srgb, var(--ember, #8fb0e6) 3.5%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ember, #8fb0e6) 3.5%, transparent) 0 1px, transparent 1px 24px);
  mask-image: radial-gradient(120% 90% at 30% 40%, black 30%, transparent 78%);
}
.hero-route { opacity: .8; }
.hero-route-yol { opacity: .6; }

/* Drafting tick before every section eyebrow — the surveyor's mark. */
.eyebrow::before {
  content: ""; display: inline-block; width: 20px; height: 5px;
  border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
  margin-right: 10px; vertical-align: 2px; opacity: .7;
}