/* Post theme: Endüstriyel Otomasyonun Gözleri, Bölüm 7 (lens calculation and selection).
   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()). No small raster images in this post (the small diagram is redrawn
   as SVG), so no max-width rules are 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;
}