/* Post theme: Endüstriyel Otomasyonun Gözleri, Bölüm 8 (optical aberrations).
   Same theme as the rest of the series (copied from Bölüm 6): steel-blue parts,
   teal optics, one warm accent for defects and highlights. Keep colours as hex
   (alpha()). The distortion diagrams (1024 px) are wider than the 680 px text
   column, so no small-image rule is needed. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f6f8fb;
  --bg-2: #e9eef5;
  --panel: #ffffff;
  --line: rgb(18 30 48 / .12);
  --shadow: 0 18px 48px rgb(20 40 70 / .10);
  --shadow-sm: 0 2px 10px rgb(20 40 70 / .06);

  /* text (contrast on --bg: fg ~17, fg-soft ~9.5, muted ~5.6) */
  --fg: #121821;
  --fg-soft: #3c4757;
  --muted: #5a6676;

  /* accents (on --bg: accent ~6.2, accent-2 ~5.2, accent-3 ~4.7) */
  --accent: #1d5fa8;
  --on-accent: #ffffff;
  --accent-2: #0f7084;
  --accent-3: #b0501a;

  /* semantic */
  --good: #1d7f52;
  --warn: #9a6200;
  --bad: #c23838;

  /* type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --title-weight: 700;
  --title-tracking: -.02em;
  --accent-style: normal;

  /* layout */
  --measure: 680px;
  --wide: 1160px;
  --radius: 14px;
  --radius-lg: 24px;
  --term-bg: #fbfcfe;
}

/* The post title is long (series name + part): keep the plain hero title at a
   size that wraps into three or four lines instead of eight. */
.hero[data-layout="plain"] .hero-title { font-size: clamp(34px, 3.6vw + 12px, 64px); line-height: 1.04; }
.hero[data-layout="plain"] { padding-bottom: clamp(16px, 3vh, 32px); }
/* The plain hero's background glow ends in a visible hard edge above the
   cover image in this layout; the cover carries the colour instead. */
.hero[data-layout="plain"]::before { display: none; }

/* Dark variant: only when post.theme = 'dark' (not used by this post). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1318;
  --bg-2: #161b22;
  --panel: #1a2029;
  --line: rgb(230 236 245 / .12);
  --shadow: 0 24px 64px rgb(0 0 0 / .4);
  --shadow-sm: 0 2px 12px rgb(0 0 0 / .3);
  --fg: #e8edf4;
  --fg-soft: #b7c1cf;
  --muted: #8c97a6;
  --accent: #6fa8ff;
  --on-accent: #08121f;
  --accent-2: #5ccbe0;
  --accent-3: #ff9b5c;
  --good: #5fd39a;
  --warn: #ffcf5c;
  --bad: #ff6b6b;
  --term-bg: #0b0e12;
}

/* Body text justified to both margins, like the blog posts. */
.b-text :is(p, li),
.b-callout :is(p, li),
.sc-card :is(p, li) {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}